Nuxeo World session on managing reusable UI components in Nuxeo technology, presented by Anahide Tchertchian during Nuxeo World 2010 (November 17-18, 2010).

1. Layouts and content views
Managing reusable UI components
Anahide Tchertchian
1

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

3. Layouts
3

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

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> 5
</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> 6

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> 7
</widget>

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

9. Facelets usage
Output text
Input text
Error message
9

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

11. Layout for a workflow task
11

12. Layout for any UI component
12

13. Content Views
13

14. 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
14

15. Content view concepts
Page provider Search layout
definition
Page provider
Result layout
15

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>
16

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>
17

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

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

20. Smart search addon demo
20

21. Smart search folder demo
21

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

23. Result layouts 2/2
Column selection
23

24. Layouts
configuration
24

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

26. Studio configuration
26

27. Documentation demo
27

28. Preview demo
28

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

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
30

31. Thank you!
Questions?
31