flex ButtonBar 学习笔记一

上班第五天了，第一次从事编程，确实心里没有底，在项目组长的要求下，在周末做的第一个例子，因为flex是零基础，所以写的例子感觉是照着java的方式写的，花费了不少的时间，只当作是学习笔记。 （注：希望结交更多的朋友）

 

package com.practice.util
{
	public class ReadXml
	{
		public function ReadXml()
		{
		}
		
		/**
		 * 以深度优先法遍历名称为node的整个XML对像,当其一个结点label属性的值是以str开始时，
		 * 将该label属性的值存放在arr数组中如果该结点还有子结点则继续递归调用该方法自身。
		 */
		private static function iteratorMatch(node:XML,str:String,label:String,arr:Array):void{
			
			for each(var element:XML in node.elements()){
				var s:String = element.@label;
				
				//当s以str开始时，将其存入数组
				if(s.match("^"+str+".*")!=null){
					arr.push(s);
				}
				iteratorMatch(element,str,label,arr);
			}
		}
		
		/**
		 * 将名称为node的XML对像中所有结点的指定label属性值，如果该值是以str开始，将其存入数组arr。
		 * @return 
		 * 		将arr进行排序后返回
		 */
		public static function xmlAttributeToArray(node:XML,str:String,label:String):Array{
			var arr:Array = new Array();
			iteratorMatch(node,str,label,arr);
			return arr.sort(Array.CASEINSENSITIVE);
		}
		
		/**
		 * 以深度优先法遍历名称为node的整个XML对像,当其一个结点label属性的值与str相等时，
		 * 将该label属性的值存放在arr数组中如果该结点还有子结点则继续递归调用该方法自身。
		 */
		public static function iteratorEquals(node:XML,str:String,label:String,arr:Array):void{
			
			for each(var element:XML in node.elements()){
				var s:String = element.@label.toString();
				
				//当s以str开始时，将其存入数组
				if(s==str){
					for each(var ele:XML in element.elements()){
						arr.push(ele.@label);
					}
				}
			}
		}
		
		
		/**
		 * 将名称为node的XML对像的第index个结点的所有子结点的label属性值存入数组arr
		 * @return 
		 * 		返回label属性值数组arr; (注:index是从0开始;)
		 */ 
		public static function xmlSelectedIndexToArray(node:XML,index:Number,label:String):Array{
			var arr:Array = new Array();
			for each(var element:XML in node.elements()[index].elements()){
				arr.push(element.@label);
			}
			return arr;
		}
	}
}

 

 

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|ButtonBar {
	cornerRadius:0;
	backgroundColor:#66ccff;
	borderColor:#ffffff;
	fillColors:#cccccc,#000000;
	selectionColor:#99ff33;
	color:#ff6600;
}

s|Panel {
	border-color:#33ccff;
	borderThicknessLeft:10;
	borderThicknessTop:6;
	borderThicknessBottom:2;
	borderThicknessRight:10;
	cornerRadius:5;
	highlightAlphas:0.3,0.25;
	footerColors:#e7e7e7,#c7c7c7;
}

s|TextArea {
	border-color:#999999;
}

 

 

<?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" creationComplete="init()">
	
	
	<fx:Script>
		<![CDATA[
			import com.practice.util.ReadXml;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.ListEvent;
			
			import spark.events.IndexChangeEvent;
			import spark.events.TextOperationEvent;
			
			[Bindable]
			public var example:XML=null;
			[Bindable]
			private var title:ArrayCollection=new ArrayCollection(["tree","list"]);
			/* [Bindable]
			private var menu:XML=<menu>
									<menuitem label="File">
										<menuitem label="New"/>
									</menuitem>
									<menuitem label="Edit">
										<menuitem label="cut"/>
										<menuitem label="copy"/>
										<menuitem label="paste"/>
									</menuitem>
									<menuitem label="Help">
											<menuitem label="About"/>
									</menuitem>
								</menu> */
			
			//初始化加载外部xml文件
			public function init():void{
				var loader:URLLoader=new URLLoader();
				loader.addEventListener(Event.COMPLETE,handleComplete);
				loader.load(new URLRequest("day1.xml"));
			}
			
			//加载事件完成处理函数
			private function handleComplete(event:Event):void{
				
				try{
					example=new XML(event.target.data);
				}catch(e:TypeError){
					trace(e.message);
				}
			}

			//按钮菜单事件处理函数
			protected function buttonbar1_changeHandler(event:IndexChangeEvent):void
			{
				if(event.newIndex==0){
					currentState="State1";
				}else if(event.newIndex==1){
					currentState="State2";
					
					cbmenu.selectedIndex=0;
					
					//返回满足条件的内容数组
					var arr:Array=ReadXml.xmlSelectedIndexToArray(example,0,"label");
					array_show(arr);
				}
			}

			//下拉列表框事件处理函数
			protected function cbmenu_changeHandler(event:ListEvent):void
			{
				var arr:Array = new Array();
				ReadXml.iteratorEquals(example,event.target.text,"label",arr);
				array_show(arr);
			}

			//文本框焦点事件处理函数
			protected function search_focusInHandler(event:FocusEvent):void
			{
				//切换状态
				currentState="State2";
				search.text="";
				
				//下拉框置空
				cbmenu.selectedIndex=-1;
				
				//返回满足条件的内容数组
				var arr:Array=ReadXml.xmlAttributeToArray(example,search.text,"label");
				array_show(arr);
			}

			//文本框改变事件处理函数
			protected function search_changeHandler(event:TextOperationEvent):void
			{			
				//下拉框置空
				cbmenu.selectedIndex=-1;
				
				//返回满足条件的内容数组
				var arr:Array=ReadXml.xmlAttributeToArray(example,search.text,"label");
				
				array_show(arr);
			}
			
			
			//在文本区ta中显示指定数组的值
			private function array_show(arr:Array):void{
				
				//文本区置空
				ta.text="";		
				
				//在文本区中显示数组中的内容
				var length:int = arr.length;
				for(var i:int=0;i<length;i++){
					ta.text += arr[i]+"\n";
				}
			}
		]]>
	</fx:Script>
	<fx:Style source="day1.css" />
	<s:states>
		<s:State name="State1"/>
		<s:State name="State2"/>
	</s:states>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<s:transitions>
		<s:Transition id="tran1" fromState="*" toState="State1">
			<s:Parallel target="{tree}">
				<s:Wipe direction="down" duration="500" />
			</s:Parallel>
		</s:Transition>
		<s:Transition id="tran2" fromState="*" toState="State2">
			<s:Sequence target="{list}">
				<s:Wipe direction="down" duration="500" />				
			</s:Sequence>
		</s:Transition>
	</s:transitions>
	<s:ButtonBar dataProvider="{title}" change="buttonbar1_changeHandler(event)" x="17" left="10" y="7" top="5" width="100">
	</s:ButtonBar>
	<s:TextInput id="search" top="5" left="120" width="90" text="请输入" change="search_changeHandler(event)" focusIn="search_focusInHandler(event)" />
	<s:Panel id="tree" width="200" height="95%" left="10" includeIn="State1" top="40" title="树型菜单">
		<mx:Tree left="0" top="0" height="100%" width="200" dataProvider="{example.menuitem}" labelField="@label">
		</mx:Tree>
	</s:Panel>
	<s:Panel id="list" width="200" height="95%" left="10" top="40" includeIn="State2" title="下拉列表">
		<mx:ComboBox id="cbmenu" top="10" left="5" dataProvider="{example.menuitem}" labelField="@label" width="120" change="cbmenu_changeHandler(event)"/>
		<s:TextArea id="ta" left="0" top="40" width="100%" height="100%" borderVisible="true" editable="false"/>	
	</s:Panel>		
</s:Application>