Post on 29-Jan-2016
transcript
CSCI 6962: Server-side Design and Programming
Facelets and User Interface Design
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
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 <outputStyleSheet tag
• 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
All pages have same navigation options on left
Content specific to individual pages
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 tags and <ui:insert JSF 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
bottom
leftright
content
Adding Universal Content
• Add content between appropriate <ui:insert tags– Appears on all pages that use this template
Adding Template Clients
Select file to use as template
Adding Page-Specific Content
• Check areas of page client overrides template content
• Generated page contains <ui:insert JSF tags for those areas
Adding Page-Specific Content
• Insert own code into desired areas of page
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 outputLabelin template both linked to name in NameBean
Facelet and Client Content
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