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