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

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