Page Designer
In Page Designer, you can work with HTML, XHTML, JSP, and Faces JSP files as well as with embedded JavaScript code. Within Page Designer, you can move among three representations of each page: Design, Source, and Preview.
Each page provides a different way to work with the file that you are editing. You will probably want to switch between the editor pages by clicking on the tabs at the bottom of the editor. These pages work in conjunction with a variety of other views that are included in the Web perspective, such as the Outline and Properties views, toolbar buttons, menu bar options, pop-up (right-click) menus, and palette components.
Design page
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 Palette, the Project Explorer view, the Thumbnails view, and Microsoft Internet Explorer.
Source page
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 page
The Preview page shows you how the current page is likely to look when viewed in an external Web browser.
To preview any dynamic content (such as JSP tags), you should use the Run on Server option (WebSphere test environment) from the page's pop-up menu in the Project Explorer view.
You can also use the Tools > Launch External Web Browser menu option to open the current file in the default Web browser.
The Preview page is not available for Linux
Working in the Source page
The Page Designer Source editor enables you to directly edit HTML and other markup text, such as JSP pages and embedded JavaScript. Any changes you make in the Page Designer Source page are also reflected in the Design page.
If you add or update an attribute value in the Source page and the Properties view is visible, the Properties view refreshes as well.
The Page Designer Source editor, unlike the structured text editor that can be invoked from outside of Page Designer, supports the use of Quick Edit view.
The Page Designer Source editor has the following text-editing features:
syntax highlighting
Each tag type is highlighted differently, enabling you to easily find a certain kind of tag for editing. For example, if you create a page from a page template, the common area of the page cannot be edited and is highlighted in gray.
unlimited undo and redo
You can 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. In some cases, content assist opens automatically. Press Ctrl + Space to invoke content assist.
user-defined macros
You can access user-defined templates (chunks of predefined code) with content assist to help you quickly add regularly used tagging combinations.
element selection
Based on the location of your cursor, the element selection indicator, located in the vertical border on the left area of the Source page, highlights the line numbers that contain the elements being edited.
pop-up menu options
From the editor's pop-up menu (accessed by right-clicking the mouse at a specific position in the editor), you have many of the same editing options available in the workbench Edit menu.
drag and drop
Objects from the Snippets view, Palette view, and the Gallery view (in conjunction with the Thumbnails 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. Objects can also be dragged in from outside sources (such as from Microsoft Internet Explorer or from a file system).
copy and paste
You can copy text from any of the editors or views that offers text copy ability (such as the source editor and the Design page in Page Designer) and paste them into the Snippets view to create a new snippet.
validation
You can turn on or off and configure an option on the preferences page to also validate your code as you type. Select Window > Preferences > Workbench > Editor > Structured Text Editors and select the Analyze annotations while typing check box.
customization
You can customize the appearance of the editor, for example, displaying line numbers - Window > Preferences > Workbench > Editor > Structured Text Editors > Show line numbers.
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.
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. Typically, all that you will need to do to open the file is to double-click on it in the Project Explorer view. You might need to click the Source tab.
Edit the code as necessary, using any of the available features. 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 can 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.
Note: When you select Edit > Paste on the Source page of Page Designer, you may get an unexpected string, such as 'None'. To work around this problem, close the Properties view.
Note: When you open Page Designer and switch to the Source page, sometimes a gray window is displayed. To work around this problem, resize the window slightly so that the Source page is redrawn.
Working in the Design page
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 that 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 that dynamic data will not be displayed correctly in the Design page; you must run it on a server using the Run > Run on Server option.
The Design page also provides support for frames and free layout mode, which enables you to easily create more complex Web pages. You can 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, and effects efficiently and precisely.
Many actions available through the Page Designer menus are also available from design element pop-up menus, which you access by selecting a page object and right-clicking.
Note: You can configure how certain objects, for example comment and script symbols, are displayed in the Design page by selecting Window > Preferences > Web Tools > Page Design > Appearance or Editing Symbols.
