Use Page Designer to add and modify HTML and JSP content, including the use of JavaScript

Page Designer

Page Designer allows you to work with HTML files, JSP files, and embedded JavaScript. Within the Page Designer, you can move among three pages that provide different ways for you to work with the file that you are editing. You can switch pages by clicking on the tabs at the bottom of the editor pane. These pages work in conjunction with the workbench Outline and Properties views, tool bar buttons, menu bar options, and context (right-click) menus.

The HTML Syntax Validator included in WebSphere Studio validates HTML basic syntax and HTML DTD compliance for HTML and JSP files created in Page Designer.

Working in the Design page - overview

The Design page of Page Designer is the WYSIWYG mode for editing HTML and JSP files. As you edit in the Design page, your work generally reflects the layout and style of the Web pages you build without the added complexity of source tagging syntax, navigation, and debugging. Although many tasks can also be performed in the same way in the Source page, the Design page provides full access to Page Designer menu options, context menu actions, view-specific GUI options (such as those in the Styles view), and drag and drop behavior.

NOTE: To improve the predictability of drag and drop behavior when editing, it may be advisable to deselect the Link Navigator selection to active editor option, which is accessed by selecting Window > Preferences > Workbench. In some cases, if the option is active, it will be impossible to establish the correct file focus to drag and drop successfully.

The Design page also provides support for frames and layout support, which enables you to create more complex Web pages quickly, because you see the immediate impact of design decisions more quickly than you would using a text editor. You can change the composition and attributes of pages, tags, images, effects, and so forth efficiently and precisely.

Many actions available through the Page Designer menus are also available from design element context menus, which you access by selecting a page object and right-clicking.

Design Tab

Working in the Source page - overview

The Page Designer source editing capability enables you to directly edit the HTML and other markup text, such as JSP pages and embedded JavaScript, for a Web page. Any changes you make in the Source page are also reflected in the Design page. If the change involves the addition or removal of a tag, it will also be reflected in the Outline view. If you add or update an attribute value in the Source page and the Properties view is visible, the Properties view will refresh as well.

The Source page has many text editing features, such as:

There are several ways you can enter, insert, or delete tags and text in the Source page:

Often, you have more than one way to perform a specific task. For example, if you want to insert a new table in your file you can accomplish this in the following ways:

To edit an HTML or JSP file in the Source page, follow these steps:

  1. Open the HTML or JSP file that you want to work with in Page Designer. You may need to click the Source tab. Typically, all that you will need to do to open the file is to double-click on it in the J2EE Navigator view.

  2. Edit the code as necessary, using any of the available features. As you move the cursor within your file (or select items from the Outline view), the element selection indicator will highlight the line numbers that encompass the element. You can use smart double-clicking behavior to select attribute values, attribute-value pairs, and entire tag sets to quickly update, copy, or remove content.

  3. At intervals, you may wish to format individual elements, or the entire document to restore element and attribute indentation to see nesting hierarchies more clearly in the file.

  4. Save the file.

Source Tab

Creating JavaScript files

Follow these steps to create a new JavaScript file:

  1. From the Web perspective, select File > New > JavaScript File to launch the New JavaScript File wizard.

  2. Select the appropriate container for the file from the list of project folders (and subfolders). The folder that you choose should be under the Web Content folder of the Web project. If a JavaScript file that is included in a J2EE Web project is not stored under this folder, then it will not be included in the WAR file that is deployed to the server. In addition, link validation will not encompass files that are not under the Web Content folder.

  3. Type a file name into the appropriate field.

  4. Select the appropriate code generation model from the Model drop-down list. See the description directly below this field to determine which model to use.

    New JavaScript File

  5. Click Finish to create the file in the project that you have selected. The file will open in the JavaScript editor.

Editing JavaScript files

The JavaScript editor lets you edit JavaScript files directly. If you add or update a function in the Source view and the Outline view is visible, the Outline view is refreshed as well.

Any changes you make in the Source page can be previewed using the Preview page.

JavaScript icon

To edit JavaScript in the source editor, follow these steps:

  1. Open a file that contains JavaScript by selecting the file name in the Project Navigator and right-clicking.

    • If it is a JavaScript file, click Open With > JavaScript Editor.

      Open With > JavaScript Editor

    • If it is an HTML or JSP file, click Open with > Page Designer and make sure that the Source tab is selected.

  2. If you are editing an HTML or JSP file, go to the JavaScript code in the Source view. The JavaScript portion of the file appears in the Attributes view. (You can edit there, but the Attributes view does not support source editor features such as content assist and dragging objects from the Snippets view.)

  3. Edit the code as necessary, using any of the available features. You can add or delete functions in any of the following ways:

    • Dragging objects from the Snippets view

    • Typing functions directly

    • Using content assist to receive prompting for valid function calls

    JavaScript editing

  4. Save the file. Preview new page.

    JavaScript preview

Professional hosting     Belorussian informational portal         Free SCWCD 1.4 Study Guide     Free SCBCD 1.3 Study Guide     Free SCDJWS 1.4 Study Guide     SCDJWS 1.4 Quiz     IBM Test 000-287. Enterprise Application Development with IBM WebSphere Studio, V5.0 Study Guide     Free Mock Exam Engine