`
啸笑天
  • 浏览: 3462321 次
  • 性别: Icon_minigender_1
  • 来自: China
社区版块
存档分类
最新评论

《Hello Flex4》(译《Flex4一学就会》)笔记(附源码)

    博客分类:
  • Flex
阅读更多

第1章 入门
为什么要用Flex 4
第l课 Flex初识

汗,第一课一上来书上代码就打错了,怎么继续.......

第2课 分派和侦听事件

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   initialize="application1_initializeHandler(event)">

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			private function button23_clickHandler(event:MouseEvent):void
			{
				if(event.target==button2){
					label.text+='Button 2 clicked\n';
				}else if(event.target==button3){
					label.text+='Button 3 clicked\n';
				}
			}

			private function application1_initializeHandler(event:FlexEvent):void
			{
				button3.addEventListener(MouseEvent.CLICK,button23_clickHandler);
			}

		]]>
	</fx:Script>
   <s:VGroup width="100%">
	   <s:Button id="button1" label="Button 1" click="label.text+='Button 1 clicked\n'"/>
	   <s:Button id="button2" label="Button 2" click="button23_clickHandler(event)"/>
	   <s:Button id="button3" label="Button 3" />
	   <s:Label id="label"/>
   </s:VGroup>	
</s:Application>

上述代码中给出了三种触发事件的方法。 

<![CDATA[和]]>中就不必考虑特殊的XML字符序列了

第3课 可绑定注解和数据绑定

package
{
	public class Task
	{   
		[Bindable]
		public var name:String;
		[Bindable]
		public var nameDou:String;
		public function Task( name:String="",nameDou:String="")
		{this.name=name;
			this.nameDou=nameDou;
		}
	}
}

  

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var _task:Task=new Task("leard binding","double binding");
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout paddingTop="50" paddingLeft="100" /> 
	</s:layout>
	<!-- 两次单向数据绑定实现双向绑定 -->
	<s:Label text=" 两次单向数据绑定实现双向绑定"/>
	<s:TextInput id="textInput1" text="{textInput2.text}" />
	<s:TextInput id="textInput2" text="{textInput1.text}" />
	<s:Label text="# cahrs: {textInput1.text.length}"/>
	<!-- flex4引入了双向绑定-->
	<s:Label text="flex4引入了双向绑定"/>
	<s:TextInput id="textInput3" text="@{textInput4.text}" />
	<s:TextInput id="textInput4" />
	<s:Label text="# cahrs: {textInput3.text.length}"/>
	<s:Label text="# cahrs: {textInput4.text.length}"/>
	
	<!-- 对模型单向数据绑定-->
	<s:Label text="对模型单向数据绑定"/>
	<s:TextInput id="textInput5" text="{_task.name}" focusOut="_task.name=textInput5.text" />
	<s:TextInput id="textInput6"  text="{_task.name}" focusOut="_task.name=textInput6.text"/>
	
	<!-- 对模型双向数据绑定-->
	<s:Label text="对模型双向数据绑定"/>
	<s:TextInput id="textInput7" text="@{_task.nameDou}"  />
	<s:TextInput id="textInput8"  text="{_task.nameDou}"/>
</s:Application>

数据绑定将一个属性的值复制给另一个属性,是因为使用了PropertyChangeListener。

要让数据绑定生效(不生成编译器警告),必须在数据绑定的源属性上使用可绑定注释[Bindable],而且在涉及引用具有源属性的Object的变量上,也要使用[Bindable]注释。

第4课 Flex应用程序结构概述

第5课 Spark组件、Halo组件和Flex4命名空间
接下来的内容
第2章 ActionScript 3、XML和E4X
第6课 变量、函数、类型和范围

 

package model {
  public class Task {
    public var name:String;
    public var something:*;
    protected var someDate:Date;
    internal var anInt:int;
    private var _aNumber:Number;
    
    public function Task(name:String = "") {
      this.name = name;
      something = "Ostrich";
      someDate = new Date();
      anInt = Math.random() * 10;
      _aNumber = Math.random() * 10;
    }
    public function getDate():Date {
      return someDate;
    }
    public function getAnInt():int {
      return anInt;
    }
    public function get aNumber():Number {
      return _aNumber;
    }
    public function set aNumber(value:Number):void {
      _aNumber = value;
    }
  }
}

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  width="100%" height="100%"
  initialize="init()">
<fx:Script>
<![CDATA[
  import model.Task;
  
  private function init():void {
    var task:Task = new Task("learn ActionScript 3");
    outputTA.text = "Name: " + task.name + "\n" +
      "Something: " + task.something + "\n" +
      "Date: " + task.getDate() + "\n" +
      "Int: " + task.getAnInt() + "\n" +
      "Number: " + task.aNumber;
    task.something = 5;
    outputTA.text += "\nNow something is: " + task.something;
    task.aNumber = 3.14;
    outputTA.text += "\nNow aNumber is: " + task.aNumber;
  }
]]>
</fx:Script>
  <s:TextArea id="outputTA" width="100%" height="100%"/>
</s:Application>

访问控制:public(任何类可以访问),protected(类本身或他的子类,于java不同,protected不允许访问同一包中的类),internal(默认,同一包中的类可以访问),private(类本身可以访问)

可以用特殊类型*表示任何类型。也可以跳过这个类型声明,但那样会生成编译器警告

ActionScript中的基本类型Boolean(true/false),int(32位有符号整数),uint(32位无符号整数),Number(64位浮点数),String(保存文本)

getter和setter用来为私有变量提供像属性一样的访问方式,从外部看和变量一样。按照约定,set函数的参数总是称为value。

第7课 对象、数组、集合和循环

一个函数里的变量都在同一个范围里,即没有块范围的概念。

for each...in循环,他迭代集合中的值

for ...in循环,他迭代集合(或是Object)中的键,可以用这个键来得到值。

可以用new Object()或者{键1:值1,  .... }构造对象。
第8课 接口、类型转换、is操作符和as操作符

与java接口不同的是在ActionScript3接口不允许加入常量,但他还是支持getter和setter方法,这点很重要,否则它们对于属性为中心的Flex就没有价值了。

不需要指定接口方法的访问控制,因为接口中的所有函数都是共有的(public)。

类型转换与java也不同,如将Object转换为Person,在java中(Person)Object,在ActionScript3中,Person(Object)。

is操作符:可以转换返回true,反之false。

as操作符:在类型转换可能失败的地方(对象类型不对),可以安全地使用as操作符,如果类型不匹配,只是返回null,所以我们使用了null检查。所以可以用as而不作is测试。

第9课 继承

ActionScript3中没有抽象类,可以用下面方法伪造抽象类:

package model {
//定义接口,关键字nterface
  public interface IThing {
    function get name():String;
    function set name(value:String):void;
    function getPoints():int;
  }
}

 

package model {
//定义的伪造抽象类,实现接口关键字implements。定义类关键字class
  public class Thing implements IThing {
    protected var _name:String;
    public function Thing(name:String = "") {
      this.name = name;
    }
    //如果没有实现的方法,则抛出一Error
    public function getPoints():int {
      throw new Error("Unimplemented getPoints method");
    }
    public function set name(value:String):void {
      _name = value;
    }
    public function get name():String {
      return _name;
    }
  }
}

 

package model {
//继承类关键字 extends
  public class Task extends Thing {
    public var points:int;
    public var due:Date;
    public static const ONE_DAY_IN_MSEC:Number = 1000*60*60*24;   
    public function Task(name:String = "") {
      super(name);//父类的构造函数
      due = new Date();
      due.setTime(due.getTime() + ONE_DAY_IN_MSEC);
    }
    //覆盖函数时,需要使用override关键字
    public override function getPoints():int {
      return points;
    }
  }
}

第10课 E4X、XML、XNLList和XMLListCollection

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="50%" height="100%"
			   initialize="init()">
	<fx:Script>
		<![CDATA[
			//下面三个都是Flex的框架类
			import mx.collections.Sort;
			import mx.collections.SortField;
			import mx.collections.XMLListCollection;
			private var _projectsXML:XML=
				<projects>
				  <project id="1" name="Proj1">
					<task id="1">
					  <name>Understand E4X</name>
					  <notes>cool, for XML anyway</notes>
					</task>
					<task id="2">
					  <name>Learn XMLList</name>
					  <notes>simple</notes>
					</task>
				  </project>
				  <project id="2" name="Proj2">
					<task id="3">
					  <name>Learn XMLListCollection</name>
					</task>
					<task id="4">
					  <name>Get a coffee</name>
					  <notes>very necessary</notes>
					</task>
				  </project>
				</projects>;
			private function init():void{
				var output:String="开始\n";
				output+="Full XML:\n"+_projectsXML;
				output+="\n\nUsing E4X and XMLList:\n";
				//可以用E4X按索引得到子节点,也可以通过搜索特性值得到子节点
				output+=_projectsXML.project[0].task[0].name+"\n";
				output+=_projectsXML.project.(@name=="Proj2").task.(@id==3).name;
				//获取一个XML对象的孩子节点时,就得到一个XMLList集合。
				var projects:XMLList=_projectsXML.children();
				for each(var project:XML in projects){
				//可以用句号(.)语法检索E4X、特性和子元素值,对于特性值只需添加@前缀即可
				output+="Project:" +project.@name+"\n";
				   for each(var task:XML in project.task){
					   output+="Task"+task.@id+":"+task.name;
					   if(task.hasOwnProperty('notes')){
						   output+="("+task.notes+")";
					   }
					   output+="\n";
				   }
				}
				
				output+="\nLearning XMLListCollection and Sorting:\n"
				//通过获取名为task的根节点的全部子元素,构建一个包含所有任务的新XMLListCollection集合。请注意,这个集合不包含文本节点,XML注释,处理指令和特性。
				var allTasks:XMLListCollection=new XMLListCollection(_projectsXML.descendants("task"));
				var sort:Sort=new Sort();
				sort.fields=[new SortField("name",true)];
				allTasks.sort=sort;
				allTasks.refresh();
				for each (var sortedTask:XML in allTasks) {
					output += sortedTask.name + "\n";
				}
				
				outputTA.text = output;
			}
		]]>
	</fx:Script>
	<s:TextArea id="outputTA" width="100%" height="100%"/>
</s:Application>

 ArrayCollection和XMLListCollection都扩展自ListCollectionView,ListCollectionView实现了IList接口和ICollectionView接口。

接下来的内容
第3章 Spark入门:基本类型、组件、FXG和MXML图形、视频
第11课 Spark基本类型

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import mx.graphics.SolidColorStroke;
			private const _scs:SolidColorStroke=new SolidColorStroke(0x000000,5,1.0);
		]]>
	</fx:Script>
	<s:Panel width="80%" height="80%" title="Primitives!">
		<s:Ellipse x="12" y="39" width="50" height="40" stroke="{_scs}" />
		<s:Rect x="127" y="40" width="50" height="40" stroke="{_scs}"/>
		<s:Line xFrom="90" yFrom="80" xTo="60" yTo="140" stroke="{_scs}"/>
		<s:Path data="M30 168L132 186 162 144 88 165 44 122" stroke="{_scs}"/>
		<s:Label text="In session 16 we'll take this further!" x="190" y="130" rotation="-30"/>
		<s:RichEditableText text="(select and type!)" x="260" y="120"/>
		<s:BitmapImage x="221" y="145" source="@Embed('HF4.png')"/>
	</s:Panel>
</s:Application>

Spark基本类型是构建Spark组件的构造块。

能够有笔画的类扩展自StrokedElement,能够有填充的类扩展子FliiedElement。

交互性的类扩展自InteractiveObject

下面的继承层次结构展示了所有这些组件之间的关系:


 

第12课 简单的Spark组件

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var _theory:String="";
			[Bindable]
			private var _bread:Number = 4;
		]]>
	</fx:Script>
	<fx:Declarations>
	<s:RadioButtonGroup id="moralityRBG"/>
		<s:RadioButtonGroup id="restaurantRBG" selectedValue="{_theory.length%2==0?'smoking':'non'}"/><!--注意-->
	</fx:Declarations>
	<s:Panel width="100%" height="100%" title="Simple Components!">
		<s:layout>
			<s:HorizontalLayout paddingLeft="5" paddingTop="5"/>
		</s:layout>	
		<s:VGroup>
			<s:TextArea id="textArea" width="200" height="50" text="@{_theory}"/>
			<s:TextInput id="textInput" width="200" text="@{_theory}"/>
			<s:HSlider minimum="0" maximum="11" id="hSlider" liveDragging="true" width="200" value="@{_bread}" />
			<s:VSlider id="vSlider" minimum="0" maximum="11" liveDragging="true" height="50" value="@{_bread}"/><!--这里做的双向关联就死机,记得_bread要初始化一个值,不要设为Number.NaN-->
			<s:Button label="{_theory}" width="200" color="{alarmTB.selected ? 0xFF0000 : 0}"  click="_bread = Math.min(_theory.length, 11)"/>
			<s:CheckBox id="checkBox" selected="{_bread % 2 == 0}" label="even?"/>
		</s:VGroup>
		<s:VGroup>
			<s:RadioButton label="Good" value="good"
						   group="{moralityRBG}"/>
			<s:RadioButton label="Evil" value="evil"
						   group="{moralityRBG}"/>
			<s:RadioButton label="Beyond" value="beyond"
						   group="{moralityRBG}"/>
			<s:RadioButton label="Smoking" value="smoking"
						   group="{restaurantRBG}"/>
			<s:RadioButton label="Non-Smoking" value="non"
						   group="{restaurantRBG}"/>
			<s:ToggleButton id="alarmTB" label="ALARM!"/>
			<s:NumericStepper id="numericStepper" value="@{_bread}"
							  minimum="0" maximum="11" stepSize="1"/>
			<s:Spinner id="spinner" value="@{_bread}"
					   minimum="0" maximum="11" stepSize="1"/>
		</s:VGroup>
	</s:Panel>
</s:Application>

  这个代码和书上的不同,貌似书上的有点问题,主要就是那个做双向关联和值的初始化问题。

  

第13课 数据驱动的Spark组件(列表)
第14课 FXG和MXML图形——制作一个游戏
第15课 摄像头和视频——个假的twitter客户端

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   width="100%" height="100%"
			   applicationComplete="onApplicationComplete(event)">
	
<fx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.events.FlexEvent;
		import flash.media.Camera;
		import flash.media.Video;
		
		private function onApplicationComplete(event:FlexEvent):void {
			var camera:Camera = Camera.getCamera();//获取Camera
			if (camera == null) {
				Alert.show("Buy a Mac.", "No Camera!");
				return;
			}
			var video:Video = new Video(320,240);//建立一个Video对象来显示视频
			video.attachCamera(camera);//将Camera连接上Video
			videoHolder.addChild(video);
			focusManager.setFocus(tweetTA);//TextArea获得焦点
		}
	]]>
</fx:Script>
	<s:Panel x="50" y="50" width="1000" height="310" title="Forget everybody else, what are you doing?">
		<s:SpriteVisualElement id="videoHolder" width="100%"  height="100%"/>
		<s:TextArea id="tweetTA" x="340" y="10" width="640" height="170" maxChars="280"/>
		<s:Button label="Tweet" x="340" y="190" width="640"/>
	</s:Panel>
</s:Application>

 以上实现在Flex应用程序中使用Flash的Camera和Video

接下来的内容
第4章 Spark容器、视图状态、特效和样式
第16课 Spark容器和布局

布局和容器在Spark中已经解耦。

容器和布局的类层次结构图:

1.四种布局概述  

   在Flex SDK 4(Gumbo)的spark组件库里面增加了一个page:spark.layouts。  

   其中包括了比较重要的四个布局class,分别是:BasicLayout、HorizontalLayout、TileLayout、VerticalLayout  

1、BasicLayout:(默认属性,当不指定定位后,则是绝对定位布局)  

   这是spark组件默认Flex SDK 3的布局方式,即绝对定位布局。  

   在Flex SDK 3 里面对应的是:layout="absolute"  

2、HorizontalLayout:  

   这是spark组件库里面的水平布局方式。  

   在里面对应的是:layout="horizontal"  

3、VerticalLayout:  

   这是spark组件库里面的竖直布局方式。  

   在Flex SDK 3 里面对应的是:layout="vertical"  

4、TileLayout:  

   这是spark组件库新增的布局方式,即格子布局方式。  

   TileLayout布局方式可以说是HorizontalLayout和VerticalLayout结合的方式。  

   请注意,在高度不确定的时候,TileLayout只使用一列。

还有一点是需要注意的:  

   paddingLeft、paddingRight、paddingTop、paddingBottom  

   这四个属性已经转移到了HorizontalLayout、VerticalLayout里面。这点也与Flex SDK 3有些区别。也就是说,在spark组件中的容器,已经不具备paddingLeft、paddingRight、paddingTop、 paddingBottom属性了。  

第17课 视图状态

自定义组件HPanel(H代表标题)

 

<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  creationComplete="onCreationComplete()">
<fx:Metadata>
  [Event(name="headerClick")]
</fx:Metadata>
<fx:Script><![CDATA[
  import flash.events.Event;
  import spark.skins.spark.PanelSkin;
  
  private function onCreationComplete():void {
    var panelSkin:PanelSkin = skin as PanelSkin;
    if (panelSkin == null) return;
    panelSkin.addEventListener(MouseEvent.CLICK, onHeaderClick);
  }
  
  private function onHeaderClick(event:MouseEvent):void {
	if (event.currentTarget is PanelSkin) {
       var ps:PanelSkin = PanelSkin(event.currentTarget);
       if (event.localY < 30) {
         dispatchEvent(new Event("headerClick"));
       } 
     }
  }
]]></fx:Script>
  <s:layout>
    <s:VerticalLayout paddingLeft="10" paddingTop="10"
      paddingBottom="10" paddingRight="10"/>
  </s:layout>
</s:Panel>

 测试应用程序,监听HPanel的headerClick事件,并做出相应的响应

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  xmlns:comp="components.*" width="100%" height="100%">
<fx:Script><![CDATA[
  private function toggleState(newState:String):void {
    currentState = (currentState == newState) ? '' : newState;
  }
]]></fx:Script>
  <s:layout><s:BasicLayout/></s:layout>
  <s:states>
    <s:State name="default"/>
    <s:State name="stateOne"
      stateGroups="[noStateTwo, noStateThree]"/>
    <s:State name="stateTwo"
      stateGroups="[noStateOne, noStateThree]"/>
    <s:State name="stateThree"
      stateGroups="[noStateOne, noStateTwo]"/>
  </s:states>
  <comp:HPanel id="stateOnePanel" title="State One Panel"
    left="10" top="10" width="200" right.stateOne="10"
    height="100" bottom.stateOne="10" excludeFrom="noStateOne"
    headerClick="toggleState('stateOne')">
    <s:Label text="松尾 芭蕉" fontSize="20"
      fontSize.stateOne="140"/>
  </comp:HPanel>
  <comp:HPanel id="stateTwoPanel" title="State Two Panel"
    left="10" bottom="10" top="115" top.stateTwo="10"
    width="200" right.stateTwo="10" excludeFrom="noStateTwo"
    headerClick="toggleState('stateTwo')">
    <s:Label width="100%" height="100%" fontStyle="italic"
       text="(I am trusting that the following pages
http://en.wikipedia.org/wiki/Matsuo_Bash%C5%8D
and http://en.wikisource.org/wiki/Frog_Poem
have the Kanji of Matsuo Bashō's name and
famous poem correct.)"/>
  </comp:HPanel>
  <comp:HPanel id="stateThreePanel" title="State Three Panel"
    excludeFrom="noStateThree" top="10"
    left="220" left.stateThree="10" right="10" bottom="10"
    headerClick="toggleState('stateThree')">
    <s:Label fontSize="50" fontSize.stateThree="70"
      text="古池や&#13;蛙飛びこむ&#13;水の音"/>
    <s:Label text="--Matsuo Bashō&#13;&#13;
The ancient pond&#13;A frog leaps in&#13;The sound of the water.
&#13;--Donald Keene"/>
  </comp:HPanel>
</s:Application>

第18课 特效和动画
第19课 CSS样式
第20课 MXML的内在原理
第21课 Spark组件的生命周期

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  preinitialize="onPreinitialize(event)"
  initialize="onInitialize(event)"
  creationComplete="onCreationComplete(event)"
  elementAdd="onElementAdd(event)"
  elementRemove="onElementRemove(event)"
  applicationComplete="onApplicationComplete(event)"
  width="100%" height="100%">
<fx:Script><![CDATA[
  import spark.events.ElementExistenceEvent;
  import mx.events.FlexEvent;
  
  [Bindable]
  private var _text:String = "";
  
  protected function onPreinitialize(event:FlexEvent):void {
    _text += "onPreinitialize: " + event + "\n";
  }

  protected function onInitialize(event:FlexEvent):void {
    _text += "onInitialize: " + event + "\n";
  }

  protected function onCreationComplete(event:FlexEvent):void {
    _text += "onCreationComplete: " + event + "\n";
  }

  protected function onApplicationComplete(
  event:FlexEvent):void {
    _text += "onApplicationComplete: " + event + "\n";
  }

  protected function onElementAdd(event:ElementExistenceEvent):
  void {
    _text += "onElementAdd: " + event + ", target = " +
      event.element + "\n";
  }
  protected function onElementRemove(
  event:ElementExistenceEvent):void {
    _text += "onElementRemove: " + event + "\n";
  }
]]></fx:Script>
  <s:layout>
    <s:VerticalLayout paddingLeft="10" paddingTop="10"
      paddingRight="10" paddingBottom="10"/>
  </s:layout>
  <s:Button id="kenny" label="Mmmph!"
    click="removeElement(kenny)"/>
  <s:TextArea id="debugTA" text="{_text}" width="100%"
    height="100%"/>
</s:Application>

 运行:

点击“Mmmph!”按钮:

接下来的内容
第5章 Flex4的Halo组件:使用DataGrid、导航容器
和弹出窗口
第22课 List和DataGrid

 

package model {
  [Bindable]
  public class Task {
    public var name:String;
    public var notes:String;
    public var due:Date;
    
    public function Task(
      name:String = "", notes:String = "", due:Date = null) {
      this.name = name;
      this.notes = notes;
      this.due = due == null ? new Date() : due;
    }
  }
}

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

<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  width="100%" height="100%">
<fx:Script>
<![CDATA[
  import model.Task;
  
  import mx.collections.ArrayCollection;
  
  [Bindable]
  private var _tasks:ArrayCollection = new ArrayCollection([
    new Task("Learn Flex 4", "This book is helping!",new Date(1999)),
    new Task("Lose weight", "Exercise? Fad diet? Both?"),
    new Task("Buy groceries", "Including vegetables this time!"),
    new Task("Eat"),
	new Task("Drink"), 
	new Task("Be Merry")          ]);
    
  private function formatTask(task:Task):String {
    return task.name +
    (task.notes == "" ? "" : (" (" + task.notes + ")")) +
    ", due on " + dateFormatter.format(task.due) + ".";
  }

  private function formatDate(item:Object,
    column:DataGridColumn):String
  {
    var task:Task = item as Task;
    return task == null ? "" : dateFormatter.format(task.due);
  }
]]></fx:Script>
<fx:Declarations>
  <mx:DateFormatter id="dateFormatter" formatString="YYYY-MM-DD"/>
</fx:Declarations>
  <s:layout>
    <s:HorizontalLayout paddingLeft="10" paddingTop="10"
      paddingBottom="10" paddingRight="10"/>
  </s:layout>
  <mx:List dataProvider="{_tasks}" labelFunction="formatTask"
    alternatingItemColors="[#EEEEEE, #FFFFFF]"
    variableRowHeight="true" wordWrap="true"
    width="250" height="150"/>
  <mx:DataGrid width="100%" height="150" dataProvider="{_tasks}">
    <mx:columns>
      <mx:DataGridColumn headerText="Name" dataField="name"
        width="150"/>
      <mx:DataGridColumn headerText="Due" dataField="due"
        width="100" labelFunction="formatDate"/>
      <mx:DataGridColumn headerText="Notes" dataField="notes"/>
    </mx:columns>
  </mx:DataGrid>
</s:Application>

 第23课 TabNavigator、ViewStack和Accordion

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  width="100%" height="100%"
  initialize="init()">
  <s:layout>
    <s:VerticalLayout paddingLeft="10" paddingTop="10"
      paddingRight="10" paddingBottom="10"/>
  </s:layout>
  <mx:Panel width="100%" height="100%" title="I See Your Halo...">
    <mx:LinkBar dataProvider="{vs}" width="100%"/>
    <mx:ViewStack id="vs" width="100%" height="100%">
      <mx:TabNavigator width="100%" height="100%" paddingLeft="5"
        label="Tab Navigator">
        <mx:VBox label="One" width="100%" height="100%">
          <mx:Label text="Here's a button:"/>
          <mx:Button label="A Halo Button"/>
        </mx:VBox>
        <mx:VBox label="Two" width="100%" height="100%">
          <mx:Label text="Shameless self-promotion:"/>
          <mx:Image
source="http://www.manning.com/armstrong/armstrong_cover150.jpg"/>
        </mx:VBox>
        <mx:VBox label="Three" width="100%" height="100%">
          <mx:Label text="Stuff inside Three"/>
        </mx:VBox>
      </mx:TabNavigator>
      <mx:Accordion width="100%" height="100%" label="Accordion">
        <mx:VBox label="Four" width="100%" height="100%">
          <mx:Label text="Stuff inside Four"/>
        </mx:VBox>
        <mx:VBox label="Five" width="100%" height="100%">
          <mx:Label text="Stuff inside Five"/>
        </mx:VBox>
        <mx:VBox label="Six" width="100%" height="100%">
          <mx:Label text="Stuff inside Six"/>
        </mx:VBox>
      </mx:Accordion>
    </mx:ViewStack>
  </mx:Panel>
</s:Application>

 Halo导航容器(像ViewStack,TabNavigator,Accordion)只能包含Halo容器子组件(像VBox,HBox,Box或Canvas)。不能将Spark的Group直接放在导航容器内,也不能将Spark或Halo的TextInput直接放在任何导航容器内。

第24课 Alert.show PopupManager

 

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  layout="vertical" title="TestTitleWindow"
  width="600" height="400" showCloseButton="true"
  close="PopUpManager.removePopUp(this);">
  <fx:Script>
    <![CDATA[
      import mx.managers.PopUpManager;
    ]]>
  </fx:Script>
  <s:Group width="100%">
    <s:Label text="You can put a lot in a TitleWindow!"/>
  </s:Group>
  <mx:RichTextEditor id="richTextEditor" width="100%" height="100%"/>
</mx:TitleWindow>
<!--在TitleWindow这个容器内,既能使用Spark的Group,也可以使用Halo组件。-->

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  width="100%" height="100%"
  initialize="init()">
<fx:Script><![CDATA[
  import mx.events.CloseEvent;
  import mx.controls.Alert;
  import mx.managers.PopUpManager;

  private function showAlert(event:MouseEvent):void {
    Alert.show('That was easy!', 'Alert!');
  }

  private function showPopUp(event:MouseEvent):void {
    var titleWindow:TestTitleWindow = TestTitleWindow(
      PopUpManager.createPopUp(this, TestTitleWindow, true));//modal 如果为 true,则该窗口为模态窗口,也就是说在删除该窗口之前,用户将无法与其它弹出窗口交互。
    titleWindow.x = 50;
    titleWindow.y = 50;
    titleWindow.addEventListener(CloseEvent.CLOSE, onCloseTTW);
  }
  
  private function onCloseTTW(event:CloseEvent):void {
    var ttw:TestTitleWindow = TestTitleWindow(event.target);
    richEditableText.text = ttw.richTextEditor.htmlText;
  }
]]></fx:Script>
  <s:layout>
    <s:VerticalLayout paddingLeft="10" paddingTop="10"
      paddingRight="10" paddingBottom="10"/>
  </s:layout>
  <s:Button label="Show Alert" click="showAlert(event)"/>
  <s:Button label="Show TestTitleWindow" click="showPopUp(event)"/>
  <s:Label text="HTML from TestTitleWindow RichTextEditor:"
    fontWeight="bold"/>
  <s:RichEditableText id="richEditableText" width="100%"
    height="100%"/>
</s:Application>

接下来的内容
第6章 用Flex格式化器和验证器构建用户友好的表单
第25课 格式化器和验证器

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  width="100%" height="100%">
<fx:Script><![CDATA[
  protected function moneyTIFocusOutHandler(event:FocusEvent):void {//当发生focusOut事件时,这个函数格式化输入框的文本
    var formattedText:String =
      currencyFormatter.format(moneyTI.text);
	//格式化器在失败的时候返回空字符串,所以一定要检查
    if (formattedText != "") {//只有在格式化成功后才将文本框中的文本赋值给moneyTI
      moneyTI.text = formattedText;
    }
  }
]]></fx:Script>
<fx:Declarations>
  <mx:CurrencyFormatter id="currencyFormatter"
    precision="2" rounding="nearest"/>
  <mx:CurrencyValidator id="currencyValidator" precision="2" 
    source="{moneyTI}" property="text" triggerEvent="focusOut"/>
</fx:Declarations>
  <s:layout>
    <s:VerticalLayout paddingTop="10" paddingLeft="10"/>
  </s:layout>
  <s:TextInput id="moneyTI"
    focusOut="moneyTIFocusOutHandler(event)"/>
  <s:Button label="Really, I'm just here for the focus..."/>
</s:Application>

第26课 真实的表单、格式化器和验证器
接下来的内容
第7章 Cairngorm实践:SocialStalkr(twitter+雅虎地图)
创建SocialStalkr项目
twitter入门
雅虎地图入门
Caimgorm
Caimgorm的历史和动机
下载和安装Caimgorm 2.2.1
Cairngorm事件顺序概述
创建主应用程序
创建ModelLocator
创建控制包
SocialStalkrController.as
创建CairngormUtils和ServiceUtils
创建TwittefDelegate
创建命令
创建可视组件
接下来的内容

 

  • 大小: 699.5 KB
  • 大小: 137.6 KB
  • 大小: 93.9 KB
  • 大小: 54 KB
  • 大小: 57.2 KB
分享到:
评论
3 楼 fendoubattier 2010-12-23  
呵呵,我QQ344684023,可以交流交流
2 楼 啸笑天 2010-12-22  
fendoubattier 写道
你也开始学flex了啊?

嗯,学习学习!一起学习哈
1 楼 fendoubattier 2010-12-22  
你也开始学flex了啊?

相关推荐

    Flex4 一学就会 (Hello Flex4)

    总的来说,"Flex4 一学就会"是一本引导初学者全面掌握Flex4开发的书籍,从基本概念到实际应用,覆盖了Flex4开发的核心技术。通过学习和实践“Hello Flex4”项目,你可以逐步熟悉Flex4的开发流程,为进一步深入学习...

    Flex4入门经典<Hello!Flex4>附带源码

    另一份"Manning.Hello.Flex.4.Nov.2009-HF4SourceCode.zip"则包含了书中所有示例的源代码,这些源代码是学习Flex 4的重要资源,读者可以通过它们来学习Flex 4的实际应用。 总的来说,《Flex4入门经典&lt;Hello!Flex4&gt;...

    一学就会flex4.0书上源码

    "一学就会flex4.0书上源码" 提供的是学习Flex 4.0时配套的实践代码,这些源码旨在帮助读者更好地理解和掌握书中讲解的各种概念和技术。 1. Flex SDK:Flex 4.0 基于 Flex Software Development Kit (SDK),这是一个...

    flex 4 学习资料

    Flex4)用一个简单登录流程代码演示Flex自定义事件声明、触发__精灵★ 's Flex/Flash/AS3 技术 & 网络游戏_百度空间 分享:Flex4+Struts2+Spring3+Blazeds 百度空间_应用平台 Flex中嵌入Google地图 - 菩提树 - ITeye...

    学Flex建的第一个项目HelloFlex

    "学Flex建的第一个项目HelloFlex"是一个非常适合初学者入门的实践教程,旨在帮助新学习者理解Flex的基本概念和开发流程。 在本项目中,你将学习如何使用Flex SDK或Flex Builder来创建一个简单的应用,该应用的核心...

    FLEX helloworld实例源码

    4. **Flex构建过程**:在AS_0100_HelloWorld实例中,你将学习如何创建一个Flex项目,编写ActionScript代码,然后在MXML文件中引用这些代码,最后通过Flex Compiler将源代码编译为SWF文件,该文件可以在Web浏览器中...

    Hello! Flex 4

    Flex 4 is an open-source tool that allows developers to easily add life to web applications with dynamic user features, colorful transitions, and eye-catching animations. Flex also provides powerful ...

    Hello-Flex-4

    《Hello Flex 4》是一本面向初学者的Flash Builder 4开发指南,旨在帮助读者迅速掌握使用Flex技术进行Web应用程序开发的基本技能。Flex是Adobe公司推出的一种基于开放源代码的框架,它允许开发者使用ActionScript 3...

    hello flex4

    《Hello Flex4》是一本专为初学者设计的Flex4编程指南,它的独特之处在于将理论与实践紧密结合,通过丰富的示例帮助读者深入理解和掌握Flex4技术。Flex4是Adobe Flex框架的一个重大更新,提供了更强大的组件库和更...

    Flex第一步源码 Flex

    这个“Flex第一步源码”可能包括了简单的Flex应用实例,例如Hello World程序,以及一些基本组件的使用示例。通过学习这些源码,开发者可以了解Flex的基本语法和工作原理,逐步掌握Flex开发技能。

    flex第一步源码

    在这个过程中,开发者通常会学习如何创建基本的Flex项目,设置环境,编写第一个Hello World程序,以及如何使用Flex Builder或IntelliJ IDEA等集成开发环境(IDE)。源码中可能包含了这些基本示例,帮助初学者理解...

    Android第一行代码源码 HelloWorld

    Android第一行代码源码 ...HelloWorldAndroid第一行代码源码 HelloWorldAndroid第一行代码源码 HelloWorldAndroid第一行代码源码 HelloWorldAndroid第一行代码源码 HelloWorldAndroid第一行代码源码 HelloWorld

    Manning.Hello.Flex.4.Nov.2009.rar

    《Hello Flex 4》是由Manning出版社在2009年11月出版的一本关于Adobe Flex技术的图书。这本书是Flex开发者的入门指南,旨在帮助读者理解和掌握Flex 4框架,从而创建富互联网应用程序(RIA)。Flex 4是Adobe Flex的...

    Hello Flex Ajax通信实例

    4. **Ajax响应Flex**:在JavaScript函数执行完毕后,可以通过Bridge返回结果到Flex。这通常是通过调用Bridge的`callFlex`方法,传入ActionScript方法名和参数实现。 5. **数据交换**:Flex和Ajax之间不仅可以传递...

    flex4使用RemoteObject学习

    Flex是Adobe开发的一种用于构建富互联网应用程序(RIA)的框架,它允许开发者创建交互性强、图形用户界面丰富的Web应用。RemoteObject是Flex提供的一种服务,它使得客户端与服务器端之间的通信变得简单,尤其是对于...

    Flex4插件安装和环境配置

    Flex4插件是Adobe Flash Builder 4的一个关键组成部分,它允许开发者创建基于Flex技术的富互联网应用程序(RIA)。在本文中,我们将详细介绍如何安装Flex4插件并配置开发环境。 首先,你需要下载以下三个文件: 1. `...

    flex 第一步全书源码

    每一章用“Chapter_N”来区分,其中,N代表章的序号,比如Chapter_2/HelloWorld表示的是第二章的示例程序HelloWorld,程序的主程序文件与程序名相同,HelloWorld文件夹下的HelloWorld.mxml即为主程序文件。...

Global site tag (gtag.js) - Google Analytics