270 likes | 384 Views
Introduction to Java Server Faces. Aaron Zeckoski azeckoski@gmail.com. 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.
E N D
Introduction to Java Server Faces Aaron Zeckoski azeckoski@gmail.com
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 Java Server Faces URL: http://en.wikipedia.org/wiki/JavaServer_Faces
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 In theory
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 In practice
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 JSF structure Template (jsp) faces-config (xml) Backing Bean (java) Wrapper (java) Logic Layer (rest of app) model (java)
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 JSF templates
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>
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 faces-config.xml
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>
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 JSF backing beans
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"; } }
Wraps basic data POJO (Plain Old Java Object) 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 JSF wrapper bean
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; } }
4 key things you need to do in a webapp Output dynamic text Render data to the screen Loop structures Output collection or render tables Optional rendering of components Render some components based on state Trigger Actions User actions or data transmission Web app basics
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 Output dynamic text <h:outputText value="#{JsfAppBean.currentItem.title}"/> <h:outputText value="#{msgs.jsfapp_text}"/>
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 Loop structure <h:dataTableid="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>
Handled per h: tag with the rendered attribute (which takes EL) Can prefix with not to invert Brings render logic into the template 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>
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 Trigger actions <h:commandButton value="#{msgs.jsfapp_new}" action="#{JsfAppBean.processActionNew}"/> public String processActionNew() { currentItem = null; itemText = TEXT_DEFAULT; itemHidden = HIDDEN_DEFAULT; return"newItem"; }
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 JSF experience
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 JSF structure revisit Template (jsp) faces-config (xml) Backing Bean (java) Wrapper (java) Logic Layer (rest of app) model (java)
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 Apache MyFaces URL: http://myfaces.apache.org/tomahawk/
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 Oracle ADF faces URL: http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/
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 Other faces
Java Server Faces Home http://java.sun.com/javaee/javaserverfaces/ MyFaces http://myfaces.apache.org/ Questions?