opencms days 2012 - opencms 8.5: creating "in place" editable pages with the new acacia...
DESCRIPTION
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.TRANSCRIPT
![Page 1: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/1.jpg)
Tobias Herrmann, Alkacon Software
Workshop track
Creating in place editable pages
with the new content editor
24.12.2012
![Page 2: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/2.jpg)
● The new OpenCms content editor
● From IKS and VIE to ‘in place’ editing
● Enabling ‘in place’ editing
● Widgets
● Outlook
2
Agenda
![Page 3: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/3.jpg)
3
Live Demo
Demo
Demo Demo
Demo
デモ
![Page 4: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/4.jpg)
● Improved user interface
● Improved XSD:CHOICE integration
● Very responsive
● Improved validation
● No need for temporary files
4
Advantages of the new editor
![Page 5: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/5.jpg)
5
IKS and VIE
![Page 6: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/6.jpg)
● EU funded research project
● aims to broaden the reach of semantic CMS
technology
● Resulting projects:
● Apache Stanbol
● VIE.js
6
Interactive Knowledge Stack (IKS)
![Page 7: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/7.jpg)
7
VIE.js
![Page 8: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/8.jpg)
● 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>
8
RDFa
![Page 9: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/9.jpg)
<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>
9
RDFa
![Page 10: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/10.jpg)
10
OpenCms integration
Content service
(OpenCms)
Acacia Editor VIE.js
Annotated HTML
![Page 11: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/11.jpg)
● 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
11
Acacia-Editor
![Page 12: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/12.jpg)
12
Live Demo
Demo
Demo Demo
Demo
デモ
![Page 13: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/13.jpg)
● 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)
13
Enabling ‘in place’ editing
![Page 14: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/14.jpg)
14
Live Demo
Demo
Demo Demo
Demo
デモ
![Page 15: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/15.jpg)
● 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
15
Widgets
![Page 16: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/16.jpg)
● Extending available in place widgets
● Image gallery
● Date picker
● Improved WYSIWYG widget
● RDFa mapping for online content
● Your feedback is required
16
Outlook
![Page 17: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/17.jpg)
Tobias Herrmann
Alkacon Software GmbH
http://www.alkacon.com
http://www.opencms.org
Thank you very much for your
attention! 17
![Page 18: OpenCms Days 2012 - OpenCms 8.5: Creating "in place" editable pages with the new Acacia editor](https://reader033.vdocument.in/reader033/viewer/2022051411/546de122b4af9f7a2c8b55b7/html5/thumbnails/18.jpg)
18
Any Questions?
Fragen? Questions ?
Questiones?
¿Preguntas? 質問