University of Technology

NXThemes Jean-Marc Orliaguet Theme Editor Theme Rendering Engine Web Widget Editor ... for Nuxeo5, Nuxeo WebEngine, on JBoss, Jetty, Glassfish, using JSF/Facelets, Freemarker, Netvibes API

Theme Editor ”Top-down” approach: Think about a site / web application Design the pages Create layouts Define styles, colors, palettes, … Define visibility rules, perspectives Define target areas (web widgets, facelet areas, freemarker blocks) Insert UI content (fragments, web widgets, …) Write the actual implementation in JSF/facelets, Freemarker, Netvibes, …

”Top-down” approach:

Think about a site / web application

Design the pages

Create layouts

Define styles, colors, palettes, …

Define visibility rules, perspectives

Define target areas (web widgets, facelet areas, freemarker blocks)

Insert UI content (fragments, web widgets, …)

Write the actual implementation in JSF/facelets, Freemarker, Netvibes, …

Style Editor WYSIWYG Live preview CSS editor Inherit styles Use preset to assign style properties ...

WYSIWYG

Live preview

CSS editor

Inherit styles

Use preset to assign style properties

...

Style layers Create a style, give it a name Set style properties Make element inherit properties from the style Like CSS inheritance, but with control over the results

Create a style, give it a name

Set style properties

Make element inherit properties from the style

Like CSS inheritance, but with control over the results

Control visibility using perspectives

Perspectives Define visibility of elements As in the Eclipse Workspaces Can be associated to almost anything (view name, user, context ...) Instead of writing IF ... THEN … in the code Tell which perspectives the element is visible in

Define visibility of elements

As in the Eclipse Workspaces

Can be associated to almost anything (view name, user, context ...)

Instead of writing IF ... THEN … in the code

Tell which perspectives the element is visible in

Web Widgets Use the Netvibes API, i.e. Small fragments of HTML code with CSS and javascript Can be added to Web Widgets Areas in a theme Widget providers to manage persistence, storage

Use the Netvibes API, i.e.

Small fragments of HTML code with CSS and javascript

Can be added to Web Widgets Areas in a theme

Widget providers to manage persistence, storage

Web Widgets