您的位置：首页 > 产品设计 > UI/UE

使用EGL Rich UI访问数据库（9课-12课）

2012-03-19 15:50 387 查看

第9课完成用户界面代码
下一步，您将完成单记录布局，支持Clear与Save按钮。

9.1 完成显示单记录布局显示

要完成单记录布局：
如果源代码标签为显示，请点击源代码标签，定位到selectedPayment_category_comboBox声明，在设置值的代码段，注意值的中括号属性，指明PaymentLib.categories数组。Combo框列表现在将能显示您在PaymentLib库创建的categories数组。如下为修改的声明：

selectedPayment_category_comboBox DojoComboBox{values = PaymentLib.categories ,
layoutData= new GridLayoutData{row = 2, column = 2}};

下面您将设置combox框显示的值为分类的文字描述而非整数，更新cellClicked函数来访问您先前编写的cellClicked函数。

function cellClicked(myGrid DataGrid in)
selectedPayment= allPayments_ui.getSelection()[1] as paymentRec;
selectedPayment_form.publish();
selectedPayment_category_comboBox.value=
PaymentLib.getCategoryDesc(selectedPayment.category);
end

保存文件，先别关闭它。测试您写的新代码，检查您上次修改的影响：

点击预览标签；

点击第一行样例数据的，单记录布局中现在显示的是分类名称，而非整数；

9.2 完成第二组按钮的代码

当用户点击Clear按钮来清除单记录布局中非默认的内容时，clearAllFields函数将运行，这样当函数建立好布局时，用户输入数据并点击保存，则新的数据将更新数据库中对于数据库行记录。
要实现这个功能，首先点击Source标签，如果必要，找到clearAllFields函数，并按如下代码进行修改。

function clearAllFields(event Event in)
saveIDINT = selectedPayment.paymentID; // retain the key
selectedPayment= new PaymentRec{};
selectedPayment.paymentID =saveID;
selectedPayment_form.publish();
end

考虑到后续数据库更新仍可能使用到该键值，该代码保存了记录的键值，该代码首先创建记录，然后将其赋值给selectedPayment变量，赋值保存的变量键值，然后将其发布到单记录布局。

现在您已经完成用户点击Save按钮时调用的函数。找到这个名称为selectedPayment_form_Submit的函数，并按照如下代码进行修改。

function selectedPayment_form_Submit(event Event in)
selectedPayment_category_comboBox.value
= PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);
if(selectedPayment_form.isValid())
selectedPayment_form.commit();
selectedPayment_category_comboBox.value
= PaymentLib.getCategoryDesc(selectedPayment_category_comboBox.value);
//update allPayments with new version of selectedPayment
for(iINT from 1 to allPayments.getSize())
if(allPayments[i].paymentID ==selectedPayment.paymentID)
allPayments[i] = selectedPayment;
exitfor;
end
end
calldbService.editPayment(selectedPayment)
returningto recordRevised
onExceptionserviceExceptionHandler;
end
end

下面语句将检查复制widget内容到相关字段的合法性。

if(selectedPayment_form.isValid())

然而使用文字描述的combo框会有一个问题，因为widget的内容是STRING类型，而与其关联的字段selectedPayment_categroy是INT类型。这样Dojocombo框的合法性验证将需要包含整型或者字符串类型，如”1“、”20“等同样可以转化为整型。

selectedPayment_category_comboBox.value
=PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);

该函数检查了数据在单记录布局中的有效性，如果数据是合法的，将执行如下步骤：

将合法数据commit认到selectedPayment记录。”commit“则是MVC处理的部分，与databasecommit无关；

更新Dojocombo框，这样其字段值是字符串；

修正保存有键值的allPayments数组元素，这点上，数组元素包含了数据库中用户需要的元素的备份；

调用更新数据库中单行记录的服务，相关的回调函数会将allPayments数组赋值到DataGrid的数据数组，并重新以更新的数据刷新控件。DataGrid将会以selectedPayment_form_Submit哈书中能够复制的数据进行重新渲染，而非数据库中获取的数据。

现在，保存文件，但不要关闭它，如果您看到了源代码中有错误符号，将其与我们字啊本课中代码进行比较（http://wiki.eclipse.org/EDT:Tutorial:_RUI_With_DataBase_Lesson_9_Code）。

9.3 测试新代码

您能够测试如下完成的应用：
1.点击Preview标签。您先前输入的样例代码则显示出来。

选择底端您在前课创建的空白行样例数据，DataGrid会显示该条Payment记录的空白字段，但以下字段不显示空白：

键值字段；

数量字段显示0值；

由于DATE变量值为空白，将当前日期作为默认值进行显示；

输入如下数据完成一条记录录入：

对于Category字段，输入Automotive；

对于Description字段，输入Gas；

对于Amount字段，输入$80.00；

对于Fixedpmt字段，保证checkbox为空；

对于DueDate字段，选择当前日期，然后从显示的日历中选择一个日期。

对于Payee字段，输入CornerGas Station；

对于Address1，输入101Main Street；

对于Address2，输入Miami，FL；

点击Save，则新数据将存储到数据库中并显示于DataGrid。

点击Clear，则该单记录布局中的数据都将被重置为初始值。

9.4 课程要点

本课程中您学会了如何完成如下任务：

将预先设置的字符串数组赋值为dojocombo框提供的可选值集合；

如果需要将INT字段类型关联到包含字符串的Dojocombo框，则可以采用转换函数；

采用表单管理isValid和commit函数；

在下一节课，您将在您的系统中安装ApacheTomcat，这样您能在您的web服务器上运行您的应用程序。

第10课安装Apache Tomcat

您能使用ApacheTomcat来显示web页面，并且运行EGL生成的服务。

10.1 下载并访问服务器

如果您安装了IBM®WebSphere® Application Server，您能够跳到下一节课。若没有，您可以任意时候下载ApacheTomcat，安装到您的工作空间。
要访问服务器：
1.定位到服务器视图，默认在工作空间的右下角，EGL默认会创建一个AJAX测试服务器，右击空白区域，点击New> Server。

在Definea New Server窗口，展开Apache，点击Tomcatv6.0 Server。接受其它字段的默认值，点击Next。

在TomcatServer窗口，通过Browser找到一个您机器上存在的安装路径（例如，apache-tomcat-6.0.26）来访问开源软件，或者点击Downloadand Install。假如您找到一个已经存在安装路径，点击Finish，然后跳过安装步骤。

接受合约条款。Browse浏览到应用文件的目录，例如C:\ProgramFiles\Apache，当工作空间完成该安装准备后，在您指定好安装目录后将显示Definea New Server窗口，进度条则显示在工作空间右下角。

当安装完成后，点击Finish。

高亮服务器名称，启动服务器，点击服务器端视图顶端的绿色Start图标。

10.2 课程要点

您在本课程中完成如下任务：

如果需要，安装ApacheTomcat；

启动服务器；

下节课程中，您将会将应用部署到服务器然后运行它。

第11课部署并测试您的Payment应用

在您的部署过程中，EGL创建匹配您环境的HTML文件和服务器端代码。
部署有如下两个过程：

内部部署，及当您将您的handlers部署到一个web项目；

外部部署，及当您将您web项目部署到一个应用服务器；

在您在内部部署好该教程应用后，您能在工作空间的一个应用服务器上运行它。

11.1 编辑部署描述文件

EGL部署描述文件管理内部的部署过程，并在每个EGLSource文件下自动创建，项应用的主handler处理器在PaymentClient中，您将使用PaymentClient/EGLSource文件夹下的EGL部署描述符。
要编辑EGL部署描述符：
1.在EGLSource文件夹下，双击PaymentClient.egldd文件。EGL部署描述文件在部署描述文件编辑器中打开。EGL会自动添加嵌入的handlers到RUI即将部署的处理器列表中。

由于您在使用独享服务，您不必添加信息到ServiceBindings Configuration部分，列表为空。

在部署项目字段旁边的部署目标下，选择New。

动态的Web项目向导打开。
4.在ProjectName字段，输入PaymentWeb名称，任何web项目都可以接受，您能创建一个简单的项目来完成该项目。

选择ApacheTomcat v6.0来作为目标运行时。Configuration字段值能够自动变化以匹配新的运行时环境。

按照您在ServiceProject设置部署描述文件所作的（http://wiki.eclipse.org/EDT:Tutorial:_RUI_With_DataBase_Lesson_6#Create_binding_to_database_connection），添加SQL数据库绑定到您的部署描述符。

点击Finish，EGL将创建web项目，然后重显示部署描述文件。

保存并关闭部署描述文件。