1

Layouts and content viewsManaging reusable UI components

Anahide Tchertchian

2

Layouts and content views● Layouts concepts and implementation● Content view concepts

● Folder content● Advanced search● Smart search

● Layouts configuration● Studio● Showcase

3

Layouts

4

Layout Concepts● Forms● Layouts● Rows/columns● Widgets● Modes

5

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>

6

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>

7

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>

8

Implementation with JSFUsed technologies:● JSF: Java Server Faces● Facelets● EL: Expression language

Implementation:➔ Custom service➔ Custom tag library using facelets templating

features

9

Facelets usage

Output text

Input textError message

10

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}" />

11

Layout for a workflow task

12

Layout for any UI component

13

Content Views

14

Content view usageGet a list of items and render them

● Query with filters● Contextual parameters● Rendering of the list and content● Sorting and pagination

15

Content view concepts

Page providerdefinition

Search layout

Page provider

Result layout

16

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>

17

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>

18

Content View

<contentView name="current_document_children">

<searchLayout name="search_layout" /> <searchDocument>#{searchDocument}</searchDocument>

<coreQueryPageProvider>...</coreQueryPageProvider>

<resultLayouts> <layout name="document_listing" /> </resultLayouts>

</contentView>

19

Adaptability● Use standard layouts● Pluggable page provider to perform any

kind of query

20

Smart search addon demo

21

Smart search folder demo

22

Result layouts 1/2● Layouts iteration● Loose mapping between listing item and

result layout● More information on layout rows/columns:

● Column label● Sort

23

Result layouts 2/2Column selection

24

Layouts configuration

25

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

● Studio configuration● Documentation● Preview

26

Studio configuration

27

Documentation demo

28

Preview demo

29

Next features● Listing layouts and content views

configuration in Studio● GWT and Freemarker implementation of

layouts and content views

30

Developer documentation● http://doc.nuxeo.com/display/NXDOC/Layouts

● http://doc.nuxeo.com/display/NXDOC/Content+views

● http://doc.nuxeo.com/display/NXDOC/Search

31

Thank you!

Questions?