Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "EDT:Visual Editor Introduction"

(Overview)
Line 7: Line 7:
 
EGL Rich UI technology can make developers easy and fast to build up web 2.0 applications with the help of Rich UI Visual Editor. This blog will first brief introduce Visual Editor and related View, then give a step by step example to show how to make a login page with them.  
 
EGL Rich UI technology can make developers easy and fast to build up web 2.0 applications with the help of Rich UI Visual Editor. This blog will first brief introduce Visual Editor and related View, then give a step by step example to show how to make a login page with them.  
  
[[Image:VE Overview.jpg]]<br><br>
+
== Brief introduction ==
 +
 
 +
There are five parts of EDT you may need to use when build up web 2.0 applications with Rich UI technology.
 +
 
 +
[[Image:VE Overview.jpg]]<br>1. '''Visual Editor''': Visual Editor provides the WYSIWYG capability to develop the Web 2.0 application, also named RUI application in EGL. it has three tabs:
 +
 
 +
*Design tab, developer can drag and drop widgets from the Palette onto visual editor to design the page. It also allows developers to select widget to edit the properties etc.
 +
*Source tab, it’s actually the EGL source code editor, and it allows developer to write the EGL code.
 +
*Preview tab, developer can preview the page before deploy the web application to a web server.
 +
 
 +
2. '''Palette View''': Palette View displays all of the widgets that can be resolved in the developer’s workspace. Developers can drag and drop the widgets from Palette onto Visual Editor to design a page. Developers can also extend their own widgets and will be automatically resolved and displayed in the Palette view.<br>3. '''Properties View''': Developers can change the properties of a selected widget in this view, and also can attach event function to the selected widget by wizard.<br>4. '''Outline View''': The widgets that the page contained will be listed with hierarchy in this view. Developer can also select the widget in this view instead of selecting in design page of visual editor.<br>5. '''EGL Data View''': This view provides a wizard that allows developers to create variables for this page. Also, developers can use the wizard to automatically create the user interface by specifying the requirements.<br><br>

Revision as of 01:23, 22 December 2011

Visual editor introduction


Overview

EGL Rich UI technology can make developers easy and fast to build up web 2.0 applications with the help of Rich UI Visual Editor. This blog will first brief introduce Visual Editor and related View, then give a step by step example to show how to make a login page with them.

Brief introduction

There are five parts of EDT you may need to use when build up web 2.0 applications with Rich UI technology.

VE Overview.jpg
1. Visual Editor: Visual Editor provides the WYSIWYG capability to develop the Web 2.0 application, also named RUI application in EGL. it has three tabs:

  • Design tab, developer can drag and drop widgets from the Palette onto visual editor to design the page. It also allows developers to select widget to edit the properties etc.
  • Source tab, it’s actually the EGL source code editor, and it allows developer to write the EGL code.
  • Preview tab, developer can preview the page before deploy the web application to a web server.

2. Palette View: Palette View displays all of the widgets that can be resolved in the developer’s workspace. Developers can drag and drop the widgets from Palette onto Visual Editor to design a page. Developers can also extend their own widgets and will be automatically resolved and displayed in the Palette view.
3. Properties View: Developers can change the properties of a selected widget in this view, and also can attach event function to the selected widget by wizard.
4. Outline View: The widgets that the page contained will be listed with hierarchy in this view. Developer can also select the widget in this view instead of selecting in design page of visual editor.
5. EGL Data View: This view provides a wizard that allows developers to create variables for this page. Also, developers can use the wizard to automatically create the user interface by specifying the requirements.

Back to the top