1. Creative Commons Attribution- NonCommercial-ShareAlike 2.5 License Sakai Programmer's Café Introduction to Java Server Faces Aaron Zeckoski azeckoski@gmail.com

2. 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_Faceshttp://en.wikipedia.org/wiki/JavaServer_Faces

3. 3 Theory vs. Practice

4. 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. 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. 6 JSF structure and code

7. 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. 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. 9 Sample template Items <h:selectBooleanCheckbox id="itemSelect" value="#{entry.selected}" rendered="#{entry.canDelete}"/>

10. 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. 11 Sample faces-config /jsf/JsfItems.jsp newItem /jsf/JsfAddItem.jsp * /jsf/JsfItems.jsp JsfBean org.example.jsf.JsfBean session logic #{someLogicBean}

12. 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. 13 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"; }

14. 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. 15 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; }

16. 16 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

17. 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

18. 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:selectBooleanCheckbox id="itemHidden" value="#{entry.item.hidden}" disabled="true" />

19. 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}">

20. 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. 21 JSF in practice

22. 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. 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. 24 Apache MyFaces Apache implementation of JSF –http://myfaces.apache.org/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/http://myfaces.apache.org/tomahawk/ Recommended over the Sun RI URL: http://myfaces.apache.org/tomahawk/http://myfaces.apache.org/tomahawk/

25. 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/http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/

26. 26 Other faces Facelets –https://facelets.dev.java.net/https://facelets.dev.java.net/ –JSF without JSP (similar to tapestry) Struts Shale –http://shale.apache.org/http://shale.apache.org/ –Framework based on JSF, similar to struts

27. 27 Questions? Java Server Faces Home –http://java.sun.com/javaee/javaserverfaces/http://java.sun.com/javaee/javaserverfaces/ MyFaces –http://myfaces.apache.org/http://myfaces.apache.org/