Template - ICEsoft.org

Transcription

ICEfaces Facelets Integration
ICESOFT TECHNOLOGIES INC.
www.icefaces.org
Problems With JSP
• Many of the features of JSF are designed to be
pluggable/extendable, such as the “View Handler”
• The default View Hander for JSF is designed for JavaServer
Pages™ (JSP)
• JSP is somewhat of a technology mismatch with JSF which
places some limitations on developers
www.icefaces.org
Limitations With JSP
• The original design decision made by the JSR-127 EG was
to use JSP pages that contain XML syntax, for example:
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:jsp="http://java.sun.com/JSP/Page">
<jsp:directive.page contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"/>
<f:view>
<h:outputText value="Hello World" />
</f:view>
</jsp:root>
www.icefaces.org
Limitations With JSP (Cont.)
• Using JSP in this manner made it difficult to mix JSF
component markup with HTML. The Sun JSF 1.2 RI has
made it easier, but with JSF 1.1, there is no guarantee that
the <br /> tag in the following code is going to end up in
the same location:
<f:view>
<h:outputText value="Hello" />
<br />
<h:outputText value="World" />
</f:view>
</jsp:root>
www.icefaces.org
Limitations With JSP (Cont.)
• The workaround for this in JSF 1.1 is to surround HTML
mark-up with the f:verbatim tag:
<f:view>
<h:outputText value="Hello" />
<f:verbatim><br /></f:verbatim>
<h:outputText value="World" />
</f:view>
</jsp:root>
www.icefaces.org
Facelets to the Rescue!
• Forcing XML-style JSP conventions was generally not well
received by developers
• Inspired by an article by Hans Bergsten in June of 2004,
Jacob Hookom, an independent software developer living in
Eden Prairie, MN undertook the task of creating Facelets
• Facelets is an alternative View Handler to JSP that removes
the limitations of JSP and provides powerful templating and
composite component features
www.icefaces.org
Compare Facelets to JSP
• The following Facelets XHTML markup is equivalent to the
JSP markup from the previous slide:
<f:view xmlns:f="http://java.sun.com/jsf/core">
<span>Hello</span><br /><span>World</span>
</f:view>
www.icefaces.org
Facelets: Features
• Entirely removes JSP from JSF
• XHTML documents instead of JSP
• Uses SAX XML parser to parse XHTML instead of Jasper JSP
Compiler
– When compared to JSP/Jasper:
• Facelets view compiler creates a lighter-weight JSF component tree
• Approximately 30% faster at parsing and compiling pages
• HTML elements become first-class JSF components
• Templating feature created specifically for JSF
• Composite Components
www.icefaces.org
Facelets: Features (Cont.)
• Enhanced error reporting during development
• Live development of JSF views
• JSF EL value bindings can exist anywhere on the page
– Bean values can be placed in a page without using JSF component binding
• New tag library with a handful of components:
–
–
–
–
–
<ui:include />
<ui:composition />
<ui:define />
<ui:decorate />
<ui:repeat />
• Dynamic Includes
– Dynamically insert and remove components from the component tree using
<ui:include src=”#{myBean.faceletFileName}” />
– Can reduces memory overhead of large component trees
www.icefaces.org
Facelets: The Future of JSF
• Facelets will become the premier view handler technology
for JSF 2.0
– JSP support in JSF could possibly be deprecated or dropped
• Many new composite component features
• The best of Ken Paulsen’s JSF Templating will be
incorporated into Facelets
www.icefaces.org
ICEfaces + Facelets Configuration
• Register D2DFaceletViewHander in faces-config.xml
• Register optional facelets.DEVELOPMENT in web.xml
• Additional Required Libraries:
– icefaces-facelets.jar
– el-api.jar (Tomcat 5.5 only)
– el-ri.jar (Tomcat 5.5 only)
• Register javax.faces.DEFAULT_SUFFIX as .xhtml in web.xml
www.icefaces.org
IDE Support
•
In the past, IDE support for Facelets has been weak
•
Today, MyEclipse 6.5 has full support for Facelets
– Auto-complete in text editor
– JSF components available on a palette
– Design time view
•
JBoss IDE (Eclipse) has full support for Facelets
– Note that ICEfaces plugin is not available for JBoss IDE
•
NetBeans 6.1 has improved support for Facelets
– Auto-complete in text editor
– JSF components not available on a palette
– No design time view
•
Eclipse 3.3 (Europa) and 3.4 (Ganymede) have limited support for Facelets
– No auto-complete in text editor (3.3)
– JSF components available on a palette
– Properties view shows possible attribute names and values
– Design time view available with Web Page Editor
•
Sometimes IDEs can be tricked into supporting Facelets by using .jspx file extensions
with <jsp:root jsfc=“f:view”> inside the file
www.icefaces.org
Facelets is Not JSP
• Cannot use JSP taglib, so need to remove these tags:
– <jsp:root/>
– <jsp:directive.include…/>
– <jsp:output…/>
– <jsp:directive.content…/>
• JSP tags will be ignored and passed through to the browser
• You can however use a subset of JSTL tags with Facelets,
including:
– <c:forEach… />
– <c:if… />
– <c:catch… /> - exception handling
www.icefaces.org
ICEfaces and Facelets
• In a standard JSF web application, Facelets is provided in
the jsf-facelets.jar file
• ICEfaces ships with a file named icefaces-facelets.jar
which fixes a few bugs that interfere with the integration of
ICEfaces and Facelets
www.icefaces.org
Facelets: Templating
• Provides an intuitive mechanism for defining logical areas
of the page
• Can be used to separate layout from data input/output
• Logical areas of a page are defined using a <ui:include
name=”” />
• Default content can be added as child elements to a
defined <ui:include/>
• JSF pages that implement a template define the named
include areas
• If a named insert is not implemented then the default
values will be rendered
www.icefaces.org
Facelets: Templating (Cont.)
• Terms:
– Template: page used as a layout controller
– Template-client: page that uses a template to layout it’s own
content
• URL is directed to template-client
• Template-client declares which template to use
• Template-client defines the content to be used by the
template with <ui:define/>
– Path references in templates are resolved from the path location of
the template-client
www.icefaces.org
Facelets: Composite Components
• The JSF spec requires components to be written as Java classes
• Facelets addresses the developer's need for creating reusable JSF
components that are composed with a combination of HTML and JSF
markup
– Allows for the reuse and naming of a collection of other components
– Defined with XHTML markup, so there is no Java classes or renderer to
write!
• Composite components are essentially templates which have been
associated with a custom tag library
• Referencing composite components in other JSF views is as simple as
importing the namespace
www.icefaces.org
Facelets: Composite Components (Cont.)
• Consider the following markup, which is extremely verbose:
<h:column>
<f:facet name="header">
<h:outputText value="#{Msgs.title}" />
</f:facet>
<h:outputText value="#{book.title}" />
</h:column>
• With many columns in a table, the XHTML page becomes
unnecessarily large
• Wouldn't it be nice too somehow encapsulate this code for reuse?
With facelets, we can!
www.icefaces.org
Facelets: Composite Components (Cont.)
• Question: How can we turn this:
<h:column>
<f:facet name="header">
<h:outputText value="#{Msgs.title}" />
</f:facet>
<h:outputText value="#{book.title}" />
</h:column>
• Into one line of code, like this?
<my:column columnTitle="#{Msgs.title}"
columnvalue="#{book.title}">
• Answer: create a facelets tag library and zip it up into a .jar file
www.icefaces.org
Facelets Templating
www.icefaces.org
Overview
• The goal of this example is to demonstrate the Facelets templating
feature
• The following Facelets tags will be used to build a simple, reusable
template:
– ui:composition
– ui:decorate
– ui:define
– ui:include
www.icefaces.org
Step 1: Creation of Templates
• Templates and JSP fragments are usually stored in a the
protected WEB-INF folder to avoid accidental loading.
• Create the following folder structure in the jobApplication or
another icefaces ready project:
web/WEB-INF/includes/templates
web/WEB-INF/includes/content
web/css/
Copy the content from the respective starter directories and
copy faceletsTemplate.xhtml to the web folder:
www.icefaces.org
Step 2: page-general.jsp Template
• The main template page-general.xhtml defines four
<ui:insert /> tags:
– pageTitle, contentHeader, contentBody, and
contentFooter.
• The template page in this case is mostly simple HTML and
CSS.
• The footerContent ui:insert contains a <ui:include /> which
points to common code we will use through out the fictional
site.
www.icefaces.org
Step 3: *menu-layout.jsp Templates
• The templates folder also contains a left-menu-layout.xhtml
and right-menu-layout.xhtml templates.
• These templates define two <ui:insert /> menuContent and
contentContainer
• Each template uses slightly different HTML and CSS layout
code to change the placement of the menuContent.
www.icefaces.org
Step 4: Using the templates
• Templates can be used either with the <ui:composition /> or
<ui:decorate />
• Does anyone remember the subtle difference between the
two tags?
• Lets run the application and view the faceletsTemplate.iface
page.
• Toggle the <ui:decorate /> templates values to see how
easy it is to apply a new template.
– template="/WEB-INF/includes/templates/left-menulayout.xhtml"
– template="/WEB-INF/includes/templates/right-menulayout.xhtml"
www.icefaces.org
Step 5: Create Stateful Bean
• We need a new model bean to store the users current templates
• Create a new Java class:
training.jobapplication.bean.model.TemplateState
• Add the following properties:
public static final String LEFT_MENU_LAYOUT = "left-menu-layout.xhtml";
public static final String RIGHT_MENU_LAYOUT = "right-menu-layout.xhtml";
private String currentState;
• Generate none static getters/setters for each property
• Add the following constructor:
public TemplateState(){
currentState = LEFT_MENU_LAYOUT;
}
www.icefaces.org
Step 6: Create template Support Bean
• Create a new Java class:
training.jobapplication.bean.support.Templates
• Add the following code:
import java.util.HashMap;
import training.jobapplication.bean.model.TemplateState;
public class Templates extends HashMap<String, String> {
public Templates(){
put(TemplateState.LEFT_MENU_LAYOUT, TemplateState.LEFT_MENU_LAYOUT);
put(TemplateState.RIGHT_MENU_LAYOUT, TemplateState.RIGHT_MENU_LAYOUT);
}
}
www.icefaces.org
Step 7: Define Templates and TemplateState Beans
• Open the following file in the IDE:
– jobApplication/WEB-INF/faces-config.xml
• Add the following managed-bean and managed-property:
<managed-bean>
<managed-bean-name>templateState</managed-bean-name>
<managed-bean-class>
training.jobapplication.bean.model.TemplateState
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<managed-bean>
<managed-bean-name>templates</managed-bean-name>
<managed-bean-class>
training.jobapplication.bean.support.Templates
</managed-bean-class>
<managed-bean-scope>application</managed-bean-scope>
</managed-bean>
www.icefaces.org
Step 8: Add Dynamic template path
• Open the faceletsTemplate.xhtml file in the IDE
• Add the following lines to enable dynamic templates:
<ui:decorate
template="/WEB-INF/includes/templates/#{templates[templateState.currentState]}">
<ui:define name="content">
Some Content... <br />
<ice:form>
<ice:selectOneRadio value="#{templateState.currentState}"
partialSubmit="true" >
<f:selectItem itemValue="#{templateState.LEFT_MENU_LAYOUT}"
itemLabel="Left Layout"/>
<f:selectItem itemValue="#{templateState.RIGHT_MENU_LAYOUT}"
itemLabel="Right Layout"/>
</ice:selectOneRadio>
</ice:form>
</ui:define>
</ui:decorate>
www.icefaces.org
Step 9: Run Application
• The end result of the
application will look like
the following:
• Use the radio
button to toggle
between the two
content templates
www.icefaces.org
Facelets Templating
www.icefaces.org
Overview
• The goal of this exercise is to create a Facelets template
that can be used by template clients
www.icefaces.org
Step 1: Create Protected Folder
• Create a folder named facelets under the protected WEBINF folder:
WEB-INF/facelets
www.icefaces.org
Step 2: Create Template
• Create the following file with the IDE:
WEB-INF/facelets/template.xhtml
• Paste the following markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<html>
</html>
</f:view>
www.icefaces.org
Step 3: Create Template (Cont.)
• Paste the following markup after the <html> tag:
<head>
<title>#{title}</title>
<link rel="stylesheet" type="text/css"
href="./css/template.css" />
</head>
<body>
<div class="header"><ui:insert name="header" /></div>
<div class="menu"><ui:insert name="menu" /></div>
<div class="content"><ui:insert name="content" /></div>
<div class="footer"><ui:insert name="footer" /></div>
</body>
www.icefaces.org
Step 4: Create Template Client
• Create the following file with the IDE, which will serve as a
template client:
web/index.xhtml
• Paste the following markup:
<ui:composition template="/WEBINF/facelets/template.xhtml"
</ui:composition>
www.icefaces.org
Step 5: Create Template Client (Cont.)
• Paste the following markup after the <ui:composition> tag:
<ui:param name="title" value="Applicant System" />
<ui:define name="header">Header goes here</ui:define>
<ui:define name="menu">Menu goes here</ui:define>
<ui:define name="content">Content goes
here</ui:define>
<ui:define name="footer">Footer goes here</ui:define>
www.icefaces.org
Step 6: Create CSS
• Create the following folder with the IDE:
web/css
• Create the following file with the IDE, which will serve as a
template client:
web/css/template.css
www.icefaces.org
Step 7: Create CSS (Cont.)
• Paste the following text:
.header, .footer {
background-color: LightSlateGray;
border: DarkGray 1px solid;
clear: both;
}
.menu {
width: 200px;
background-color: LightBlue;
float: left;
}
.content {
position: left 200px;
}
www.icefaces.org
Run Application
• Publish/deploy the project
• Visit the following URL in the browser:
– http://localhost:8080/jobApplication/index.iface
www.icefaces.org
Composite Components
and Ajax Push
www.icefaces.org
Overview
• The goal of this exercise is to create a Facelets composite
component and to update its appearance using Ajax Push
• The composite component instance will be a vertical
progress bar that indicates how many applicants have
applied for a job
www.icefaces.org
Step 1: Create JAR Folder Layout
• Create the following folder structure anywhere on your
filesystem:
dashboard-comps/META-INF/tags
OR
• WEB-INF/includes/components
www.icefaces.org
Step 2: Create Facelets Tag Library
• Create the following text file:
dashboard-comps/META-INF/dashboard.taglib.xml
Or
WEB-INF/includes/components/dashboard.taglib.xml
• Paste the following text into the new file:
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://www.companyname.com/dashboard/facelets</names
pace>
</facelet-taglib>
www.icefaces.org
Step 3: Define Vertical Progress Bar Tag
• Paste the following tag definitions after the namespace:
<tag>
<tag-name>verticalProgress</tag-name>
<source>tags/verticalProgress.xhtml</source>
</tag>
www.icefaces.org
Step 4: Create Composite Component Files
• Create the following new text file:
dashboard-comps/META-INF/tags/verticalProgress.xhtml
Or
WEB-INF/includes/components/tags/verticalProgress.xhtml
• Paste the following text into the new file:
<ui:composition
xmlns:ice="http://www.icesoft.com/icefaces/component
"
</ui:composition>
www.icefaces.org
Step 5: verticalProgress.xhtml
• Paste the following markup as a child of ui:composition
within the verticalProgress.xhtml file:
<table id="#{id}" border="#{border}" bordercolor="#{borderColor}"
cellpadding="0" cellspacing="0" class="#{styleClass}"
height="#{height}" width="#{width}">
<tr>
<td valign="bottom">
<table width="100%" height="#{progressHeight}" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td bgcolor="#{progressColor}">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
www.icefaces.org
Step 6: Create JAR
• Zip these artifacts up into a JAR file so that it can be used
in any ICEfaces web application:
– cd dashboard-comps
– jar cf ../dashboard-comps.jar META-INF
OR
• Use components available in project
www.icefaces.org
Step 7: Copy JAR to Project
• Find the new JAR and copy it to the WEB-INF/lib folder of
your jobApplication project
• REFRESH your project in Eclipse
www.icefaces.org
Step 8: Create Facelet View
• Right click on the web folder, and create a new file named
dashboard.xhtml
www.icefaces.org
Step 9: Paste XML Declaration
• Paste the following text fragment into the top of the newly
opened dashboard.xhtml file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
www.icefaces.org
Step 10: Paste View and Form
• Paste the following markup into the dashboard.xhtml file:
<f:view
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ice="http://www.icesoft.com/icefaces/c
omponent"
xmlns:db="http://www.companyname.com/dashboa
rd/facelets">
<ice:form>
</ice:form>
</f:view>
www.icefaces.org
Step 11: Paste Composite Component Usage
• Paste the following markup as a child of the ice:form tag:
<db:verticalProgress id="applicantCount" border="1"
bordercolor="#000000" height=“100" width="20"
progressHeight="#{applicantMonitor.progressHeight}"
progressColor="#0000AA" />
<ice:commandButton actionListener="#{applicantMonitor.start}"
value="Start Monitoring" />
www.icefaces.org
Step 12: Create Ajax Push Model Bean
• Create the following Java class with the IDE:
– training.jobapplication.bean.model.ApplicantMonitor
www.icefaces.org
Step 13: Add Implementation Methods
• Paste the following code that will serve to implement the
methods required by the ICEfaces renderable interface:
private static final String RENDER_GROUP_NAME =
"applicantMonitor";
public ApplicantMonitor() {
SessionRenderer.addCurrentSession(RENDER_GROUP_NAME);
}
www.icefaces.org
Step 14: Progress Height
• Add the following property to the ApplicantMonitor model
bean:
private Integer progressHeight = 0;
• Generate getters/setters accordingly
• Paste the following convenience method:
public void incrementProgressHeight(int
byValue) {
this.progressHeight += byValue;
SessionRenderer.render(RENDER_GROUP_NAME);
}
www.icefaces.org
Step 15: Add Action Listener
• Paste the following action listener into the ApplicantMonitor
model bean:
public void start(ActionEvent actionEvent) {
final ApplicantMonitor thisMonitor = this;
new Thread() {
public void run() {
for (int i = 0; i < 10; i++) {
try {
thisMonitor.incrementProgressHeight(10);
Thread.sleep(1000);
//sleep for 1 second
} catch (Exception e) {
e.printStackTrace();
}
}
}
}.start();
}
www.icefaces.org
Step 16: Configure Managed Bean
• Open the faces-config.xml file in the IDE
• Paste the following managed bean definition:
<managed-bean>
<managed-bean-name>applicantMonitor</managed-bean-name>
<managed-beanclass>training.jobapplication.bean.model.ApplicantMonitor</managed-beanclass>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
www.icefaces.org
Run Application
• Publish/deploy the project
• Visit the following URL in the browser:
– http://localhost:8080/jobApplication/dashboard.iface
www.icefaces.org

Template - ICEsoft.org

Transcription

Similar documents

Walkthrough: Publicaster`s New Free Templates

Hexaflexagons! 1 Flexagons - Washington University in St. Louis

Sell Sheet: EVOLite Skyworker Helmet

What`s new in

A mass movement

Property Tax (Predial) Government website

MG857: 16 oz Double Wall Clear Acrylic Tumbler w/ Color