This document was written using
MyEclipse. However, if you notice discrepancies between this document
and the version of 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.
Below is a list of software required before using this guide:
visual design features are supported on the Windows and Linux
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
Following is an overview of both Designers' key features:
User Interface Features
Multi-mode Editor with toolbar and design palette
Form-based Properties View
50+ Design Wizards
Design/Source Split screen
(Windows and Linux only)
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
Source Edit Features
Colored syntax highlighting
Code-assist for HTML, JSP, JSTL, Struts, JSF and custom tag
Real-time validation as you type
Validation errors displayed in Problems View and the editor
Format all or portion of a document
View source content in MyEclipse internal browser
Translate and render Struts and JSF HTML tags to HTML
Extension point for adding renderers for custom
Figure-1 is a screenshot of the HTML Web Designer in the
Design/Source split-screen mode.
Figure 1: HTML Web Designer in DesignMode with Design/Source split,
Properties and Outline Views
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.
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
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.
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
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
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
, is between the source code of the Source Mode and the WYSIWYG
rendered state of the Design Mode.
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
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:
The Design panel is placed in a read-only mode
The normally green Refresh button on the Design panel toolbar
will change to red,
The Design panel cursor will change to the "No Edit"
This indicates that no input into the design panel can be accepted
at the moment.
Figure 6: Design Mode indicating unable to synchronize
Refresh/Resynchronize Design Mode
To refresh/resynchronize the Design panel with the Source Edit
panel press the Refresh button
on the toolbar of the Design panel.
Upon completion the Design panel should once again be editable
and the Refresh button will return to its normal green color,
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
Launching the Web
Designer, Related Views and Perspective
Launching the HTML and JSP
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
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
Opening Properties View
The Properties View displays convenient form editors for the
current tag selected in the Designer. Do the following to open the
From the Eclipse menubar select
Window>Show View>Properties or
The Properties View will open in the location defined by the
Figure 9: Properties View
Opening the Outline View
Do the following to open the Outline View:
From the Eclipse menubar select
Window>Show View>Outline or
The Outline View will open in the location defined by the
Figure 10: Outline View
Resetting the MyEclipse
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:
Switch to the MyEclipse Perspective - From the Eclipse menubar
Window>Open Perspective>MyEclipse or
From the Eclipse menubar select
WYSIWYG Design Editing
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.
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
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
Figure 13: Enabled Toolbar
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
prefix="h" %> , to avoid design-time validation
errors in the editor and at runtime errors at deployment time.
Figure 14: HTML and JSP Design
Adding Web UI Controls to the
To add a UI control from the palette do the following:
Place the cursor in the design panel at the location where the
new UI control is to be added.
On the Palette select the UI control to insert. This will launch
a UI wizard for that new component.
Complete the wizard and press Finish.
A new UI control is created and inserted at the location of the
cursor. Its corresponding source code is inserted in the Source
Figure 15: Adding an HTML Image Control
Figure 16: Completed HTML Image Control
Built-in Edit Commands and
Table-1 lists the Design Mode's built-in edit commands and key
Table-1: Built-in edit commands
and key bindings
Ctrl + c
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
Ctrl + a
Start Paragraph, <P>
Add Line Break, <BR>
Shift + Enter
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
Figure 17: Context-menu actions
available for Table element
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
The Design panel recognizes CSS styles defined using the LINK tag
to stylesheet file, inline styles, and inline style
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"/>
CSS styles can be specified within a web document using the
inline STYLE element placed in the HEAD section.
border: 2px solid black;
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.
Designing JSP, JSF and
Struts Web Pages
Visual design of JSP documents using the JSP Web Designer differs
from HTML page design in that:
The Design Palette includes Struts and JSF UI controls
HTML approximations of Struts and JSF UI controls are provided in
the Design and Preview Modes
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
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
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
Figure 20: Default Element
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
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
Q1: When will the Design Mode
and Source/Design modes be available on the Linux and Mac
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.
supported in the Design Mode?
HTML and JSP documents. Use the Preview Mode as it provides
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
Window > Preferences > MyEclipse> Java Enterprise Project > Web
Project > Tag Libraries) or the properties of any MyEclipse Web
right-click menu > Properties > MyEclipse > Web > Tag
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.
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.