BaseUI中文使用说明和范例

zrong — Sun, 19 Dec 2010 11:38:12 +0000

在Flex中，界面中的各个组件可以随着浏览器的大小而重新排列位置，始终在浏览器中保持满屏显示的状态。我们将这种效果称为“布局”。

Flex框架实现了一套自己的布局框架。在Flex3中，可以使用HBox、VBox等进行布局管理；在Flex4中，可以使用spark.layouts包中的布局管理器，这个包的布局功能更加强大和灵活。

那么，在Flash或者纯AS项目中，如何实现布局呢？

侦听舞台的Resize事件是解决这个问题的常用方法。但是如果布局比较复杂，就需要大量的代码来实现这些布局，使用侦听Resize事件的方法未免显得繁琐。于是，就有人实现了AS下的布局类或者布局框架。例如：senocular Layout class、Yahoo ASTRA Layout Utility等等。本文介绍的是BaseUI。

BaseUI的中文资料较少，这一篇官方说明的译文，通过它大致可以了解BaseUI的工作方式和特点。本文则准备以实例的方式基于一个纯AS项目来介绍BaseUI的基本用法，这样更容易理解。

一、BaseUI基本使用

在下面的这段代码中，建立了一个BaseUI的实例，然后绘制了一个shape并加入到显示列表中，将其置于舞台右下角，与舞台边框间隔10像素。

几个注意点：

必须设定stage的scaleMode为NO_SCALE，以及设定align为TOP_LEFT，否则布局可能会不正常；
BaseUI必须基于stage，虽然基于root也能工作，但是可能会导致布局不正常；
将元素加入BaseUI并不等于加入显示列表，因此还需要将元素自行加入显示列表中

效果（在浏览器中查看swf或下载后使用Flash Player播放）：
Note: There is a file embedded within this post, please visit this post to download the file.

源码：

^?View Code ACTIONSCRIPT

[SWF(width=500,height=300,backgroundColor=0xcccccc)]
public class BaseUITest extends Sprite
{
	public function BaseUITest()
	{
		//绘制一个背景颜色以便于观察
		graphics.beginFill(0xFFFFFF);
		graphics.drawRect(0, 0, 500, 300);
		graphics.endFill();
		//必须设置scaleMode和align，否则在布局的时候会不正常
		stage.scaleMode = StageScaleMode.NO_SCALE;
		stage.align = StageAlign.TOP_LEFT;
 
		//绘制一个背景颜色以便于观察
		graphics.beginFill(0xFFFFFF);
		graphics.drawRect(0, 0, 500, 300);
		graphics.endFill();
		//必须设置scaleMode和align，否则在布局的时候会不正常
		stage.scaleMode = StageScaleMode.NO_SCALE;
		stage.align = StageAlign.TOP_LEFT;
 
		//基于stage建立一个布局
		_baseUI = new BaseUI(this.stage);
		//为布局添加一个布局元素
		var __elementRB:ElementUI = _baseUI.add(createShape(this.stage));
		//设置该布局元素距右边和下方各10像素，并刷新布局使其生效
		__elementRB.right = 10;
		__elementRB.bottom = 10;
		__elementRB.refresh();
	}
 
	private var _baseUI:BaseUI;
 
	//快速绘制一个Shape用于测试，如果绘制的时候提供了父显示对象，就将其加入父显示对象的显示列表
	private function createShape($parent:DisplayObjectContainer=null):Shape
	{
		var __shape:Shape = new Shape();
		__shape.graphics.lineStyle(2, 0xFF0000);
		__shape.graphics.drawRect(0, 0 , 30, 30);
		if($parent)
			$parent.addChild(__shape);
		return __shape;
	}
}

二、可以使用几个BaseUI？

最开始，我以为BaseUI是可以用于其它的显示容器的，于是就做了个实验，建立一个Sprite并加入到stage中，并基于这个Sprite建立一个BaseUI，再使用这个新的BaseUI来控制Sprite的子显示对象。但发现这样做出来的布局无法正常显示。当然，可能是由于我遗忘了某些东西或者使用方法不正确，但我还是建议对于子容器使用com.soma.ui.layouts包。

三、HBoxUI的用法

HBox是一个横向布局容器，它继承自LayoutUI，而LayoutUI则继承自MovieClip（为什么是MovieClip而不是Sprite？这个我也不知道，我在源码中将LayoutUI的超类改为了Sprite，使用也一切正常）。

下面这段代码中建立了一个HBox容器，并为它增加了6个子显示对象，通过对HBox属性的设定，可以控制子显示对象的间隔以及在HBox中的对其方式。

几个注意点：

backgroundAlpha属性默认是完全透明，因此如果要显示背景色，就必须将其设定为大于0的值；
因为LayoutUI是显示对象，因此可以直接将HBoxUI的实例加入显示列表，而ElementUI是不能加入显示列表的；
要获取LayoutUI的对应ElementUI，可以使用element属性；
不需要将LayoutUI加入到BaseUI的实例中，但需要为LayouUI传递stage，如果传递其它的容器，则可能会导致布局问题。

效果（在浏览器中查看swf或下载后使用Flash Player播放）：
Note: There is a file embedded within this post, please visit this post to download the file.

源码：

^?View Code ACTIONSCRIPT

//增加一个HBox容器，设定背景色和透明度
var __hbox:HBoxUI = new HBoxUI(this.stage);
__hbox.backgroundColor = 0x0000FF;
//透明度默认是完全透明，所以必须设定才能让背景色显示出来
__hbox.backgroundAlpha = 0.2;
//让该容器置顶，宽度始终与舞台相同
__hbox.right = 0;
__hbox.left = 0;
__hbox.top = 0;
//让容器中的子显示对象的横向间隔为10像素
__hbox.childrenGap = new GapUI(10);
//让容器中的子显示对象基于容器的右下方对齐
__hbox.childrenAlign = HBoxUI.ALIGN_BOTTOM_RIGHT;
//加入6个shape
for(var i:int=0; i<6; i++)
{
	createShape(__hbox);
}
//将容器加入显示列表并刷新容器布局
addChild(__hbox);
__hbox.refresh();

四、CanvasUI的用法

使用HBoxUI和VBoxUI可以实现横向和纵向的布局。但我们有时候需要布局更灵活一些。例如希望3个显示对象分别排列在容器的左、中、右，如何处理呢？

下面这段代码建立了一个CanvasUI容器，在容器中增加了3个shape，并实现左、中、右排列。

效果（在浏览器中查看swf或下载后使用Flash Player播放）：
Note: There is a file embedded within this post, please visit this post to download the file.

源码：

^?View Code ACTIONSCRIPT

//增加一个CanvasUI容器
var __canvas:CanvasUI = new CanvasUI(this.stage);
__canvas.backgroundColor = 0xFF0000;
__canvas.backgroundAlpha = .5;
//让canvas在舞台中纵向居中，宽度与舞台宽度始终相同
__canvas.verticalCenter = 0;
__canvas.left = 0;
__canvas.right = 0;
//建立canvas的第1个子显示对象，在canvas中左下对齐
var __shape1:Shape = createShape();
var __element1:ElementUI = __canvas.add(__shape1);
__element1.left = 0;
__element1.bottom = 0;
//建立canvas的第2个子显示对象，在canvas中居中对齐
var __shape2:Shape = createShape();
var __element2:ElementUI = __canvas.add(__shape2);
__element2.horizontalCenter = 0;
__element2.verticalCenter = 0;
//建立canvas的第3个子显示对象，在canvas中右上对齐
var __shape3:Shape = createShape();
var __element3:ElementUI = __canvas.add(__shape3);
__element3.right =0;
addChild(__canvas);
__canvas.refresh();

五、全部源代码

^?View Code ACTIONSCRIPT

package
{
import com.soma.ui.BaseUI;
import com.soma.ui.ElementUI;
import com.soma.ui.layouts.CanvasUI;
import com.soma.ui.layouts.HBoxUI;
import com.soma.ui.vo.GapUI;
 
import flash.display.DisplayObjectContainer;
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
 
[SWF(width=500,height=300,backgroundColor=0xcccccc)]
public class BaseUITest extends Sprite
{
	public function BaseUITest()
	{
		//绘制一个背景颜色以便于观察
		graphics.beginFill(0xFFFFFF);
		graphics.drawRect(0, 0, 500, 300);
		graphics.endFill();
		//必须设置scaleMode和align，否则在布局的时候会不正常
		stage.scaleMode = StageScaleMode.NO_SCALE;
		stage.align = StageAlign.TOP_LEFT;
 
		//基于stage建立一个布局
		_baseUI = new BaseUI(this.stage);
		//为布局添加一个布局元素
		var __elementRB:ElementUI = _baseUI.add(createShape(this.stage));
		//设置该布局元素距右边和下方各10像素，并刷新布局使其生效
		__elementRB.right = 10;
		__elementRB.bottom = 10;
		__elementRB.refresh();
 
		//增加一个HBox容器，设定背景色和透明度
		var __hbox:HBoxUI = new HBoxUI(this.stage);
		__hbox.backgroundColor = 0x0000FF;
		//透明度默认是完全透明，所以必须设定才能让背景色显示出来
		__hbox.backgroundAlpha = 0.2;
		//让该容器置顶，宽度始终与舞台相同
		__hbox.right = 0;
		__hbox.left = 0;
		__hbox.top = 0;
		//让容器中的子显示对象的横向间隔为10像素
		__hbox.childrenGap = new GapUI(10);
		//让容器中的子显示对象基于容器的右下方对齐
		__hbox.childrenAlign = HBoxUI.ALIGN_BOTTOM_RIGHT;
		//加入6个shape
		for(var i:int=0; i<6; i++)
		{
			createShape(__hbox);
		}
		//将容器加入显示列表并刷新容器布局
		addChild(__hbox);
		__hbox.refresh();
 
		//增加一个CanvasUI容器
		var __canvas:CanvasUI = new CanvasUI(this.stage);
		__canvas.backgroundColor = 0xFF0000;
		__canvas.backgroundAlpha = .5;
		//让canvas在舞台中纵向居中，宽度与舞台宽度始终相同
		__canvas.verticalCenter = 0;
		__canvas.left = 0;
		__canvas.right = 0;
		//建立canvas的第1个子显示对象，在canvas中左下对齐
		var __shape1:Shape = createShape();
		var __element1:ElementUI = __canvas.add(__shape1);
		__element1.left = 0;
		__element1.bottom = 0;
		//建立canvas的第2个子显示对象，在canvas中居中对齐
		var __shape2:Shape = createShape();
		var __element2:ElementUI = __canvas.add(__shape2);
		__element2.horizontalCenter = 0;
		__element2.verticalCenter = 0;
		//建立canvas的第3个子显示对象，在canvas中右上对齐
		var __shape3:Shape = createShape();
		var __element3:ElementUI = __canvas.add(__shape3);
		__element3.right =0;
		addChild(__canvas);
		__canvas.refresh();
 
		this.stage.addEventListener(Event.RESIZE, handler_resize);
	}
 
	private var _baseUI:BaseUI;
 
	//快速绘制一个Shape用于测试，如果绘制的时候提供了父显示对象，就将其加入父显示对象的显示列表
	private function createShape($parent:DisplayObjectContainer=null):Shape
	{
		var __shape:Shape = new Shape();
		__shape.graphics.lineStyle(2, 0xFF0000);
		__shape.graphics.drawRect(0, 0 , 30, 30);
		if($parent)
			$parent.addChild(__shape);
		return __shape;
	}
 
	private function handler_resize(evt:Event):void
	{
		trace(stage.stageWidth, stage.stageHeight, stage.width, stage.height);
	}
}
}

了解Flex4中新的的Skin、CSS、Layout、NameSpace相关资料

zrong — Wed, 02 Sep 2009 16:42:59 +0000

Differences between Flex 3 and Flex 4 beta（比较Flex3和Flex4的区别，很全面，值得一看）
了解一下Flex 4里的fx、mx以及s命名空间
Introducing skinning in Flex 4 beta（强烈推荐！简单地介绍了Skin part、state、skinClass的编写方法以及FXG语法，有范例）
Overview of custom component changes in Adobe Flex 4 beta（自定义组件在Flex4中的改变）
Spark layouts with Flex 4 beta（不了解Flex4新的布局机制的，看看这个吧）
Enhanced States Syntax – Functional and Design Specification（新的state使用方法详细介绍）
MXML 2009 – Functional and Design Specification（着重介绍了Flex4的Namespace、Declarations、Private、Library标签的用法，以及Flex4与Flex3之间的区别）
Flex4:DataGroup and ItemRenderers
Flex 4 ＆ Custom Layouts（Flex4与自定义布局，中文在这里）

视频专题

视频：Flex4中的高级CSS
视频：在Flex4中为组件和程序换肤
Learn to Use Flash Builder 4 and Flex 4 SDK（Adobe Labs的教程，比较全面，由浅入深的涉及到Flex4的各个方面，有视频、有文章、有资源）
Tutorial and Demonstration Videos（视频教程集合，全面涉及Flex4的各个方面）

FXG专题

组件专题

Creating a custom Halo Accordion header skin in Flex 4（如果你垂涎于Flex4提供的新的皮肤功能，但有必须使用老的Halo组件，那么可以看看将这篇文章。看看如何使用FXG来定义Halo组件的皮肤）

Effect专题

Effects in Adobe Flex 4 beta

DataGroup和虚拟化

Using virtualization with Spark DataGroup and SkinnableDataContainer（在DataGroup和SkinnableDataContainer中使用虚拟化）
Using Virtualized Layouts and DataGroups in Flex 4（在Flex4中使用虚拟化布局）
Spark Virtualization – Functional and Design Specification（Spark组件中的虚拟化技术功能和设计说明）

Flex4 中有哪些出色的新特性？

zrong — Wed, 02 Sep 2009 16:22:56 +0000

文中介绍了Flex4的命名空间（namespaces）、FXG、布局（layout）、状态（state）和新的mxml标记（如fx:Declarations、fx:Definition、fx:Library等），值得一看。
译文：http://blog.csdn.net/lihe111/archive/2009/08/10/4431579.aspx
原文：http://www.sitepoint.com/article/whats-new-flex-4/

在Flash CS3中进行版面管理

zrong — Mon, 13 Aug 2007 05:30:39 +0000

Flex对版面的自动管理功能相当强大，在网页中，Flex程序会自动适应页面的更改，始终保持最大化显示，如果网页太小不能容纳程序的所有界面，就会自动出现滚动条。这样的效果，在Flash中只能自己手动写代码完成。

现在不必了，不信？下面这个例子是一个senocular.com提供的版面管理类，源码可以在这里下载:

Layout.zip

当然，还有一些例子可以看：

文档:

zrong's Blog » Layout

BaseUI中文使用说明和范例

一、BaseUI基本使用

二、可以使用几个BaseUI？

三、HBoxUI的用法

四、CanvasUI的用法

五、全部源代码

了解Flex4中新的的Skin、CSS、Layout、NameSpace相关资料

视频专题

FXG专题

组件专题

Effect专题

DataGroup和虚拟化

Flex4 中有哪些出色的新特性？

在Flash CS3中进行版面管理