MXML 使用自定义ItemRenderer和Effects的TileList
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:DefaultTileListEffect id="myTileListEffect"
fadeOutDuration="500"
fadeInDuration="500"
moveDuration="1500" />
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object source="assets/Accordion.png"
label="Accordion" />
<mx:Object source="assets/ApplicationControlBar.png"
label="ApplicationControlBar" />
<mx:Object source="assets/Box.png"
label="Box" />
<mx:Object source="assets/Button.png"
label="Button" />
<mx:Object source="assets/ButtonBar.png"
label="ButtonBar" />
<mx:Object source="assets/CheckBox.png"
label="CheckBox" />
<mx:Object source="assets/ColorPicker.png"
label="ColorPicker" />
<mx:Object source="assets/ComboBox.png"
label="ComboBox" />
<mx:Object source="assets/DataGrid.png"
label="DataGrid" />
<mx:Object source="assets/DateChooser.png"
label="DateChooser" />
<mx:Object source="assets/DateField.png"
label="DateField" />
<mx:Object source="assets/HorizontalList.png"
label="HorizontalList" />
<mx:Object source="assets/HRule.png"
label="HRule" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:TileList id="tileList"
dataChangeEffect="{myTileListEffect}"
dataProvider="{arrColl}"
itemRenderer="TileListItemRenderer"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
columnWidth="100"
rowHeight="100"
width="100%"
height="100%" />
</mx:Application>
<!-- below is the custom renderer used in the above example-->
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="plain"
verticalAlign="middle"
horizontalAlign="center"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
width="100%"
height="100%">
<mx:Image source="{data.source}" />
<mx:Label text="{data.label}"
truncateToFit="true"
width="96" />
</mx:VBox>
MXML Cairngorm VIEW
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>
<![CDATA[
import com.adobe.cairngorm.control.CairngormEvent;
import com.adobe.cairngorm.control.CairngormEventDispatcher;
import ###MODEL###.AppModelLocator;
[Bindable]
private var model : AppModelLocator = AppModelLocator.getInstance();
]]>
</mx:Script>
</mx:Canvas>
MXML Flex:我的第一个Flex / Facebook应用程序
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import com.facebook.data.users.FacebookUser;
import com.facebook.data.users.GetInfoData;
import com.facebook.data.users.GetInfoFieldValues;
import com.facebook.commands.users.GetInfo;
import com.facebook.net.FacebookCall;
import mx.controls.Alert;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.events.FacebookEvent;
//If you are external, you need to launch a browser window so that a user can log-in
public var fbSession:FacebookSessionUtil;
private var fbApiKey:String;
private var fbSecret:String;
private var fbLoaderInfo:LoaderInfo;
private function fbLogin():void
{
fbApiKey = "API_KEY";
fbSecret = "SECRET";
fbLoaderInfo = stage.loaderInfo;
//The user is going to the Log-in page
fbSession = new FacebookSessionUtil( fbApiKey, fbSecret, fbLoaderInfo);
fbSession.addEventListener( FacebookEvent.WAITING_FOR_LOGIN, fbWaitingForLoginHandler, false, 0, true );
fbSession.addEventListener( FacebookEvent.CONNECT, fbConnectHandler, false, 0, true );
fbSession.login();
}
private function fbWaitingForLoginHandler( e:FacebookEvent ):void
{
//The user has returned from the log-in page and are now clicking "OK"
var alert:Alert = Alert.show( "Click Ok after you've logged in", "Logging In" );
alert.addEventListener( Event.CLOSE, alertCloseHandler );
}
private function alertCloseHandler( e:Event ):void
{
//Verify that the user has logged in
fbSession.validateLogin();
}
private function fbConnectHandler( e:FacebookEvent ):void
{
//Get the Information for the Logged-in user through Facebook Calls
//FacebookCall is using the POST Method on the Facebook Session
//new GetInfo( [Current User ID], [Field Names] )
// var getInfo:GetInfo = new GetInfo( new Array( fbSession.facebook.uid ), new Array( 'name', 'pic_square', 'activities', 'interests' ) );
var getInfo:GetInfo = new GetInfo( new Array( fbSession.facebook.uid), new Array( GetInfoFieldValues.ALL_VALUES ) );
var fbCall:FacebookCall = fbSession.facebook.post( getInfo );
fbCall.addEventListener( FacebookEvent.COMPLETE, fbGetInfoCompleteHandler, false, 0, true );
}
private function fbGetInfoCompleteHandler( e:FacebookEvent ):void
{
var getInfoData:GetInfoData = e.data as GetInfoData;
var fbUser:FacebookUser = getInfoData.userCollection.getItemAt( 0 ) as FacebookUser;
//Set the Image and Label to use that Data
userAvatar.source = fbUser.pic_square;
userName.text = fbUser.name;
userActivities.text = fbUser.activities;
userInterests.text = fbUser.interests;
}
]]>
</mx:Script>
<mx:Button x="10" y="10" label="Login" click="fbLogin()"/>
<mx:Image x="83" y="10" width="80" height="80" id="userAvatar"/>
<mx:Label x="178" y="12" text="Label" id="userName"/>
<mx:Label x="178" y="52" text="Interests"/>
<mx:TextArea x="178" y="69" width="449" id="userInterests"/>
<mx:Label x="178" y="131" text="Activities"/>
<mx:TextArea x="178" y="148" width="449" id="userActivities"/>
</mx:Application>
MXML ifartair.com AIR / Flex音板的源代码
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" borderColor="#010101" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #020202]" width="150" height="150" horizontalAlign="center" verticalAlign="middle">
<mx:Script>
<![CDATA[
import mx.core.SoundAsset;
import flash.media.*;
[Embed(source="../sounds/fart1.mp3")]
[Bindable]
public var fart1:Class;
[Embed(source="../sounds/fart2.mp3")]
[Bindable]
public var fart2:Class;
[Embed(source="../sounds/fart3.mp3")]
[Bindable]
public var fart3:Class;
[Embed(source="../sounds/fart4.mp3")]
[Bindable]
public var fart4:Class;
[Embed(source="../sounds/fart5.mp3")]
[Bindable]
public var fart5:Class;
public var myFart1:SoundAsset = new fart1() as SoundAsset;
public var myFart2:SoundAsset = new fart2() as SoundAsset;
public var myFart3:SoundAsset = new fart3() as SoundAsset;
public var myFart4:SoundAsset = new fart4() as SoundAsset;
public var myFart5:SoundAsset = new fart5() as SoundAsset;
public var channel:SoundChannel;
//index of currently playing sound
private var idx:int = 0;
//max number of embedded sound files
private var iSoundCt:int = 4; //HACK : use zero indexing for access in fart()
//sounds collection
private var aSounds:Array = new Array( myFart1, myFart2, myFart3, myFart4, myFart5 );
//temp ref to sound
private var tmpSound:SoundAsset;
//play sound
public function fart():void
{
// Make sure we don't get multiple songs playing at the same time
stopSound();
//get reference to sound
tmpSound = aSounds[ idx ];
// Play the song on the channel
channel = tmpSound.play();
//increment or reset index
if( idx == iSoundCt )
{
idx = 0;
}
else
{
idx++;
}
}
public function stopSound():void
{
// Stop the channel, but only if it exists
if ( channel != null ) channel.stop();
tmpSound = null;
}
]]>
</mx:Script>
<mx:Image id="img_air" source="@Embed('../images/air_flex_small.jpg')" autoLoad="true" scaleContent="true" click="fart()" mouseOver="fart()" />
</mx:WindowedApplication>
MXML Flex:Google Fly Through
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:maps="com.google.maps.*" layout="absolute">
<mx:Script>
<![CDATA[
import com.google.maps.MapMouseEvent;
import com.google.maps.InfoWindowOptions;
import com.google.maps.overlays.Marker;
import mx.messaging.messages.IMessage;
import com.google.maps.controls.NavigationControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.geom.Attitude;
import com.google.maps.View;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.MapOptions;
import com.google.maps.MapEvent;
import mx.controls.Alert;
import mx.messaging.events.MessageEvent;
private static const GOOGLE_MAP_API:String = "GOOGLE_MAPS_KEY";
private var infoWindowFlag:Boolean;
private var initZoom:Number = 3.5;
private var initLat:Number = 25;
private var initLng:Number = 10;
private var initAttitude:Attitude = new Attitude( 0, 0, 0 );
private var flyToFlag:Boolean = false;;
private var flyToZoom:Number = 3.5;
private var flightSpeed:Number = 3;
private var flyToAttitude:Attitude = new Attitude( 20, 30, 0 );
private function messageHandler( message:IMessage ):void
{
//trace( "messageHandler: " + message );
var latlng:LatLng = new LatLng( message.body.latitude, message.body.longitude );
if( latlng != null ){
var marker:Marker = new Marker( latlng );
marker.addEventListener( MapMouseEvent.CLICK, function(e:MapMouseEvent) { openTheInfoWindow( message, latlng ) }, false, 0, true );
if( flyToFlag ) map.flyTo( latlng, flyToZoom, flyToAttitude, flightSpeed );
openTheInfoWindow( message, latlng );
map.addOverlay( marker );
}
}
private function openTheInfoWindow( message:IMessage, latlng:LatLng ):void
{
if( infoWindowCheckBox.selected ){
var infoWindowOptions:InfoWindowOptions = new InfoWindowOptions( );
infoWindowOptions.title = message.body.city;
infoWindowOptions.content = "Sample ID: " + message.body.sampleId + " viewed";
infoWindowOptions.pointOffset = new Point(0, -20);
map.openInfoWindow( latlng, infoWindowOptions );
}
}
private function onMapPreInit( e:MapEvent ):void
{
var mapOptions:MapOptions = new MapOptions();
mapOptions.zoom = initZoom;
mapOptions.center = new LatLng( initLat, initLng );
mapOptions.mapType = MapType.PHYSICAL_MAP_TYPE;
mapOptions.viewMode = View.VIEWMODE_PERSPECTIVE;
mapOptions.attitude = initAttitude;
map.setInitOptions( mapOptions );
}
private function onMapReady( e:MapEvent ):void
{
map.addControl( new MapTypeControl() );
map.addControl( new NavigationControl() );
//The Map is constructed, let's subscribe to the message
consumer.subscribe();
}
private function toggleFlyTo():void
{
if( flyToFlag ){
map.cancelFlyTo();
map.flyTo( new LatLng( initLat, initLng ), initZoom, initAttitude, 5 );
}
flyToFlag = flyToCheckBox.selected;
}
private function toggleInfoWindow():void
{
infoWindowFlag = infoWindowCheckBox.selected;
}
]]>
</mx:Script>
<mx:ChannelSet id="channelSet">
<!-- Long Polling Channel -->
<mx:AMFChannel url="http://tourdeflex.adobe.com:8080/lcds-samples/messagebroker/amflongpolling" />
<mx:AMFChannel url="http://tourdeflex.adobe.com:8080/lcds-samples/messagebroker/amfpolling" />
</mx:ChannelSet>
<mx:Consumer id="consumer"
channelSet="{channelSet}"
destination="tdf.sampleviewingfeed"
subtopic="flex"
message="messageHandler(event.message)"
fault="Alert.show(event.faultString)" />
<maps:Map3D id="map"
mapevent_mappreinitialize="onMapPreInit(event)"
mapevent_mapready="onMapReady(event)"
width="100%" height="100%"
key="{GOOGLE_MAP_API}" />
<mx:VBox x="100" y="5">
<mx:Label fontSize="18" fontWeight="bold" text="Tour De Flex Live Traffic" right="60" />
<mx:CheckBox id="flyToCheckBox" fontWeight="bold" label="FlyTo (animated 3D flight)" click="toggleFlyTo()" />
<mx:CheckBox id="infoWindowCheckBox" fontWeight="bold" selected="true" label="Info Window" click="toggleInfoWindow()" />
</mx:VBox>
</mx:Application>
MXML Flex 3 CSS使用所有常见标点符号和有限字符嵌入字体
@font-face {
src:url("../assets/Arial.ttf");
fontFamily: myFontFamily;
unicodeRange:
U+0041-U+005A, /* Upper-Case [A..Z] */
U+0061-U+007A, /* Lower-Case a-z */
U+0030-U+0039, /* Numbers [0..9] */
U+0020-U+002F, /* Punctuation */
U+003A-U+0040, /* Punctuation */
U+005B-U+0060, /* Punctuation */
U+007B-U+007E; /* Punctuation */
}
MXML 浏览文件并上传
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
<mx:Script>
<![CDATA[
private var urlRequest:URLRequest;
private var fileReferenceList:FileReferenceList;
private var serverSideScript:String = "http://localhost/uploadFile.php";
private function init():void {
urlRequest = new URLRequest(serverSideScript);
fileReferenceList = new FileReferenceList();
fileReferenceList.addEventListener(Event.SELECT, fileSelectedHandler);
}
private function uploadFile():void {
fileReferenceList.browse();
}
private function fileSelectedHandler(event:Event):void {
var fileReference:FileReference;
var fileReferenceList:FileReferenceList = FileReferenceList(event.target);
var fileList:Array = fileReferenceList.fileList;
// get the first file that the user chose
fileReference = FileReference(fileList[0]);
// upload the file to the server side script
fileReference.addEventListener(Event.COMPLETE, uploadCompleteHandler);
fileReference.upload(urlRequest);
// update the status text
statusText.text = "Uploading...";
}
private function uploadCompleteHandler(event:Event):void {
statusText.text = "File Uploaded: " + event.target.name;
}
]]>
</mx:Script>
<mx:Label text="Upload File From Flex to PHP" fontWeight="bold"/>
<mx:Label text="Choose a file..." id="statusText"/>
<mx:Button click="uploadFile();" label="Upload File"/>
</mx:Application>
MXML Flex:使用项呈示器
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="500">
<!--
A. Custom Item Renderers
1. Item Renderers are components that are used to customize cells in any of the list-based controls
a. It can be a column in a data-grid or a row in a list
b. Whenever you've seen a list of items, each element in the list has been generated by some class used as an item renderer
2. In the <mx:List> example below, each item in the list is generated by an item renderer, this is done by default
a. The <mx:List> uses the ListItemRenderer Class
b. The ListItemRenderer looks into the dataProvider for the Label Text and uses that to create a TextField to display
c. We can customize our own ItemRenderers so that we don't have to only use the TextField class to display data
3. 3 Different ways to implement ItemRenderers
a. Drop-in item renderers
i. Uses an existing Flex Component
ii. They are defined using the obj.itemRenderer of the <mx:List> class
b. Inline item renderers
i. Use your own Custom Component.
ii. They are written inline and found in the same <mx:List> class instance
c. Component item renderers
i. They're defined similar to Drop-in renderers (obj.itemRenderer)
ii. Defined outside of the template, just like usual components
B. The obj.data Property
1. obj.data property IS NOT defined in UIComponent
2. Instead you have to implement the IDataRenderer interface
i. This will implement the obj.data property in your component
ii. And then you'll be able to use that component as an item renderer
iii. In these examples, <mx:List> and <mx:Hbox> already use IDataRenderer by default
-->
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var listAC:ArrayCollection = new ArrayCollection([
{ label:'Photoshop', os:'Windows', data: 1 },
{ label:'Flash CS4', os:'Macintosh', data: 2 },
{ label:'Flex', os:'Ubuntu', data: 3 },
]);
]]>
</mx:Script>
<!-- Drop-in item renderer -->
<mx:List dataProvider="{listAC}" x="10" y="10" />
<mx:List dataProvider="{listAC}" x="110" y="10" itemRenderer="mx.controls.Label" />
<!-- Inline item renderer -->
<mx:List dataProvider="{listAC}" x="210" y="10">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.label}" />
</mx:Component>
</mx:itemRenderer>
</mx:List>
<mx:List dataProvider="{listAC}" x="310" y="10">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.os}" />
<mx:Label text="{data.label}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
<!-- Component item renderer -->
<mx:List dataProvider="{listAC}" x="510" y="10" itemRenderer="com.theflexshow.CustomRenderer" />
</mx:Application>