<?xml version="1.0"?>
<!-- Simple example to demonstrate the VSlider control. -->
<!--
如何使用Flex VSlider
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var imageWidth:Number=0;
private var imageHeight:Number=0;
// Event handler function to change the image size.
private function changeSize():void
{
phoneImage.width=uint(imageWidth*hSlider.value/100);
phoneImage.height=uint(imageHeight*hSlider.value/100);
}
]]>
</mx:Script>
<mx:Panel id="panel" title="VSlider Control Example"
height="100%" width="100%"
layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:HBox width="50%">
<mx:Image id="phoneImage" source="@Embed('assets/Nokia_6630.png')"
creationComplete="imageWidth=phoneImage.width; imageHeight=phoneImage.height;" />
</mx:HBox>
<mx:VBox horizontalAlign="center">
<mx:Label color="blue" text="Drag the slider to resize the image."/>
<mx:VSlider id="hSlider"
dataTipPlacement="top"
minimum="0" maximum="100" value="100"
tickColor="black"
snapInterval="1" tickInterval="10"
labels="['0%','100%']"
allowTrackClick="true"
liveDragging="true"
change="changeSize();"/>
</mx:VBox>
</mx:Panel>
</mx:Application>
如何使用Flex VScrollBar
关键字: flex flex3 vscrollbar<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the VScrollBar control. -->
<!--
如何使用Flex VScrollBar
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.ScrollEvent;
// Event handler function to display the scroll location
// as you move the scroll thumb.
private function myScroll(event:ScrollEvent):void
{
showPosition.text = "VScrollBar properties summary:" + '\n' +
"------------------------------------" + '\n' +
"Current scroll position: " + event.currentTarget.scrollPosition + '\n' +
"The maximum scroll position: " + event.currentTarget.maxScrollPosition + '\n' +
"The minimum scroll position: " + event.currentTarget.minScrollPosition ;
}
]]>
</mx:Script>
<mx:Panel id="panel" title="VScrollBar Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue"
text="Click on the scroll bar to view its properties."/>
<mx:VScrollBar id="bar" height="100%"
minScrollPosition="0" maxScrollPosition="{panel.width - 20}"
lineScrollSize="50" pageScrollSize="100"
repeatDelay="1000" repeatInterval="500"
scroll="myScroll(event);"/>
<mx:TextArea height="100%" width="100%" id="showPosition" color="blue"/>
</mx:Panel>
</mx:Application>
如何使用Flex VRule
关键字: flex flex3 vrule<?xml version="1.0"?>
<!-- Simple example to demonstrate the VRule control. -->
<!--
如何使用Flex VRule
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="VRule Control Example" id="myPanel" horizontalAlign="center"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:VRule rollOverEffect="WipeUp" strokeWidth="1" strokeColor="red"/>
<mx:Label width="100%" color="blue"
text="Move mouse over VRule control to redraw it."/>
</mx:Panel>
</mx:Application>
如何使用Flex Tree
关键字: flex flex3 tree<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<!--
如何使用Flex Tree
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var selectedNode:XML;
// Event handler for the Tree control change event.
public function treeChanged(event:Event):void {
selectedNode=Tree(event.target).selectedItem as XML;
}
]]>
</mx:Script>
<mx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management"/>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
</node>
</mx:XMLList>
<mx:Panel title="Tree Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue"
text="Select a node in the Tree control."/>
<mx:HDividedBox width="100%" height="100%">
<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
<mx:TextArea height="100%" width="50%"
text="Selected Item: {selectedNode.@label}"/>
</mx:HDividedBox>
</mx:Panel>
</mx:Application>
如何使用Flex TileList
关键字: flex flex3 tilelist要准备几张图片,放到mxml文件同级的assets文件夹。
<?xml version="1.0"?>
<!-- Simple example to demonstrate the TileList Control. -->
<!--
如何使用Flex TileList
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/Nokia_6630.png")]
public var phone1:Class;
[Bindable]
[Embed(source="assets/Nokia_6680.png")]
public var phone2:Class;
[Bindable]
[Embed(source="assets/Nokia_7610.png")]
public var phone3:Class;
[Bindable]
[Embed(source="assets/Nokia_lg_v_keypad.png")]
public var phone4:Class;
[Bindable]
[Embed(source="assets/Nokia_sm_v_keypad.png")]
public var phone5:Class;
]]>
</mx:Script>
<mx:Panel title="TileList Control Example" height="100%" width="100%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:Label width="100%" color="blue"
text="A TileList control displays items in rows and columns."/>
<mx:TileList id="CameraSelection" height="250" width="300"
maxColumns="2" rowHeight="225" columnWidth="125">
<mx:dataProvider>
<mx:Array>
<mx:Object label="Nokia 6630" icon="{phone1}"/>
<mx:Object label="Nokia 6680" icon="{phone2}"/>
<mx:Object label="Nokia 7610" icon="{phone3}"/>
<mx:Object label="Nokia LGV" icon="{phone4}"/>
<mx:Object label="Nokia LMV" icon="{phone5}"/>
</mx:Array>
</mx:dataProvider>
</mx:TileList>
</mx:Panel>
</mx:Application>
如何使用Flex TabBar
关键字: flex flex3 tabbar<?xml version="1.0"?>
<!-- Simple example to demonstrate the TabBar control. -->
<!--
如何使用Flex TabBar
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.controls.TabBar;
[Bindable]
public var STATE_ARRAY:Array = [{label:"Alabama", data:"Montgomery"},
{label:"Alaska", data:"Juneau"},
{label:"Arkansas", data:"LittleRock"}
];
private function clickEvt(event:ItemClickEvent):void {
// Access target TabBar control.
var targetComp:TabBar = TabBar(event.currentTarget);
forClick.text="label is: " + event.label + ", index is: " +
event.index + ", capital is: " +
targetComp.dataProvider[event.index].data;
}
]]>
</mx:Script>
<mx:Panel title="TabBar Control Example" height="75%" width="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:Label width="100%" color="blue"
text="Select a tab to change the current panel."/>
<mx:TabBar itemClick="clickEvt(event);">
<mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
</mx:TabBar>
<mx:TextArea id="forClick" height="100%" width="100%"/>
</mx:Panel>
</mx:Application>
如何使用Flex Spacer
关键字: flex flex3 spacer<?xml version="1.0"?>
<!-- Simple example to demonstrate the Spacer control. -->
<!--
如何使用Flex Spacer
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel id="panel" title="Spacer Control Example" height="75%" width="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:Text width="100%" color="blue"
text="The Spacer control pushes the second image to the right edge of the HBox container."/>
<mx:HBox width="100%">
<mx:Image source="@Embed('assets/Nokia_6630.png')"/>
<mx:Spacer width="100%"/>
<mx:Image source="@Embed('assets/Nokia_6680.png')"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
如何使用Flex ProgressBar
关键字: flex flex3 progressbar<?xml version="1.0"?>
<!-- Simple example to demonstrate the ProgressBar control. -->
<!--
如何使用Flex ProgressBar
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var j:uint=10;
// Event handler function to set the value of the
// ProgressBar control.
private function runit():void
{
if(j<=100)
{
bar.setProgress(j,100);
bar.label= "CurrentProgress" + " " + j + "%";
j+=10;
}
if(j>100)
{
j=0;
}
}
]]>
</mx:Script>
<mx:Panel title="ProgressBar Control Example" height="75%" width="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:Label width="100%" color="blue"
text="Click the button to increment the progress bar." />
<mx:Button id="Speed" label="Run" click="runit();"/>
<mx:ProgressBar id="bar" labelPlacement="bottom" themeColor="#F20D7A"
minimum="0" visible="true" maximum="100" label="CurrentProgress 0%"
direction="right" mode="manual" width="100%"/>
</mx:Panel>
</mx:Application>
如何使用Flex NumericStepper
关键字: lex flex3 numericstepper<?xml version="1.0"?>
<!-- Simple example to demonstrate the NumericStepper control. -->
<!--
如何使用Flex NumericStepper
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="NumericStepper Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10">
<mx:Text width="100%" color="blue"
text="Default NumericStepper control with a minimum=0, maximum=10, and stepSize=1."/>
<mx:NumericStepper/>
<mx:Text width="100%" color="blue"
text="NumericStepper control with a minimum=10, maximum=40, stepSize=0.01, and starting value of 20."/>
<mx:NumericStepper id="ns"
minimum="10.00" maximum="40.00"
stepSize="0.01"
value="20.00"
width="65"/>
<mx:Label color="blue" text="You selected {ns.value}"/>
</mx:Panel>
</mx:Application>
如何使用Flex List关键字: flex flex3 list如何使用Flex List , list 提供了鼠标上移,选中时高亮显示。
<?xml version="1.0"?>
<!-- Simple example to demonstrate the List Control
Flex简单的列表列子
MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var selectedItem:Object;
]]>
</mx:Script>
<mx:Model id="mystates">
<states>
<state label="Alabama" data="AL"/>
<state label="Alaska" data="AK"/>
<state label="Arizona" data="AZ"/>
<state label="Arkansas" data="AR"/>
<state label="California" data="CA"/>
<state label="Colorado" data="CO"/>
<state label="Connecticut" data="CT"/>
</states>
</mx:Model>
<mx:Panel title="List Control Example" height="75%" width="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:Label text="Select a state to see its abbreviation."/>
<mx:List id="source" width="100%" color="blue"
dataProvider="{mystates.state}"
change="this.selectedItem=List(event.target).selectedItem"/>
<mx:VBox width="100%">
<mx:Label text="Selected State: {selectedItem.label}"/>
<mx:Label text="State abbreviation: {selectedItem.data}"/>
</mx:VBox>
</mx:Panel>
</mx:Application>
拖动水平滚动条来改变图片大小
<?xml version="1.0"?>
<!-- Simple example to demonstrate the HSlider control. 水平拖动条。 MyShareBook.cn 翻译-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var imageWidth:Number=0;
private var imageHeight:Number=0; // Event handler function to change the image size. private function changeSize():void { phoneImage.width=uint(imageWidth*hSlider.value/100); phoneImage.height=uint(imageHeight*hSlider.value/100); }
]]>
</mx:Script>
<mx:Panel id="panel"
title="HSlider Control Example"
height="100%"
width="95%"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10">
<mx:HBox height="100%"
width="100%">
<mx:Image id="phoneImage"
source="@Embed('assets/Nokia_6630.png')"
creationComplete="imageWidth=phoneImage.width; imageHeight=phoneImage.height;"/>
</mx:HBox>
<mx:Label color="blue"
text="拖动slider来改变图片大小."/>
<mx:HSlider id="hSlider"
minimum="0"
maximum="100"
value="100"
dataTipPlacement="top"
tickColor="black"
snapInterval="1"
tickInterval="10"
labels="['0%','100%']"
allowTrackClick="true"
liveDragging="true"
change="changeSize();"/>
</mx:Panel>
</mx:Application>