Flash中的XML使用方法(下)

      FLASH 2005-8-19 15:38
5. 发送XML数据到服务器端
使用XML类的send 或 sendAndLoad 方法可以发送XML数据到服务器端语言(php、asp、cf等)开发的远程页面,这样就可以从数据库存储和接收数据,以及充分发挥服务器端语言的优势。例如你有一个用Flash开发的游戏,通过构建XML数据包然后发送到服务器端脚本,就可以实现积分榜的功能,并把前10名的分数存储在数据库中。这并不是说XML是Flash和远程脚本交换数据的唯一解决方式,事实上,解决方法众多,包括使用LoadVars类、WebService和XMLConnector 组件,甚至还可以使用Flash Remoting。
发送XML数据到远程脚本可以使用下面的代码:
1: XML.prototype.ignoreWhite = true;
2: var packet_xml:XML = new XML("<game><name>Liu21st</name><score>77</score></game>");
3: var target_xml:XML = new XML();
4: packet_xml.xmlDecl = "<?xml version=\"1.0\"";
5: packet_xml.sendAndLoad("http://localhost:8500/packetfromflash.cfm", target_xml);
6: target_xml.onData = function(data) {
7: _root.myText.text = data;
8: };

这里引入了一些新的概念,第一行给每个XML对象设置了ignoreWhite属性,取代了为每个XML对象实例单独设置。接下来的两行创建了两个XML对象,第一个实例packet_xml 用来存放需要发送的数据信息,target_xml实例用来存放从服务器端返回的数据信息。
sendAndLoad使用 POST 方法将XML数据发送到指定的 URL,下载服务器的响应,然后将其加载到参数中定的 targetXMLobject 中。而send方法只是发送数据到服务器端,并不接收任何响应。这两个方法都非常有用,但有些区别,send方法会打开新的浏览器或者覆盖当前的浏览器页面,而sendAndLoad并不会打开任何浏览器窗口。
另外一个重要的概念是xmlDecl属性,它指定有关文档的 XML 声明的信息。我们知道Html的申明信息是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
而XML1.0的申明是
<?xml version="1.0" ?>
接下来的sendAndLoad方法就是和远端脚本交换数据了。
1: packet_xml.sendAndLoad("http://localhost:8500/packetfromflash.cfm", target_xml);

其中的URL地址可以根据你的不同的服务器端脚本更换,在这里使用php、asp或cfm并不本质的区别,都是采用POST方法传递数据,不同的只是不同的脚本语言对POST数据的接收方式不同而已。
onData事件我们之前已经了解过了,可以用来保存服务器端的响应数据。
如果要使用send方法,可以换成下面的代码:
1: XML.prototype.ignoreWhite = true;
2: var packet_xml:XML = new XML("<game><name>Liu21st</name><score>77</score></game>");
3: packet_xml.xmlDecl = "<?xml version=\"1.0\"";
4: packet_xml.send("http://localhost:8500/packetfromflash.cfm", "_blank");

这段代码要比之前简洁些,它的作用是以新窗口的方式打开一个指定的URL页面,对于需要跳转到某个页面的时候这个方法很有效。不同的是target_xml 参数不再需要,而是定义一个目标窗口,有效的参数还有:
_blank: 指定一个新窗口
_parent: 指定当前帧的父级
_self : 指定当前窗口中的当前帧,默认参数
_top: 指定当前窗口中的顶级帧

6. 接收XML数据从服务器端
要从上面的例子中接收并返回数据通过服务器端ColdFusion脚本可以使用下面的代码
1: <--- this is ColdFusion code, not ActionScript. --->
2: <cfsilent>
3: <cfsetting enablecfoutputonly="Yes"
4: showdebugoutput="no">
5:
6: <cfset XMLPacket = getHTTPRequestData( ).content />
7:
8: <cffile action="WRITE"
9: file="#ExpandPath('./xmlpacket.xml')#"
10: output="#XMLPacket#"
11: addnewline="Yes" />
12: </cfsilent>
13: <cfoutput><result>1</result></cfoutput>


7. 使用 xmlconnector 分析XML
下面的内容仅适合FlashMX2004专业版,因为XMLConnector 组件FlashMX2004才引入。
下来会看到怎样通过改组件同步Blog(假设他有一个可用的公共XML)并在Flash表单中显示结果。下面这个例子使用了XMLConnector 组件链接一个远程的XML并在一个List组件中显示标题,但用户点击标题后,相应的文章描述会显示在TextArea组件中。因为使用的是xmlconnector组件,你只可以从简单的XML文件抓取内容,如果你使用WebServiceConnector 组件可以完成更多的功能。http://www.fullasagoog.com/webservice.cfm 是个很好的例子。
步骤一: 添加XMLConnector组件到舞台
XMLConnector组件是不可视组件,所以放的位置无所谓,在属性栏中设置实例名为xmlcon

步骤二:添加List和TextArea组件
分别拖动一个List和TextArea组件到舞台的合适位置,分别命名为headlines_ls 和description_txt


步骤三:设置XmlConnector组件
在XMLConnector中输入链接的XML文件的URL地址,在这个例子,我使用了我的Blog,因此URL为
blog.liu21st.com/rss2.php,当然你可以使用其它的xml路径,改变direction属性为receive,因为这里不需要发送任何数据。

步骤四:导入XML Schema
这一部分似乎有点复杂,XMLConnector让你可以创建复杂的应用程序而不需要太多的脚本代码。让XMLConnector知道XML文件结构的唯一方法就是手动定义或外部导入XML schema ,比较方便的方式是导入外部的XML结构。
可以从这里右键另存xml文件作为你的结构: blog.liu21st.com/rss.php
保存到本地后,在XMLConnector的组件检查器中导入

注意用红色框标注的位置,很多朋友找不到导入按钮。
选中resluts:xml后导入你要的xml文件,并把readonly属性设为true

步骤五:绑定XML结构到List和TextArea组件
添加第一个绑定,打开绑定选择窗口后选择item:array节点后选择确定,组件检查器面板中会显示添加了results.RDF.item 绑定项。

设置Bound To 属性,会打开选择窗口,我们在这里选择List组件的dataProvider : Array 项

第二个绑定项目我们选择item项下面的description项,面板中会显示results.RDF.item.[n].description

我们把bound to属性选择为TextArea组件的text : String 项。

步骤六:触发XML文件
点击行为面板,添加数据->添加数据源,在弹出窗口中选择 XMLConnector


我们还可以直接在脚本窗口输入下面代码来替换上面的操作:
1 : this.xmlcon.trigger();
如果你的XML数据不是utf8格式数据,可能还需要添加下面的一行来确保正常显示:
1 : System.useCodepage = true;

步骤七:测试和调整
现在已经可以开始测试你的swf文件了,但是我们会发现List组件的label会比较乱,因为没有指定label显示字段,下面我们来调整下。
在绑定窗口中选择results.RDF.item,然后更改formatter属性为Rearrange Fields,在下面的formatter options属性弹出框中输入label=title,然后确定 。
我们再对results.RDF.item.[n].description绑定做些调整,描述信息默认总是显示第一个。因为Index for 'item' 属性设置为0,我们可以更改为List组件的selectedIndex : Number 项。

这样,就会根据我们选择的List项来显示不同的描述信息了。
我们还可以添加更多的组件来显示更多的绑定信息,例如显示作者和链接地址等

步骤八:完成测试
现在你可以完整的看到效果了,恭喜你成功了!你成功地同步了外部XML数据,并且显示在舞台的相关组件中,然而这一切你没有添加一行脚本代码。
范例演示:
点击新窗口查看此Flash

在该演示中,为了做到开始就显示第一条文章的概要,我添加了部分代码:
1 : function bindingExecuted() {
2 : headlines_lc.selectedIndex = 0;
3 : headlines_lc.refreshDestinations();
4 : }
5 : headlines_lc.addEventListener("bindingExecuted", this);
源代码下载:[ up/1095930408.fla ]

8. 版本历史
1.0 November 26, 2003 Initial release.
1.1 November 27, 2003 Added section on XMLConnector.
1.2 June 15, 2004 Cosmetics.
标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}