Flex提供的容器,主要实现容纳其他的控件或者是容器,以达到美化页面和布局的目的,这种容器,很类似于java所提供的布局管理器,实现对应用程序的布局。

在Flex中,所提供的容器很多,每个容器都有相应的使用规则,常见的有两种,布局容器和导航容器

1 布局容器
Hbox: 其内的每一个控件或容器只能按照水平的顺序排列

Vbox: 其内的每一个控件或容器只能按照垂直的顺序排列

panel :是一个具有标题和边框等的容器,常常用来容纳其他的容器

HDividedBox HDividedBox容器对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。

Tile Tile容器以多行或多列的形式排列其子级。

Form Form容器以标准的表单格式排列其子级。

ApplicationControlBar ApplicationControlBar 容器容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。

ControlBar ControlBar 容器将控件置于 Panel 或 TitleWindow 容器的下边缘。

2.导航容器

导航容器的主要作用是用来在多个容器之间进行换。在使用的过程中,需要我们注意的是,导航器容器的直接子级必须是容器, 要么是布局容器, 要么是导航器容器。 无法在导航器内直接嵌套控件;控件必须是导航器容器的子容器的子级。

Accordion Accordion 容器定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。

TabNavigator TabNavigator 容器创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。

ViewStack ViewStack 导航器容器由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制;您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。

转自:http://bbs.airia.cn/FLEX/thread-2738-1-1.aspx?searchtext=37
HTTPService


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initializeHandler(event)">
<mx:Script>
<![CDATA[
private function initializeHandler(event:Event):void {
countriesService.send();
}
private function changeHandler(event:Event):void {
statesService.send();
}
]]>
</mx:Script>
<!-- 载入纯静态的xml数据 -->
<mx:HTTPService id="countriesService" url="http://www.rightactionscript.com/states/xml/countries.xml" />
<!-- 载入由php生成的xml数据 -->
<mx:HTTPService id="statesService" url="http://www.rightactionscript.com/states/xml/states.php">
<!-- 以下标签就是要发送到服务端的数据了,可以这样理解:有一个名为country的变量,它的值为花括号{}里的内容 -->
<mx:request>
<country>{country.value}</country>
</mx:request>
</mx:HTTPService>
<mx:VBox>
<!-- 此控件的数据由第一个<mx:HTTPService/>控件接收的内容提供,并且由这个ComboBox控制着第二个ComboBox所要显示的内容 -->
<mx:ComboBox id="country" dataProvider="{countriesService.lastResult.countries.country}"
change="changeHandler(event)" />
<!-- 下面的ComboBox已经绑定了{statesService.lastResult.states.state},随它的数据改变而改变 -->
<mx:ComboBox dataProvider="{statesService.lastResult.states.state}" />
</mx:VBox>
</mx:Application>

URLLoader


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initializeHandler(event)">
<mx:Script>
<![CDATA[
private var _countriesService:URLLoader;
private var _statesService:URLLoader;
private function initializeHandler(event:Event):void {
_countriesService = new URLLoader();
_countriesService.addEventListener(Event.COMPLETE, countriesCompleteHandler);
_countriesService.load(new URLRequest("http://www.rightactionscript.com/states/xml/countries.xml"));
_statesService = new URLLoader();
_statesService.addEventListener(Event.COMPLETE, statesCompleteHandler);
XML.ignoreWhitespace = true;
}
private function countriesCompleteHandler(event:Event):void {
var xml:XML = new XML(_countriesService.data);
country.dataProvider = xml.children();
}
private function statesCompleteHandler(event:Event):void {
var xml:XML = new XML(_statesService.data);
state.dataProvider = xml.children();
}
private function changeHandler(event:Event):void {
var request:URLRequest = new URLRequest("http://www.rightactionscript.com/states/xml/states.php");
var parameters:URLVariables = new URLVariables();
parameters.country = country.value;
request.data = parameters;
_statesService.load(request);
}
]]>
</mx:Script>
<mx:VBox>
<mx:ComboBox id="country" change="changeHandler(event)" />
<mx:ComboBox id="state" />
</mx:VBox>
</mx:Application>

WebService 方法一


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initializeHandler(event)">
<mx:Script>
<![CDATA[
private function initializeHandler(event:Event):void {
statesService.getCountries();
}
private function changeHandler(event:Event):void {
statesService.getStates(country.value);
}
]]>
</mx:Script>
<mx:WebService id="statesService"
wsdl="http://www.rightactionscript.com/states/webservice/StatesService.php?wsdl">
<mx:operation name="getCountries" />
<mx:operation name="getStates" />
</mx:WebService>
<mx:VBox>
<mx:ComboBox id="country"
dataProvider="{statesService.getCountries.lastResult}" change="changeHandler(event)" />
<mx:ComboBox dataProvider="{statesService.getStates.lastResult}" />
</mx:VBox>
</mx:Application>

WebService 方法二


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initializeHandler(event)">
<mx:Script>
<![CDATA[
private function initializeHandler(event:Event):void {
statesService.getCountries.send( );
}
private function changeHandler(event:Event):void {
statesService.getStates.send( );
}
]]>
</mx:Script>
<mx:WebService id="statesService" wsdl="http://www.rightactionscript.com/states/webservice/StatesService.php?wsdl">
<mx:operation name="getCountries" />
<mx:operation name="getStates">
<mx:request>
<country>{country.value}</country>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:VBox>
<mx:ComboBox id="country"
dataProvider="{statesService.getCountries.lastResult}" change="changeHandler(event)" />
<mx:ComboBox dataProvider="{statesService.getStates.lastResult}" />
</mx:VBox>
</mx:Application> 


var request:URLRequest = new URLRequest("flashrek.swf");   
var loader:Loader = new Loader();   
  
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);   
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);   
  
function loadProgress(event:ProgressEvent):void {   
    var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;   
    percentLoaded = Math.round(percentLoaded * 100);   
    trace("Loading: "+percentLoaded+"%");   
}   
  
function loadComplete(event:Event):void {   
    trace("Complete");   
}   
  
loader.load(request);   
addChild(loader);  


这里要注意loader的load方法只接受URLRequest对象作为参数;另外就是ProgressEvent类,比较简单,看帮助就好了。

这里只是LOAD外部对象,如何做自身LOADING还要再研究研究,等有了答案再更新。

更新自身Loading


stop();   
import flash.display.LoaderInfo;   
import flash.events.ProgressEvent;   
import flash.text.TextField;   
var loadText:TextField=new TextField();   
addChild(loadText);   
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,myloadmovie);   
this.loaderInfo.addEventListener(Event.COMPLETE,myover);   
function myloadmovie(event:ProgressEvent):void {   
    var hl:Number=event.bytesLoaded/event.bytesTotal;   
    var n:Number=Math.round(hl*100);   
    loadText.text=n+"%";   
}   
function myover (event:Event):void {   
    this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS,myloadmovie);   
    nextFrame();   
}  

下面是另一种自身loading的方法


stop();   
import flash.display.LoaderInfo;   
import flash.events.ProgressEvent;   
import flash.text.TextField;   
var loadText:TextField=new TextField();   
loadText.x=220;   
loadText.y=200;   
addChild(loadText);   
myload.addEventListener(Event.ENTER_FRAME,onEnterFramee);   
function onEnterFramee (event:Event) {   
    if (framesLoaded==totalFrames) {   
        trace(1);   
        myload.removeEventListener(Event.ENTER_FRAME,onEnterFramee);   
        nextFrame();   
    }   
    else {   
        var percent:Number=root.loaderInfo.bytesLoaded/root.loaderInfo.bytesTotal;   
        var m:Number=Math.round(percent*100);   
        myload.gotoAndStop(m);   
        loadText.text=m+"%";   
    }   
}        //myload为场景中预设的loading动画的MC名字  

使用以下的方法,使SWF文件强制不从浏览器读本地的缓存。或强制其SWF文件每次都去 读取最新的媒体文件

确保每次都读取最新的SWF文件

1:使用”Expires”标头 这是在HTML文件中告诉浏览器不读取本地缓存
在<head> </head> 中间加以下代码


<!-- BEGIN INSERT -->
<META HTTP-EQUIV="Expires" CONTENT="Mon, 04 Dec 1999 21:29:02 GMT">
<!-- END INSERT -->

这样的话,每次访问这个文件都会告诉浏览器其缓存版本过期,将重新从服务器端读取最新的文件

2:直接告诉浏览器根本就没有缓存
在包含SWF文件的HTML页面里的</body>插入:


<!-- BEGIN INSERT -->

<HEAD>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
</HEAD>

<!-- END INSERT -->

没有Cache标头 不支持IE5版本,所以微软建议使用带Cacahe控制标头

3:当在HTML页面间连接跳转时
在点击超连接时将强制其从服务器上下载最新文档而不是从本地缓存中浏览

例如:


<A HREF="stockPrices.htm?1">Current stock prices</A>

以上方法将阻止读取本地缓存

如何阻止从缓存中读取加载变量

问题:
当从外部数据源加载数据时,有时浏览器将数据存贮在本地缓存中,这样就导致
在调用loadVariables方法加载数据时会从本地缓存中读取数据而代替从原始数据
读取的信息。

解决:
为确保flash加载的是最新的变量,附加一个随机数变量,这样就可以原始档中加载最新的数据

例如:
方法一:


loadVariables("mypage.asp?nocache=" + random(65000), 0, "POST");

方法二:


loadVariables("mypage.asp?nocache=" + getTimer(), 0, "POST");

这样确保每次加载的数据是最新的.

本教程主要介绍HTML网页如何取得形如test.html?foo=mytest的foo参数,以及在HTML网页中如何向swf传递参数。

一、在HTML网页中使用js获取参数。
我们知道HTML页面是在客户端执行的,这样要获取参数必须使用客户端脚本(如Javascript),在这点上不同于服务器端脚本获取参数方式。下面的这段js代码获取HTML网页形如”test.html?foo=mytest&program=flash” “?”后所有参数。


<script language=javascript>
<!--
	var hrefstr,pos,parastr;
	hrefstr = window.location.href;
	pos = hrefstr.indexOf("?");
	parastr = hrefstr.substring(pos+1);
	if (pos>0){
		document.write("所有参数:"+parastr);
	} else {
		document.write("无参数");
	}
//-->
</script>

下面的这段js代码则可以更加细化获取HTML网页某一参数


<script language=javascript>
<!--
	function getparastr(strname)
	{
		var hrefstr,pos,parastr,para,tempstr;
		hrefstr = window.location.href;
		pos = hrefstr.indexOf("?")
		parastr = hrefstr.substring(pos+1);
		para = parastr.split("&");
		tempstr="";
		for(i=0;i<para.length;i++)
		{
			tempstr = para[i];
			pos = tempstr.indexOf("=");
			if(tempstr.substring(0,pos) == strname)
			{
			return tempstr.substring(pos+1);
			}
		}
		return null;
	}
// 获取program参数
	var programstr = getparastr("program");
	document.write(programstr);
//-->
</script>

二、在HTML网页中向swf传递参数。
方法一:在网页中使用js,SetVariable设置flashobject中的变量,代码如:
// “HtmlToSwf”为网页中的flashobject
IDHtmlToSwf.SetVariable(“_root.info_str”,”Happy Newyear”);
方法二:路径参数,如test.swf?foo=happy2005
方法三:使用FlashVars,以下主要介绍FlashVars的用法。使用FlashVars后嵌入HTML的flashobject代码如下:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="FlashVars" align="middle">
<param name="allowscriptAccess" value="sameDomain" />
<param name="movie" value="FlashVars.swf" />
<param name="FlashVars" value="foo=happy2005&program=flash&language=简体中文-中国" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="FlashVars.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="FlashVars" align="middle" allowscriptAccess="sameDomain" FlashVars="foo=happy2005&program=flash&language=简体中文-中国" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

通过上面的代码,在SWF(FlashVars.swf)中就可以直接获取foo、program、language变量数据。FlashVars.fla获取FlashVars参数的代码如下:


// 创建三个文本字段 
_root.createTextField("foo_txt",1,0,0,16,16);
_root.createTextField("program_txt",2,0,32,16,16);
_root.createTextField("language_txt",3,0,64,16,16);
foo_txt.autoSize = true;
foo_txt.border = true;
program_txt.autoSize = true;
program_txt.border = true;
language_txt.autoSize = true;
language_txt.border = true;
// 获取FlashVars变量
foo_txt.text = "HTML中的foo参数:"+foo;program_txt.text = "HTML中的program参数:"+program;
language_txt.text = "HTML中的language参数:"+language;

三、两者的有效结合。
在HTML网页中使用js获取参数,然后将获取的参数作为FlashVars写入flashobject传递给swf。代码如下:


<script language=javascript>
<!--
function writeflashobject(parastr) 
{
	document.write("<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0 width="550" height="400" id="FlashVars" align="middle">n");
	document.write("<param name="allowscriptAccess" value="sameDomain" />n");
	document.write("<param name="movie" value="FlashVars.swf" />n");
	document.write("<param name="FlashVars" value=""+ parastr +"" />n");
	document.write("<param name="quality" value="high" />n");
	document.write("<param name="bgcolor" value="#ffffff" />n");
	document.write("<embed src="FlashVars.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="FlashVars" align="middle" allowscriptAccess="sameDomain" FlashVars=""+ parastr +"" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />");
	document.write("</object>");
}
function getparastr()
{
	var hrefstr,pos,parastr,para,tempstr1;
	hrefstr = window.location.href;
	pos = hrefstr.indexOf("?") parastr = hrefstr.substring(pos+1);
	return parastr;
}
var parastr = getparastr();
writeflashobject(parastr);
//-->
</script>

AS3 中使用URLRequest 和URLLoader 与服务器交互

AS3 中使用 URLLoader 与 URLRequest 取代了先前版本 LoadVars 方法. 初学者可能又会迷糊了.
在现在帮助系统没有完善的情况下, 这里写篇简单的教程, 方便大家往 AS3 过渡.

在 AS3 中, 有关于网络操作的内置类全部在 flash.net 里. 下面是本教程要用到的类的清单 :

URLLoader : 用于从网络或者本地读取文件, 可以通过设置他的 dataFormat 属性改变收到的文本类型.
与 AS2 的 LoadVars 不同的是, 他的默认值 URLLoaderDataFormat.TEXT 即纯文本格式, 所以在读取外部文本变量的时候得修改一下他的 dataFormat 为URLLoaderDataFormat.VARIABLES. 不过在 AS2 中没有该属性, 取代的是contentType 属性.

URLRequest : 用于传递变量到服务器, 以及 URLLoader 要 load 的目标路径. 可以通过设置他的 contentType 属性改变发送到服务器的变量类型, 默认是 application/x-form-urlencoding, 也就是 URLEncode 编码.

URLVariables : 用于配置传递到服务器变量的键 / 值集合, 如user1=Kakera&user2=Eigo.

URLLoaderDataFormat : 用于设置 URLLoader 读取文件的类型, 有 TEXT (纯文本), VARIABLES (URLEncoding 的键 / 值集合), BINARY (2 进制格式), URLLoader 会根据相应的类型进行解码操作, 如解码 URLEncode

同时还有其他不常用的 :
URLRequestMethod : 决定使用哪种方式传递数据到服务器, POST 或者 GET.
URLReqeustHeader : 用于配置传递到服务端的 HTTP 标头.

值得一提的是, URLLoader 还有相当完整的事件让我们来获取读取数据的状态, 下面是有关 URLLoader 事件的清单.

complete : 使用 URLLoader.load() 方法后, 数据完全加载完毕时触发, 通常如果能够触发这个事件的话, 说明你的程序没有问题.

httpStatus : 使用 URLLoader.load() 方法后, 获取 HTTP 状态代码时触发, 通过判断他的 state 属性我们可以获得远程文件的加载状态. 成功 (200), 没有权限 (403), 找不到文件 (404), 服务器内部错误 (500) 等等. 这个事件总是在 compelete 之前被触发.

ioError : 使用 URLLoader.load() 方法时, 发生致命错误时触发, 我还没碰到过..

open : 使用 URLLoader.load() 方法后, 开始从服务器下载数据时触发一次, 此时的 URLLoader.bytesLoaded 一定是 0.

progress : 使用 URLLoader.load() 方法后, 在从服务器下载数据的过程中持续触发, 通过侦听他的变化我们可以很方便的为 URLLoader 做加载状态的显示.

securityError : FlashPlayer 的安全错误, 比如跨域加载, 从硬盘 (文件系统) 发送 / 读取服务器上的数据.

关于注册侦听器的建议

flashplayer 内置类的所有事件都有相关事件类常量来表示, 推荐使用他们来注册事件侦听器. 而所有的内置类的事件类 (Event) 全部在 flash.events 包中,如使用:

import flash.events.Event;
urlLoaderInstance.addEventListener(Event.COMPLETE, completeHandler);

来代替

urlLoaderInstance.addEventListener(“complete”, completeHandler);

下面是 URLLoader 支持的事件所对应类的清单, 他们可以在 Flex Builder 2 的文档中找到:

complete : Event.COMPLETE
httpStatus : HTTPStatusEvent.HTTP_STATUS
ioError : IOErrorEvent.IO_ERROR
open : Event.OPEN
progress : ProgressEvent.PROGRESS
securityError : SecurityErrorEvent.SECURITY_ERROR

然后下面是使用 URLLoader 的一些简单的例子

1. 单纯的读取服务器或者硬盘上同目录下叫 Variables.txt 文本文件, 文本的内容是:

user1=Kakera&user2=Eigo&user3=Keirago

LoadVariablesOnly.fla

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLLoaderDataFormat;
import flash.net.URLVariables;
import flash.events.Event;
import flash.events.HTTPStatusEvent;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.events.SecurityErrorEvent;
//
// 配置 URLRequest, 设置目标路径等
//
var request:URLRequest = new URLRequest(“Variables.txt”);
//
// 配置 URLLoader, 注册侦听器等
//
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.addEventListener(Event.COMPLETE, loader_complete);
loader.addEventListener(Event.OPEN, loader_open);
loader.addEventListener(HTTPStatusEvent.HTTP_STATUS, loader_httpStatus);
loader.addEventListener(ProgressEvent.PROGRESS, loader_progress);
loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, loader_security);
loader.addEventListener(IOErrorEvent.IO_ERROR, loader_ioError);
loader.load(request);

function loader_complete (e:Event):void {
trace(“Event.COMPLETE”);
trace(“目标文件的原始数据 (纯文本) : ” + loader.data);
//
// 使用 URLVariables 处理原始数据并进行遍历同时输出数据
//
var variables:URLVariables = new URLVariables(loader.data);
for (var i in variables) {
trace(i + ” : ” + variables[i]);
}
}
function loader_open (e:Event):void {
trace(“Event.OPEN”);
trace(“读取了的字节 : ” + loader.bytesLoaded);
}
function loader_httpStatus (e:HTTPStatusEvent):void {
trace(“HTTPStatusEvent.HTTP_STATUS”);
trace(“HTTP 状态代码 : ” + e.state);
}
function loader_progress (e:ProgressEvent):void {
trace(“ProgressEvent.PROGRESS”);
trace(“读取了的字节 : ” + loader.bytesLoaded);
trace(“文件总字节 : ” + loader.bytesTotal);
}
function loader_security (e:SecurityErrorEvent):void {
trace(“SecurityErrorEvent.SECURITY_ERROR”);
}
function loader_ioError (e:IOErrorEvent):void {
trace(“IOErrorEvent.IO_ERROR”);
}

继续阅读