Nuxeo World Session: Layouts and Content Views

2,390 views

Published on

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

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,390
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Nuxeo World Session: Layouts and Content Views

  1. Layouts and content views Managing reusable UI components Anahide Tchertchian
  2. Layouts and content views <ul><li>Layouts concepts and implementation
  3. Content view concepts </li><ul><li>Folder content
  4. Advanced search
  5. Smart search </li></ul><li>Layouts configuration </li><ul><li>Studio
  6. Showcase </li></ul></ul>
  7. Layouts
  8. Layout Concepts <ul><li>Forms
  9. Layouts
  10. Rows/columns
  11. Widgets
  12. Modes </li></ul>
  13. Definitions: layout <layout name=&quot;dublincore&quot;> <templates> <template mode=&quot;any&quot;> /layouts/layout_default_template.xhtml </template> </templates> <rows> <row> <widget> nature </widget> </row> <row> <widget> subjects </widget> </row> </rows> </layout>
  14. Definitions: widget 1/2 <widget name=&quot;title&quot; type=&quot; text &quot;> <labels> <label mode=&quot;any&quot;>title</label> </labels> <translated>true</translated> <fields> <field> dc:title </field> </fields> <properties widgetMode=&quot;edit&quot;> <property name=&quot; required &quot;>true</property> <property name=&quot;styleClass&quot;> DataInputText </property> </properties> </widget>
  15. Definitions: widget 2/2 <widget name=&quot;created&quot; type=&quot; datetime &quot;> <labels> <label mode=&quot;any&quot;> label.dublincore.created </label> </labels> <translated>true</translated> <fields> <field> dc:created </field> </fields> <properties widgetMode=&quot;any&quot;> <property name=&quot; pattern &quot;> #{nxu:basicDateAndTimeFormater()} </property> </properties> <widgetModes> <mode value=&quot;any&quot;> view </mode> </widgetModes> </widget>
  16. Implementation with JSF <ul>Used technologies: <ul><li>JSF: Java Server Faces
  17. Facelets
  18. EL: Expression language </li></ul>Implementation: </ul><ul><ul><li>Custom service
  19. Custom tag library using facelets templating features </li></ul></ul>
  20. Facelets usage
  21. Loose object binding Binding between a document and a layout: <nxl:layout name=&quot; header &quot; mode=&quot; view &quot; value=&quot; #{currentDocument} &quot; /> After layout facelet handlers applied: <h:outputText value=&quot; #{currentDocument.dc.title} &quot; />
  22. Layout for a workflow task
  23. Layout for any UI component
  24. Content Views
  25. Content view usage <ul>Get a list of items and render them <li>Query with filters
  26. Contextual parameters
  27. Rendering of the list and content
  28. Sorting and pagination </li></ul>
  29. Content view concepts
  30. Page provider 1/2 <coreQueryPageProvider> <property name=&quot; coreSession &quot;> #{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=&quot;dc:title&quot; ascending=&quot;true&quot; /> <pageSize>20</pageSize> </coreQueryPageProvider>
  31. Page provider 2/2 <coreQueryPageProvider> <property name=&quot; coreSession &quot;> #{documentManager} </property> <whereClause docType=&quot; AdvancedSearch &quot;> <predicate parameter=&quot; dc:title &quot; operator=&quot; FULLTEXT &quot;> <field schema=&quot; advanced_search &quot; name=&quot; title &quot; /> </predicate> … </whereClause> <sort column=&quot;dc:title&quot; ascending=&quot;true&quot; /> <pageSize>20</pageSize> </coreQueryPageProvider>
  32. Content View <contentView name=&quot; current_document_children &quot;> <searchLayout name=&quot; search_layout &quot; /> <searchDocument> #{searchDocument} </searchDocument> <coreQueryPageProvider>...</coreQueryPageProvider> <resultLayouts> <layout name=&quot; document_listing &quot; /> </resultLayouts> </contentView>
  33. Adaptability <ul><li>Use standard layouts
  34. Pluggable page provider to perform any kind of query </li></ul>
  35. Smart search addon demo
  36. Smart search folder demo
  37. Result layouts 1/2 <ul><li>Layouts iteration
  38. Loose mapping between listing item and result layout
  39. More information on layout rows/columns: </li><ul><li>Column label
  40. Sort </li></ul></ul>
  41. Result layouts 2/2 Column selection
  42. Layouts configuration
  43. Layouts for widget types <ul>« Meta » layouts, or layouts for layouts configuration: <li>Studio configuration
  44. Documentation
  45. Preview </li></ul>
  46. Studio configuration
  47. Documentation demo
  48. Preview demo
  49. Next features <ul><li>Listing layouts and content views configuration in Studio
  50. GWT and Freemarker implementation of layouts and content views </li></ul>
  51. Developer documentation <ul><li>http://doc.nuxeo.com/display/NXDOC/Layouts
  52. http://doc.nuxeo.com/display/NXDOC/Content+views
  53. http://doc.nuxeo.com/display/NXDOC/Search </li></ul>
  54. Thank you! Questions?

×