Post on 18-Nov-2014
description
transcript
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?