flex学习(二)简单绘制前后台示例

flex学习(二)简单绘制前后台示例

1.编辑绘制页面
flexsample.xml相当于平时使用的jsp或者velocity页面，用来做展现的，最后会生成swf文件的。双击打开该文件，切换到编辑模式。
点击windows---->show view---->others，打开Flex---Components页面，从里面先拖一个Button，一个List，这是我朋友给我的简单示例。
我先照这个样子了解一下多。

点击选中我们拖过来的button和list，分别填写以下内容，切换到source，可以看到：
<mx:List x="72" y="32" width="243" height="89" id="list_book" dataProvider="{books}" enabled="true" labelField="name"></mx:List>
<mx:Button x="225" y="143" label="测u-29739 " width="90" height="30" id="btn_test" enabled="true" click="callListBookService()"/>

注意里面的labelField="name"，表示list里面要显示的内容。如果不加，就显示的object:object

2.创建HTTPService
<mx:HTTPService
url=""
id="listBookService"
showBusyCursor="true"
result="listBookResult(event)"
fault="listBookFault(event)"
method="POST"
resultFormat="object"
useProxy="false">
</mx:HTTPService>

3.加入Action Script代码
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import json.*;

[Bindable]
private var books:ArrayCollection;

private function listBookResult(event:ResultEvent):void {
var jObject:Object = JParser.decode(event.result as String);
books = new ArrayCollection(jObject.books);
}

private function listBookFault(event:FaultEvent):void {
trace("request error");
}

private function callListBookService():void {
var url:String = "http://localhost:8080/flexsample/listBook.jsp";
listBookService.url = url;
var parms:Object = new Object();
parms.sessionId = "0000000000200000000000000550006";
listBookService.send(parms);
}

]]>
</mx:Script>

由于用到json，这里报红色了，需要导入一个json的相关包
http://www.waynemike.co.uk/jswoof
下载得到文件jswoof-v1-13.zip，解开压缩，重命名JSwoof-1.13.swc到flex_libs下面。

里面的http://localhost:8080/flexsample/listBook.jsp
访问的是我本地的一个mock的jsp页面，先简单演示一下，另外，我同事说有跨域问题，这个等熟悉了再考虑，listBook.jsp的内容如下：
{
"books":[
{"id":"1","name":"flex"},
{"id":"2","name":"j2ee"},
{"id":"3","name":"project"}
]
}

点击按钮，在list里面就能简单的显示从server得到的json的数据了。

在script上设置断点，但是我在flexsample.mxml文件上右键debug as ---->Flex application的时候，报错，无法进入断点，报错如下：
C:\WINDOWS\system32\Macromed\Flash\NPSWF32.dll
Flex Builder cannot locate the required debugger version of Flash Player.
You might need to install the debugger version of Flash Player 9 or reinstall Flex Builder.

访问页面
http://www.adobe.com/software/flash/about/
查看本机的flash player版本
You have version 10,0,42,34 installed，在flash上右键，没有debug出现

下载debug版本9
http://download.macromedia.com/pub/flashplayer/updaters/10/flashplayer_10_ax_debug.exe
下载debug版本10
http://download.macromedia.com/pub/flashplayer/updaters/9/flashplayer_9_ax_debug.exe

window---->preferences----->General---->Web Browser----选择Internet Explorer
如果要在另外两个里面调试，需要将NPSWF32.dll拷贝过去，应该就好了：）
那么就试试，
切换成firefox后报错：C:\Program Files\Mozilla Firefox\plugins\NPSWF32.dll
下载这个安装上就OK了
http://download.macromedia.com/pub/flashplayer/updaters/10/flashplayer_10_plugin_debug.exe

好了，这下IE和firefox都可以DEBUG了。开始仔细学习script和里面用到的这些components了。