WebSphere Studio Application Developer Version 5 Programming Guide part 23 potx

194 WebSphere Studio Application Developer Version 5 Programming Guide
Changes in the Design and Source views will automatically update each other,
as well as the preview view. You can also preview your page using an external
Web browser by selecting
Tools -> Launch External Web Browser -> Default Web
Browser
.
Syntax validation
When you save an HTML page, it will not be automatically validated for syntax
compliance by default. To manually validate the syntax of an HTML page, select
Tools -> Validate HTML Syntax
.
Alternatively, you can choose to have Application Developer automatically do this
for you, a setting that can be platform-wide (
Window -> Preferences ->
Validation
) or project-wide (
Properties -> Validation
, on the Web project's context
menu).
To demonstrate the basic capabilities of Page Designer, we will walk you through
the building of a simple HTML page. In the next section, we discuss in more
detail how to use servlets and JSPs to provide dynamic content on our
application.
Create a simple HTML page
To add a new HTML page to a Web project, select the Web Content folder in your
Web project and
New -> HTML/XHTML File
from its context menu. This displays
the dialog shown in Figure 7-15, through which you give the page a name and a
location.

Figure 7-15 Create a new HTML/XHTML file wizard (page 1)
Chapter 7. Developing Web applications 195
Because we had the Web Content folder selected, the wizard automatically fills in
the folder field. You can change it by typing in a new value, or clicking
Browse
.
The other important information that you have to provide on this page is the file
name, in this case index. You may or may not type the file’s extension. If you do
not, the .html extension is added for you by the wizard.
The other field lets you specify the document’s markup language. In our case, it
should just be the default value of HTML, but other options would be HTML
Frameset, XHTML, or XHTML Frameset.
The Extensible HyperText Markup Language (XHTML) is a class of languages
and modules that reproduce the HTML language in valid XML syntax. It is useful
when you need to process HTML with XML-based user agents, which require
syntactically accurate documents.
Finally, there is the model field, but it is not used in the creation of HTML files.
Click
Next
to advance to the next page on the wizard (Figure 7-16).
Figure 7-16 Create a new HTML/XHTML file wizard (page 2)
196 WebSphere Studio Application Developer Version 5 Programming Guide
The wizard’s second page allows you to change the document’s character
encoding, which defaults to the Workbench’s default setting.
It also permits that you change the content and document types. Your options
depend very much on the markup language that you chose on the previous page.
If you chose HTML, for instance, then the content type is limited to text/html and
the document type should be one of the following:
 HTML 4.01 Strict—This is a downsized version of HTML 4.01. It allows for the
writing of more portable documents, because it emphasizes structure over

presentation. Deprecated elements and attributes, frames, and link targets
are not allowed in HTML 4.01 Strict. This document type depends very much
on style sheets for presentation.
 HTML 4.01 Transitional—Includes all elements and attributes of HTML 4.01
strict, plus presentational attributes, deprecated elements, and link targets. It
is a more common document type because it shows nice in browsers that
have limited or no support for style sheets.
 HTML 4.0 Frameset—This is a variant of HTML 4.01 Transitional, used for
documents that contain frames.
Finally, you can associate style sheets with the new document. By default, the file
Master.css is assigned, but you can add and remove files as you see fit. Click
Finish
to complete the wizard.
Using the Page Designer
The Page Designer is opened on the new HTML page and you can now start
adding your page elements. In this example we will add the following elements:
the page title, meta tags to prevent Web clients from caching the page, a table,
an image, a static text, a form, a text field, and a submit button. Make sure you
are in the Design view to perform the tasks described below.
Start by deleting the default text paragraph that the wizard generated. To do that,
simply select the whole paragraph (or click
Ctrl-A
) and then click the
Delete

button.
We will now set the page title and add the meta tags that will tell the Web client
not to cache the page. Most of the times static pages can and should be cached
to improve on performance. However, our static page is referenced not only
directly (by its file name) but also by a servlet (InvalidateSession). We do not

want the Web client to use the cached page when the servlet is called. We
instead want the servlet to receive the request again.
Select
Page Properties
on the document’s context menu. The dialog in
Figure 7-17 is displayed.
Chapter 7. Developing Web applications 197
Figure 7-17 HTML page properties
 Type the page title (RedBank) on the
Page Information
tab.
 Switch to the
Meta Info
tab and enter the last six attributes shown in
Figure 7-17 (the first three should be there already). Click
Add
for each new
line, select
NAME
or
HTTP-EQUIV
from the drop-down menu, and enter the
item and content values.
 Click
OK
to close the dialog. If you switch over to the source tab you will
notice that the HTML code has been updated. The following content has been
added to the head of the document:
<TITLE>RedBank</TITLE>
<META name="Cache-Control" content="no-cache">

<META name="Pragma" content="no-cache">
<META name="Expires" content="-1">
<META content="no-cache" http-equiv="Cache-Control">
<META content="no-cache" http-equiv="Pragma">
<META content="-1" http-equiv="Expires">
Tip: You may alternatively copy and paste the text above directly to the HTML
source through the Source view.
198 WebSphere Studio Application Developer Version 5 Programming Guide
Our next step is to insert a simple table to hold our logo. Position the cursor on
the top of the page and then select
Table -> Table
. Our table will have just one
row and two columns, as shown on Figure 7-18. After setting the correct values,
click
OK
.
Figure 7-18 Insert a table dialog
The new table is inserted, and the first cell selected. Both cells should be of the
same size and very small, because they are still empty.
We do not want the table to have visible borders. Select the table (or any of its
cells) and
Attributes
(context) or select
Window -> Show View -> Attributes
. Set
the border attribute to 0 (Figure 7-19).
Figure 7-19 Table attributes
Now let’s fill the table with content. Select the left cell and type RedBank. We want
this text to be formatted as a heading 1. To accomplish this, select it and then
click

Format -> Paragraph -> Heading 1
. We also want the first three characters
(Red) to be in red. Select them and then click
Format -> Font
. Type red on the
color field and click
OK
.
Chapter 7. Developing Web applications 199
Alternatively, you can use the colors view to carry out the same task. With the
text still selected, select
Window -> Show View -> Colors
to display the colors
view. Select the color red from the palette (#FF0000). Finally, make sure the target
attribute is set to
Text Colo r
and then click the larger red box.
The second table cell should contain an image: itso.gif. It was imported along
with the rest of the resources and can be found in the Web Content\images folder.
Open the thumbnail view by selecting
Window -> Show View -> Thumbnail
and
then select the images folder in the J2EE Navigator view. You should now see the
thumbnail of the imported image, as shown in Figure 7-20. Simply drag and drop
it into the second table cell. Alternatively you can also expand the images folder
and drag/drop the itso.gif file into the second table cell.
Figure 7-20 Thumbnail view
Our next task is to place a second heading on the page, right after the table that
we have just created. Type the text
Welcome to the ITSO Bank

and format the
text as a heading 2.
After the heading comes a form, where the user can enter information that will be
sent back to the server. Click
Insert -> Form and Input Fields -> Form
. The form
should have a descriptive text that reads
Please, enter your customer ID in the
field below:
, a text field named customerNumber (
Insert -> Form and Input Fields
-> Text Field
) and a
Submit
button (
Insert -> Form and Input Fields -> Submit
Button
, set the label to
Submit
). The elements should be separated by a blank
line. The resulting form should look like Figure 7-21.
Figure 7-21 Example HTML form
200 WebSphere Studio Application Developer Version 5 Programming Guide
Finally, we will create an HTML link to another Web site. Insert the text
For more
information on ITSO and RedBooks, please visit our Internet site
at the very end
of the document. Highlight the text
Internet site
and select

Insert -> Link
. On the
URL field, enter .
The edited page in the Design view is shown in Figure 7-22.
Figure 7-22 Example HTML page
To save the page and validate your changes, select
File -> Save index.html
, or
alternatively press

Ctrl-S. You may now close the editor window.
Using the CSS Designer
Cascading style sheets (CSS) allow authors and readers to attach multiple
presentation styles (such as fonts, colors, and spacing) to an HTML document.
By applying the same set of styles to all the presentation files of a Web
application, you can give it a much more homogeneous and coherent look, just
like a standard set of widgets would do to a GUI application.
Application Developer supports the following World Wide Web Consortium
(W3C) cascading style sheet standards:
 CSS1 (cascading style sheet level 1)
 CSS2 (cascading style sheet level 2)
 CSS Mobile Profile 1.0
In addition, the WAP Forum standard WCSS 1.0 (WAP CSS 1.0) is also
supported.
Chapter 7. Developing Web applications 201
As was mentioned earlier, you can have Application Developer create a default
CSS for you when you create a project. You can still create as many CSS files as
you like, but for now the default one will do. We just have to make some
modifications to it.
Application Developer provides a special editor to modify CSS files: the CSS

Designer. CSS Designer shows the source of a CSS file, and enables you to edit
styles with the help of syntax highlighting, content assist, and preview function.
The modifications made in CSS Designer are immediately applied to the design
page of Page Designer if the HTML file has a link to the CSS file.
To access the CSS Designer, double-click the existing style sheet in your Web
project (Web Content\theme\Master.css). This will bring up the style sheet editor,
comprised of source and preview panes, and the styles view (Figure 7-23).
Figure 7-23 CSS Designer: style sheet editor
Source Pane
Preview Pane
Styles View
202 WebSphere Studio Application Developer Version 5 Programming Guide
If you are familiar with CSS file syntax, you can use the source pane to edit the
file directly. Just like when editing HTML files, you can use the content assist
feature to help you select values. If you press Ctrl-Space, a pick list of choices
appropriate to where the cursor is currently positioned will be displayed.
If you prefer, you can instead use the CSS Designer dialogs to edit or add styles
(accessible through the styles view, or through the style menu). These dialogs
are context sensitive and will open up on the style that is currently selected in the
editor.
Finally, the preview pane shows you how the styles will look like when applied to
an HTML file. By default, a sample HTML file is used, but you can choose to
preview the style changes with any file on your Web project.
For our example, we will change the appearance of two HTML elements: H1 and
H2. The first one will be edited directly through the source pane. Find the H1
style definition and manually change the color attribute to black. After edited, the
style source should look like the following:
H1
{
COLOR: black;

FONT-FAMILY: 'Times New Roman';
TEXT-TRANSFORM: capitalize
}
The second style will be changed via the editor's dialog. Double-click the H2 style
in the styles view to bring up the style properties dialog (Figure 7-24).
Figure 7-24 Style properties editor
Chapter 7. Developing Web applications 203
Change the following attributes: font color to white; background-color to #6098C8;
and padding in all directions to 2px. The items marked with an asterisk are the
items that have been changed. After the changes have been applied, the H2
style source should look as follows:
H2
{
COLOR: white;
FONT-FAMILY: 'Times New Roman';
TEXT-TRANSFORM: capitalize;
background-color: #6098C8;
padding: 2px;
}
Save your changes and close the style editor. Open up the index.html file and
verify its new look (Figure 7-25).
Figure 7-25 Example HTML page with CSS applied
Creating dynamic Web resources
There are many ways to create dynamic Web applications. The most
time-consuming method is to build the pages manually, by writing the code
line-by-line in a text editor. An easier and more productive way is to use the
Application Developer wizards in conjunction with content-specific editors, such
as the HTML and CSS editors, which we have already used.
The Web development wizards help you quickly create forms, HTML pages,
JavaServer Pages (JSPs), and Java servlets, even if you are not an expert

programmer. These files can be used as is, or modified to fit your specific needs.