基于XML和JSON设计的Flex - 面向对象网,web开发,flex,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Flex > 正文

基于XML和JSON设计的Flex

来源: www.bianceng.cn 阅读:

本文很好的例举了如何将Flex 和Java一起使用。Java将运行这种服务。Flex将在客户端上运行。它们两者之间的协议可以真正的实现你想要的。既然这样,那么先使用XML,然后使用Javascript Object Notation (JSON),因为这两者都是我们最常见的Web 2.0标准

创建服务器区块

XML实例从表1中一个简单的JSP文档开始

Listing 1. xml.jsp

�jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="1.2"�
�jsp:directive.page import="java.text.*"/�
�jsp:directive.page import="java.lang.*"/�
�jsp:directive.page contentType="text/xml"/�
�days��jsp:scriptlet�
�![CDATA[
double compa = 1000.0;
double compb = 900.0;
for (int i = 0; i� =30; i++) {
compa += ( Math.random() * 100 ) - 50;
compb += ( Math.random() * 100 ) - 50;
]]�
�/jsp:scriptlet�
�day�
�num��jsp:expression�i�/jsp:expression��/num�
�compa��jsp:expression�compa�/jsp:expression��/compa�
�compb��jsp:expression�compb�/jsp:expression��/compb�
�/day�
�jsp:scriptlet�
�![CDATA[ }
]]�
�/jsp:scriptlet�
�/days�
�/jsp:root�

这个服务器输出两个公司(公司A和公司B)三十天的一些任意的库存数据。第一个公司从$1000开始估价。第二个公司从$900开始,这些JSP代码适用于这些每天都在变化的数据。

当我从命令行使用'curl'客户端去访问服务器时,可以恢复如下所示的一些东西:

% curl "http://localhost:8080/jsp-examples/flexds/xml.jsp"
�days��day��num�0�/num��compa�966.429108587301�/compa�
�compb�920.7133933216961�/compb�
�/day�...�/days�

�days�标签是根标签,包含一组�day�标签,每一个�day�有一个�num�标签做日期标志,一个�compa�函数作为公司A的交易价格,�compb�标签作为公司B的交易价格。两个公司的交易价格可以随着他们自己的要求改变。

创建界面

现在,我们有一个web服务器输出交易价格,我们需要一个客户端应用程序去查看交易价格。第一个我们要创建的是一个可以简单的显示数字的网格界面。去创造Flex产品,我们从Flex Builder IDE的新菜单上面挑选Flex产品。这在图1中展示。

\

图1

到这一步,所有我们需要做的就是给这个产品一个名字。因为XML Data Grid的缘故,我将叫它xmldg '。这将创造一个xmldg。Mxml文件有一个标签在其中。我们将使用如表2所示的代码替换这个简单的无用的应用程序。

Listing 2. xmldg.mxml

�?xml version="1.0" encoding="utf-8"?�
�mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"�
�mx:XML source="http://localhost:8080/jsp-examples/flexds/xml.jsp" id="stockData" /�
�mx:Panel title="Stock Data" width="100%" height="100%"�
�mx:DataGrid dataProvider="{stockData..day}" width="100%" height="100%"�
�mx:columns�
�mx:DataGridColumn dataField="compa" /�
�mx:DataGridColumn dataField="compb" /�
�/mx:columns�
�/mx:DataGrid�
�/mx:Panel�
�/mx:Application�

Xmldg应用程序代码有两个准素分支。第一个是�mx:XML�标签,表明Flex这有一个XML数据源显示在外,以及供给一个URL.我将创造一个本地变量叫做stockData (使用id说明),�mx:DataGrid�构件可以作为dataProvider使用。

其余的代码就是界面。这有一个�mx:Panel� object给予一个精致的小的环绕网格。然后�mx:DataGrid� object显示数据。在�mx:DataGrid�之内是一组控制网格什么数据可以显示的�mx:DataGridColumn�规范。

当我们从Flex Builder启动这个程序,我们将会看到如图2所示的画面。

\

图2

Tags:
相关文章列表: