1. CSCI 6962: Server-side Design and Programming Facelets and User Interface Design

2. Outline Uniform web site appearance as a goal Cascading style sheets in JSF Creating Facelet templates for universal content Creating template client pages for page- specific content Relating faclet and client content Facelets and CSS

3. Uniform Site Appearance Pages on same site should have same layout – Site identifiable to user – User knows where to look for major components (navbar, etc.) – Particularly important for error pages

4. Using CSS in JSF CSS files in css subdirectory of resources directory – Subdirectory of Web Pages – Contains other static resources (such as images)

5. Using CSS in JSF Import into JSF file with < outputStyleSheet tag Note that JSF file must have tag – css file reference inserted in head tag of resulting html file This subdirectory of resources This css file

6. Using CSS in JSF styles.css

7. Facelets “Template” for some or all pages on site – Defines css styles used – Defines layout of pages – Defines content universal to sections of pages – Example: All pages have company name at top All pages have same navigation options on left Content specific to individual pages

8. Facelets Other pages then define content areas Key: Modifying logo/navigation requires changing single template file rather than all pages

9. Creating Facelet Templates Facelets Template from JavaServer Faces menu

10. Creating Facelet Templates Select layout style of template from menu – Implemented as CSS, so can modify if necessary

11. Template Files Implemented as CSS div tags and <ui:insert JSF tags

12. Template Files <ui:insert JSF tags define name of each area – Used by other files to insert content at specific locations – If page resized center content area expands – Note that other layouts don’t define all 5 areas top bottom left right content

13. Adding Universal Content Add content between appropriate <ui:insert tags – Appears on all pages that use this template

14. Adding Template Clients Select file to use as template

15. Adding Page-Specific Content Check areas of page client overrides template content Generated page contains <ui:insert JSF tags for those areas

16. Adding Page-Specific Content Insert own code into desired areas of page

17. Facelet and Client Content Facelet and client page content can modify each other – Communicate with same beans – Rendered as same page Example: Name entered at client displayed in template – inputText in client and outputLabel in template both linked to name in NameBean

18. Facelet and Client Content

19. Modifying Pages to Use Template Add tag inside body Add tags for desired areas to insert specific content

20. CSS and Template Files Template includes default CSS files for style

21. CSS and Template Files Defines layout and other CSS properties Can modify for your own design