WebSphere Studio Application Developer Version 5 Programming Guide part 23 potx

? HTML 4.01 Transitional—Includes all elements and attributes of HTML 4.01 strict, plus presentational attributes, deprecated elements, and link targets.. In this example we will add the

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)

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)

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

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

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

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 Color 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

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 http://www.redbooks.ibm.com

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 pressCtrl-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

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

Styles View

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

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