Introduction to Java Server Faces
27
Creative Commons Attribution-NonCommercial-ShareA like 2.5 License Sakai Programmer's Café Introduction to Java Server Faces Aaron Zeckoski [email protected]
description
Introduction to Java Server Faces. Aaron Zeckoski [email protected]. 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. - PowerPoint PPT Presentation
Transcript of Introduction to Java Server Faces
Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License
Sakai Programmer's Café
Introduction to Java Server Faces
Aaron [email protected]
2
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
3
Theory vs. Practice
4
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
5
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
6
JSF structure and code
7
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)
Backing Bean(java)
Logic Layer(rest of app)
faces-config(xml)
Wrapper(java)
model(java)
8
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
9
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>
10
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
11
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>
12
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
13
Sample backing beanpublic 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";}
}
14
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
15
Sample wrapper beanpublic 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;}
}
16
Web app basics
• 4 key things you need to do in a webapp1. 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
17
Output dynamic 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
<h:outputText value="#{JsfAppBean.currentItem.title}"/>
<h:outputText value="#{msgs.jsfapp_text}"/>
18
Loop structure
• 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
<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>
19
Optional rendering
• Handled per h: tag with the rendered attribute (which takes EL)– Can prefix with not to invert
• Brings render logic into the template
<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>
20
Trigger actions
• 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
<h:commandButton value="#{msgs.jsfapp_new}" action="#{JsfAppBean.processActionNew}" />
public String processActionNew() { currentItem = null; itemText = TEXT_DEFAULT; itemHidden = HIDDEN_DEFAULT; return "newItem";}
21
JSF in practice
22
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
23
JSF structure revisit• The template mixes html and
presentation logic– Bad for UI designers
• The faces-config is difficult to maintain (navigation also in the backing bean)– Easy to get out of sync– Syntax not like Spring
• Backing beans actually work fairly well– One of the saving graces
• Wrapper bean is extra work to have to deal with– Sometimes have to wrap
multiple objects– Requires extra code in the
backing bean
Template(jsp)
Backing Bean(java)
Logic Layer(rest of app)
faces-config(xml)
Wrapper(java)
model(java)
24
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/
25
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/
26
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
27
Questions?
• Java Server Faces Home– http://java.sun.com/javaee/javaserverfaces/
• MyFaces– http://myfaces.apache.org/
