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.
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 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 Source page has many text editing features, such as:
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 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.
You can access user-defined macros (using content assist) to help you quickly add regularly-used tagging combinations
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.
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.
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.
Any changes you make in the Source page can be previewed using the Preview page.
If it is an HTML or JSP file, click Open with > Page Designer and make sure that the Source tab is selected.
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.