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.
Design
The Design page is the WYSIWYG environment that enables you to create and work with a file while viewing its elements on the page. For example, you can see the graphics that you have inserted into the file and continually check the visual presentation of the Web page as you design it. This is in contrast to the Source page, which shows you the HTML or JSP source code for the file, but not the screen presentation. The Design page provides full visual editing capabilities, including the ability to drag and drop from the J2EE Navigator view, the Thumbnail view, and Microsoft Internet Explorer.
Source
The Source page enables you to view and work with a file's source code directly. The Outline and Properties views both have features that supplement the Source page.
Preview
Preview shows you how the current page is likely to look when viewed in Microsoft Internet Explorer (by default).
To preview any dynamic content (such as JSP tags), you should use the Run on Server option (Unit Test Environment) from the page's context menu in the J2EE Navigator view.
You can also use the Tools > Launch External Web Browser menu option to open the current file in a specified version of Netscape Navigator.
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.
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:
syntax highlighting
Each tag type is highlighted differently, enabling you to easily find a certain kind of tag for editing. In addition, syntax highlighting is valuable in locating syntax errors. For example, if you begin a comment in the middle of the document with <!--, everything until the next --> (or the end of the document!) is considered a comment, and will be highlighted. The large highlighted area will indicate that need to add --> to close the comment.
unlimited undo and redo
These options allow you to incrementally undo and redo every change made to a file for the entire editing session. For text, changes are incremented one character or set of selected characters at a time.
content assist
Content assist helps you to finish tags or lines of code and insert macros. Choices available in the content assist list are based on tags defined by the tagging standard specified for the file being edited.
user-defined macros
You can access user-defined macros (using content assist) to help you quickly add regularly-used tagging combinations
element selection
Based on the location of your cursor (or selection in the Outline view), the element selection indicator highlights the line numbers that include an element in the vertical ruler on the left area of the Source page.
context menu options
From the editor's context menu, you have many of the same editing options available in the workbench Edit menu.
drag-and-drop
Objects from the Library view and the Gallery view (in conjunction with the Thumbnail view) can be dragged and dropped in the Source page at the cursor position. In addition, when colors from the Color view and style sheets are dropped in the Source page, the appropriate tagging is applied to the files, although you must display the Design view to see the resulting effects.
There are several ways you can enter, insert, or delete tags and text in the Source page:
Type tags in directly.
Use content assist to receive prompting for valid tags.
Select menu items.
Select toolbar buttons.
Change tags using the Properties view.
Add and remove tags using the Outline view.
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:
Use content assist and select the table macro (either the default table macro or a custom macro that you have created) from the content assist list.
Type new tags in the file.
Copy and paste table tags from the current file or another file.
Combine the steps above to create the table you want.
To edit an HTML or JSP file in the Source page, follow these steps:
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.
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.
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.
Save the file.
Creating JavaScript files
Follow these steps to create a new JavaScript file:
From the Web perspective, select File > New > JavaScript File to launch the New JavaScript File wizard.
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.
Type a file name into the appropriate field.
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.
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.
To edit JavaScript in the source editor, follow these steps:
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.
If it is an HTML or JSP file, click Open with > Page Designer and make sure that the Source tab is selected.
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.)
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
Save the file. Preview new page.
