Faces Client 样本详细信息

示例概述

投资组合样本模拟一个基于 Web 的投资组合管理应用程序。目的是使用户可以查看他们的所有投资组合、在这些组合中浏览、以图形方式显示它们并根据由 Web Service 传递到页面的当前股价定期对这些组合进行更新。用户还能够更改他们股票的数量以进行分析。

hello world 样本通过以非常简单的模型显示在页面上设置的 MVC(模型视图控制器)以及使用两个输入字段作为控件演示了 Faces Client 框架的功能。

投资组合应用程序文档

投资组合样本模拟一个基于 Web 的投资组合管理应用程序。此应用程序的模型具有“根”对象,该对象包含一组“用户”和一组“股票”。它还包含用作位置标志符的单个“股票”对象的引用,在样本中,该对象用来向 web-service 发送数据或接受来自 web-service 的数据。现在讨论“用户”。每个用户可具有零个或多个投资组合,而每个投资组合可具有零个或多个位置。每个位置指向一支“股票”。

以下是有关页面上不同控件的设置的说明。

页面具有两个选项卡式面板。第一个选项卡式面板有 3 个面板。“Tree 面板”显示绑定至连接至“根”的用户列表的 TreeView 并且显示了每个用户的投资组合列表。“DataGrid 面板”显示绑定至选定投资组合的位置的 DataGrid。“Full 面板”用“Tree 面板”和“DataGrid 面板”中相同的设置并排显示 Tree 和 DataGrid。
第二个选项卡式面板有 2 个面板。“Graph 面板”显示绑定至选定投资组合的位置的图控件。图的 X 轴显示股票符号的列表,图的 Y 轴显示每支股票的对应价格和数量。“WebServices 面板”显示了一些绑定至临时位置标志符股票的属性的输入和输出文本字段。此面板中的命令按钮将用来调用股票 Web Service。

以下是控件之间的交互的简要总结。

注意,将每个控件独立映射至模型,以便将在控件中反映该模型数据的任何更改。除了这些隐式绑定之间,控件之间还存在一些显式绑定。当在 TreeView 中突出显示某投资组合时,就会用该“投资组合”对象来更新 DataGrid 和 GraphDraw 并刷新它们以显示该投资组合对象中的位置。我们在“Tree 面板”的 TreeView 与“DataGrid 面板”中 DataGrid 之间以及“Full 面板”中的 TreeView 与同一面板中的 DataGrid 和“GraphDraw 面板”中的 GraphDraw 之间创建此类事件系统。我们在“Full 面板”的 DataGrid 和位置标志符股票对象之间创建另一种类型的事件。当突出显示 DataGrid 的特定行时,就会将该位置的股票对象中的所有字段复制至位置标志符股票对象的对应字段。从而就刷新了“WebService 面板”中输入字段和输出字段中的值。

为了调用股票 Web Service 以获取特定符号的股票行情,单击“WebServices 面板”中的“访存信息”按钮。这就会用从股票 Web Service 接收到的值更新“Web Service 面板”中表单控件显示的值。

您还可以在“Full 面板”中的“数据网格”中更改股票的数量。股票数量中的任何更改将自动更新 GraphDraw 和收益/损失列。您还可以通过在“Full 面板”上单击“完成”按钮来将客户机端 bean 上的数据的更改与服务器端 bean 同步。

Hello World 应用程序文档

对于服务器端上的此应用程序,我们有一个名为 Hello 的简单类,它包含名为 text 类型为 String 的属性。在客户机端上,我们导出了 JavaScript 格式的同一个模型并且在浏览器中我们有两个输入文本字段,我们想将每个字段绑定至 Hello 对象的 text 属性。当我们更新一个控件的值时,此操作将更改 Hello 对象的文本字段,于是就会导致将该值传播至其它控件而不是转一圈之后回到服务器。

尝试将第一个输入文本框控件中的字符串的值更改为“Hello World!!!”,该控件将触发更新底层的数据模型(在客户机端上)的事件,如果您离开第一个文本框环境(单击该框的外部或浏览至第二个文本框),第二个文本框中的值将更改为“Hello World!!!”,原因是它也绑定至第一个控件的同一个对象的同一个属性。