MyEclipse HTML And JSP Designer - Genuitec

The HTML Web Designer has a Design/Source split-screen mode so you can view the source code as you use the WYSIWYG designer. The HTML palette is divided into HTML4, HTML5, Ionic and JQuery Mobile elements.

The Ionic palettes available in MyEclipse 2015 CI 11 and later.

HTML Web Designer in Design mode

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

1.2 Editor Modes

The Designer provides three edit modes to support any style of editing.

• Source Mode — The Source mode is a source code editor for HTML and JSP code that includes smart content assist, line numbering, colored syntax highlighting, format operations, real-time validation, marking of problematic source as you type, and code formatting.
• Design Mode — The Design mode has a dual panel view with the Design mode in the top panel and the Source mode in bottom panel. 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. This mode includes a design palette that contains UI web controls you can add to the design canvas.
• Preview Mode — The Preview mode allows you to quickly see how your page looks 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 is rendered in the Preview mode and is “rooted” at the location of the resource. If images in the HTML document are relative to the current location of the HTML page, then the images are rendered correctly in the preview.

A tab for each mode is at the bottom-left of the editor panel. To switch modes, click the tab for the mode you want to view.

Editor mode tabs

1.3 Properties & Outline Views

The HTML and JSP Web Designer feature-sets include custom property editors for all HTML, JSP, JSF, and Struts tags and a structured Outline view. Custom property editors are activated automatically and displayed in the Properties view when a corresponding tag is selected in the Source panel, Design panel or Outline view.

Properties view

The Outline view provides a structured tree view of the Visual Designer content. Nodes in the Outline view can be added, deleted, expanded, and contracted. See Section 2 for instructions on how to open the Properties and Outline views.

Outline view

1.4 Synchronization between Editor Modes and Views

To present an accurate view of a web document’s current  state across all edit modes and supporting views, the Visual Designer maintains two types  of information synchronization. The first is Selection Synchronization. The Visual Designer maintains a common selection  context between Source and Design  windows and the Outline and Properties views. The second form  of synchronization, known as Design-Source Synchronization, is between the source code of the Source window and the WYSIWYG rendered state of the Design window.

1.4.1 Selection Synchronization

Selection synchronization enables you to select anywhere in the Source window, Design window or Outline view and have all views display the common selection context. Additionally, if the common selection involves an HTML, JSF or Struts tag, the Properties view displays a custom properties editor for that tag. The image below illustrates how selecting the Login button results in the Outline view scrolling to and highlighting the HTML `<input>` tag for the Login button, and the Source window scrolls to and highlights the source line containing the button source code. 

Selection synchronization

1.4.2 Design-Source Synchronization

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