Introduction to Java Server Faces
Download
Report
Transcript Introduction to Java Server Faces
Introduction to
Java Server Faces
Aaron Zeckoski
[email protected]
Creative Commons AttributionNonCommercial-ShareAlike 2.5 License
Sakai Programmer's Café
Java Server Faces
• A Java web application framework
– Includes the following
• A set of UI components (represent html entities)
• APIs to represent components, manage state,
handle events, validate input, etc.
• Custom tag libraries to put JSF in a JSP
• State management and even model
• IoC Backing Beans (managed beans)
• Expression Language (EL)
• Servlet based, normally uses JSPs
URL: http://en.wikipedia.org/wiki/JavaServer_Faces
2
Theory vs. Practice
3
In theory
• Web applications that work more like desktop
apps
– Easier to program
– Less concern about request cycle
• Better scoping and separation
– Application/Session/Request
• Component bindings from UI to model
• Abstract component tree that is independent
of the target (HTML, etc.)
• Good separation of the logic and presentation
4
In practice
• Harder to work with than the average web application
framework
– Big learning curve
– Have to understand the request cycle well
• Especially the ways JSF may short circuit it
• Prevents you from accessing half the capability of HTML
– Abstraction done via custom taglibs which make the templates
into “JSF XML”
– Logic in template and custom tags defeat the goal of separation
of UI and logic
• JSF event-model introduces the need for wrappers to
actually deal with model
– Must keep the component tree and event-model in session
5
JSF structure and code
6
JSF structure
• The template (most
commonly jsp) defines the
interface
• The faces-config defines the
navigation and the backing
beans
• Backing beans handle action
processing, navigation
processing, and connections
to the logic (business) layer
• Wrapper bean wraps the data
POJOs for JSF handling
• Logic layer beans can be
injected as defined in the
faces-config
• Model is basic data POJO
Template
(jsp)
faces-config
(xml)
Backing Bean
(java)
Wrapper
(java)
Logic Layer
(rest of app)
model
(java)
7
JSF templates
• JSP files most of the time
• Heavily reliant on tag libraries (taglibs)
– Core (f) - basic page definition tags
– Html (h) - defines standard html tags
• Must learn a large set of restrictive taglibs
– Difficult to work with since it does not look like
normal html
– Even more difficult to write new ones
• Large use of EL (expression language)
• Can encourage mixing code with html
8
Sample template
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
<html><head><title>Items</title></head><body>
<h:form id="items">
<h:dataTable id="itemlist” value="#{JsfBean.allItems}” var="entry">
<h:column>
<f:facet name="header">
<h:outputText value=""/>
</f:facet>
<h:selectBooleanCheckbox id="itemSelect" value="#{entry.selected}"
rendered="#{entry.canDelete}"/>
<h:outputText value="" rendered="#{not entry.canDelete}"/>
</h:column>
</h:form>
</body></html>
</f:view>
9
faces-config.xml
• Defines the backing beans
– Syntax not like Spring (unfortunately)
– Name used in EL in template
– Scope controlled (request, session, etc.)
• Defines navigation rules
– Based on views
• Where from (view)
• Which outcome (id)
• Where to go (view)
– Can match outcomes using wildcards
10
Sample faces-config
<faces-config>
<navigation-rule>
<from-view-id>/jsf/JsfItems.jsp</from-view-id>
<navigation-case>
<from-outcome>newItem</from-outcome>
<to-view-id>/jsf/JsfAddItem.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>*</from-outcome>
<to-view-id>/jsf/JsfItems.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<managed-bean>
<managed-bean-name>JsfBean</managed-bean-name>
<managed-bean-class>org.example.jsf.JsfBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>logic</property-name>
<value>#{someLogicBean}</value>
</managed-property>
</managed-bean>
</faces-config>
11
JSF backing beans
• Typical bean with getters and setters and
additional methods to handle actions
– Store data needed for processing the user
actions using setters
– Retrieve data using getters and methods
– Process actions using methods
• Often includes code to wrap data objects
• Connects to the rest of the application
– Typically via injection
• Non-recursive (i.e. not like Spring), will not
instantiate dependencies of dependencies
12
Sample backing bean
public class JsfBean {
private DataModel itemsModel;
private JsfItemWrapper currentItem = null;
...
private JsfLogic logic;
public void setLogic(JsfLogic logic) {
this.logic = logic;
}
...
public DataModel getAllItems() {
List wrappedItems = new ArrayList();
List items = logic.getAllVisibleItems(logic.getCurrentSiteId());
for (Iterator iter = items.iterator(); iter.hasNext(); ) {
JsfItemWrapper wrapper =
new JsfItemWrapper((Item) iter.next());
wrappedItems.add(wrapper);
}
itemsModel = new ListDataModel(wrappedItems);
return itemsModel;
}
...
public String processActionList() {
return "listItems";
}
}
13
JSF wrapper bean
• Wraps basic data POJO
• Required to avoid putting UI information in
the data POJO
• Often includes basic setters and getters
for the UI related properties
– Can be methods as well
• Also includes a setter and getter for the
data POJO
14
Sample wrapper bean
public class JsfItemWrapper {
private Item item;
private boolean isSelected; // is this item selected by the user
public JsfItemWrapper(Item item) {
this.item = item;
}
public Item getItem() {
return item;
}
public void setItem(Item item) {
this.item = item;
}
public boolean isSelected() {
return isSelected;
}
public void setSelected(boolean isSelected) {
this.isSelected = isSelected;
}
}
15
Web app basics
• 4 key things you need to do in a webapp
1. Output dynamic text
•
Render data to the screen
2. Loop structures
•
Output collection or render tables
3. Optional rendering of components
•
Render some components based on state
4. Trigger Actions
•
User actions or data transmission
16
Output dynamic text
<h:outputText value="#{JsfAppBean.currentItem.title}"/>
<h:outputText value="#{msgs.jsfapp_text}"/>
• Uses the h:outputText tag
– Also h:outputLabel and h:outputFormat
• Uses Expression Language
– Requires a bean
• Defined in the faces-config or the template
• Can set style and turn on/off escaping
17
Loop structure
<h:dataTable id="itemlist” value="#{JsfAppBean.allItems}” var="entry">
<h:column>
<f:facet name="header">
<h:outputText value="#{msgs.jsfapp_text}"/>
</f:facet>
<h:outputText value="#{entry.item.title}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="#{msgs.jsfapp_hidden}"/>
</f:facet>
<h:selectBooleanCheckbox id="itemHidden" value="#{entry.item.hidden}"
disabled="true" />
</h:column>
</h:dataTable>
• h:dataTable is the main loop structure
– Also h:panelGrid to a degree
• Takes a collection as value
– Uses a variable (entry) to interact with collection
• Uses h:column to define each column
18
Optional rendering
<h:outputText value="#{entry.item.title}"
rendered="#{not entry.canDelete}"/>
<h:commandLink id="updatelink"
action="#{JsfAppBean.processActionUpdate}"
rendered="#{entry.canDelete}">
<h:outputText value="#{entry.item.title}"/>
</h:commandLink>
• Handled per h: tag with the rendered
attribute (which takes EL)
– Can prefix with not to invert
• Brings render logic into the template
19
Trigger actions
<h:commandButton value="#{msgs.jsfapp_new}"
action="#{JsfAppBean.processActionNew}" />
public String processActionNew() {
currentItem = null;
itemText = TEXT_DEFAULT;
itemHidden = HIDDEN_DEFAULT;
return "newItem";
}
• Effectively binds a bean action to a submit
button (h:commandButton)
– Also h:commandLink
• Triggers an action in the bean which returns a
string to indicates the view to navigate to
20
JSF in practice
21
JSF experience
• JSF has a steep learning curve
– Tends to do things in a non-intuitive way
• UI components are restrictive
– Not enough of them, not flexible enough
• Very hard to make AJAX work
– This may be changing
• Uses Javascript too heavily
– URL location is wrong, no back button
• Very hard for UI designers to work with
22
JSF structure revisit
• The template mixes html and
presentation logic
Template
(jsp)
– Bad for UI designers
• The faces-config is difficult to
maintain (navigation also in
the backing bean)
faces-config
(xml)
– Easy to get out of sync
– Syntax not like Spring
• Backing beans actually work
fairly well
– One of the saving graces
Backing Bean
(java)
Wrapper
(java)
• Wrapper bean is extra work
to have to deal with
– Sometimes have to wrap
multiple objects
– Requires extra code in the
backing bean
Logic Layer
(rest of app)
model
(java)
23
Apache MyFaces
• Apache implementation of JSF
– http://myfaces.apache.org/
– Open source
– Better than Sun reference implementation
• Extra features
– Additional and more flexible taglibs
• Tomahawk (h) - new and updated components
– http://myfaces.apache.org/tomahawk/
• Recommended over the Sun RI
URL: http://myfaces.apache.org/tomahawk/
24
Oracle ADF faces
• A robust and rich set of UI components
that work with JSF
– Advanced tables
– Date and color pickers
– File upload
– Client side validators
• Designed to work with Oracle Jdeveloper
• Decent AJAX support
URL: http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/
25
Other faces
• Facelets
– https://facelets.dev.java.net/
– JSF without JSP (similar to tapestry)
• Struts Shale
– http://shale.apache.org/
– Framework based on JSF, similar to struts
26
Questions?
• Java Server Faces Home
– http://java.sun.com/javaee/javaserverfaces/
• MyFaces
– http://myfaces.apache.org/
27