Using Data-Driven Controls

最新推荐文章于 2023-12-20 17:11:41 发布

lentonnet

最新推荐文章于 2023-12-20 17:11:41 发布

阅读量1k

点赞数

分类专栏： Flex 文章标签： application menu collections button datagrid containers

本文链接：https://blog.csdn.net/lentonnet/article/details/1869982

版权

Flex 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这主要分为三个部分：
1，Using Data Providers and Collections
A，使用data的控件有：
Repeater component
Chart controls, such as the LineChart control
ColorPicker control
ComboBox control
DataGrid control
DateField control
HorizontalList control
List control
Menu control
MenuBar control
PopUpMenuButton control
TileList control
Tree control
ButtonBar control
LinkBar control
TabBar control
ToggleButtonBar control

B，这些控件使用的数据来源提供方式有：Array，XML。Flex Controls使用collections类来描述data providers；这些collections classes包含了一系列的XML或者Array对象，具体表现为ArrayCollection
以及XMLListCollection，用来提供对数据源的动态操作，比如
addItem,addItemAt,setItemAt,getItemIndex,removeItemAt。。。等方法甚至对数据进行sort或者filter

C，数据源的类型有线性的，也有多层嵌套结构的，典型的使用层状结构数据源的数据显示控件有：
Menu,MenuBar,PopMenuBar,Tree；
象DataGrid，List，Combox，TileList，HorizonalList之类的比较适合显示线型的一维

2，Using Menu-Based Controls
有三种之类：
A，Menu Control：
能产生瀑布状的菜单，一般默认都是不显示出来，都是被触发显示的，不能通过mxml tag来生成，必须靠
AS代码来制作，数据源可以是XML，XMLList，XMLListCollection，也可以是Array，ArrayCollection，甚至是Model，必须严格指定Menu的labelField！如果数据源是XML这必须指定根节点，icon也一样，必须显式的指定！
生产方式为：
var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
myMenu.labelField="@label";
myMenu.show(10, 10);
可以在数据源(比如XML或者Array)里指定菜单的如下属性：
type：check or radio or separator
toggled：true/false(是否选中)
enabled：true/false
groupName：当type="radio"的时候有效
label：显示在菜单上的字
icon：不可以用于当指定了type类型的节点，这个时候你可以替换以checkIcon，radioIcon

myMenu创建好后可以addEventListener一个itemClick事件：
myMenu.addEventListener(MenuEvent.ITEM_CLICK, itemClickInfo);
private function itemClickInfo(event:MenuEvent):void {
   ta1.text="event.type: " + event.type;
   ta1.text+="/nevent.index: " + event.index;
   ta1.text+="/nItem label: " + event.item.@label
   ta1.text+="/nItem selected: " + event.item.@toggled;
   ta1.text+= "/nItem type: " + event.item.@type;
}

B，MenuBar Control：
MenuBar 的性质大部分都和Menu一样，
不同的地方在于MenuBar 是默认显示在用户眼前的，而且是横向显示的，Menu是竖向显示的；
MenuBar 是可以直接在mxml tag里创建的；
MenuBar 的显示有点象典型的窗口顶部的管理菜单，点下顶级分类会弹出一级级的子菜单。其他的数据源，属性，事件都和Menu是一样的

C，PopUpMenuButton Control：
它其实是个PopUpButton Control，通过点击它旁边的一个Button来弹出一个Menu Control，该弹出的菜单我们叫他pop-up menu；
与上述两个Menu不一样的是，PopUpMenuButton只支持a single-level data：
其他和pop-up menu有关的都和上述一样；
在触发的事件方面如下：
PopUpMenuButton是PopUpButton的一个子类，所以它支持PopUpButton的所有事件
1，当用户从弹出菜单里选择一个item的时候，系统发生一个itemClick事件；
2，当用户点击左边的main button的时候系统既发生itemClick（MenuEvent）事件，同时还发生了MouseEvent的itemClick事件；事例代码如下：
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="600" width="600" creationComplete="initData();">
<mx:Script>
<![CDATA[
import mx.events.*;
import mx.controls.*;

// Set the Inbox (fourth) item in the menu as the button item.
private function initData():void {
Menu(p1.popUp).selectedIndex=3;
}

// itemClick event handler, invoked when you select from the menu.
// Shows the event's label, index properties, and the values of the
// label and data fields of the data provider entry specified by
// the event's item property.
public function itemClickHandler(event:MenuEvent):void {
Alert.show("itemClick event label: " + event.label
+ " /nindex: " + event.index
+ " /nitem.label: " + event.item.label
+ " /nitem.data: " + event.item.data);
}
//Click event handler for the main button.
public function clickHandler(event:MouseEvent):void {
Alert.show(" Click Event currentTarget.label: "
+ event.currentTarget.label);
}

//The menu data provider
[Bindable]
public var menuDP:Array = [
{label: "Inbox", data: "inbox"},
{label: "Calendar", data: "calendar"},
{label: "Sent", data: "sent"},
{label: "Deleted Items", data: "deleted"},
{label: "Spam", data: "spam"}
];

]]>
</mx:Script>

<mx:PopUpMenuButton showRoot="true" id="p1"
dataProvider="{menuDP}"
click="clickHandler(event)" itemClick="itemClickHandler(event);"/>
</mx:Application>

3，Using Navigator Containers
该container允许您在多个不同container之间来回活动，这一系列的子container每次只能出现一个或者说每次只能有一个呈现在用户的眼前；
flex不允许你在navigator里直接nest一个控件，你必须先把要显示的控件放在container里再nest到navigator里去；
典型的navigator container有：
ViewStack
TabNavigator
Accordion

A，ViewStack：flex并没有提供内建的机制来供用户在不同的子容器之间来回切换，你必须靠ButtonBar，LinkBar，ToggleButtonBar，TabBar，甚至使用AS逻辑来完成(selectedIndex属性)；
你可以使用以下属性来在当前ViewStack里的各个子容器之间来回切换：
selectedIndex：值为0到n-1，可以在mxml里设置，也可以在AS代码里逻辑控制；
selectedChild：指定要被激活的子容器的id名字

numChildren：告诉系统当前ViewStack里有多少的子容器：myViewStack.selectedIndex=myViewStack.numChildren-1;

有一个很重要的注意点：
ViewStack的子控件是在被激活的时候才被创建的，所以你不应该在子控件还没有被创建的时候就去设置它的selectedChild属性！

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">


<mx:VBox>


<mx:HBox borderStyle="solid">


<mx:Button id="searchButton" label="Search Screen"
click="myViewStack.selectedChild=search;"/>

<mx:Button id="cInfoButton" label="Customer Info Screen"
click="myViewStack.selectedChild=custInfo;"/>

<mx:Button id="aInfoButton" label="Account Info Screen"
click="myViewStack.selectedChild=accountInfo;"/>

</mx:HBox>


<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%">
<mx:Canvas id="search" label="Search">
<mx:Label text="Search Screen"/>
</mx:Canvas>
<mx:Canvas id="custInfo" label="Customer Info">
<mx:Label text="Customer Info"/>
</mx:Canvas>
<mx:Canvas id="accountInfo" label="Account Info">
<mx:Label text="Account Info"/>
</mx:Canvas>
</mx:ViewStack>

</mx:VBox>
</mx:Application>

B,TabNavigator是ViewStack的一个子类！所以几乎和上面的是一样的，只是它自己会根据自身拥有的子容器数量来生成相应数量的Tab供用户来回切换：
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:TabNavigator borderStyle="solid" >

<mx:VBox label="Accounts" width="300" height="150">

</mx:VBox>

<mx:VBox label="Stocks" width="300" height="150">

</mx:VBox>

<mx:VBox label="Futures" width="300" height="150">

</mx:VBox>

</mx:TabNavigator>
</mx:Application>

4，Accordion navigator container
表单对于很多的App来说是很常见的东西，但是当一个表单的内容巨大，或者是在进行一个市场调查和问卷调查的时候这个表单要填写的东西是很多的，通常要在一个页面显示是很难看的，我们可以通过Accordion来分页显示！
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="500">

<mx:Accordion id="accordion1" height="450">

<mx:Form id="shippingAddress" label="1. Shipping Address">

<mx:FormItem id="sfirstNameItem" label="First Name">
<mx:TextInput id="sfirstName"/>
</mx:FormItem>



</mx:Form>

<mx:Form id="billingAddress" label="2. Billing Address">

</mx:Form>

<mx:Form id="creditCardInfo" label="3. Credit Card Information">

</mx:Form>

<mx:Form id="submitOrder" label="4. Submit Order">

</mx:Form>

</mx:Accordion>
</mx:Application>

为了在各个表单之间来回导航除了使用本身的按钮外，可以这样做：
<mx:Button id="backButton" label="Back"click="accordion1.selectedIndex = accordion1.selectedIndex - 1;"/>
<mx:Button id="nextButton" label="Next"click="accordion1.selectedIndex = accordion1.selectedIndex + 1;"/>

它和ViewStack，TabNavigator一样，也支持selectedIndex.selectedChild,numChildren等属性！