MyEclipse HTML Editor Tutorial

Outline

1. Preface
2. Introduction
3. Preview Mode
4. Design Mode
   1. Source Mode
      1. Smart Code Completion and Content Assist
      2. HTML Validation
      3. Source Formatting and Document Cleanup
5. Outline View
6. Properties View
7. Preferences Page
8. FAQ
9. User Feedback

1. Preface

This document was written using Sun JDK 1.4.2, Eclipse 3.2.2 and MyEclipse 5.5. All screenshots are based upon the default user interface settings for Eclipse, MyEclipse Enterprise Workbench, and Windows XP. 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.

2. Introduction

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:

• Design Mode
• Preview Mode 

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

• Outline view
• Properties view

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.

3. Preview Mode

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

4. Design 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.

4.1 Source 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 following:

• Syntax color and highlighting
• Smart code completion and content assist
• HTML Validation
• Source Formatting and Cleanup
• HTML Templates
• HTML Snippets
  

4.1.1 Smart Code Completion and Content Assist

Throughout the source, the editor will provide content-specific code assistance. 

• Tag names -- Code assist will provide a list of available HTML tags based on your current context.
  
  
  Figure 4: Tag Name Code Assist
  
  
• 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 Assist
  
  
• Attribute values -- When appropriate, the code assist will provide you with a list of known possible values.
  
  
  Figure 6: Attribute Value Code Assist

4.1.2 HTML Validation

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. Note: validation errors and warning of this type will not be shown in the Problems View.
  
  
  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.  Window->Preferences->MyEclipse->Validation .
  
  
  Figure 8: "Resouce Changed" HTML Validation
  
  

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


Figure 9: HTML Source Format Action

5. Outline View

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.

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 <table> context.

6. Properties View

The properties view allows editing of all of the valid attributes for any selected HTML element as shown in Figure 13. 

7. Preferences Page

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 Preferences

The HTML source page has specific options to HTML editing such as format rules, content assist, tag names and cases.

8. FAQ

  Why isn't there a Preview tab on Linux? / Why doesn't the Web Browser view work in Linux?

• The Preview page and Web Browser view use the SWT Browser component for Eclipse which requires Mozilla 1.6 to be installed.   Later versions of Mozilla aren't yet supported because of  Eclipse Bug #75450 . If you have a later version of Mozilla installed and would like to enable the SWT Browser, you must install a copy of Mozilla 1.6.  Here are the steps for installing Mozilla 1.6 on a Linux system.
• 1. Download a mozilla-gtk2 build from :
     http://ftp.mozilla.org/pub/mozilla.org/mozilla/releases/mozilla1.6/contrib/mozilla-1.6-xft-gtk2-pc-linux.tar.bz2
     This website hosts special mozilla installs that are built with gtk2 support, which is required by the SWT Browser.  Note: Mozilla 1.6 builds from official mozilla.org site will not work as they are built with gtk1 support.  
  2. Go to the directory that you want to install Mozilla 1.6.  Good suggestions for this location are: /usr/local or /opt
  3. Unzip the mozilla file into the install directory:
     # cd /usr/local
     # tar jxvf /path/to/mozilla-1.6-xft-gtk2-pc-linux.tar.bz2
  4. Create the file /etc/gre.conf as shown below.  Set the GRE_PATH to the location of the mozilla directory you just unzipped.
     

     /etc/gre.conf

     [1.6] GRE_PATH=/usr/local/mozilla

  5. As your normal user, check to see if your environment has the mozilla shell variable defined:
     # echo $MOZILLA_FIVE_HOME
  6. If that returns a value, you will have to unset this variable before running eclipse.  You can do that by running the following shell commands each time to start eclipse.
     # cd /path/to/eclipse_dir
     # unset MOZILLA_FIVE_HOME
     # ./eclipse
  7. Now the SWT Browser will look at your /etc/gre.conf file to find the location of the mozilla 1.6 libraries.

Why isn't there a Design tab on Linux?

• The Design page is win32-only in the current version of MyEclipse.

What differentiates the "Classic Editor" and the "Visual Web Designer" ?

• To find out more about the Visual Web Designer click on the link below :-

9. User Feedback