Nuxeo World Session: Layouts and Content Views

Layouts and content views Managing reusable UI components Anahide Tchertchian

Layouts and content views
Layouts concepts and implementation
Content view concepts
Folder content
Advanced search
Smart search
Layouts configuration
Studio
Showcase

Layouts

Layout Concepts
Forms
Layouts
Rows/columns
Widgets
Modes

Definitions: layout <layout name="dublincore"> <templates> <template mode="any"> /layouts/layout_default_template.xhtml </template> </templates> <rows> <row> <widget> nature </widget> </row> <row> <widget> subjects </widget> </row> </rows> </layout>

Definitions: widget 1/2 <widget name="title" type=" text "> <labels> <label mode="any">title</label> </labels> <translated>true</translated> <fields> <field> dc:title </field> </fields> <properties widgetMode="edit"> <property name=" required ">true</property> <property name="styleClass"> DataInputText </property> </properties> </widget>

Definitions: widget 2/2 <widget name="created" type=" datetime "> <labels> <label mode="any"> label.dublincore.created </label> </labels> <translated>true</translated> <fields> <field> dc:created </field> </fields> <properties widgetMode="any"> <property name=" pattern "> #{nxu:basicDateAndTimeFormater()} </property> </properties> <widgetModes> <mode value="any"> view </mode> </widgetModes> </widget>

Implementation with JSF
Used technologies:
JSF: Java Server Faces
Facelets
EL: Expression language
Implementation:
Custom service
Custom tag library using facelets templating features

Facelets usage

Loose object binding Binding between a document and a layout: <nxl:layout name=" header " mode=" view " value=" #{currentDocument} " /> After layout facelet handlers applied: <h:outputText value=" #{currentDocument.dc.title} " />

Layout for a workflow task

Layout for any UI component

Content Views

Content view usage
Get a list of items and render them
Query with filters
Contextual parameters
Rendering of the list and content
Sorting and pagination

Content view concepts

Page provider 1/2 <coreQueryPageProvider> <property name=" coreSession "> #{documentManager} </property> <pattern> SELECT * FROM Document WHERE ecm:parentId = ? AND ecm:isCheckedInVersion = 0 AND ecm:mixinType != 'HiddenInNavigation' AND ecm:currentLifeCycleState != 'deleted' </pattern> <parameter> #{currentDocument.id} </parameter> <sort column="dc:title" ascending="true" /> <pageSize>20</pageSize> </coreQueryPageProvider>

Page provider 2/2 <coreQueryPageProvider> <property name=" coreSession "> #{documentManager} </property> <whereClause docType=" AdvancedSearch "> <predicate parameter=" dc:title " operator=" FULLTEXT "> <field schema=" advanced_search " name=" title " /> </predicate> … </whereClause> <sort column="dc:title" ascending="true" /> <pageSize>20</pageSize> </coreQueryPageProvider>

Content View <contentView name=" current_document_children "> <searchLayout name=" search_layout " /> <searchDocument> #{searchDocument} </searchDocument> <coreQueryPageProvider>...</coreQueryPageProvider> <resultLayouts> <layout name=" document_listing " /> </resultLayouts> </contentView>

Adaptability
Use standard layouts
Pluggable page provider to perform any kind of query

Smart search addon demo

Smart search folder demo

Result layouts 1/2
Layouts iteration
Loose mapping between listing item and result layout
More information on layout rows/columns:
Column label
Sort

Result layouts 2/2 Column selection

Layouts configuration

Layouts for widget types
« Meta » layouts, or layouts for layouts configuration:
Studio configuration
Documentation
Preview

Studio configuration

Documentation demo

Preview demo

Next features
Listing layouts and content views configuration in Studio
GWT and Freemarker implementation of layouts and content views

Developer documentation
http://doc.nuxeo.com/display/NXDOC/Layouts
http://doc.nuxeo.com/display/NXDOC/Content+views
http://doc.nuxeo.com/display/NXDOC/Search

Thank you! Questions?

Nuxeo World Session: Layouts and Content Views

by Nuxeo - Open Source ECM on Nov 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 9

Statistics

Nuxeo World Session: Layouts and Content Views — Presentation Transcript

http://surunfil.blogspot.com	8
http://www.surunfil.blogspot.com	1