using facelets
play

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

Sep 16, 2023 •171 likes •242 views

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.

  1. 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

  2. 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

  3. 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

  4. 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

More recommend