opencms days 2015 creating apps for the opencms 10 workplace
TRANSCRIPT
Georg Westenberger, Alkacon Software GmbH
Creating Apps for the
OpenCms 10 workplace
28.09.2015
●Vaadin Basics
●Writing and configuring apps
●Adding Explorer context menu items
2
Overview
● Widget-based web GUI framework
● Only requires writing server-side Java code to
add new functionality
● UI actions trigger AJAX requests to the server
● UI is updated when response received
3
OpenCms Workplace with Vaadin
● Why not GWT?
● No dynamic loading of new code
● Need to recompile everything for any change
● Slow compilation
● Vaadin is based on GWT, but
● Only need to recompile client code if you want to
add new widgets which aren‘t composed of
existing widgets
4
OpenCms Workplace with Vaadin
VerticalLayout layout = new VerticalLayout();
layout.addComponent(new Label("Foo"));
Button ok = new Button("OK");
layout.addComponent(ok);
ok.addClickListener(new ClickListener() {
public void buttonClick(ClickEvent event) {
// do stuff
}
});
5
Vaadin – GUI in Java code
<html>
<body>
<v-vertical-layout>
<v-label>Hello world</v-label>
<v-button _id="m_ok">OK</v-button>
</v-vertical-layout>
</body>
</html>
6
Vaadin – Declarative layout
● Live Demo
Demo
Demo
Demo Demo Demo
デモ
Demo
● For more documentation about Vaadin, see:
https://vaadin.com/book
8
Vaadin Docs
● Currently:
● Apps
● Context menu entries
● Not configured in opencms-*.xml files
● Instead: Plugins loaded from JARs
● Uses Java ServiceLoader API
● Avoids conflicts / problems when updating
OpenCms
● Overridable (via ID & priority)
9
Workplace Extension Points
●The API is not stable and likely to
change until the final version
10
Warning!
11
App Interfaces
I_CmsWorkplaceAppConfiguration
I_CmsWorkplaceApp
I_CmsAppUIContext
Paints widgets on
Creates instance of
Writes
implementation
Developer
● Icon
● Opens dialog when clicked
● Title (localizable)
● ID
● Can override other app with same ID
● App dialog can also be opened directly by URL
http://.../workplace#appid
● Order & Priority
● Category (currently only „Main“, „Legacy“)
12
App configuration class
● Created by app configuration when user activates the app
● Respond to URI fragment changes ● onStateChange
● Make use of forward / back buttons in browser
● Example: current site & folder in explorer app
● Responsible for initializing the UI ● Use I_CmsAppUIContext for showing widgets in specific
slots
13
App instance
App UI Context – Widget slots 14
● Can use whole OpenCms API
● Get CmsObject for current user with A_CmsUI.getCmsObject()
● Change part of fragment after app ID with CmsAppWorkplaceUI.changeCurrentAppState(state)
15
API Access
● Example: Git app
● Other apps currently hard-coded
● Using ServiceLoader mechanism to load app
configurations:
● Compile your classes and put them in a JAR
● JAR needs to contain the following file with the
class name(s) of your implementation(s): ● META-INF/services/org.opencms.ui.apps.I_CmsWorkplaceAppConfiguration
● Copy JAR to WEB-INF/lib folder of OpenCms
instance, restart servlet container
16
Registering an app
● Ported from existing JSP
● Which can still be seen in „old“ Administration
● Simple UI flow:
● Form fields are filled with presets, changable by
the user
● The user clicks on a button
● Some action is performed and the results are
presented to the user
17
Git App
● Live Demo
Demo
Demo
Demo Demo Demo
デモ
Demo
● Configure subclass of
I_CmsContextMenuItemProvider
● Acts as factory for I_CmsContextMenuItem
● Difference from „old“ context menu
configuration:
● No individual lists of menu options for each
resource type
● But context menu items can choose for which
resource types they should be displayed
19
Adding context menu items
● Live Demo
Demo
Demo
Demo Demo Demo
デモ
Demo
● Still missing:
● „Standard“ widgets for OpenCms specific functions
● user / group selection
● Multi-value input fields
● …
● Reports for long-running tasks
● Bookmarks for app states
● More extension points
● More convenience for the developer
21
// TODO
● Any Questions?
Questions?
Fragen? Questions ?
Questiones?
¿Preguntas? 質問
Georg Westenberger
Alkacon Software GmbH
http://www.alkacon.com
http://www.opencms.org
Thank you very much for your attention!