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

第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

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

1. 点击预览标签；

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

   
   

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);

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

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

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

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

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

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

9.3 测试新代码

您能够测试如下完成的应用：

1.点击Preview标签。您先前输入的样例代码则显示出来。

2. 选择底端您在前课创建的空白行样例数据，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。

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

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

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

4. 当安装完成后，点击Finish。

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

10.2 课程要点

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

• 如果需要，安装ApacheTomcat；

• 启动服务器；

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

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

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

部署有如下两个过程：

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

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

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

11.1 编辑部署描述文件

EGL部署描述文件管理内部的部署过程，并在每个EGLSource文件下自动创建，项应用的主handler处理器在PaymentClient中，您将使用PaymentClient/EGLSource文件夹下的EGL部署描述符。

要编辑EGL部署描述符：

1.在EGLSource文件夹下，双击PaymentClient.egldd文件。EGL部署描述文件在部署描述文件编辑器中打开。EGL会自动添加嵌入的handlers到RUI即将部署的处理器列表中。

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

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

动态的Web项目向导打开。

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

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

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

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

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

11.2 部署RichUI应用

您现在开始如下部署进程：

1. 在EGLSource文件夹，右击PaymentClient.egldd文件；

2. 点击DeployEGL Descriptor；

   
   

在此部分，部署进程不再需要进一步的动作，进程会复制许多文件，这将花费数分钟。

3. 如果Tomcat服务器显示一个Restart状态，可以参考如下指导：右击服务器名称，选择重启，然后点击Restart，在服务器重启后，状态会变为Started，Synchronous。

11.3 运行生成代码

1. 运行内部部署代码，需要关注目标项目，PaymentWeb，在PaymentWeb/WebContent文件夹，找到PaymentFileMaintenance.html；

2. 右击文件名称，然后点击RunAs > Run on Server；

RunOn Server窗口会打开。

3. 在RunOn Server窗口，选择适合的服务器，然后在运行项目时，点击Alwaysuse this server，点击Finish。

4. 如果您在使用Tomcat，看到一个页面找不到的404错误，检查服务器是否显示有restart按钮，如果这样，重启服务器，然后刷新页面。

5. 通过添加、删除和修改paymment记录测试应用。

相关概念

帮助话题：EGL生成与部署介绍

11.4 课程要点

您学习了如何完成如下任务：

• 编辑部署描述文件来部署一个富用户界面RUIHandler；

• 在应用服务器上运行应用。

第12课 总结

您完成了Accessa database with EGL Rich Ui教程，您的实践完了如下技术：

• 创建并访问关系型数据库；

• 创建可重用函数的库；

• 设计并部署一个RichUI应用和独享服务。

上一篇：使用EGL Rich UI访问数据库（5-8课）

下一篇：EDT资源绑定（Resource Binding）简介