OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace
-
Upload
alkacon-software-gmbh-co-kg -
Category
Software
-
view
617 -
download
2
Transcript of OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace
![Page 1: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/1.jpg)
Georg Westenberger, Alkacon Software GmbH
Creating Apps for the
OpenCms 10 workplace
28.09.2015
![Page 2: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/2.jpg)
●Vaadin Basics
●Writing and configuring apps
●Adding Explorer context menu items
2
Overview
![Page 3: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/3.jpg)
● 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
![Page 4: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/4.jpg)
● 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
![Page 5: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/5.jpg)
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
![Page 6: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/6.jpg)
<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
![Page 7: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/7.jpg)
● Live Demo
Demo
Demo
Demo Demo Demo
デモ
Demo
![Page 8: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/8.jpg)
● For more documentation about Vaadin, see:
https://vaadin.com/book
8
Vaadin Docs
![Page 9: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/9.jpg)
● 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
![Page 10: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/10.jpg)
●The API is not stable and likely to
change until the final version
10
Warning!
![Page 11: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/11.jpg)
11
App Interfaces
I_CmsWorkplaceAppConfiguration
I_CmsWorkplaceApp
I_CmsAppUIContext
Paints widgets on
Creates instance of
Writes
implementation
Developer
![Page 12: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/12.jpg)
● 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
![Page 13: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/13.jpg)
● 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
![Page 14: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/14.jpg)
App UI Context – Widget slots 14
![Page 15: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/15.jpg)
● 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
![Page 16: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/16.jpg)
● 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
![Page 17: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/17.jpg)
● 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
![Page 18: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/18.jpg)
● Live Demo
Demo
Demo
Demo Demo Demo
デモ
Demo
![Page 19: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/19.jpg)
● 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
![Page 20: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/20.jpg)
● Live Demo
Demo
Demo
Demo Demo Demo
デモ
Demo
![Page 21: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/21.jpg)
● 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
![Page 22: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/22.jpg)
● Any Questions?
Questions?
Fragen? Questions ?
Questiones?
¿Preguntas? 質問
![Page 23: OpenCms Days 2015 Creating Apps for the OpenCms 10 workplace](https://reader034.fdocuments.net/reader034/viewer/2022052705/5880eea91a28ab0d358b732b/html5/thumbnails/23.jpg)
Georg Westenberger
Alkacon Software GmbH
http://www.alkacon.com
http://www.opencms.org
Thank you very much for your attention!