Basics and Concepts of Java Server Faces
Total Page:16
File Type:pdf, Size:1020Kb
Basics and Concepts of Java Server Faces A standard approach to web- development Martin Marinschek IRIAN Solutions GmbH (http:/ / www.irian.at) Submission ID 2220 2 AGENDA 1. Why JSF? 2. JSF – an introduction 3. Standard components of JSF 4. JSF – the LifeCycle 5. JSF Libraries and Add- On Frameworks 6. Outlook to the future of JSF 3 AGENDA 1. Why JSF? 2. JSF – an introduction 3. Standard components of JSF 4. JSF – the LifeCycle 5. JSF Libraries and Add- On Frameworks 6. Outlook to the future of JSF Java and its Standards! 4 1995 199619971998199920002001200220032004200520062007 JSP Standard Tag Library (JSTL) 1.0 1.1 1.2 JavaServer Pages (JSP) 0.92 1.0/ 1.1 1.2 2.0 2.1 Java- Servlets 1.0 2.0 2.1/ 2.2 2.3 2.4 2.5 Java 1.0 1.1 1.2 1.3 1.4 5.0 6.0 5 Why JSF? Rendering was already standardized > JSP, Servlets, JSTL Two- way- binding and form- handling missing A host of frameworks filled this GAP Ja va- Web- Frameworks 6 WebOnSwing Swinglets JPublishEcho Millstone JSPWidget JoSssporing MVC Wicket DWR Sofia WebworkJucas Maverick VRaptor Struts Japple Stripes AnvGil WT Barracuda CocoonJAT TRaIFpEestry Verge JaffOapenXava ChrysSawliisngWeb http:/ / www.java- source.net/ open- source/ web- frameworks Java and its Standards! 7 1995 199619971998199920002001200220032004200520062007 JavaServer Faces (JSF) 1.0/ 1.1 1.2 JSP Standard Tag Library (JSTL) 1.0 1.1 1.2 JavaServer Pages (JSP) 0.92 1.0/ 1.1 1.2 2.0 2.1 Java- Servlets 1.0 2.0 2.1/ 2.2 2.3 2.4 2.5 Java 1.0 1.1 1.2 1.3 1.4 5.0 6.0 8 AGENDA 1. Why JSF? 2. JSF – an introduction 3. JSF – the LifeCycle 4. Standard components of JSF 5. JSF Libraries and Add- On Frameworks 6. Outlook to the future of JSF 9 JSF in a nutshell • JSF is a … • ... new framework for building highly interactive web- apps with a simple and clear role- model • ... component- based framework • ... event- driven framework • … stateful framework on top of stateless protocols • ... RAD (Rapid Application Development) enabling platform • ... JCP standard! 10 Component driven framework • JSF has built- in components • connect components inside a view- definition- file • (JSP, Facelets,..) • the ‚rendering‘ transforms these to markup like (X)HTML <h:inputText id="x" /> <input type="text" id="form:x"/> 11 Event driven framework registers at triggers Event- Event- Source Listener creates Event sent to 12 JSF – a technology in wide use IRIAN.at- JSF- Projects: > Deutsche Bank > Continentale > IPI.ch > OeKB > ICW AG > Erste Bank > Raiffeisen Capital Management Other JSF- Projects in Switzerland (we know of): > Credit Suisse If you have one, come to the Swiss JSF- user group meeting today in the evening! > More information at the end of this presentation… Apache MyFaces > „Companies using Apache MyFaces“ http:/ / wiki.apache.org/ myfaces/ Companies_Using_MyFaces 13 A JSF – Hello World example h:panelGrid h:outputLabel h:inputTex t h:commandButto n 14 A JSF page needs… View- Template – e.g. JSP: <f:view> <h:outputLabel value=„label for=„id“/> <h:inputText id=„id“ value=„#{myBean.text}“/> </f:view> One or more Backing- Beans (Managed- Beans) public class MyBean {} Configuration in faces-config.xml: <managed-bean> <managed-bean-name>myBean</managed-bean- name> </managed-bean> 15 JSF- JSP- Template - Hello World <html>..<f:view><h:form id="form"> <h:panelGrid columns="2"> <h:outputLabel for="input1" value="first name"/> <h:inputText id="input1„ value="#{customer.firstname}"/> <h:outputLabel for="input2" value="second name"/> <h:inputText id="input2" value="#{customer.secondname}" required="true" /> <h:commandButton value="send it!" action="#{customer.send}"/> <h:messages errorStyle="color:red"/> </h:panelGrid> </h:form></f:view>..</html> 16 JavaBean – Hello World public class Customer { private String firstname = null; private String secondname = null; //getter and setter public String send(){ //back-end access (e.g. BusinessDelegate) return "fine"; } } 17 Faces- config.xml – Hello World <faces-config> <managed-bean> <managed-bean-name>customer</managed-bean-name> <managed-bean-class>foo.Customer</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/form.jsp</from-view-id> <navigation-case> <from-outcome>fine</from-outcome> <to-view-id>/output.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config> 18 AGENDA > Why JSF? > JSF – an introduction > Standard components of JSF > JSF – the LifeCycle > JSF Libraries and Add- On Frameworks > Outlook to the future of JSF 19 standard components - Text • output of text - outputText <h:outputText value="#{user.userNameDescr}"/> • input of text - inputText <h:inputText value="#{user.userName}"/> • password input <h:inputSecret/> • hidden field (yes, you won’t need it anymore): <h:inputHidden/> • textareas <h:inputTextarea/> 20 standard components - UICommand • commandLink <h:commandLink action="#{actionBean.test}"/> • commandButton <h:commandButton action="#{pageBean.test2}"/> 21 standard components - OutputLink • Linking to websites/ web- apps outside of JSF: <h:outputLink value=„url“ target=„_blank“/> • Caution: state gets lost, since this is not a postback • HTTP parameters <h:outputLink value=„url“> <f:param name=„allowCache“ value=„true“/> </h:outputLink> 22 standard components – UIData • best for presenting structured data (like java.util.List) • horizontal: every column is defined by a UIColumn component • vertical: each row represents one item of the structured data • Facets (<f:facet/>) allow defining header and footer 23 standard components - UIData <h:dataTable value="#{bean.items}" var="item"> <h:column> <h:outputText value="#{item.name}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Header 2"/> </f:facet> <h:outputText value="#{item.desc}"/> </h:column> </h:dataTable> 24 Switching Master- Detail setPropertyActionListener (preparation) navigation Item 25 Switching Master- Detail - Code That‘s it: <h:dataTable> <h:column> <h:commandLink action="edit" > <f:setPropertyActionListener value="#{item}" target="#{itemEdit.currentItem}"/> </h:commandLink> </h:column> </h:dataTable> 26 Standard components - Label • Label for a component: <h:outputLabel for="myId" value="#{bean.labelText}"/> <h:inputText id="myId" value="something"/> Apache MyFaces Tomahawk: • label text can be used in message • use <t:outputLabel/> for this 27 Standard components - SelectMany <h:selectManyCheckbox> <h:selectManyListbox/> 28 Standard components - SelectOne <h:selectOneRadio> <h:selectOneListbox/> <h:selectOneMenu/> 29 Example - JSP SelectOneMenu for choosing gender of a person: <h:selectOneMenu value="#{person.gender}"> <f:selectItems value="#{person.genderItems}"/> </h:selectOneMenu> Person.java: private String gender; //getter+setter private List genderItems; public List getGenderItems(){ if(genderItems == null){ genderItems = new ArrayList(); genderItems.add(new SelectItem("m","male",null)); genderItems.add(new SelectItem("w","female",null)); } return genderItems; } 30 MyFaces Tomahawk: t:selectItems Select- Item- List could also be created automatically: <t:selectItems var="person" value="#{bean.persons}" itemLabel="#{person.name}" itemValue="#{person.id}"/> 31 AGENDA > Why JSF? > JSF – an introduction > Standard components of JSF > JSF – the LifeCycle > JSF Libraries and Add- On Frameworks > Outlook to the future of JSF 32 JSF Request Lifecyle Response complete Faces Apply Conversion Restore Process request Request and View Events Response Values Validation P e r complete v o T e c n e N Render Response t s s s E I Response Response U M L complete complete p o d C d a e t e Faces l Render Process Invoke Process respons e Response Events Application Events Conversion Errors Render Response Validation / Conversion Errors Render Response 33 JSF Lifecycle – Initialization Faces Apply Conversion Restore Process request Request and View Events Values Validation P e r v o T e c n e N t s No view available s s E I U M L p o d C d a e t e l Faces Render Process Invoke Process respons e Response Events Application Events Create View 34 JSF Lifecycle – Validation fails Faces Apply Conversion Restore Process request Request and View Events Values Validation P e r v o T e c n e N t s s s E I U M L p o d C d a e t e l Faces Render Process Invoke Process respons e Response Events Application Events Validation / Conversion Errors Render Response JSF Lifecycle – Input Values 35 same way validation error validation ok a) If UICom.submittedValue = = null - > use ManagedBean.attribute 36 PhaseListener - configuration • JSF provides a special listener for the lifecycle • PhaseListener executed at the beginning and at the end of a phase. • register in faces- config.xml: <lifecycle> <phase-listener> org.apache.training.DebugPhaseListener </phase-listener> </lifecycle> 37 PhaseListener - Sample public class DebugPhaseListener implements PhaseListener { public void beforePhase(PhaseEvent event){} public void afterPhase(PhaseEvent event){ System.out.println("afterPhase"); } public PhaseId getPhaseId(){ return PhaseId.ANY_PHASE; // return PhaseId.INVOKE_APPLICATION; } } 38 AGENDA > Why JSF? > JSF – an introduction > Standard components of JSF > JSF – the LifeCycle > JSF Libraries and Add- On Frameworks > Outlook to the future of JSF J SF – implementations and add- on 39 fIrmapmlemeewntoatrioknss > Sun RI > Apache MyFaces (founded by Thomas Spiegl and Manfred Geiler, both IRIAN.at) Extensions/ other frameworks on top of the standard > Apache MyFaces orchestra (glue code for JSF – Spring – JPA, conversation support) >