This document was written using
MyEclipse and screenshots are based upon the default
user interface settings for MyEclipse
and Windows XP. However, if you experience difficulty with the
instruction of this document, please see the
User Feedback section for how to
provide feedback to the MyEclipse documentation team.
This tutorial shows the concepts and features most important to
HTML editing using the "Classic" editor. It will
cover the available modes of the editor, its associated views,
and preferences. When you first bring up the HTML editor,
you will notice it has the following two modes:
The Design mode is the default when opening any HTML file. You can change modes by simply clicking on the appropriate tabs
on the bottom of the editor. The design mode has a source panel attached to it. The following two views are
linked to the design mode of the HTML editor
Both the outline and properties views are active by default in
the MyEclipse perspective. If they are not visible in your
workspace you can show them by going to
Window->Show View->Other... then select outline or
properties view as shown in Figure 1.
Figure 1: HTML Editor showing 1 page and 2 related views.
The preview mode allows you to quickly see how your page will
look in a browser. This mode gives an IE preview as well as a Mozilla preview. The preview mode loads the current
source from the design mode, even if the editor contents have not
yet been saved. The HTML source will be rendered in
the preview page and will be "rooted" at the
location of the resource. So if the images in the HTML
document are relative to the current location of the HTML page,
then the images will be rendered correctly in the preview.
Figure 2: HTML Preview Mode
The design mode has a dual panel view with Design Mode in top panel and Source Mode in bottom panel (See Figure-3). The design mode is 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 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.
Figure 3: HTML Design Mode
The source mode is the default mode when opening an HTML
file. It allows you to edit the HTML source directly.
It provides many productivity features including the
Smart Code Completion and Content
Throughout the source, the editor will provide content-specific
Tag names -- Code assist will provide a list of available HTML
tags based on your current context.
Figure 4: Tag Name Code
Tag attributes -- Code assist will provide a list of attributes
that are specific to the tag that is being edited.
Figure 5: Tag Attribute Code
Attribute values -- When appropriate, the code assist will
provide you with a list of known possible values.
Figure 6: Attribute Value
There are two types of HTML validation: "As you
type" and "Resource changed"
"As you type" -- When you make changes to your HTML
document, the editor is always checking the validity of your
HTML syntax, just as the java editor does.
errors and warning of this type will not be shown in the
Figure 7: "As you
type" HTML Validation
Resource changed. -- When the resource is modified in any way,
saved, moved, copied, or imported the resource builder will
perform HTML validation on the resource.
Figure 8: "Resouce
Changed" HTML Validation
Source Formatting and Cleanup
HTML documents can be formatted quickly by just running the
"Format Document" command, located on the editor's
context menu as shown in Figure 9. The formatter doesn't
modify the HTML tag elements internally. It only
adjusts indentation and spacing of HTML elements.
Additionally, there is a "Cleanup.." action available as
shown in Figure 10. It is for more advanced formatting
and style adjustment that allows you to change the cases of both
tag names and attributes. There are other options for
inserting required tags and attributes. If you include
"Format Source" as a cleanup option it will include
the "Format Document" action.
Figure 9: HTML Source Format
Figure 10: HTML Source Cleanup
The outline view provides a real-time tree view of the HTML
document. Each node in the tree represents an HTML
element. By clicking on any tree node, the corresponding
HTML element will be selected in the source editor and the
element will be activated in the properties view as shown in
Figure 11: Integrated HTML
Outline View for HTML Source Editor
If you right-click any HTML element, you will see a list of
actions that are enabled for that particular element as shown in
Figure 12. The contents of each of these menus are
context-sensitive based on the type and location of the HTML
element. For instance, in the following example, the
actions for a <tr> tag in the "Add Before" menu
show only those HTML tags that make sense in the parent
Figure 12: Context sensitive
HTML Tag Actions from Outline View
The properties view allows editing of all of the valid attributes
for any selected HTML element as shown in Figure 13.
Figure 13: Integrated
Properties View for HTML Source Editor
The preference page for the HTML editor can be easily accessed by
simply right-clicking the editor and selecting
"Preferences" as shown in Figure 14. Also, you
can find them under
Window->Preferences->MyEclipse->Files and Editors->HTML.
The common editor preferences, which are used by all MyEclipse
editors, applies to the HTML editor.
Figure 14: Common Editor
The HTML source page has specific options to HTML editing such as
format rules, content assist, tag names and cases.
Figure 15: HTML Source
None at this time.
If you have comments or suggestions regarding
this document please submit them to the