HTML and JSP Web Designers Quickstart

Last Revision: September 27, 2005

Outline1. Preface 2. Requirements 3. Introduction

1. Content Types 2. Editor Modes

1. Changing Edit Modes 3. Properties and Outline Views 4. Synchronization between Editor Modes and Views

1. Selection Synchronization 2. Design-Source Synchronization 3. Refreshing/Resynchronizing Design Mode

4. Launching the Web Designer, Related Views and Perspective 1. Launching the HTML and JSP Web Designers 2. Opening the Properties View 3. Opening the Outline View 4. Resetting the MyEclipse Perspective

5. WYSIWYG Design Editing Basics 1. Working with Text 2. Working with Web UI Controls 3. Built-in Edit Commands and Key Bindings 4. Working with Context Menus 5. Working with Images 6. Working with CSS

6. Designing JSP, JSF and Struts Web Pages 1. JSF and Struts Tag Library Support

7. Preview Mode 8. FAQ 9. User Feedback

1. PrefaceThis document was written using Sun JDK 1.4.2, Eclipse 3.1 and MyEclipse 4.0. If you notice discrepancies between this document and the version of Eclipse/MyEclipse you are using that make it difficult to follow this guide, please see the User Feedback section for how to provide feedback to the MyEclipse documentation team.

Back to Top

2. RequirementsBelow is a list of software required before using this guide:

• Windows 2000 or XP • Internet Explorer 6 (IE 6) • JDK 1.4+ (Sun or IBM) • Eclipse 3.1 SDK • MyEclipse 4.0 Standard or Professional Edition

Note: visual design features are only supported on the Windows platform.

Back to Top

3. IntroductionThis document provides a quick overview of the concepts, features, and basic operating procedures for the MyEclipse HTML and JSP Web Designers. Both Designers have similar features and the same operations model but are specialized to their type of content. Note this document was created using the MyEclipse HTML Designer.

Following is an overview of both Designers' key features:

User Interface Features

• Multi-mode Editor with toolbar and design palette

• Outline View • Form-based Properties View • 50+ Design Wizards

Edit Modes

• Source • Design (Windows only)

Source Edit Features

• Colored syntax highlighting • Code-assist for HTML, JSP, JSTL, Struts, JSF and custom

tag libraries • Real-time validation as you type • Validation errors displayed in Problems View and the editor

overview margin • Format all or portion of a document

Preview Features

• Design/Source Split screen (Windows only) • Preview

Content-Type Support

• HTML • JSP

Design Edit Features (WYSIWYG)

• Renders HTML, JSP, Struts, JSF controls • Design Palette containing HTML, JSP, Struts,

JSF controls • Visually drag-and-drop/copy/cut/paste UI

controls • CSS Support • Image rendering

• View source content in MyEclipse internal browser • Translate and render Struts and JSF HTML tags to HTML

approximation • Executes JavaScript • Extension point for adding renderers for custom tag-

libraries

Figure-3.1 is a screenshot of the HTML Web Designer in the Design/Source split-screen mode.

Figure 3.1: HTML Web Designer in Design-Source Mode with Properties and Outline Views

Back to Top

3.1 Content-Type Support (HTML, JSP)The MyEclipse HTML Web Designer is specialized towards the creation and editing of HTML files. The MyEclipse JSP Web Designer is geared towards the creation and editing of JSP files including Struts and JSF documents. During the Designer launch process the content of the file being loaded is inspected and the Eclipse platform selects the corresponding HTML or JSP Web Designer based on the document's content type.

Back to Top

3.2 Editor ModesThe Designer provides 4 edit modes to support any style of editing. They are:

• Design Mode - WYSIWYG visual editing mode. The design canvas allows web UI controls to be selected, copied, cut, pasted, and repositioned using drag-and-drop operations. This mode includes an embedded toolbar with text styling operations and a design palette that contains UI web controls that you can add to the design canvas.

• Source Mode - a source code editor for HTML and JSP code that includes smart content-assist, line numbering, syntax colored highlighting, format operations, real-time validation, marking of problematic source as you type, and code formatting .

• Design/Source Mode - a dual panel view with Design Mode in top panel and Source Mode in bottom panel (See Figure-3.1)• Preview Mode - read-only, browser rendered view of the document content. Includes an extensible translation module to include your own renderers for custom tags.

Back to Top

3.2.1 Changing Edit Modes

A tab for each mode is displayed at the bottom-left of the editor panel (see Figure-2). To switch modes simply select the tab for the new mode and the editor will switch to that mode.

Figure 2: Editor Mode Selector

Back to Top

3.3 Properties & Outline ViewsThe HTML and JSP Web Designer feature-sets include a custom form-based property editors for all HTML, JSP, JSF, and Struts tags and a structured Outline View. The Designer property editors are custom forms that accelerate viewing and editing of the most common attributes of each visual tag. Custom property editors are automatically activated and displayed in the Eclipse Properties View when a corresponding tag is selected in the Source panel, Design panel or Outline View. A custom properties editor displayed in the Properties View is highlighted in Figure 3.

The Outline View provides a structured tree view of the Designers content. Nodes in the Outline View can be added, deleted, expanded, and contracted. The contents of the Designer Outline View are displayed in the shared Eclipse Outline View. See Section 4 for instructions on how to open the Properties and Outline Views.

Back to Top

3.4 Synchronization between Editor Modes and ViewsIn order to present an accurate view of a web document's current state across all edit modes and supporting views, two types of information synchronization are maintained by the Designer. The first is selection synchronization. A common selection context is maintained by the Designer between Source and Design Modes and the Outline View and Properties View. The second form of synchronization, known as Design-Source Synchronization, is between the source code of the Source Mode and the WYSIWYG rendered state of the Design Mode.

Back to Top

3.4.1 Selection Synchronization

Selection synchronization enables you to select anywhere in Source Mode, Design Mode or Outline View and have all other corresponding views display the common selection context. Additionally, if the common selection involves an HTML, JSF or Struts tag, the Properties View will display a custom properties editor for that tag. Figure-3 below illustrates a user's selection of the Login button. This results in the Outline View scrolling to and highlighting the HTML <input> tag for the Login button and the Source panel scrolls to and highlights the source line containing the button source code.

Figure 3: Synchronized Designer Views

Back to Top

3.4.2 Design-Source Synchronization

The Source Mode is the master mode to which the Design Mode, the Preview mode, and the Properties and Outline Views synchronize their state. When an edit operation is initiated in the Design Mode, the Properties View or the Outline Views the operation is routed to the Source Mode where it is applied and the source updated. The Source Mode then signals the other modes and views of the specific changes. This causes them to resynchronize their presentation state to that of the Source Mode. When the Designer is in split mode you can observe the source code and rendered design updating and synchronizing in real-time.

There are occasions when the Design Mode is unable to automatically synchronize its state with the Source Mode. When this happens you will see the following:

1. The Design Mode is placed in a read-only mode

2. The normally green Refresh button on the Design Mode toolbar will change to red, 3. The Design Mode cursor will change to the "No Edit" cursor,

This indicates that no input into the design panel can be accepted at the moment.

Figure 4: Design Mode indicating unable to synchronize

Back to Top

3.4.3 Refresh/Resynchronize Design Mode

1. To refresh/resynchronize the Design Mode with the Source Edit Mode press the Refresh button on the toolbar of the Design Mode.

2. Upon completion the Design Mode should once again be editable and the Refresh button will return to its normal green color, 3. You may press the Refresh button at any time regardless of the synchronization state of the editors.

Certain automatic and manually initiated Design-Source mode synchronization operations can be computationally intensive. When this occurs an informative dialog will pop-up to inform you of the operations progress. If large synchronizations are caused by your design edits, these can often be avoided or minimized by making the change in the source view instead. Additionally, synchronization of edits from the design view to the source view is inherently slower than from the source view to the design view. As a result, the source view may be more convenient to use for large edits that cause structural changes in the document.

Figure 5: Progress dialog while syncing design view

The following edit operations will disconnect or unsychronize the design view in the current version of the Visual Web Designer.

• Editing in the <HEAD> element of the Source Mode • Very large or complex Cut/Copy or Paste operations

Back to Top

4 Launching the Web Designer, Related Views and Perspective

4.1 Launching the HTML and JSP Web Designers

To launch the HTML or JSP Web Designer do the following:

• Dbl-click any HTML or JSP file will launch the Designer • Right-click on any HTML or JSP file and from the context menu choose Open or alternatively the Open With action followed by selecting the MyEclipse HTML Designer or

MyEclipse JSP Designer

Figure 6: Visual Web Designer shown in MyEclipse Perspective

Back to Top

4.2 Opening Properties View

The Properties View displays convenient form editors for the current tag selected in the Designer. Do the following to open the Properties View:

1. From the Eclipse menubar select Window>Show View>Properties or Window>Show View>Other>Basic>Properties 2. The Properties View will open in the location defined by the current perspective

Figure 7: Properties View

Back to Top

4.3 Opening the Outline View

Do the following to open the Outline View:

1. From the Eclipse menubar select Window>Show View>Outline or Window>Show View>Other>Basic>Outline 2. The Outline View will open in the location defined by the current perspective.

Figure 8: Outline View

Back to Top

4.4 Resetting the MyEclipse Perspective

The view arrangement of the MyEclipse Workbench Perspective is optimized for web development tasks. The MyEclipse Perspective, shown in Figure 6 and identified by the icon, includes a layout of the Properties and Outline views, the Image Preview and Snippets Catalog.

Users frequently modify the view organization of their workbench perspectives. To reset the MyEclipse Perspective to its default view organization do the following:

1. Switch to the MyEclipse Perspective - From the Eclipse menubar select Window>Open Perspective>MyEclipse or Window>Open Perspective>Other>MyEclipse 2. From the Eclipse menubar select Window>Reset Perspective

Back to Top

5.0 WYSIWYG Design Editing BasicsThe Design Mode consists of a directly editable WYSIWYG web design canvas, toolbar, and UI control palette. In this mode you are able to directly insert, edit, delete and move HTML and JSP UI controls and text. Drag-and-drop operations are enabled to allow UI controls on the design canvas to be easily repositioned visually. Extended Copy/Paste operations enable text and HTML content from outside sources that have been placed on the system clipboard to be added to the design canvas. And the design canvas renders CSS styles and images that are located relative to the document being edited. These operations are defined in more detail in this section.

Back to Top

5.1 Working With Text - Using Text Operations and the Designer Toolbar Actions

The Design Canvas text editing functions are similar to those of a word processor. They enable you to enter, delete, and revise text anywhere on a web page.

• To add text to your page place the cursor at the desired location and type in your new text. • To delete text place your cursor at the location or mark text and hit either the Delete key or Backspace key.

The Designer's toolbar includes actions for text styling and formatting. These toolbar actions are dynamically enabled/disabled according to their applicability to the current design or source selection context.

Figure 9: Designer Toolbar

Figure-10 illustrates the toolbar when no selection exists. Note that the style and format buttons are disabled as there is no applicable selection context.

Figure 10: Disabled Toolbar Actions

Figure 11 below illustrates how the toolbar's styling and formatting buttons are enabled when they are valid to operate on the current selection. Additionally note how the Italic, Underline and Center alignment buttons are depressed to indicate that current selection is already styled with these properties. Selecting any of these buttons will toggle the styling/formatting function on/off.

Figure 11: Enabled Toolbar Styling Actions

Back to Top

5.2 Working with Web UI Controls - Using the Designer UI Palette

The Design Mode includes a UI Controls Palette for adding new UI controls to the design canvas. The JSP Web Designer's UI Palette includes HTML, Struts, and JSF controls. The HTML Web Designer's palette is abbreviated to include only HTML UI controls. When adding JSF or Struts UI controls to a web document, you must ensure that the page includes the appropriate taglib entry, e.g., <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>, to avoid design-time validation errors in the editor and at runtime errors at deployment time.

Figure 12: HTML and JSP Design Palettes

Back to Top

5.2.1 Adding Web UI Controls to the Design Mode

To add a UI control from the palette do the following:

1. Place the cursor in the design panel at the location where the new UI control is to be added. 2. On the Palette select the UI control to insert. This will launch a UI wizard for that new component. 3. Complete the wizard and press Finish. 4. A new UI control is created and inserted at the location of the cursor. Its corresponding source code is inserted in the Source Mode.

Figure 13: Adding an HTML Image Control

Figure 14: Completed HTML Image Control

Back to Top

5.3 Built-in Edit Commands and Key Bindings

Table-1 lists the Design Mode's built-in edit commands and key bindings.

Operation Key Binding

Copy Selection Ctrl + c

Cut Selection Ctrl + x

Paste from Clipboard Ctrl + v

Bold selection text Ctrl + b

Italic selection text Ctrl + i

Underline selection text Ctrl + u

Undo previous operation Ctrl + z

Redo previous Undo operation Ctrl + t

Select All Ctrl + a

Start Paragraph, <P> Enter

Add Line Break, <BR> Shift + Enter

Table-1: Built-in edit commands and key bindings

Back to Top

5.4 Working with Context-Menus

Within the Design Mode, a mouse right-click will open the context-menu with actions that are valid for the current design selection. Below is an example of the selection in a table row. The context-menu shows the actions that are available for an HTML Table control.

Figure 15: Context-menu actions available for Table element

Back to Top

5.5 Working with Images

The Design Mode will render images if their href attribute value is a relative URL to the current document's location. If you use the Browse feature on the Image Selection Wizard to select

an image, then it will constrain your browsing to the current project and will return a relative URL, see Figure 16.

Figure 16: HTML Image Wizard

Back to Top

5.6 Working with CSSThe Design Model recognizes CSS styles defined using the LINK tag to stylesheet file, inline styles, and inline style attributes.

1. The Design Mode will load and render stylesheets linked in the HEAD using the <link> tag. Similar to images if the href attribute of the <LINK> tag is a relative URL to a CSS file, the stylesheet will be used in the Design mode.

<link rel="stylesheet" type="text/css" href="./styles.css"/>

2. CSS styles can be specified within a web document using the inline STYLE element placed in the HEAD section.

<STYLE type="text/css"> div { border: 2px solid black; color: red; }</STYLE>

3. Following is an example of an inline style attribute. Design Mode recognizes these attributes and renders them immediately.

<div style="background: blue;"/>

Note: editing a <LINK> tag or inline CSS styles will cause the Design Mode to discontinue auto-synchronization. Therefore you will have to manually refresh the Design Mode to view these CSS changes and to re-enable auto-synchronization between the Designer's edit modes and views. See Section 3.4.3 for more details. Changes to the inline style attributes will be rendered immediately without the need to refresh the Design Mode.

Back to Top

6. Designing JSP, JSF and Struts Web PagesVisual design of JSP documents using the JSP Web Designer differs from HTML page design in that:

1. The Design Palette includes Struts and JSF UI controls 2. HTML approximations of Struts and JSF UI controls are provided in the Design and Preview Modes 3. Visual artifacts for JSP scripting elements such as declarations, expressions, and scriptlets and non-visual JSP tags are optionally displayed inline with JSP, Struts and JSF UI

controls. These artifacts can be manipulated much like UI controls in the design canvas.

Figure 17: Visual and non-visual JSP elements

The purpose for rendering JSP scripting elements and non-visual tags is to make the user aware of the scripting element's presence relative to UI controls within the source. These non-visual elements can be visually repositioned using Copy/Paste and drag-and-drop operations similar to any HTML or JSP UI control. Thus, dragging and dropping a scriptlet element is possible. Note: it is possible to delete non-visual elements directly by selecting and deleting its visual artifact or by deleting a multiple element selection that includes non-visual elements.

Use the toolbar's Show/Hide Details button to toggle on/off the display of non-visual elements.. Figure 18 below illustrates Figure 17 with non-visual JSP elements hidden.

Figure 18: Hiding non-visual JSP elements

The JSP Web Designer has rendering support for many tag libraries including the JSF and Struts HTML tag libraries. JSTL tags and all custom user tags will not have specialized design-time rendering support. For these tags the default design-time rendering is a bordered box containing the tag name. Figure 19 illustrates the default design-time rendering of the JSTL core <c:if> tags.

Figure 19: Default Element Rendering

Back to Top

6.1 JSF and Struts Tag Library SupportThe JSP Web Designer has design-time rendering support for the following tag libraries:

• JSF Core Tag Library• JSF HTML Tag Library• Struts HTML Tag Library

The design-time rendering of JSF and Struts UI controls include a unique annotation to distinguish them from basic HTML controls. For example, Struts UI controls are overlaid with the Struts icon, .

Figure 20: Struts HTML Tag Library Rendering Support

Back to Top

7. Preview ModeThe Preview Mode enables you to quickly view the web document as it will be rendered at runtime. For JSPs that include Struts and JSF HTML tags, Preview Mode will evaluate and attempt to translate each tag into its runtime HTML form. In many cases the dynamic nature of these tags prevents an accurate translation as it is only possible at runtime when resources such as databases or web-services are available. The Struts and JSF tags that are supported by the Preview Mode are:

• JSF Core Tag Library• JSF HTML Tag Library• Struts HTML Tag Library

Figure 21 below illustrates the Preview Mode form of the Struts Login form shown in Figure 20.

Figure 21: Preview form of Figure 20

Back to Top

8. FAQQ1: When will the Design Mode and Source/Design modes be available on the Linux and Mac platforms?Answer: The Genuitec development team is working to incorporate these features for MyEclipse 4.1. We expect to provide HTML design capabilities in the upcoming MyEclipse 4.1 release. JSP visual design features for the Linux and Mac platforms will follow after that.

Q2: Is there Snippets support?Answer: Yes Snippet insertion is available for the Source Edit Mode or the Source pane in the Design-Source Edit Mode only. To open the Snippets View, from the Eclipse menubar select Window>Show View>Other>MyEclipse>Snippets A snippet can be added by dragging it into the source editing area or double-clicking, which will add it to the current caret location in the source.

Q3: Is JavaScript execution supported in the Design Mode?Answer: No. The Design Mode disables all JavaScript evaluation in HTML and JSP documents. Use the Preview Mode as it provides limited JavaScript support.

Q4: In the Design Mode can I resize a UI control?Answer: Not at this time. MyEclipse 4.1 will provide this support as well as drag-and-drop positioning directly from the design palette?

Q5: Is CSS absolute positioning available in the Design Mode?Answer: Not at this time. This feature is planned for the MyEclipse 4.1 release.

Q6: How is design performed for JSP fragments that do not include <taglib> directives?Answer: When a taglib directive is not present MyEclipse references default tag library namespace prefixes defined at either the project level or globally in the MyEclipse preferences. To view or edit these namespace prefixes see either the MyEclipse preferences (Window>Preferences>MyEclipse>J2EE Project>Web Project>Tag Libraries) or the properties of any MyEclipse Web Project, (right-click menu > Properties>MyEclipse-Web>Tag Libraries).

Q7: After a large design edit, the synchronization back to the source takes several seconds. What can I do?Answer: If large synchronizations are caused by your design edits, these can often be avoided or minimized by making the change in the source view instead. In addition to updating the source, design edits often reformat the source for readability, since it's machine generated, and thus simply take longer do to the increased work. Also, synchronization of edits from the design view to the source view is inherently slower than from the source view to the design view for architectural reasons. As a result, for maximum edit speed the source view may be more convenient to use for large edits that cause structural changes in the document.

Back to Top

9. User FeedbackWe welcome all constructive feedback. If you have comments or ideas for how to improve this document please go to the Documentation Forum on our Support Site. MyEclipse Documentation Forum

Back to Top

Copyright © 2003 - 2005 by Genuitec L.L.C