How to Create Web Application in JSF

essential javaserver faces (jsf) for web applications and how to create jsf web project in eclipse and how to develop web application in jsf
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:31-07-2017
Your Website URL(Optional)
Martin Keen Rafael Coutinho Sylvi Lippmann Redpaper Salvatore Sollami Sundaragopal Venkatraman Steve Baber Henry Cui Craig Fleming Developing Web Applications using JavaServer Faces This IBM® Redpaper™ publication introduces the features, benefits, and architecture of JavaServer Faces (JSF), a framework that simplifies building user interfaces for web applications. This paper is intended for web developers interested in JSF. The paper includes an example application that uses JSF, with persistence implemented in the Java Persistence API (JPA). The paper also demonstrates the support for JSF that is available in IBM Rational® Application Developer for IBM WebSphere® Software V8, the Eclipse 3.6 technology-based platform for building Java Platform, Standard Edition Version 6 (Java SE 6), and Java Platform, Enterprise Edition Version 6 (Java EE 6) applications. Rational Application Developer focuses on applications to be deployed to IBM WebSphere Application Server and IBM WebSphere Portal. Rational Application Developer also provides integrated tools for all development roles, including web developers, Java developers, business analysts, architects, and enterprise programmers. The paper is organized into the following sections:  Introduction to JSF  Developing a web application by using JSF and JPA  More information The sample code shown in this paper is available in the 4883codesolution/jsf folder. This paper was originally published as a chapter in the IBM Redbooks® publication, Rational Application Developer for WebSphere Software V8 Programming Guide, SG24-7835. The full publication includes working examples that show how to develop applications and achieve the benefits of visual and rapid application development. The publication is available at the following website: © Copyright IBM Corp. 2012. All rights reserved. 1Introduction to JSF The JSF framework allows users to utilize pre-built components and easily create web applications. For example, JSF provides an Input Text, Output Text, and a Data Table component. You can add these components easily to a JSF web page and connect them to the data of your project. JSF technology and the JSF tools provided by Rational Application Developer enable even inexperienced developers to quickly develop web applications. This section provides an overview of the following aspects of JSF:  JSF 1.x features and benefits  JSF 2.0 features and benefits  JSF 2.0 application architecture  JSF features in Rational Application Developer JSF 1.x features and benefits The JSF 1.x specification is defined in Java Specification Request (JSR) 127: JavaServer Faces. The following list describes the key features and benefits of using JSF for web application design and development:  Standards-based web application framework: JSF technology is the result of the Java Community process. JSF uses the model view controller (MVC) pattern; it addresses the view or presentation layer though user interface (UI) components, and addresses the model through managed beans.  Event-driven architecture: JSF provides server-side rich UI components that respond to client events.  UI development: – UI components are decoupled from their rendering, which means that they can be extended to use other technologies, such as Wireless Markup Language (WML). – JSF allows direct binding of UI components to model data. – Developers can use extensive libraries of prebuilt UI components that provide both basic and advanced web functionality. In addition, custom UI components can be created and customized for specific uses.  Session and object management: JSF manages designated model data objects by handling their initialization, persistence over the request cycle, and cleanup.  Validation and error feedback: JSF allows direct binding of reusable validators to UI components. The framework also provides a queue mechanism to simplify error and message feedback to the application user. These messages can be associated with specific UI components.  Globalization: JSF provides tools for the globalization of web applications, including supporting number, currency, time, and date formatting, and the externalization of UI strings. 2 Developing Web Applications using JavaServer FacesJSF 2.0 features and benefits The JSF 2.0 specification is defined in JSR 314: JavaServer Faces 2.0. It builds on and extends the features that are available in JavaServer Faces 1.x. This section describes the major features of JSF 2.0:  Facelet usage  Built-in Ajax support  Annotation usage  Creating templates  New components  Custom components Facelet usage JSF 2.0 uses Facelets, which are XHTML pages instead of JSP pages, as the view layer. Facelets relieve JSF of the restrictions that are imposed by JSP technology. For more information, see “Improving JSF by Dumping JSP” by Hans Bergsten in O’Reilly on, 9 June 2004: Facelets: Facelets are the standard view decoration language for JSF application development in JSF 2.0. We do not recommend combining Facelets and Faces JSP pages in the same project. Built-in Ajax support In JSF V1.x, it was possible to use Ajax with JSF, but this capability required additional component libraries. Now with JSF 2.0, a JavaScript library for performing simple Ajax operations is provided. No additional libraries are required. The example application in this paper uses Ajax. Annotation usage With JSF 2.0, Java classes can be directly annotated, which eliminates the need to register these classes in faces-config.xml. For example, ManagedBean indicates that this class is a Faces Managed Bean. The ManagedBean annotation can be used in place of a managed-bean entry in faces-config.xml. Other annotations, such as FacesComponent and FacesRenderer, are also available. Creating templates Facelet pages can be created from templates to allow a more uniform look across your project and to aid with future maintenance. We describe the creation of these templates in “Creating Facelet templates” on page 14. New components JSF provides various components for use in your web pages. In addition to the components that were available in JSF 1.x (Input Text, Output Text, Data Table, and other components), JSF 2.0 includes two new components that simplify GET navigation: h:link and h:button. For more information about components that are available on Facelet pages, see the following website: opics/tcrtfaceletspgcontent.html Developing Web Applications using JavaServer Faces 3Custom components Composite components build on the templating features of Facelets so that you can implement custom components. The advantage to custom components is that you can implement them without any configuration and without any Java code. More detailed information and examples are available at the following website: The steps for creating and customizing custom components with the Rational Application Developer are described in detail in the following information centers: topics/tjsfover.html topics/tcrtfaceletcomposite.html JSF 2.0 application architecture You can extend the JSF application architecture easily in various ways to suit the requirements of your particular application. You can develop custom components, renderers, validators, and other JSF objects and register them with the JSF run time. This section highlights the JSF 2.0 application architecture, as shown in Figure 1. WebSphere Application Server Java EE Enterprise Application JSF Web Application XML/Annotation Faces Servlet Configuration Managed JavaBeans Facelet with JSF JSF Libraries/Tags Validators Events Browser Component Built-in AJAX support Tree ... Business Other Modules – For example, EJB and JPA Logic Figure 1 JSF application architecture 4 Developing Web Applications using JavaServer FacesThe JSF application architecture includes these components:  Facelet pages: These pages are built from JSF components, where each component is represented by a server-side class.  Faces servlet: One servlet (FacesServlet) controls the execution flow.  XML/Annotation Configuration: The configuration of validators and Faces managed beans can be defined either with the XML file faces-config.xml or by using annotations.  Tag libraries: The JSF components are implemented in tag libraries.  Validators: Java classes are used to validate the content of JSF components. For example, user input can be validated according to specific business logic.  Faces managed beans: JavaBeans are defined in the configuration file to hold the data of JSF components. Faces managed beans represent the data model and are passed between the business logic and user interface.  Events: Java code is executed in the server for events, such as pushing a button and invoking business logic.  Ajax: Ajax is supported by JSF 2.0 as a built-in feature. Figure 2 represents the structure of a simple JSF 2.0 application, in this case, our RAD8JSFWeb project. Figure 2 JSF 2.0 application structure within Rational Application Developer Developing Web Applications using JavaServer Faces 5JSF features in Rational Application Developer Rational Application Developer provides a number of rich features to enhance your usage of the JSF framework:  JSF Trace  Integration of third-party JSF tag libraries  Customizable data templates JSF Trace For help debugging your JSF application or reviewing the phases of the JSF lifecycle, you can use JSF Trace. This feature visually displays information about your application at run time, including incoming requests, error messages, and objects in the request, session, and application scopes. JSF Trace is covered in detail in “Debug and troubleshoot JavaServer Faces applications by using JSFTrace in Rational Application Developer” by Yury Kats in IBM developerWorks®, 24 September 2009: licationdeveloper/index.html Integration of third-party JSF tag libraries JSF has a set of standard components for building web pages. These standard components can be supplemented with components from JSF tag libraries that were created by other companies. Rational Application Developer makes it easy to integrate these third-party tag libraries, and even to customize the tooling for these tags. For more information, see “Faces library definitions for third-party JavaServer Faces controls” by Scott Paxton in IBM developerWorks, 18 June 2009: alapplicationdeveloper/index.html Customizable data templates Rational Application Developer makes it easy to generate UI components based on the data structures of your project. Simply by adding a data source, such as a Faces managed bean, to the Page Data view and then dragging it onto your web page, you can create controls that are connected to that data source. For even more control over the controls that are generated on your web page, see “Introduction to JavaServer Faces data templates” by Christie Rice in IBM developerWorks, 25 September 2009: /index.html Developing a web application by using JSF and JPA In this section, we describe a web application that is implemented with JavaServer Faces (JSF) and Java Persistence API (JPA). For each Facelet that we create, a managed bean class is generated. For each action in the Facelet, a method in the managed bean class is invoked. In those methods, we use the JPA Manager Beans to retrieve the necessary data. 6 Developing Web Applications using JavaServer FacesRational Application Developer provides tooling to interact directly with the JPA entities without using a session bean. A JPA Manager Bean is created for each JPA entity with methods, such as find and update. Structure of the JSF web application The sample application consists of the following pages:  Login page (login): Validates a customer’s unique ID. If the ID is valid, display the customer details page.  Customer details page (customerDetails): Shows details (title, first name, and last name) of a customer and the associated account balances. You can find a completed version of the web application in the c:\4883codesolution\jsf\ project file. Setting up the ITSOBANK database The JPA entities are based on the ITSOBANK database. Therefore, we must define a database connection within Rational Application Developer that the mapping tools use to extract schema information from the database. Creating the Derby database The \4883code\database\derby directory provides command files to define and load the ITSOBANK database in Derby. For the DerbyCreate.bat, DerbyLoad.bat and DerbyList.bat files, you must install WebSphere Application Server in the C:\IBM\WebSphere\AppServer folder. You must edit these files to point to your WebSphere Application Server installation directory if you installed the product in a separate folder. In the \4883code\database\derby directory, you can execute the following command files:  DerbyCreate.bat to create the database and table  DerbyLoad.bat to delete the existing data and add records  DerbyList.bat to list the contents of the database These command files use the SQL statements and helper files that are provided in the following files:  itsobank.ddl: Database and table definition  itsobank.sql: SQL statements to load sample data  itsobanklist.sql: SQL statement to list the sample data  tables.bat: Command file to execute itsobank.ddl statements  load.bat: Command file to execute itsobank.sql statements  list.bat: Command file to execute itsobanklist.sql statements The Derby ITSOBANK database is created in the \4883code\database\derby\ITSOBANK directory. Creating a connection to the ITSOBANK database To connect to the Derby ITSOBANK database by using the New Database Connection wizard, follow these steps: 1. Because Derby allows only one connection, stop WebSphere Application Server if it is running and if you accessed the ITSOBANK database. 2. Select Window Open Perspective Other to open the Data perspective. In the Open Perspective window, select Data and click OK. Developing Web Applications using JavaServer Faces 73. In the Data perspective, locate the Data Source Explorer view, which is typically in the lower left in the Data perspective. 4. In the Data Source Explorer, right-click Database Connections and select New. 5. In the New Connection wizard (Figure 3), follow these steps: a. Clear Use default naming convention, and for Connection Name, type ITSOBANKderby. b. For Select a database manager, select Derby. c. For JDBC driver, select Derby 10.2 - Embedded JDBC Driver Default. d. For Database location, click Browse and locate the \4883code\database\derby\ITSOBANK directory. e. Leave the User name and Password fields empty; the Derby database does not require authentication. f. Select Create database (if required). g. Click Test Connection. A window opens and shows the “Connection succeeded” message. Click OK to close the window. h. Click Next. Figure 3 New Connection: Connection Parameters window 8 Developing Web Applications using JavaServer FacesYou can use filters to exclude data objects, such as tables, schemas, stored procedures, and user-defined functions, from the view. Only the data objects that match the filter condition are shown. 6. To see the objects in the ITSO schema, in the Filter window (Figure 4), follow these steps: a. Clear the Disable filter check box. b. Select Selection. c. Select Include selected items. d. From the schema list, select ITSO. e. Click Finish. Figure 4 New Connection: Filter window Developing Web Applications using JavaServer Faces 97. When the connection is displayed in the Data Source Explorer, expand ITSOBANKderby Apache Derby ... ITSOBANK. The Schemas folder is marked as Filtered. Only one schema (ITSO) is listed, and the others are filtered (Figure 5). Figure 5 Connection with schema and tables in Data Source Explorer With the filter framework, you can filter out the tables at a more granular level. Suppose that we want to see only tables that start with the letter A. Follow these steps: 1. Expand the schema ITSO, right-click Tables, and select Filter. 2. In the Filter window, follow these steps: a. Clear the Disable filter check box. b. Select Expression. c. In the Name section, select Starts with the characters and type A. d. Click OK. Now you can see only two tables in the Data Source Explorer: ACCOUNT and ACCOUNT_CUSTOMER. 3. To disable the filter, right-click Tables, select Filters, and select Disable filter. Click OK. Configuring the data source You can choose from one of the following methods to configure the data source:  Use the WebSphere administrative console.  Use the WebSphere Enhanced EAR, which stores the configuration in the deployment descriptor and is deployed with the application. While developing JSF and JPA web applications with Rational Application Developer, the data source is created automatically when you add JPA-managed data to a Facelet file. The data source configuration is added to the EAR deployment descriptor. However, if you already defined the ITSOBANKderby data source on the server, you might experience problems, because you can have only one active connection to the database. To clear the connection, remove all applications from the server and then restart the server. 10 Developing Web Applications using JavaServer FacesCreating the JSF Project In this section, we describe how to create a dynamic web JSF project. This application consists of RAD8JSFWebEAR (the enterprise application) and RAD8JSFWeb (the web application). Follow these steps: 1. In the Enterprise Explorer view, right-click and select New Project. 2. In the New Project wizard, select Web Dynamic Web Project and click Next. 3. In the New Dynamic Web Project wizard, define the project details (Figure 6): a. For the Project name, type RAD8JSFWeb. b. Leave Use default location checked. c. For the Target Runtime, select WebSphere Application Server v8.0 Beta. d. Leave the Dynamic web module version at 3.0. e. For the Configuration, select JavaServer Faces v2.0 Project and click Modify. Figure 6 New Dynamic Web Project wizard Developing Web Applications using JavaServer Faces 11f. In the Project Facets window, select the following Project Facets (Figure 7): � Dynamic Web Module: Preselected � Java: Preselected � JavaServer Faces: Preselected � JPA: Select this facet � WebSphere Web (Co-existence): Preselected � WebSphere Web (Extended): Preselected Figure 7 Web project facets for JSF g. Click OK. The value of Configuration in the Dynamic Web Project window changes to custom. h. Click Next. 4. Accept the source folder src and click Next. 5. Select Generate web.xml deployment descriptor and click Next. 6. In the JPA Facet page, complete these steps: a. Leave RAD JPA 2.0 Platform selected for the Platform. b. Leave Library Provided Target Runtime selected for the Type. 12 Developing Web Applications using JavaServer Facesc. For the connection, select the ITSOBANKderby that was defined before. Complete these tasks: � Click Connect if the connection is not active. � In case you did not create the connection to the ITSOBANK database yet, click New Connection to define it. d. Select Override default schema from connection and select ITSO. e. For Persistence class management, select Discover annotated classes automatically. f. Select Create mapping file (orm.xml). See Figure 8. Figure 8 JPA Facet settings g. Click Next. 7. In the JSF Capabilities page, leave Default JSF Implementation selected. 8. Click Finish. The project is created for you. 9. Switch to the Web perspective when prompted. 10.Close the Technology Quickstarts. Developing Web Applications using JavaServer Faces 13Creating Facelet templates Before we create the Facelet web pages, login and customerDetails, we define the template that these pages use. This template helps to provide a consistent format to the application by creating universal header and footer sections. Creating the template Follow these steps to create the template: 1. In the Enterprise Explorer, expand RAD8JSFWeb and select the folder WebContent. 2. Right-click folder WebContent. Select New Folder and type layout as the name. 3. Right-click folder layout and select New Web Page. 4. In the New Web Page window, specify the details for this web page (Figure 9): a. Type itsoLayout for the File Name. b. Select Facelet as the type of Template. Figure 9 Create itsoLayout 5. Click Finish and the itsoLayout.xhtml file opens. 14 Developing Web Applications using JavaServer FacesCreating the header First, we create the header for our template: 1. In the Palette view, go to the Standard Faces Components drawer and select Panel - Grid. 2. Drag this Insert tag to the itsoLayout page (Figure 10): a. In the Design view, you see a visualization of the new tag with the text: grid1: Drag and Drop Items to this area to populate this region. b. Click this text and open the Properties view. c. The h:panelGrid tab is selected in the Properties view. Enter 2 for the number of Columns. Figure 10 Properties view for h:panelGrid 3. We import the logo that we use in the page header. In the Enterprise Explorer, right-click WebContent under RAD8JSFWeb and select New Folder. Developing Web Applications using JavaServer Faces 154. Enter resources for the folder name and click Finish. 5. We create a folder called images inside the resources folder. Right-click the new resources folder and select New Folder. 6. Enter images for the folder name and click Finish. 7. Now that the folders are created, we can import the logo. Right-click images and select Import. Click General File System. Click Next. 8. Locate itso_logo.gif on your file, which is in 4883code/jsf. Browse to the location of this file. Click Finish. 9. The file is imported (Figure 11). Figure 11 itso_logo imported into the project 10.Drag an image from the Standard Faces components drawer of the Palette, dropping it on top of the text grid1. 11.Go to the Properties view. The h:graphicImage tab is selected. Click Browse next to Name. In the Select an image resource dialog window, select itso_logo.gif from under images and click OK. The logo is visible on your page. 12.Switch to the Accessibility tab of the Properties view, which is located under h:graphicImage. Enter ITSO logo for the Alternate Text. 13.Drag an Output from the Palette and drop it on the right side of the logo. 14.Go to the Properties view. The h:outputText tab is selected. Type ITSO RedBank for the Value. 15.Look at the source for itsoLayout. Find the title tag. Change the text from itsoHeader to ITSO RedBank. We created the header for our page that shows the logo of the bank and a title, as shown in Figure 12 on page 17. 16 Developing Web Applications using JavaServer FacesFigure 12 itsoLayout with header 16.Save the page. Creating the content area We create a content area to hold the content of our login and customerDetails pages. Complete these steps to create the content area: 1. Expand the HTML Tags drawer in the Palette. Drag a Horizontal Rule to the page and drop it beneath the Panel Grid. 2. Expand the Facelet Tags drawer. Drag an Insert to the page and drop it beneath the Horizontal Rule. 3. Go back to the HTML Tags drawer. Drag a second Horizontal Rule and drop it at the bottom of the page. 4. Click the text Drop controls here for content area “ no name ” and go to the Properties view. The ui:insert tab is selected. Enter pageContent as the Name, as shown in Figure 13 on page 18. Developing Web Applications using JavaServer Faces 17Figure 13 itsoLayout with content area Creating the footer Complete these steps to create the footer: 1. We create a footer for the page, which consists of a simple text string. Drag an Output from the Standard Faces Components drawer of the Palette and drop it at the bottom of the page. 2. Go to the Properties view. Enter Created by ITSO, 2010 for the Value (Figure 14). Figure 14 itsoLayout with footer 18 Developing Web Applications using JavaServer Faces3. Save the page. Creating Facelets In this section, we create the login.xhtml and customerDetails.xhtml Facelets based on our layout template, itsoLayout.xhtml: 1. In the Enterprise Explorer, expand RAD8JSFWeb and select the folder WebContent. 2. Right-click WebContent and select New Web Page. Complete these tasks: a. Type login for the File Name. b. Select your defined template itsoLayout.xhtml in the folder layout under MyTemplates (Figure 15). Figure 15 Create login.xhtml based on a template 3. Click Finish. The login.xhtml file opens. 4. Use the same steps to create the customerDetails.xhtml Facelet. Developing Web Applications using JavaServer Faces 19Creating JPA Manager Beans In this section, we create JPA Manager Beans and JPA entities for the ITSOBANK database. Creating entities Complete these steps to create the entities: 1. If the server is running and is connected to the ITSOBANK database, stop the server. 2. Open customerDetails.xhtml and go to the Page Data view. 3. Expand JPA. Right-click JPA Manager Beans and select New JPA Manager Bean (Figure 16). Figure 16 Creating a JPA Manager Bean from the Page Data view 4. In the JPA Manager Bean Wizard, click Create New JPA Entities. Important: To retrieve records from the relational database, we require a connection. We use the ITSOBANKderby connection that was created in “Creating the JSF Project” on page 11. 5. In the Generate Custom Entities wizard, define the connection, schema, and tables (Figure 17 on page 21): a. For the Connection, select ITSOBANKderby. b. For the Schema, select ITSO (click Connect if you do not see this schema listed). c. Click the Select All icon to select the four tables. d. Select Update class list in persistence.xml so that the generated classes are added to the file. 20 Developing Web Applications using JavaServer Faces

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.