184 WebSphere Studio Application Developer Version 5 Programming Guide This is a mostly dynamic page. The user may check the transaction number, date, type, and amount. The color of the table rows alternate for readability reasons. Finally, if anything goes wrong in the regular flow of events, the exception page is shown to inform the user (Figure 7-6). Figure 7-6 RedBank exception page (showException.jsp) The only dynamic content in this page is the message displayed to the user. In the example shown in Figure 7-6, we entered an invalid customer ID. Facade We will use a copy of the facade in the Web application. It is better to have the facade in the Web application to be able to access a different model that is implemented in another project (for example as EJBs). Application flow The flow of the application is shown in Figure 7-7: The view layer is comprised of one HTML file (index.html) and four JSPs. You will implement the index.html and the listAccounts.jsp. The control layer is comprised of four servlets and four action classes. The PerformTransaction servlet passes control to one of the action classes. You will implement the ListAccounts servlet. The model layer is comprised of the facade and four model classes. All interactions from the servlets and actions classes go through the facade, the Banking class. The model is available in the ItsoProGuideJava project, which will be a utility project in the enterprise application. Chapter 7. Developing Web applications 185 Figure 7-7 Banking application flow Creating a Web project In Application Developer, you create and maintain Web resources in Web projects. They provide a development environment that enables you to perform activities such as link-checking, building, testing, and publishing. Within a Web project, Web resources can be treated as a portable, cohesive unit. Web projects can be static or dynamic. Static Web projects are comprised solely of static resources, which can be served by a traditional HTTP server (HTML files, images, and so forth), and are useful for when you do not have to program any business logic. J2EE Web projects, on the other hand, may deliver dynamic content as well, which gives them the ability to define Web applications. A Web application contains components that work together to realize some business requirements. It might be self-contained, or access external data and functions, as it is usually the case. It is comprised of one or more related servlets, JavaServer Pages, and regular static content, and managed as a unit. Throughout this chapter, we will create both static and dynamic content. Thus, we need a J2EE Web project to support our tasks. accountDetails listTransactionslistAccountsindex ListAccounts AccountDetails PerformTransation ListTransactions Deposit Withdraw Transfer Invalidate Session showException Bank - Customer - Account - TransRecord Banking VIEW CONTROL MODEL Facade 186 WebSphere Studio Application Developer Version 5 Programming Guide Project name and features To create a new Web project, select File -> New -> Web Project . The dialog in Figure 7-8 is displayed. Figure 7-8 Create a Web project wizard: name and features Most of the time you will just have to set the project’s name and type. In our case, we are creating a new J2EE Web project named ItsoProGuideBasicWeb. Advanced users may also want to change the other options on the window: Use default—Deselect the check box to change the project file location. Web project features—Select one or more of the various options to add additional features to your Web project. When you select a feature, a detailed description is provided for you. For now, we will just use a default CSS file. Later on you will be introduced to more advanced features. Chapter 7. Developing Web applications 187 Enterprise application features Click Next to move to the wizard’s second page (Figure 7-9). Figure 7-9 Create a Web project wizard: enterprise application J2EE Web modules, such as the project we are creating, run exclusively within enterprise applications. For this reason, you have to either select an existing enterprise application project, or let the wizard create a new one for you. Type ItsoProGuide in the New project name field. Optionally you can set the advanced options on this page, which are: Context root—The context root defines the Web application. The context root is the root part of the URI under which all the application resources are going to be placed, and by which they will be later referenced. It is also the top level directory for your Web application when it is deployed to an application server. Context roots are case-sensitive, so are all the Java URLs. Many developers like to make their context root all lowercase in order to facilitate the manual entering of URLs. The context root you select must be unique among all Web modules within the same application server cell. Application Developer’s default is to use the project’s name as the context root. J2EE level—You usually want to select the greatest J2EE level that your target application server allows. For WebSphere Application Server Version 5, 188 WebSphere Studio Application Developer Version 5 Programming Guide that would be J2EE 1.3. Selecting any of the two allowed levels will show you details on the supported APIs. Click Finish and the enterprise application and the Web project are created. Adding the banking model as a utility JAR The Web application requires the banking model that is in the ItsoProGuideJava project. To add the ItsoProGuideJava project as a utility JAR file: Expand the ItsoProGuide enterprise application project and open the EAR Deployment Descriptor (double-click). On the Module page (Figure 7-10), click Add under Project Utility JARs. Select the ItsoProGuideJava project and click Finish . The utility JAR file is added. Save the deployment descriptor and close the editor. Figure 7-10 Adding a utility JAR to an enterprise application Chapter 7. Developing Web applications 189 Module dependencies To make the utility JAR available to the Web application we have to specify a module dependency: Open the Web project properties (select the ItsoProGuideBasicWeb project and Properties from the context menu). Select the Java JAR Dependencies page and then select the ItsoProGuideJava.jar file (Figure 7-11). Click OK . Figure 7-11 Project properties: Java JAR dependencies Project properties The project properties dialog can be used at any time to change dependencies or to change the context root, J2EE level, and other features. For example, to change the context root, open the properties and select the Web page (Figure 7-12). 190 WebSphere Studio Application Developer Version 5 Programming Guide Figure 7-12 Project properties: context root Web project directory structure The Web project uses the directory structure shown in Figure 7-13. Figure 7-13 Web Project in the J2EE navigator Chapter 7. Developing Web applications 191 Java Source—This folder contains the project’s Java source code for regular classes, JavaBeans, and servlets. When resources are added to a Web project, they are automatically compiled and the generated files are added to the Web Content\WEB-INF\classes folder. By default, the contents of the source directory are not packaged in exported WAR files. If you want them to be, you have to select the appropriate option when exporting the WAR file. Web Content—This folder holds the contents of the WAR file that will be deployed to the server. It contains all the Web resources, including compiled Java classes and servlets, HTML files, JSPs, and graphics needed for the application. – Web Content\META-INF This folder holds the MANIFEST.MF file, which describes the Web module’s external dependencies. – Web Content\theme Contains cascading style sheets and other style-related objects. – Web Content\WEB-INF This directory holds the supporting Web resources for the Web module, including the Web deployment descriptor (web.xml), IBM WebSphere extensions’ descriptors (ibm-web-bnd.xmi and ibm-web-ext.xmi), and the classes and lib directories. – Web Content\WEB-INF\classes Contains the project’s Java compiled code for regular classes, JavaBeans, and servlets. These are the Java classes that will be published to the application server and loaded in run-time. The class files are automatically placed in this directory when the source files from the Java Source directory are compiled. Any files placed manually in this directory will be deleted by the Java compiler when it runs. – Web Content\WEB-INF\lib Contains utility JAR files that your Web module references. Any classes contained in these JAR files will be available to your Web module. Important: Any files not under Web Content are considered design time resources (for example .java and .sql files) and will not be deployed when the project is published. Make sure that you place everything that should be published under the Web Content folder. 192 WebSphere Studio Application Developer Version 5 Programming Guide Importing existing resources In most cases you do not have to start a Web project from scratch; rather you import existing external resources into your Workspace. Application Developer lets you import resources from a wide selection of sources, such as: EAR, WAR, JAR, ZIP, and RAR files Existing projects in the workspace Existing WebSphere Studio V4 ClearCase projects Folder and files from the file system FTP and HTTP sites As mentioned earlier, you will only develop a small part of our sample application. The rest of the resources have been made available for you and have to be imported now. Select File -> Import to open the import wizard. Select WAR file and click Next to proceed to the second page (Figure 7-14). Figure 7-14 Importing resources from a WAR file Chapter 7. Developing Web applications 193 Select the WAR file by clicking Browse and navigating to \sg246957\sampcode\dev-web\initial\ItsoProGuideBasicWeb.war. Because we have already created our Web project, select Existing and click Browse . A small dialog pops-up and lets you select the ItsoProGuideBasicWeb project. Click OK to continue. The Context Root and Enterprise application project fields are automatically filled in for you. Select Overwrite existing resources without warning and click Finish to import the resources. Creating static Web resources Now that you have imported the initial set of resources for our sample application, it is time that you learn how to develop your own. We will start by creating a static web resource: an HTML page. Page Designer Page Designer is the main Application Developer tool used by Web designers to create HTML pages. It is a WYSIWYG editor that generates the underlying HTML code and frees the Web designer to concentrate on the visual aspect of the page rather than on the details of HTML syntax. Page Designer currently supports the HTML 4.01 specification. The Page Designer shows three views of an HTML page: design, source, and preview. In the Design view the work is done visually. In the Source view you manually edit the HTML code. You can use the content assist feature, the same as for editing Java files. Pressing Ctrl-Space will bring up a pick list of context-appropriate selections to choose from. The Preview view shows what the page will look like to the user, and thus is read-only. Note: As you can see, you could have created the enterprise application project, the Web project, and imported the resources in just one step using this wizard. What did we import? We imported the facade (itso.bank.facade.Banking, which is a copy of the BankingTest class used in “Banking model” on page 111, the control layer (itso.basicweb.control), three JSPs, an image, and a CSS style sheet. We will develop the missing pieces of the application. . your target application server allows. For WebSphere Application Server Version 5, 188 WebSphere Studio Application Developer Version 5 Programming Guide that would be J2EE 1.3. Selecting any. Customer - Account - TransRecord Banking VIEW CONTROL MODEL Facade 186 WebSphere Studio Application Developer Version 5 Programming Guide Project name and features To create a new Web project, select . 184 WebSphere Studio Application Developer Version 5 Programming Guide This is a mostly dynamic page. The user may check the transaction