Using Facelets Berner Fachhochschule, Technik und Informatik - PowerPoint PPT Presentation

Using Facelets Berner Fachhochschule, Technik und Informatik Motivation � The gap between JSP and JSF Advanced Web Technologies 8) Facelets in JSF First Example : The Birds Directory � JSP Standard Template Library: JSTL � Dr. E. Benoist The “if” Tag Fall Semester 2010/2011 Reusable Composite Components � Advanced Web Technologies 8) Facelets in JSF Advanced Web Technologies 8) Facelets in JSF 1 2 The gap between JSP and JSF The gap between JSP and JSF (cont.) ◮ They both write output to the browser ◮ Another Example • JSP container writes out output as soon as it finds JSP content • JSP file: • JSF components dictate their own rendering. < h:panelGroup > ◮ Examples < h:outputText value=”I am first” / > • JSP file: I am second < /h:panelGroup > < h:outputText value=”I am first” / > I am second • Output: • Output: I am second I am first I am first I am second ◮ PanelGroup is a component that renders his own children • I am first is only produced when the closing tag is seen. Advanced Web Technologies 8) Facelets in JSF Advanced Web Technologies 8) Facelets in JSF Motivation: The gap between JSP and JSF Motivation: The gap between JSP and JSF 3 4

Advantages of Facelets over JSP Creating a project with Facelets ◮ Download Facelets library • https://facelets.dev.java.net • it includes some demonstration applications ◮ Intertwining JSP and JSF can cause difficulties ◮ Adding Dependencies • JSTL (Jsp Standard Template Library) can not be used with ◮ Configure the Web Descriptor ( web.xml ) JSF < web − app > ◮ Facelets provide a Template solution for JSF < ! −− Use Documents Saved as ∗ .xhtml −− > ◮ Allows creation of lightweight components < context − param > • Quite trivial to produce < param − name > • You don’t need to create tags for your new components javax.faces.DEFAULT SUFFIX ◮ Facelets use Unified Expression Language EL < /param − name > < param − value > .xhtml < /param − value > < /context − param > < /web − app > Advanced Web Technologies 8) Facelets in JSF Advanced Web Technologies 8) Facelets in JSF Motivation: The gap between JSP and JSF Motivation: The gap between JSP and JSF 5 6 Configure JSF First Example : The Modules Directory ◮ Facelets replaces the default JSF ViewHandler with its own implementation ◮ We need to create a simple directory of Modules faces-config.xml ◮ We create various xhtml files < faces − config > • template.xhtml for storing the main design for the site < application > • index.xhtml the welcome file < view − handler > • awt.xhtml file presenting the Advanced Web Technology com.sun.facelets.FaceletViewHandler Module < /view − handler > • webProg.xhtml file presenting the webProgramming < /application > • menu.xhtml contains just the menu. It is included in the other < /faces − config > files Advanced Web Technologies 8) Facelets in JSF Advanced Web Technologies 8) Facelets in JSF Motivation: The gap between JSP and JSF First Example : The Birds Directory 7 8

The template The template (Cont.) ◮ We define the basic layout. ◮ We include the name spaces corresponding to jsf and • We insert CSS and Javascript in such a file facelets tags < title > Facelets − Test < /title > • JSF tags are prefixed with h or f < style type=”text/css” > • Facelets specific tags are prefixed with ui < ! −− < !DOCTYPE html PUBLIC ” − //W3C//DTD XHTML 1.0 ց .box { → Transitional//EN” float: right; ”http://www.w3.org/TR/xhtml1/DTD/xhtml1 − transitional. ց width: 50%; → dtd” > border: black dotted 1px; < html xmlns=”http://www.w3.org/1999/xhtml” padding: 5px xmlns:h=”http://java.sun.com/jsf/html” } xmlns:f=”http://java.sun.com/jsf/core” −− > xmlns:ui=”http://java.sun.com/jsf/facelets” > < /style > < head > < /head > < body > Advanced Web Technologies 8) Facelets in JSF Advanced Web Technologies 8) Facelets in JSF First Example : The Birds Directory First Example : The Birds Directory 9 10 The template (Cont.) The home page ◮ The index.xhtml file greets a user ◮ Template contains placeholders that can be overwritten • Must be a valid xhtml document, so includes all the xhtml • We use ui:insert to define areas that can be overwritten “stuff” • each insert receives a name and a default value (the content • Everything that is outside the ui:composition tag is ignored. of the tag). < !DOCTYPE html PUBLIC ” − //W3C//DTD XHTML 1.0 ց < h:form > → Transitional//EN” < h1 > Facelets − Template < /h1 > ”http://www.w3.org/TR/xhtml1/DTD/xhtml1 − transitional. ց < div class=”box” > → dtd” > < ui:insert name=”navigation” / > < html xmlns=”http://www.w3.org/1999/xhtml” < /div > xmlns:h=”http://java.sun.com/jsf/html” < ui:insert name=”content” > xmlns:f=”http://java.sun.com/jsf/core” Default Text for content (only if no content has been defined) xmlns:ui=”http://java.sun.com/jsf/facelets” > < /ui:insert > < body > < /h:form > This text will never be displayed < /body > (text before composition is ignored) < /html > < ui:composition template=”template.xhtml” > Advanced Web Technologies 8) Facelets in JSF Advanced Web Technologies 8) Facelets in JSF First Example : The Birds Directory First Example : The Birds Directory 11 12

The home page (Cont.) A menu page ◮ This page in included in all the other pages ◮ We are using new facelets tags: ◮ It must contain the same “xhtml” stuff (like definitions • ui:composition used to reference the template for this page of name spaces). • ui:define (its name must match the one of the ui:insert in the template). < !DOCTYPE html PUBLIC ” − //W3C//DTD XHTML 1.0 Transitional// ց • ui:include to include the content from another document → EN” ... < ui:composition template=”template.xhtml” > < ui:composition > < h3 > Content table < /h3 > < ui:define name=”navigation” > < hr / > < ui:include src=”menu.xhtml” / > < h:panelGrid column=”1” > < /ui:define > < h:commandLink value=”Home” action=”home” / > < /ui:composition > < h:commandLink value=”Web Programming” action =”webProg” / > < h:commandLink value=”Advanced Web Technology” action =”awt” / > This text will neither be used < /h:panelGrid > (text after composition is ignored too) < /ui:composition > < /body > This text will neither be used < /html > (text after composition is ignored too) < /body > < /html > Advanced Web Technologies 8) Facelets in JSF Advanced Web Technologies 8) Facelets in JSF First Example : The Birds Directory First Example : The Birds Directory 13 14 We need the corresponding Facelets TagLibs navigation Facelets support the following tag libraries ◮ For navigating from any page to the modules or home pages ◮ Templating library The one we have already seen (with the ui:... tags. < navigation − rule > < navigation − case > ◮ JSF libraries core and html jsf libraries are supported by < from − outcome > home < /from − outcome > Facelets. < to − view − id > /index.xhtml < /to − view − id > < /navigation − case > ◮ JSTL facelets provides partial support for JSTL tags. < /navigation − rule > Function library is fully supported, Core is only partially: < navigation − rule > < navigation − case > • c:if for conditional branching < from − outcome > webProg < /from − outcome > • c:forEach for looping in a collection < to − view − id > /webProg.xhtml < /to − view − id > • c:catch For emulating a try catch < /navigation − case > • c:set For defining manualy some attribute variables < /navigation − rule > < navigation − rule > ... Advanced Web Technologies 8) Facelets in JSF Advanced Web Technologies 8) Facelets in JSF First Example : The Birds Directory First Example : The Birds Directory 15 16