WebSphere Studio Application Developer Version 5 Programming Guide part 22 pps

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, yo

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

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

accountDetails listTransactions listAccounts

index

ListAccounts AccountDetails PerformTransation

ListTransactions Deposit Withdraw Transfer Invalidate

Session

showException

Bank - Customer - Account - TransRecord

Banking

VIEW

CONTROL

MODEL

Facade

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

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

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

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)

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

򐂰 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

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

򐂰 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

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