Building the intranet home page

Creating a new project

The Web example that you just loaded is a Web project that contains a fully developed application. Now you need to create a new project to store your own work in. When the new project is added to the workbench, a template tree structure for your application is created for you.

To create the new project:

  1. Click File > New > Project. The New Project wizard is displayed.
  2. Expand Web and select Dynamic Web Project.
  3. Click Next.
  4. In the first wizard page, provide the following values:

The default directory structure in the Web project adheres to the J2EE specification for role-based team development. This specification defines a project directory structure for the location of Web content files, class files, class paths, deployment descriptors, and supporting metadata. The WebContent folder and JavaSource folder are added automatically to help you organize your work during development.

By default, Web projects have the following folders and files:

JavaSource
This folder is used to store Java source code. It contains the project's source Java beans and servlets. When these resources are added to a Web project, they are automatically compiled and the generated files are added to the WEB-INF/classes directory. By default, the contents of this directory are not packaged when Web archive (WAR) files are created.

WebContent
This directory is structured according to the J2EE specification for WAR files. Files in this directory are deployed to the Web server when you publish. You must create all of your Web resources, including HTML, JSP, and graphic files, in the WebContent folder. If the files are not placed in this directory or one of its subdirectories, links to them will be flagged as broken. When you run your application on a local server or publish it remotely, files that are not in the WebContent folder will not be found. By default, this folder contains three subfolders:

theme
The theme folder is the recommended place to store cascading style sheets and common graphics. This folder is only created if you kept the default to create the Master.css, which is a sample cascading style sheet that you can use as a template.

WEB-INF
As described in the Java Servlet specification, the WEB-INF folder contains the supporting resources for a Web application, including the project's deployment descriptors (web.xml), and the classes and lib folders, which are not served directly to a client.

META-INF
As described in the Java Servlet specification, the META-INF folder holds the MANIFEST.MF file which stores extra info about the WAR file that will be created.

Libraries
The Libraries "folder" exists only in the Project Explorer view. The Libraries node is not a real folder (as in a physical directory on the file system); it is just a node representing the libraries that are used for this Web Project. This folder contains representations of the library JAR files defined in the project properties, even if the JAR files themselves do not exist in the project. Three types of JAR files are shown:
  1. JAR files included in the project's WebContent/WEB-INF/lib directory
  2. JAR files external to the project, such as j2ee.jar and rt.jar (these files could be mapped through the EAR or through the Eclipse Java classpath, for example)
  3. Project libraries, which are special references to a Java project

When a Web project is exported, for all three types of JAR files, libraries are shown in classpath order. For the project libraries, a JAR file is automatically created from the Java project to be used by the Web application during runtime. Also a JAR file is created for each Java project mapped as a Web Library Project.

Note: If any of the defaults are altered in the Workbench preferences, the described file structure and behaviors may differ.

Creating the company intranet entry page

Now that you have created a new Web project to store your files, you can start building your Web application. The entry page (index.html) will contain a frameset that calls three other files. To create a new HTML file:

  1. In the OurCompany project, select the WebContent folder.
  2. From the main menu bar, click File > New > HTML/XHTML File. (If you do not see HTML/XHTML File on the menu, switch back to the Web perspective before completing this step.) The Folder name is automatically filled in the wizard.
  3. In the File name field, type index.html.
  4. Accept the remaining defaults and click Finish.

    Note: By default, the file is linked to a cascading style sheet named Master.css, located in the theme folder. Using a cascading style sheet makes it easy for you to change the look and feel of your Web site without having to change every file manually.

The editor opens, displaying the new file. Next you can add a frameset that references other files.

Creating the frameset

By using a frameset, you can easily control the organization of your Web page. One standard Web page design consists of a banner or title in a horizontal top frame, navigation links in a narrow left frame with content in a wider frame on the right. In this example, each frame calls a different file. IBM Rational Developer provides you with an easy way to create a frameset and the files that it calls. You can define the called files and adjust the frame sizes to fit the content of the frames.

Creating a new folder to store the frameset files

Before you create the frameset and its files, create a folder to store them in. To create a new folder:

  1. Select the WebContent folder in the OurCompany project.
  2. Click File > New > Folder.
  3. In the Folder name field, type Menu.
  4. Click Finish.

Defining the frameset

There are two ways to create a frameset visually using Page Designer. You can start by creating child frames or by creating a parent frameset. When you start creating the frames you can specify that the current file will be inserted into a frame and a new frameset parent will be created. Then when you save the file you will have an opportunity to name the frameset file and any other files that were created when you split the frames. The frameset parent file is the file that contains tagging that defines the frameset and calls other files into the frames.

Alternatively, you can specify that the current file will become the frameset file and then you will be given an opportunity to name the file called by each frame.

To define the frameset:

  1. Ensure that index.html in the OurCompany project is open in the Design page by clicking the Design tab.
  2. From the main menu bar, click Frame > Split Frame > Split Horizontally.
  3. In the Split Frame dialog box, select In the frameset parent.

    Split Frame window

    This means that index.html will be the file that contains the frameset instead of becoming a file called into the frameset.

  4. Click OK. A bar is displayed, splitting the frame into two horizontal frames.
  5. Place the cursor in the bottom frame.
  6. From the main menu bar, click Frame > Split Frame > Split Vertically.

    A bar is displayed, splitting the bottom frame into two vertical frames.

  7. From the main menu bar, click File > Save All.
  8. When you create a file that contains a frameset, IBM Rational Developer creates a placeholder file for each frame, called newpageX.html. When you save the frameset file the first time, you are asked if you want to save these default files. The frame containing the referenced file is highlighted so that you can tell which file you are saving.

    When the Save As dialog opens, the top frame in the Design page is highlighted. Navigate to the Menu folder that you created earlier. In the File name field, type Title.html, and click OK to save this frame.

  9. Now the left frame is highlighted. In the Save As dialog, navigate to the Menu folder. In the File name field, type Menu.html, and click OK.
  10. The right frame is highlighted. In the Save As dialog, navigate to the Menu folder. In the File name field, type YourCoIntro.html, and click OK.

To confirm that all of the files have been created you can look at your project folders in the Project Explorer and Links view.

Checking links

In the Project Explorer view, expand the Menu folder. You can see that the new files have been created. To ensure that they are being called into the frameset correctly, you can look at a hierarchical view of the files in your project.

To look at the Links view, from the main menu bar, click Window > Show View > Links. This view provides you with a graphical view of the link relationships between your files. Each type of link is represented by a different kind of arrow. For example, an arrow with a straight, plain line indicates a link to a file that is local to your project, an arrow with lines through it indicates a broken link, and an arrow with a question mark indicates a link to an external URL.

Links view window

If you do not see four arrows connecting index.html to the files that it calls, in the Project Explorer view, click index.html. Clicking the file that has focus (depicted by the large icon) refreshes the Links view. To change which file has focus, right-click a different file in the Links view and, from the pop-up menu, select Become new center.

Defining the files in the intranet entry page

In this section, you will further define the files that make up the entry page. To do this quickly, you will copy some content from files in the YourCompanyExample project to files with the same names in the OurCompany project.

First, you must ensure that your preferences are set correctly to automatically copy files to the current folder when content is copied into a new HTML file.

Note: Files are not automatically copied across folders if the projects reference the same Enterprise Application Project (EAR files); consequently, files are never copied across folders in the same project.

  1. Click Window > Preferences .
  2. Expand Web Tools and select Links.
  3. Ensure that the default values Copy all referenced files automatically (except HTML and JSP) to the current project and Copy the file to the current project if its location is not accessible from this project are selected.
  4. Click OK.

Defining Title.html

The Title.html file in the example project uses an HTML table to control the position of graphics and text in the horizontal top frame (the banner). Defining the Title.html file will show you how to copy content from one Web page to another and illustrate how to use the Properties view from the Design page and the Source page.

To base the design of your Title.html file on the YourCompanyExample:

  1. In the Project Explorer view, expand YourCompanyExample, then expand WebContent, then expand Menu.
  2. Open Title.html.
  3. In the Design page, select all of the page elements (Edit > Select All).
  4. Right-click in the editor and click Copy.
  5. Close the YourCompany copy of Title.html.
  6. In the OurCompany project, open Title.html.
  7. Right-click in the editor and click Paste.
  8. To set the background color and text color, right-click in the Design page outside of the table and select Properties from the pop-up menu. The Properties view for the [BODY] tag is displayed in the lower area of the workbench.
  9. In the Background > Color field , type #000066.
  10. In the Text > Normal field, type white.
  11. To set the background color inside of the table, select the Source page and place the cursor in the opening TABLE tag. The Properties view displays the properties for the [TABLE] tag.
  12. In the Background > Color field on the TABLE tab, type #000066.
  13. Save Title.html.

Note: The embedded image files have been copied to the current folder

You have finished defining Title.html. Next you can define Menu.html, the file that provides navigation links in the left frame.

Defining Menu.html

Menu.html is a list of links in a table. It provides users with navigation in the left frame. This section allows you to practice copying and pasting elements between Web pages. Also, in this section, you learn a new way to change the focus from one node, or tag, to another.

To define your own Menu.html file based on the YourCompanyExample:

  1. In the Project Explorer view, expand YourCompanyExample, then expand WebContent, then expand Menu.
  2. Open Menu.html.
  3. In the Design page, select all of the page elements (Edit > Select All).
  4. Right-click and select Copy.
  5. Close the YourCompany copy of Menu.html.
  6. In the OurCompany project, open Menu.html.
  7. Right-click in the Design page and click Paste.
  8. To set the background image, right-click in the Design page anywhere inside of the table and select Properties from the pop-up menu. The Properties view for the [TABLE] tag is displayed in the lower area of the workbench.
  9. In the Properties view, click the button beside the Background > Image field on the TABLE tab; select Browse to browse for the image file. Use the File selection dialog to navigate to YourCompanyExample/WebContent/images and select stripes2.gif; click OK.
  10. To set the text color, click the pull-down menu in the Design page title bar (which currently reads TABLE) to change the focused node; select BODY. The Properties view displays the attributes for the [BODY] tag.
  11. Click the button beside the Background > Image field; select Browse to browse for the image file. Use the File selection dialog to navigate to YourCompanyExample/WebContent/images and select stripes2.gif; click OK.
  12. In the Text > Normal and Text > Link fields, type white.
  13. Save Menu.html.

In the Project Explorer view, click Menu.html to refresh your view of the Links view.

Note: Several of the links are broken. When you copy content into an HTML file that is open in the Design page, the default properties settings ensure that embedded files, like graphics, are copied to your local directory. Referenced files that can contain hyperlinks are not copied automatically for you, so links to those files remain broken. These broken links can be ignored for now.

Messages are displayed in the Tasks view when you perform workbench activities related to creating and updating resources. For example, messages related to the broken links are now displayed in the Tasks view. The Tasks view can function as an automatic To-Do list; ensure that you always correct any errors recorded in the Tasks view. Clicking any of the column headings, such as Resource or In Folder will reorganize the task list by that heading. Double-clicking any of the errors or warnings will open the Source view to the line that contains the error or warning.

Defining YourCoIntro.html

YourCoIntro.html is the file displayed in the main frame (on the right side of the entry page). You have already created your own version of YourCoIntro.html to act as a placeholder in your frameset design, but instead of copying and pasting the page elements into the file, you will copy the entire file from the YourCompanyExample project into the OurCompany project. To copy YourCoIntro.html:

  1. In the Project Explorer view, navigate to the YourCompanyExample/WebContent/Menu folder.
  2. Right-click YourCoIntro.html and select Copy.
  3. Expand the OurCompany project and the WebContent folder.
  4. Right-click the Menu folder, and select Paste.
  5. In the Confirm overwriting dialog box, click Yes to overwrite the file.

Now that you have created all of the HTML files referenced by the frameset in index.html, check the Links view again. To refresh your view of the links, in the Project Explorer view, click index.html in the OurCompany project. All of the links are depicted by solid arrows.

Links view showing links fixed

Next you can work on fixing the broken links in YourCoIntro.html.

Updating YourCoIntro.html

In the Project Explorer view, in the OurCompany project, click YourCoIntro.html to refresh the Links view. In the Links view, you can see that YourCoIntro.html has broken links because the arrows are not solid. When you copy an entire HTML file from one project to another, graphics files are not automatically copied to the local directory unlike when you copy HTML source in the Design page.

Fixing broken links

In the Links view, double-click index.html and select the Design tab. You can see that the background colors for the frames are filled in, but the graphics for YourCoIntro.html are missing. In the Links view, click the + beside YourCoIntro.html. Two graphics are showing broken links:

To fix the link to yourCo01.jpg:

  1. Using the same steps you used to copy YourCoIntro.html to the OurCompany project, copy yourCo01.jpg from the YourCompanyExample/WebContent/images folder to the OurCompany/WebContent/Menu folder.
  2. Open the OurCompany version of YourCoIntro.html. At this point, the image will still appear broken.
  3. In the Design page, right-click the image (yourCo01.jpg) and click Properties. The Properties view is displayed in the lower area.
  4. On the IMG tab, click the button next to the File field; select Browse to browse for the file.
  5. In the File selection dialog, navigate to the OurCompany/WebContent/Menu folder, and select yourCo01.jpg. Click OK.
  6. Save YourCoIntro.html and the link will be fixed.

In the Links view, the number 5 on the arrow with lines through it pointing to clearPixel.gif means that there are five instances of a broken path. To fix these image references, you can use the Fixup Link References utility as follows:

  1. Right-click YourCoIntro.html in the Project Explorer view and select Link Utilities > Fix Broken Links.
  2. Ensure that Group links that go to the same destination is checked. (This collapses all broken links with the same target into one row in the utility.)
  3. Ensure that the clearPixel.gif row is set to fix by selecting the row and clicking Fix; a checkmark icon should appear to the left of the row.
  4. Check that the Fixed link column indicates a path pointing to clearPixel.gif in the Menu folder.
  5. Click Fixup Links; the clearPixel.gif links will be updated with the new path.

    The Link view should now display an unbroken arrow with the number 5 pointing to clearPixel.gif. This indicates that there are 5 clean links.

  6. Save YourCoIntro.html.

Now all of the links to graphics are fixed. There are broken links in the other HTML files, however, for the purposes of this tutorial we will leave them as they are.

Editing text

The OurCompany entry page, index.html, looks very similar to the one in the YourCo example, but the company name is wrong. To fix the references to the company name, you will do a find and replace.

To change the company name:

  1. In the Source page of Title.html, click Edit > Find/Replace.
  2. Type Your Company in the Find field and Our Company in the Replace field. Ensure that the Case Sensitive checkbox is checked.
  3. Click Replace All.
  4. Use the same procedure to change instances of YourCo to OurCo in the content frame (YourCoIntro.html) and navigation frame (Menu.html).
  5. Save and close the files.

Next you can resize the frames and set some additional attributes.

Editing the frame attributes

There are several setting possibilities for frames within framesets. For this tutorial, you will set some basic attributes that will improve the layout and make the entry page more usable. The three frames should have names so that links in the navigation frame can specify target frames.

In this section you will set attributes for the frameset, title frame, the menu frame, and the main frame.

Setting attributes for the frameset

The frameset attributes specify items such as column and row sizes as well as border options.

  1. Open index.html and click the Design page.
  2. Click Frame > Frame Attributes. The Frame Attributes dialog is displayed.
  3. Ensure that the first occurrence of Frameset in the frame tree directory is selected. The entire frameset is highlighted in the diagram below the frame tree.
  4. Set the attributes as they are shown here:

    Frameset column attributes

    These attributes specify that the first row, or the title frame, will be 95 pixels and the bottom row, the menu and main frame, will be the remainder of the screen.

    Note: Click in the Unit column to select a unit of measure; choices include pixels, a percentage (%), or a wildcard (*). The wildcard indicates the remainder of the screen. If you choose to use the wildcard, the Value must be 1.

  5. Click Apply.
  6. Select the second occurrence of Frameset in the frame tree directory; the bottom row of the frameset is highlighted in the frameset diagram.
  7. Set the attributes as they are shown here:

    Frameset column attributes

    These attributes specify that the first column, the menu frame, will be 160 pixels wide. If you only wanted an approximate sizing, you could resize the menu frame by clicking and dragging the frame border until it looks right proportionally. In this case, we set the frame size explicitly. The second column, the main frame, will be the remainder of the screen. This frame needs to be spacious enough that users can read paragraph-style content and view graphics without having to scroll horizontally.

  8. Click Apply.
  9. Click OK to close the dialog.

Setting attributes for the title, menu, and main frames

The frameset attributes have already been specified; therefore, the sizes of rows and columns are already set. The individual frame files called in the frameset must have attributes, such as scroll bar preferences, specified as well.

  1. Open index.html and click the Design page.
  2. Click Frame > Frame Attributes. The Frame Attributes dialog is displayed.
  3. Select the Title.html from the frame tree window; only the title frame is highlighted in the frameset diagram below the tree. The title frame provides context for users so that they know which site or section of a site they are visiting. This title frame has no hypertext links and does not need to be scrollable.
  4. Set the attributes as they are shown here:

    Title attributes

  5. Click Apply.
  6. Select Menu.html from the frame tree directory; only the menu frame is highlighted in the frameset diagram. The menu frame provides users of the intranet entry page with easy access to navigation. This frame contains a list of hypertext links. Because this list could grow long, this frame must be scrollable.
  7. Set the attributes as they are shown here:

    Menu attributes

  8. Click Apply.
  9. Select YourCoIntro.html from the frame tree directory; only the main frame is highlighted in the frameset diagram. The main frame is the content area of the window.
  10. Set the attributes as they are shown in the screen capture below:

    Main Frame Properties window

  11. Click Apply.
  12. Click OK to close the dialog.
  13. Save index.html.

    If you are prompted to save title.html, menu.html, and main.html, click Yes.

Testing your Web page

Now that you have finished defining your frameset, you can test the Web page. To preview your work:

For Windows

  1. Ensure that the OurCompany index.html file is open in the Design page.
  2. Click the Preview tab.

If you want to see more of the page you can do so by dragging the borders of the editor area.

For Windows

  1. Right-click index.html in the Project Explorer.
  2. Select Open With > Web Browser.

A Web browser is launched to display index.html.

Running your Web application

Now that you have completed the first page of your application, you can test and view it as it will be displayed in a browser.

To test your Web page:

  1. In the Project Explorer view, right-click the index.html file in the OurCompany project.
  2. From the pop-up menu, select Run > Run on Server.

    The Server Selection dialog is displayed. If you already have a WebLogic server configured, you can select an existing WebLogic server to test your site. If not, you can create a new WebLogic server.

    1. Select the Manually define a server radio button.
    2. In the Server type field, choose your version of WebLogic Server (e.g. WebLogic v7.0 Local Server) and click Next.
    3. If the selected WebLogic server type does not have a server runtime predefined in Preferences, a page will be presented for you to create the runtime. One should have been created in the Setting up the development and run-time environments section of "Preparing for the company intranet sample application". Fill in the server paths and click Next.
    4. Specify the Domain name, enter the Username and Password of your domain, and click Next.
    5. Add OurCompanyEAR to the list of Configured projects and click Finish.

When you run an application on the server, the Console view opens in the lower area of the workbench displaying a scrolling list of messages. When the WebLogic server has completed starting up, your Web page is displayed in a Web browser.

OurCo entry page -- Running on server

Note: Different system settings may affect the appearance of text in your Web page.

Congratulations!

You have just completed development of your first Web page in IBM Rational Developer. Now you can explore the OurCompany project and experiment with adding additional features to your company intranet site.

Terms of use | Feedback
(C) Copyright IBM Corporation 2002, 2004. All Rights Reserved.