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:
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:
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.
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:
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.
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.
Before you create the frameset and its files, create a folder to store them in. To create a new folder:
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:
This means that index.html will be the file that contains the frameset instead of becoming a file called into the frameset.
A bar is displayed, splitting the bottom frame into two vertical frames.
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.
To confirm that all of the files have been created you can look at your project folders in the Project Explorer and Links view.
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.
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.
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.
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:
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.
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:
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.
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:
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.
Next you can work on fixing the broken links in 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.
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:
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:
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.
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.
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:
Next you can resize the frames and set some additional 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.
The frameset attributes specify items such as column and row sizes as well as border options.
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.
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.
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.
If you are prompted to save title.html, menu.html, and main.html, click Yes.
Now that you have finished defining your frameset, you can test the Web page. To preview your work:
If you want to see more of the page you can do so by dragging the borders of the editor area.
A Web browser is launched to display index.html.
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:
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.
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.
Note: Different system settings may affect the appearance of text in your Web page.
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.