190 likes | 269 Views
CSCI 6962: Server-side Design and Programming. Facelets and User Interface Design. 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.
E N D
CSCI 6962: Server-side Design and Programming Facelets and User Interface Design
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
Using CSS in JSF • CSS files in css subdirectory of resources directory • Subdirectory of Web Pages • Contains other static resources (such as images)
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
Using CSS in JSF styles.css
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
Facelets • Other pages then define content areas • Key: Modifying logo/navigation requires changing single template file rather than all pages
Creating Facelet Templates • Facelets Template from JavaServer Faces menu
Creating Facelet Templates • Select layout style of template from menu • Implemented as CSS, so can modify if necessary
Template Files Implemented as CSS div tagsand <ui:insertJSF tags
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
Adding Universal Content • Add content between appropriate <ui:inserttags • Appears on all pages that use this template
Adding Template Clients Select file to use as template
Adding Template Clients Contains areas defined with <ui:define tags for each area in template
Adding Page-Specific Content • Insert own code into desired areas of page
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
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
CSS and Template Files • Template includes default CSS files for style
CSS and Template Files • Defines layout and other CSS properties • Can modify for your own design