Visual Edit教程之创建一个登陆页面

Visual Edit教程之创建一个登录页面

1、总览

应用RichUI Editor，开发人员可以方便快速的开发web2.0项目。本文将对RichUI Editor及相关工具进行介绍，并手把手教你怎样应用这些工具创建一个登录页面。

2、概述

当应用RichUI技术创建web2.0应用时，会用到下图所示的5个部分：

（1）RichUI Editor：为RichUI应用程序提供了一个所见即所得的编辑器，它包含三个tab：

• DesignTab -支持向其上拖拽widget来设计页面，支持选择widget来编辑其属性

• SourceTab -支持编辑页面代码

• PreviewTab –支持页面预览

（2）PaletteView：Palette中集中展示创建一个RichUI页面所要用到的各种widget。开发人员简单的通过拖拽控件来设计界面。

（3）PropertyView：开发人员可以在其中设定widget属性，绑定widget的eventhandler。

（4）OutlineView：页面上的widget会以树的形式展现在OutlineView中，开发人员也可以在其中选中相应的widget进行编辑。

（5）EGLData View：开发人员可以在其中通过向导的方式声明变量，拖拽变量来生成批量生成widget。

3、手把手教你应用RichUI创建一个登录页面

3.1、创建RichUI项目和handler

如果你还没有RichUI工程，可以通过选择File> New > EGL Project来创建Web2.0 client application来创建一个RichUI工程。

在新建的RichUI工程中，选中clientpackage，在右键菜单中选择New> Handler来创建一个RichUI Handler作为登录页面，如下图所示。

创建完成后，登录页面会自动在RichUI Editor中打开。

3.2、修改GridLayout属性

在新建的登录页面中已经默认生成了一个GridLayout。在OutlineView中右键选中GridLayout(ui)再在右键菜单中选择Properties（你也可以直接在RichUI editor的designtab中选中GridLayout(ui)），在PropertiesView中，将其改为3行1列。

3.3、应用拖拽的方法创建控件实例

从PaletteView中向GridLayout中拖拽一个TextLabel。

当你拖拽widget时，会弹出一个对话框让你输入widget实例的名称，在这里输入“CaptionLabel”后点击OK。

在RichUIeditor中右键选中CaptionLabel，在右键菜单中选择Properties。将fontSize改为50，fontWeight改为bold，保存页面。

3.4、应用EGLData Wizard更新登录页面

EDT还支持通过根据RichUI handler中的变量（比如record）批量生成widget来设计页面。

首先让我在loginRich UI handler中声明一个Userrecord：

record User
   username string;
   password string;
end

这时，你的loginRich UI handler的代码如下图所示：

现在回到DesignTab，在EGLData View中，选择New>EGLVariable来打开EGLRich UI Data Wizard。

在向导中，选择Userrecord，点击finish，EDT会自动在loginHandler中声明一个类型为User的变量。

现在你可以在EGLData View中找到刚才声明的变量。

3.5、应用InsertData Wizard批量创建控件实例

从EGLData View中拖拽“myUser”变量到designtab上来打开InsertData Wizard。

InsertData Wizard可以让你设置recordfield所对应的widget，选择不同目的（Read-only,editable,以上两者的组合）可以让你获得不同的备选widget。

在这里，选择Editabledata,在WidgetType下拉列表中，为password选择PasswordTextField,再点击finish。这时登录页面如下图所示。

从Palette上拖拽一个DojoButton到GridLayout的第三行上，然后拖拽一个TextLabel到第四行上，将它的text改为“welcome:”。

3.6、应用PropertiesView新建EventHandler

选择登录按钮，在PropertiesView的EventTab中，选择onClickevent再点击addfunction按钮，输入function的名称（在这里应用默认名称），最后选择OK。

将生成的function更改为以下内容

functionButton_onClick(event Event in)
    myUser_form_Submit(event);
    if(myUser.username== "Forest" and myUser.password == "123")
        TextLabel.setText("HelloForest!");
    else
        TextLabel.setText("Pleaselogin again");
    end
end

3.7、在PreviewTab中测试登录页面

现在登录页面的设计工作就已经完成了，你可以在PreviewTab中进行测试。

3.8、其他有用的工具

在RichUI Editor上还有其他一些有用的工具：

• RefreshWeb Page:用于刷新页面

• RefreshPallete:当你自定义一个widget后，你要点击RefreshPallete按钮来将它添加到Pallete中。

• ConfigurePreferences Tool:用于打开RichUI Preference页面，在Appearance页面中，你可以设置RichUI Editor应用那个浏览器，应用WebKit浏览器可以提高运行效率。

  
  

  
  

  
  

4、总结

可以看到，在RichUI Editor的帮助下，开发人员可以方便快捷的开发出web2.0风格的应用程序。

5、英文版链接

http://wiki.eclipse.org/EDT:Create_a_login_page

上一篇：EDT使用入门

下一篇：使用EGL Rich UI访问数据库（引言）