csci 6962: server-side design and programming facelets and user interface design
TRANSCRIPT
![Page 1: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/1.jpg)
CSCI 6962: Server-side Design and Programming
Facelets and User Interface Design
![Page 2: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/2.jpg)
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
![Page 3: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/3.jpg)
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
![Page 4: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/4.jpg)
Using CSS in JSF
• CSS files in css subdirectory of resources directory– Subdirectory of Web Pages– Contains other static resources (such as images)
![Page 5: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/5.jpg)
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
![Page 6: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/6.jpg)
Using CSS in JSF
styles.css
![Page 7: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/7.jpg)
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
![Page 8: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/8.jpg)
Facelets• Other pages then define content areas• Key: Modifying logo/navigation requires changing
single template file rather than all pages
![Page 9: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/9.jpg)
Creating Facelet Templates
• Facelets Template from JavaServer Faces menu
![Page 10: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/10.jpg)
Creating Facelet Templates
• Select layout style of template from menu– Implemented as CSS, so can modify if necessary
![Page 11: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/11.jpg)
Template Files
Implemented as CSS div tags and <ui:insert JSF tags
![Page 12: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/12.jpg)
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
![Page 13: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/13.jpg)
Adding Universal Content
• Add content between appropriate <ui:insert tags– Appears on all pages that use this template
![Page 14: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/14.jpg)
Adding Template Clients
Select file to use as template
![Page 15: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/15.jpg)
Adding Page-Specific Content
• Check areas of page client overrides template content
• Generated page contains <ui:insert JSF tags for those areas
![Page 16: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/16.jpg)
Adding Page-Specific Content
• Insert own code into desired areas of page
![Page 17: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/17.jpg)
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
![Page 18: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/18.jpg)
Facelet and Client Content
![Page 19: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/19.jpg)
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
![Page 20: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/20.jpg)
CSS and Template Files
• Template includes default CSS files for style
![Page 21: CSCI 6962: Server-side Design and Programming Facelets and User Interface Design](https://reader035.vdocuments.mx/reader035/viewer/2022062809/5697bfd61a28abf838cadf1d/html5/thumbnails/21.jpg)
CSS and Template Files
• Defines layout and other CSS properties• Can modify for your own design