To extend the controls and properties of visual editor

To extend the controls and properties of Visual Editor

Visual Editor for Java is a GUI visual editing plug-in based on Eclipse, which is centered on Java code, achieves WYSIWYG user interface editing, and supports current control packages such as SWT, AWT, Swing, and so on. This article presents a complete example of visual Editor to show readers how to extend the controls and properties of visual Editor.

Background

Visual Editor for Java implements the WYSIWYG user interface development model based on the Java source code. When the Java source code is open, Visual Editor parses it, looks for the recognizable control, and displays it in a graphical editor that looks and runs exactly the same. Supports the actions that the user raises by the Palette, supports editing of the control properties, and generates the corresponding code in real time.

Figure 1:visual Editor Workspace Overview

As shown in the screenshot above, the editing area of the Visual Editor consists of five main components:

The graphic editing area, what you see is what you get from the user interface.

Java code area, for the graphics area user interface Java source code, and graphics area synchronization.

The Palette area, which provides all of the expanded, Visual Beans users can use to drag and drop controls to the graphics area to customize the interface. If the control is not listed in the Palette and the control is also in Class Path, you can use the button to manually select the control.

Property view, which displays all the information that the currently selected control can edit. The property changes in the view are synchronized directly to the code in the Java code area, and UI-related changes are also reflected in the graphics editing area. For simpler types of properties, such as String types or Boolean types, you can change them directly in the view, and you can extend the property Editor to edit them for complex types, such as fonts or colors.

The Java beans view, which shows the hierarchical relationships of all the controls that are currently customized. In the view of the selection or right-click Operations, the implementation of the same effect as the graphic editing area, select the operation and several other areas of synchronization.

The interaction of various parts of Visual Editor can be represented by the following figure, which initializes the action by reacting the contents of the Java code to the property view or the property editor, which is the inverse process of code generation.

Figure 2:visual Editor Interactive diagram of each module

Palette provides implementations of commonly used UI controls, including Swing, AWT, SWT, and so on. If users want to customize the controls they need, and want to be able to identify and edit them through visual Editor, they need to extend the visual Editor accordingly. That's what this article tells you.