1 / 19

Server-side Design with Facelets: Creating Uniform Site Appearance

Learn how to use Facelets and CSS in JSF to create a uniform site appearance with consistent layout and design, making it easy for users to navigate and identify major components. Implement templates and styles for error pages and individual content.

ranger
Télécharger la présentation

Server-side Design with Facelets: Creating Uniform Site Appearance

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. Using CSS in JSF • Import into JSF file with <outputStyleSheettag • Note that JSF file must have <h:head>tag • css file reference inserted in head tag of resulting html file This subdirectory of resources This css file

  5. Using CSS in JSF styles.css

  6. 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 Content specific to individual pages All pages have same navigation options on left

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

  8. Creating Facelet Templates • Facelets Template from JavaServer Faces menu

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

  10. Template Files Implemented as CSS div tagsand <ui:insertJSF tags

  11. 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 right left content bottom

  12. Adding Universal Content • Add content between appropriate <ui:inserttags • Appears on all pages that use this template

  13. Adding Template Clients Select file to use as template

  14. Adding Template Clients Contains areas defined with <ui:define tags for each area in template

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

  16. Adding Page-Specific Content • Comment out or delete other <ui:define tags to use content from template Content specific to template client page Content from template page

  17. Modifying Pages to Use Template • Add <ui:composition template="./templatename.xhtml"> tag inside body • Add <ui:define name=“area"> tags for desired areas to insert specific content

  18. CSS and Template Files • Template includes default CSS files for style

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

More Related