Tobias Herrmann, Alkacon Software

Workshop track

Creating in place editable pages

with the new content editor

24.12.2012

● The new OpenCms content editor

● From IKS and VIE to ‘in place’ editing

● Enabling ‘in place’ editing

● Widgets

● Outlook

2

Agenda

3

Live Demo

Demo

Demo Demo

Demo

デモ

● Improved user interface

● Improved XSD:CHOICE integration

● Very responsive

● Improved validation

● No need for temporary files

4

Advantages of the new editor

5

IKS and VIE

● EU funded research project

● aims to broaden the reach of semantic CMS

technology

● Resulting projects:

● Apache Stanbol

● VIE.js

6

Interactive Knowledge Stack (IKS)

7

VIE.js

● 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

<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

10

OpenCms integration

Content service

(OpenCms)

Acacia Editor VIE.js

Annotated HTML

● 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

12

Live Demo

Demo

Demo Demo

Demo

デモ

● 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

14

Live Demo

Demo

Demo Demo

Demo

デモ

● 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

● Extending available in place widgets

● Image gallery

● Date picker

● Improved WYSIWYG widget

● RDFa mapping for online content

● Your feedback is required

16

Outlook

Tobias Herrmann

Alkacon Software GmbH

http://www.alkacon.com

http://www.opencms.org

Thank you very much for your

attention! 17

18

Any Questions?

Fragen? Questions ?

Questiones?

¿Preguntas? 質問