Using Facelets Motivation Advanced Web Technologies JSTL, a - PowerPoint PPT Presentation

Using Facelets Motivation � Advanced Web Technologies JSTL, a template language for JSF 5) Facelets in JSF First Example : The Modules Directory � Emmanuel Benoist JSP Standard Template Library: JSTL � Fall Term 2016-17 The “if” Tag Reusable Composite Components � Create a new Component � Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 1 2 JSTL, a template language for JSF Motivation Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 3 4

JSTL, a template Laguage for JSF Template for JSF First Example : The Modules Similar to Smarty for PHP Used for the creation of the JSF Component tree Directory Include pages in pages Part of pages may be similar Header / footers for instance Loop inside a page For or while loops can visit a structure Conditional Branching If / then /else Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 5 6 First Example : The Modules The template Directory We include the name spaces corresponding to jsf and facelets tags JSF tags are prefixed with h or f Facelets specific tags are prefixed with ui We need to create a simple directory of Modules We create various xhtml files < !DOCTYPE html PUBLIC ” − //W3C//DTD XHTML 1.0 ց → Transitional//EN” template.xhtml for storing the main design for the site index.xhtml the welcome file ”http://www.w3.org/TR/xhtml1/DTD/xhtml1 − transitional. ց awt.xhtml file presenting the Advanced Web Technology → dtd” > Module < html xmlns=”http://www.w3.org/1999/xhtml” webProg.xhtml file presenting the webProgramming xmlns:h=”http://java.sun.com/jsf/html” menu.xhtml contains just the menu. It is included in the other xmlns:f=”http://java.sun.com/jsf/core” files xmlns:ui=”http://java.sun.com/jsf/facelets” > < head > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 7 8

The template (Cont.) The template (Cont.) We define the basic layout. Template contains placeholders that can be overwritten We insert CSS and Javascript in such a file We use ui:insert to define areas that can be overwritten each insert receives a name and a default value (the content < title > Facelets − Test < /title > of the tag). < style type=”text/css” > < ! −− < h:form > < h1 > Facelets − Template < /h1 > .box { float: right; < div class=”box” > < ui:insert name=”navigation” / > width: 50%; border: black dotted 1px; < /div > < ui:insert name=”content” > padding: 5px } Default Text for content (only if no content has been defined) < /ui:insert > −− > < /style > < /h:form > < /body > < /head > < body > < /html > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 9 10 The home page The home page (Cont.) We are using new facelets tags: The index.xhtml file greets a user ui:composition used to reference the template for this page Must be a valid xhtml document, so includes all the xhtml ui:define (its name must match the one of the ui:insert “stuff” in the template). Everything that is outside the ui:composition tag is ignored. ui:include to include the content from another document < !DOCTYPE html PUBLIC ” − //W3C//DTD XHTML 1.0 Transitional// ց < ui:composition template=”template.xhtml” > → EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1 − transitional.dtd” > < ui:define name=”navigation” > < html xmlns=”http://www.w3.org/1999/xhtml” < ui:include src=”menu.xhtml” / > xmlns:h=”http://java.sun.com/jsf/html” < /ui:define > xmlns:f=”http://java.sun.com/jsf/core” < /ui:composition > xmlns:ui=”http://java.sun.com/jsf/facelets” > < body > This text will neither be used This text will never be displayed (text after composition is ignored too) (text before composition is ignored) < /body > < ui:composition template=”template.xhtml” > < /html > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 11 12

A menu page Facelets TagLibs This page in included in all the other pages It must contain the same “xhtml” stuff (like definitions Facelets support the following tag libraries of name spaces). Templating library The one we have already seen (with the < !DOCTYPE html PUBLIC ” − //W3C//DTD XHTML 1.0 Transitional// ց ui:... tags. ) → EN” ... JSF libraries core and html jsf libraries are supported by < ui:composition > Facelets. < h3 > Content table < /h3 > JSTL facelets provides partial support for JSTL tags. < hr / > < h:panelGrid column=”1” > Function library is fully supported, Core is only partially: < h:commandLink value=”Home” action=”index” / > c:if for conditional branching < h:commandLink value=”Web Programming” action =”webProg” / > c:forEach for looping in a collection < h:commandLink value=”Advanced Web Technology” action =”awt” / > c:catch For emulating a try catch < /h:panelGrid > c:set For defining manualy some attribute variables < /ui:composition > This text will neither be used (text after composition is ignored too) < /body > < /html > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 13 14 JSP Standard Template Library: JSTL JSP Standard Template Library: JSTL Introduces some programming in the view part Not used as a template language JSTL is not fully supported Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 15 16

JSTL : Loops Looping with explicit numeric values < c:forEach var=”name” begin=”x” end=”y” step=”z” > The “if” Tag Blah, blah < h:outputText value=”# { name } ”/ > < /c:forEach > Looping over data structures Can loop down arrays, strings, collections, maps < c:forEach var=”name” items=”array − or − collection” > Blah, blah < h:outputText value=”# { name } ”/ > < /c:forEach > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 17 18 The ” if ” Tag The ”choose” Tag < html xmlns=”http://www.w3.org/1999/xhtml” < ul > xmlns:h=”http://java.sun.com/jsf/html” < c:forEach var=”i” begin=”1” end=”10” > xmlns:f=”http://java.sun.com/jsf/core” < li > # { i } xmlns:ui=”http://java.sun.com/jsf/facelets” < c:choose > xmlns:c=”http://java.sun.com/jsp/jstl/core” < c:when test=”# { i le 4 } ” > (small) > < /c:when > ... < c:when test=”# { i le 8 } ” > (medium) < ul > < /c:when > < c:forEach var=”i” begin=”1” end=”10” > < c:otherwise > (large) < li >< h:outputText value=”# { i } ”/ > < /c:otherwise > < c:if test=”# { i > 7 } ” > < /c:choose > (greater than 7) < /li > < /c:if >< /li > < /c:forEach > < /c:forEach > < /ul > < /ul > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 19 20