Flex利用组件开发减小页面文件尺寸简单实现-软件开发北大青鸟·软件测试新街口校区

您的位置：首页 - 软件开发

Flex利用组件开发减小页面文件尺寸简单实现

[2010-01-29]

Flex什么都不错，效果尤其很棒，可是遗憾的是页面文件的尺寸太大

作者：陈明

Flex什么都不错，效果尤其很棒，可是遗憾的是页面文件的尺寸太大，在我们的带宽不够的现实中，我们发现打开个网页慢的实在受不了，仔细找了下制造Flex的Adobe公司，发现他们的解释是

1）可以利用组件化开发减小页面尺寸大小到1/2)

2） Flex主要用于公司内部带宽比较大的场合比较好。

看来Flex真正大面积在互联网运用还有很长一段路要走。下面我们来看下简单的Flex组件开发的一个案例:

flex组件可以用两种文件格式编写，一种是.mxml，一种是.as。.mxml文件的组件例子：

(在工程下新建mxml application）：

MyItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

private function onClick(e:MouseEvent):void{

Alert.show(data.price);

}

]]>

</mx:Script>

<mx:Image source="{data.pic}" click="onClick(event)" width="60" height="80" />

<mx:Label text="{data.username}"/>

</mx:VBox>

另一个比较麻烦在同目录下建立as文件(TestComponent.as)

package store.view.products

{

import mx.controls.Image;

import mx.controls.Label;

import mx.core.IDataRenderer;

import mx.core.UIComponent;

import mx.events.FlexEvent;

[Bindable(name="dataChange",type="mx.event.FlexEvnet")]

public class TestComponent extends UIComponent implements IDataRenderer{

private var image:Image;

private var labPrice:Label;

private var labName:Label;

private var _data:Object;

public function TestComponent() {

super();

}

[Bindable("dataChange")]

public function get data():Object{

return _data;

}

public function set data(value:Object):void{

_data = value;

invalidateProperties();

dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));

}

override protected function createChildren():void{

super.createChildren();

image = new Image();

labPrice = new Label();

labName = new Label();

addChild(image);

addChild(labPrice);

addChild(labName);

}

override protected function measure():void{

super.measure();

measuredWidth=100;

measuredHeight=150;

minWidth=100;

maxHeight=150;

}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

super.updateDisplayList(unscaledWidth,unscaledHeight);

this.graphics.beginFill(0xffffff,.3);

this.graphics.drawRect(0,0,100,150);

this.graphics.endFill();

image.width=90;

image.height=90;

image.move(5,5);

labName.width=90;

labName.height=90;

labName.move(5,100);

labPrice.width=90;

labPrice.height=20;

labPrice.move(5,120);

}

override protected function commitProperties():void{

super.commitProperties();

if(!data)

return ;

image.source=data.source;

labPrice.text = data.price;

labName.text = data.productName;

}

最后在页面各自调用方法如下：(下画线处注意)

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="onCreationComplete()" xmlns:products="store.view.products.*">

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var product:Object;

[Bindable]

private var arr:Array;

private function onCreationComplete():void{

//给product传送数据

product={source:"images/tv.jpg",productName:"TV",price:"$9900"};

arr = [ {pic:"images/tv.jpg",username:"tv",price:"60"}, {pic:"images/phone.jpg",username:"phone",price:"160"}, {pic:"images/computer.jpg",username:"computer",price:"2600"}];