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 = [email protected]();
//当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>