MyEclipse HTML Designer Tutorial

Outline

1. Preface

This document was written using Sun JDK 1.4.2, Eclipse 3.2.2 and MyEclipse 5.5. 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.w to provide feedback to the MyEclipse documentation team.

2. Requirements

Below 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.2.2 SDK
• MyEclipse 5.5 Standard or Professional Edition

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

3. Introduction

This 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:

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

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.

3.2 Editor Modes

The Designer provides 2 edit modes to support any style of editing. They are:

• Design Mode - a dual panel view with Design Mode in top panel and Source Mode in bottom panel (See Figure-1) . The design mode is a 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. The source mode is 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 .
• Preview Mode - read-only, browser rendered view of the document content. This view includes a side-by-side comparison in the platform browser (IE or Safari) and Mozilla allowing you to see your page in multiple browser layouts.

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

3.3 Properties & Outline Views

The 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. The Properties View is shown 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. The Outline View is shown in Figure 4.

Figure 3: Properties View

Figure 4: Outline View

3.4 Synchronization between Editor Modes and Views

In 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 windows 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.

3.4.1 Selection Synchronization

Selection synchronization enables you to select anywhere in Source window, Design window 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-5 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 5: Synchronized Designer Views

3.4.2 Design-Source Synchronization

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

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

1. The Design panel is placed in a read-only mode
2. The normally green Refresh button on the Design panel toolbar will change to red,
3. The Design panel cursor will change to the "No Edit" cursor,

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

Figure 6: Design Mode indicating unable to synchronize

3.4.3 Refresh/Resynchronize Design Mode

1. To refresh/resynchronize the Design panel with the Source Edit panel press the Refresh button on the toolbar of the Design panel.
2. Upon completion the Design panel 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 panel 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.  

Figure 7: 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

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 8: Visual Web Designer shown in MyEclipse Perspective

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>General>Properties 
2. The Properties View will open in the location defined by the current perspective

Figure 9: Properties View

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>General>Outline 
2. The Outline View will open in the location defined by the current perspective.

Figure 10: Outline View

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 8 and identified by the icon, includes a layout of the Properties and Outline views and the Image Preview. 

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

5. WYSIWYG Design Editing Basics

The Design panel consists of a directly editable WYSIWYG web design canvas, toolbar, and UI control palette. In this panel 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.

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 11: Designer Toolbar  

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

Figure 12: Disabled Toolbar Actions

Figure 13 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 13: Enabled Toolbar Styling Actions

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 14: HTML and JSP Design Palettes

5.2.1 Adding Web UI Controls to the Design Panel

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 15: Adding an HTML Image Control



Figure 16: Completed HTML Image Control

5.3 Built-in Edit Commands and Key Bindings

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

5.4 Working with Context-Menus

Within the Design panel, 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 17: Context-menu actions available for Table element

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 18.

Figure 18: HTML Image Wizard

5.6 Working with CSS

The Design panel 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.

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.

6. Designing JSP, JSF and Struts Web Pages

Visual 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 19: 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 element.

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 18 illustrates the default design-time rendering of the JSTL core <c:if> tags.

Figure 20: Default Element Rendering

6.1 JSF and Struts Tag Library Support

The 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 21: Struts HTML Tag Library Rendering Support

7. Preview Mode

The Preview Mode enables you to quickly view the web document as it will be rendered at runtime. The Preivew Mode has an IE or Safari (Depending on platform) preview as well as a Mozilla preview. For JSPs that include Struts and JSF HTML tags, Preview Panel 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 Panel are: 

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

Figure 22 below illustrates the Preview Panel form of the Struts Login form shown in Figure 21.

Figure 22: Preview form of Figure 21

8. FAQ

Q1: When will the Design Mode and Source/Design modes be available on the Linux and Mac platforms?
Answer: We are hoping to complete this work by the 6.1 release.

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.

Q5: Is CSS absolute positioning available in the Design Mode?
Answer: Not at this time.

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> Java Enterprise 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.

9. User Feedback

We 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.