Alkacon is introducing the new Acacia Editor in OpenCms 8.5. It replaces the old editor for XML structured contents and will revolutionize the way editors create content in OpenCms. The Acacia Editor allows unobtrusive "in place" editing for quick content changes within pages. It also provides a very much improved user interface for form based editing. Acasia makes OpenCms content editing easy, intuitive and a lot faster. In this session, Tobias will show how to enable "in place" editing on your templates with Acasia. He will explain how Acacia utilizes RDF annotations to inject it's editing capabilities into your page. Moreover, you can use these annotations to enhance your content semantically and make search engines happy. Tobias will also introduce the widgets for the new editor. These offer plenty of different editing options and are easy to configure. For more advanced use cases they can also be configured dynamically and use settings depending on the current user context. And if this still doesn't satisfy your needs, you can write your very own widget using either the native JavaScript interface or a Google Web Toolkit based interface.

1. Workshop track
Creating in place editable pages
with the new content editor
24.12.2012 Tobias Herrmann, Alkacon Software

2. Agenda
2
● The new OpenCms content editor
● From IKS and VIE to ‘in place’ editing
● Enabling ‘in place’ editing
● Widgets
● Outlook

3. Live Demo
3
Demo Demo
デモ
Demo
Demo

4. Advantages of the new editor
4
● Improved user interface
● Improved XSD:CHOICE integration
● Very responsive
● Improved validation
● No need for temporary files

5. IKS and VIE
5

6. Interactive Knowledge Stack (IKS)
6
● EU funded research project
● aims to broaden the reach of semantic CMS
technology
● Resulting projects:
● Apache Stanbol
● VIE.js

7. VIE.js
7

8. RDFa
8
● RDFa (or Resource Description Framework –
in – attributes)
● store meta data in HTML attributes
<div
about="http://www.opencms.org/event/opencmsdays">
<span property="title">OpenCms Days</span>
<span property="location">Cologne</span>
<span property="date">2012-09-24</span>
</div>

9. RDFa
9
<div class="view-article">
<h2 property="opencms://.../Title"
about="http://opencms.org/...">Day of the rose</h2>
<div property="opencms://.../Text"
about="http://opencms.org/.../Paragraph[1]">
<p>
The "Day of the rose" in Ulm, Germany is the
first adress concerning roses. All types of roses will
be shown.
At the end of the day, the rose of the year
will be announced.
</p>
<div>
Venue: Southern Münsterplatz in Ulm
</div>
</div>
</div>

10. OpenCms integration
10
Content service
Annotated HTML
(OpenCms)
Acacia Editor VIE.js

11. Acacia-Editor
11
● GWT base editor library
● using VIE types and entities
● enables 'in place' editing using RDFA
● builds forms using semantic type definitions
● www.github.com/alkacon/acacia-editor

12. Live Demo
12
Demo Demo
デモ
Demo
Demo

13. Enabling ‘in place’ editing
13
● Add RDF annotations using EL
● Constraints:
● Content needs to placed within a single HTML
element
● Content needs to be displayed without
modifications (no shortening or other
transformations)

14. Live Demo
14
Demo Demo
デモ
Demo
Demo

15. Widgets
15
● All core widgets are supported
● Dynamic widget configuration is supported
● Custom widget extending select-box or multi-
select are mostly supported
● build you own
● using GWT
● using HTML and native JavaScript

16. Outlook
16
● Extending available in place widgets
● Image gallery
● Date picker
● Improved WYSIWYG widget
● RDFa mapping for online content
● Your feedback is required

17. 17
Thank you very much for your
attention!
Tobias Herrmann
Alkacon Software GmbH
http://www.alkacon.com
http://www.opencms.org

18. Any Questions?
18
Questions ?
Fragen?
質問 ¿Preguntas?
Questiones?