Scribd
Upload
49 views8 pages

JSF 2 Ref

JSF 2 Ref

Uploaded by

narendramahajantalen
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
49 views8 pages

JSF 2 Ref

JSF 2 Ref

Uploaded by

narendramahajantalen
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

1. A Java bean or JSF managed bean, with a name property to store the user data .

In JSF, managed bean means this java class or bean can be accessed from a JSF page. 2. In JSF 2.0, you can use the @ManagedBean annotation to indicate this is a man aged bean. 3. Managed Bean Example @ManagedBean @SessionScoped public class HelloBean implements Serializable { private static final long serialVersionUID = 1L; private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } } 4. NOTE : In JSF 1.x, you had to declare this beans in the faces-config.xml, but this is no longer required in JSF 2.0. 5. JSF 2.0 Pages In JSF 2.0, it s recommended to create JSF page in XHTML file format, a file with a .xhtml extension. 6. To use the JSF 2.0 components or features, just declared the JSF namespace at the top of the page. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> 7. hello.xhtml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <title>JSF 2.0 Hello World</title> </h:head> <h:body> <h3>JSF 2.0 Hello World Example - hello.xhtml</h3> <h:form> <h:inputText value="#{helloBean.name}"></h:inputText> <h:commandButton value="Welcome Me" action="welcome"></h:commandButto n> </h:form> </h:body>

</html> 8. Note : In JSF 1.x, you had to declare the navigation rule in faces-config.xml , to tell whic h page to display when the button is clicked. In JSF 2.0, you can put the page n ame directly in the button s action attribute. For simple navigation, it s more than e nough, but, for complex navigation, you are still advise to use the navigation ru le in faces-config.xml . 9. welcome.xhtml Display the submitted text box value.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <title>JSF 2.0 Hello World</title> </h:head> <h:body bgcolor="white"> <h3>JSF 2.0 Hello World Example - welcome.xhtml</h3> <h4>Welcome #{helloBean.name}</h4> </h:body> </html> 10. The #{ } indicate this is a JSF expression language, in this case, #{helloBean .name}, when the page is submitted, JSF will find the helloBean and set the submit ted textbox value via the setName() method. When welcome.xhtml page is display, JSF will find the same session helloBean again and display the name property value via the getName() method. 11. JSF 2.0 Serlvet Configuration : Just like any other standard web frameworks, you are required to configure the J SF stuff in web.xml file. web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>JavaServerFaces</display-name> <!-- Change to "Production" when you are ready to deploy --> <context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param> <!-- Welcome page --> <welcome-file-list> <welcome-file>faces/hello.xhtml</welcome-file>

</welcome-file-list> <!-- JSF mapping --> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <!-- Map these files with JSF --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> </web-app> 12. Define a javax.faces.webapp.FacesServlet mapping, and map to those well-known JSF file extension (/faces/*, *.jsf, *.xhtml,*.faces). In this case, the below 4 URLs are pointing to the same hello.xhtml. http://localhost:8080/JavaServerFaces/hello.jsf http://localhost:8080/JavaServerFaces/hello.faces http://localhost:8080/JavaServerFaces/hello.xhtml http://localhost:8080/JavaServerFaces/faces/hello.jsf 13.NOTE : In JSF 2.0 development, it s recommended to set the javax.faces.PROJECT_S TAGE to Development , it will provide many useful debugging information to let you t rack the bugs easily. For deployment, just change it to Production , you just do no t want your customer to look at this annoying debugging information 14.JSF 2.0 + Ajax hello world example <h:form> <h:inputText id="name" value="#{helloBean.name}"></h:inputText> <h:commandButton value="Welcome Me"> <f:ajax execute="name" render="output" /> </h:commandButton> <h2><h:outputText id="output" value="#{helloBean.sayWelcome}" /></h2> </h:form> In the <f:ajax> tag :

14.1 execute= name Indicate the form component with an Id of name will be sent to th e server for processing. For multiple components, just split it with a space in between, e.g execute= name anotherId anotherxxId . In this case, it will submit the text box value. 14.2 render= output After the Ajax request, it will refresh the component with an id of output . In this case, after the Ajax request is finished, it will refresh th e <h:outputText> component.

15 Resources (library) in JSF 2.0 : In JSF 2.0, all your resources files like css, images or JavaScript, should put into a resources folder in the root of your web application (same folder level wit h WEB-INF folder). In JSF 2.0 terminology, all the sub-folder name of the resources folder is consider as a library in JSF 2.0 web application. Later, you can referen ce this library with JSF tag s library attribute Here s few common use cases of using resources or library in JSF 2.0.

1. Include a stylesheet in a page with h:outputStylesheet . <h:outputStylesheet name="style.css" library="css" /> 2. Include an image in a page with h:graphicImage . <h:graphicImage library="images" name="sofa.png" /> 3.Include a JavaScript in a page with h:outputScript . <h:outputScript library="javascript" name="hello.js" target="bod y" /> 16.Resources (library) example : A full example of using resources in JSF 2.0 to include css, JavaScript and images in a page. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" > <h:head> <h:outputStylesheet name="style.css" library="css" /> </h:head> <h:body> <h1>JSF 2.0 and Resources example</h1> <h:outputText styleClass="red-color" value="This is a Message (Red color )" /> <br/> <h:graphicImage library="images" name="sofa.png" />

<h:outputScript library="javascript" name="hello.js" target="body" /> </h:body> </html>

17. Configure Managed Beans in JSF 2.0 : In JSF 2.0, Java bean that can be accessed from JSF page is called Managed Bean. The managed bean can be a normal Java bean, which contains the getter and sette r methods, business logic or even a backing bean (a bean contains all the HTML f orm value). There are two ways to configure the managed bean : 1. 1. Configure Managed Bean with Annotation In JSF 2.0, you can annotated a Managed Bean with new @ManagedBe an annotation. 2. 2. Configure Managed Bean with XML With XML configuration, you can use the old JSF 1.x mechanism to define the managed bean in a normal faces-config.xml file. 18.Configure Managed Beans in JSF 2.0 : EXAMPLES 1. Using @ManagedBean annotation @ManagedBean @SessionScoped public class HelloBean implements Serializable { private static final long serialVersionUID = 1L; private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } } 2.Configure Managed Bean with XML <?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xs d" version="2.0"> <managed-bean> <managed-bean-name>helloBean</managed-bean-name>

<managed-bean-class>com.mkyong.common.HelloBean< /managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> </faces-config> 19. NOTE : Best Practice It s recommended to put the managed beans in a separate XML file because the faces -config.xml is used to set the application level configurations. So, you should create a new XML file and put the managed beans detail inside, an d declared the XML file in the javax.faces.CONFIG_FILES initialize parameter, wh ich is inside the WEB-INF/web.xml file. web.xml ... <context-param> <param-name>javax.faces.CONFIG_FILES</param-name> <param-value>WEB-INF/manage-beans.xml</param-value> </context-param> ... 20. Injecting Managed beans in JSF 2.0 : In JSF 2.0, a new @ManagedProperty annotation is used to dependency injection (D I) a managed bean into the property of another managed bean. HelloBean.java import import import import Inject the message bean into the messageBean property.

java.io.Serializable; javax.faces.bean.ManagedBean; javax.faces.bean.ManagedProperty; javax.faces.bean.SessionScoped;

@ManagedBean @SessionScoped public class HelloBean implements Serializable { @ManagedProperty(value="#{message}") private MessageBean messageBean; //must povide the setter method public void setMessageBean(MessageBean messageBean) { this.messageBean = messageBean; } //... } In this example, it uses the @ManagedProperty annotation to DI the message bean (M essageBean.java) into the property (messageBean) of the hello bean (HelloBean.java ) via setter method, setMessageBean(). 21. Implicit Navigation in JSF 2.0 In JSF 1.2, all the page navigation are required to declare in the ml file like this :

faces-config.x

... <navigation-rule> <from-view-id>page1.xhtml</from-view-id> <navigation-case> <from-outcome>page2</from-outcome> <to-view-id>/page2.xhtml</to-view-id> </navigation-case> </navigation-rule> ... In JSF 2, it treats outcome as the page name, for example, navigate to page1.xhtml , you have to put the outcome as page1?. This mechanism is called Implicit Navigation , where you don t need to declare the tedious navigation rule, instead, just put the outcome in the action attribute directly and JSF will find the correct view id auto matically. 22. There are two ways to implements the implicit navigation in JSF 2. 1. Outcome in JSF page : You can put the outcome directly in the JSF page. <h:form> <h:commandButton action="page2" value="Move to page2.xht ml" /> </h:form> 2. Outcome in Managed Bean Besides, you can also define the outcome is : PageController.java @ManagedBean @SessionScoped public class PageController implements Serializable { public String moveToPage2(){ return "page2"; //outcome } } In JSF page, action attribute, just call the method by using od expression . page1.xhtml <h:form> <h:commandButton action="#{pageController.moveToPage2}" value="Move to page2.xhtml by managed bean" /> </h:form> 23. Redirection : By default, JSF 2 is perform a forward while navigating to another page, it caused the page URL is always one behind . For example, when you move from p age1.xhtml to page2.xhtml , the browser URL address bar will still showing the same p age1.xhtml URL. To avoid this, you can tell JSF to use the redirection by append the face meth in a managed bean like th

s-redirect=true <h:form>

to the end of the

outcome

string.

<h:commandButton action="page2?faces-redirect=true" value="Move to page2.xhtml" /> </h:form>

You might also like