Layouts and content views Managing reusable UI components Anahide Tchertchian
Layouts and content views <ul><li>Layouts concepts and implementation
Content view concepts </li><ul><li>Folder content
Advanced search
Smart search </li></ul><li>Layouts configuration </li><ul><li>Studio
Showcase </li></ul></ul>
Layouts
Layout Concepts <ul><li>Forms
Layouts
Rows/columns
Widgets
Modes </li></ul>
Definitions: layout <layout name=&quot;dublincore&quot;> <templates> <template mode=&quot;any&quot;> /layouts/layout_defau...
Definitions: widget 1/2 <widget name=&quot;title&quot; type=&quot; text &quot;> <labels> <label mode=&quot;any&quot;>title...
Definitions: widget 2/2 <widget name=&quot;created&quot; type=&quot; datetime &quot;> <labels> <label mode=&quot;any&quot;...
Implementation with JSF <ul>Used technologies: <ul><li>JSF: Java Server Faces
Facelets
EL: Expression language </li></ul>Implementation: </ul><ul><ul><li>Custom service
Custom tag library using facelets templating features </li></ul></ul>
Facelets usage
Loose object binding Binding between a document and a layout: <nxl:layout name=&quot; header &quot; mode=&quot; view &quot...
Layout for a workflow task
Layout for any UI component
Content Views
Content view usage <ul>Get a list of items and render them <li>Query with filters
Contextual parameters
Rendering of the list and content
Sorting and pagination </li></ul>
Content view concepts
Page provider 1/2 <coreQueryPageProvider> <property name=&quot; coreSession &quot;> #{documentManager} </property> <patter...
Page provider 2/2 <coreQueryPageProvider> <property name=&quot; coreSession &quot;> #{documentManager} </property> <whereC...
Upcoming SlideShare
Loading in...5
×

Nuxeo World Session: Layouts and Content Views

1,635

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
1,635
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Nuxeo World Session: Layouts and Content Views

  1. 1. Layouts and content views Managing reusable UI components Anahide Tchertchian
  2. 2. Layouts and content views <ul><li>Layouts concepts and implementation
  3. 3. Content view concepts </li><ul><li>Folder content
  4. 4. Advanced search
  5. 5. Smart search </li></ul><li>Layouts configuration </li><ul><li>Studio
  6. 6. Showcase </li></ul></ul>
  7. 7. Layouts
  8. 8. Layout Concepts <ul><li>Forms
  9. 9. Layouts
  10. 10. Rows/columns
  11. 11. Widgets
  12. 12. Modes </li></ul>
  13. 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. 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. 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. 16. Implementation with JSF <ul>Used technologies: <ul><li>JSF: Java Server Faces
  17. 17. Facelets
  18. 18. EL: Expression language </li></ul>Implementation: </ul><ul><ul><li>Custom service
  19. 19. Custom tag library using facelets templating features </li></ul></ul>
  20. 20. Facelets usage
  21. 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. 22. Layout for a workflow task
  23. 23. Layout for any UI component
  24. 24. Content Views
  25. 25. Content view usage <ul>Get a list of items and render them <li>Query with filters
  26. 26. Contextual parameters
  27. 27. Rendering of the list and content
  28. 28. Sorting and pagination </li></ul>
  29. 29. Content view concepts
  30. 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. 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. 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. 33. Adaptability <ul><li>Use standard layouts
  34. 34. Pluggable page provider to perform any kind of query </li></ul>
  35. 35. Smart search addon demo
  36. 36. Smart search folder demo
  37. 37. Result layouts 1/2 <ul><li>Layouts iteration
  38. 38. Loose mapping between listing item and result layout
  39. 39. More information on layout rows/columns: </li><ul><li>Column label
  40. 40. Sort </li></ul></ul>
  41. 41. Result layouts 2/2 Column selection
  42. 42. Layouts configuration
  43. 43. Layouts for widget types <ul>« Meta » layouts, or layouts for layouts configuration: <li>Studio configuration
  44. 44. Documentation
  45. 45. Preview </li></ul>
  46. 46. Studio configuration
  47. 47. Documentation demo
  48. 48. Preview demo
  49. 49. Next features <ul><li>Listing layouts and content views configuration in Studio
  50. 50. GWT and Freemarker implementation of layouts and content views </li></ul>
  51. 51. Developer documentation <ul><li>http://doc.nuxeo.com/display/NXDOC/Layouts
  52. 52. http://doc.nuxeo.com/display/NXDOC/Content+views
  53. 53. http://doc.nuxeo.com/display/NXDOC/Search </li></ul>
  54. 54. Thank you! Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×