Owner: Flex Examples URL:http://www.flexexamples.blogspot.com Join Date: Sun, 30 Dec 2007 05:58:40 -0600 Rating:0 Site Description: flex examples and source code
Flex Components Download free Site statistics:Click here
Toggling item roll over highlighting in the Flex Tree control 2008-02-06 12:31:30 The following example shows how you can toggle item roll over highlighting in the Tree control in Flex by setting the useRollOver style. Full code after the jump. View MXML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XML id="treeDP"> <root> <node label="i) One" /> <node label="i) Two" /> <node label="i) Three" /> <node label="i) Four"> <node label="ii) One" /> <node label="ii) Two" /> <node label="ii) Three"> <node label="iii) One" /> <node label="iii) Two" /> </node> <node label="ii) Four" /> </node> <node label="i) Five" /> <node label="i) Six" /> </root> <
Dragging and dropping items in a Flex Tree control 2008-02-06 12:28:10 The following example shows you how you can reorder nodes in a Flex Tree control by setting the dragEnabled , dropEnabled , and dragMoveEnabled properties. Full code after the jump. View MXML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XML id="xmlDP"> <root> <para label="Paragraph 1" isBranch="true"> <node label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." /> <node label="Cras porttitor nunc a pede." /> <node label="Nulla ac magna non risus accumsan egestas." /> <node label="Aenean pretium porta felis." /> <node label="Sed massa." /> </para> <para label="Paragraph 2" isBranch="true"> <no Read more:Dragging
Removing folder icons from the Flex Tree control 2008-02-06 12:25:25 The following example shows how you can remove the folder icons from the Tree control in Flex so that only the disclosure (arrow) icons and leaf icons are visible. The short answer, set the folderClosedIcon and folderOpenIcon styles to null using CSS, as shown in the following snippet: <mx:Style> Tree { folderClosedIcon: ClassReference(null); folderOpenIcon: ClassReference(null); } </mx:Style> The long answer? Full code after the jump. View MXML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XML id="dp"> <mlb> <league label="American League"> <division label="East"> <team label="Boston" /> <team label="New York" /> <team l
Removing leaf icons from the Flex Tree control 2008-02-06 12:22:29 <mx:Style> Tree { defaultLeafIcon: ClassReference(null); }</mx:Style> ************************************* <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="middle"backgroundColor="white"><mx:XML id="dp"><mlb><league label="American League"><division label="East"><team label="Boston" /><team label="New York" /><team label="Toronto" /><team label="Baltimore" /><team label="Tampa Bay" /></division><division label="Central"><team label="Cleveland" /><team label="Detroit" /><team label="Minnesota" /><team label="Chicago" /><team label="Kansas City" /></division><division label="West"><team
FebDisabling item roll over highlighting in the Flex DataGrid control 2008-02-06 12:16:46 <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="middle"backgroundColor="white"><mx:Script><![CDATA[import mx.events.ListEvent;import mx.controls.Alert;private function dataGrid_change(evt:ListEvent):void {Alert.show(evt.itemRenderer.data.label, evt.type);}]]></mx:Script><mx:Array id="arr"><mx:Object label="Alert" /><mx:Object label="Button" /><mx:Object label="ButtonBar" /><mx:Object label="CheckBox" /><mx:Object label="ColorPicker" /><mx:Object label="ComboBox" /></mx:Array><mx:ApplicationControlBar dock="true"><mx:CheckBox id="checkBox"label="useRollOver:"labelPlacement="left"selected="true" /></mx:ApplicationControlBar><mx:DataGrid id="
Using a DataGrid control as a pop up in the Flex PopUpButton control 2008-02-06 12:13:55 <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="top"backgroundColor="white"><mx:Style>PopUpButton {popUpStyleName: myCustomPopUpStyleName;}.myCustomPopUpStyleName {fontWeight: normal;textAlign: left;}</mx:Style><mx:Array id="arr"><mx:Object label="Alert" packageName="mx.controls" /><mx:Object label="Button" packageName="mx.controls" /><mx:Object label="ButtonBar" packageName="mx.controls" /><mx:Object label="CheckBox" packageName="mx.controls" /><mx:Object label="ColorPicker" packageName="mx.controls" /></mx:Array><mx:PopUpButton id="popUpButton"label="Click to open..."openAlways="true"><mx:popUp><mx:DataGrid dataProvider="{arr}"draggableColumns="false"rowCount
Embedding and animating fonts in a Flex application 2008-01-23 12:42:15 In this example we embed a font (the awesome “Base 02″ PC TrueType font (TTF) from ), animate it using the Zoom effect and the Elastic.easeOut easing method. We also set the rotation and alpha properties (which you can’t do with non-embedded fonts), and we set the fontAntiAliasType to “advanced” to give the font a cleaner look. Finally we use the effectEnd event to loop the animation. <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="" layout="vertical"verticalAlign="middle" backgroundColor="white"><mx:Script><![CDATA[/* Import all the easing classes so itseasier to switch between them on thefly without tweaking import statements. */import mx.effects.easing.*;]]></mx:Script><mx:Style>@font-face {src: url('assets/base02.t
Specifying certain unicode-ranges for embedded fonts 2008-01-23 12:38:46 you want to embed the numbers 0-9, you would click on “0″ and note it’s Unicode value (U+0030), then click on “9″ and do the same (U+0039). Now, in your Flex application, you would specify this range in the @font-family style block like so: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ /* Import all the easing classes so its easier to switch between them on the fly without tweaking import statements. */ import mx.effects.easing.*; ]]> </mx:Script> <mx:Style> @font-face { src: url('assets/base02.ttf'); font-family: Base0 Read more:embedded
, certain
Styling the Flex Alert control 2008-01-23 12:33:49 This is a more complex version of my previous example. This time in addition to making the Alert
control’s text non-selectable, we use an embedded font for the Alert title, message, buttons, as well as edit the drop shadow, remove the rounded corners, and remove the button skins. <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="middle"backgroundColor="white"creationComplete="showAlert()"applicationComplete="init()"><!-- Used by the ApplicationControlBar control. --><mx:String id="fileName" /><mx:String id="fileSize" /><!-- Used by the Alert control. --><mx:String id="message">The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.</mx:String><mx:Str
Styling a Flex Button control using embedded fonts 2008-01-23 12:31:32 The following example shows how you can customize the appearance of a Flex Button control by using an embedded
font and removing the Button’s default skin. <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""applicationComplete="init()"layout="vertical"verticalAlign="middle"backgroundColor="white"><mx:String id="fileName" /><mx:String id="fileSize" /><mx:Script><![CDATA[private function init():void {var appInfo:LoaderInfo = Application.application.loaderInfo;/* Just grab the filename from the SWF URL. */fileName = (appInfo.url).split("/").pop();/* Convert bytes to kilobytes. */fileSize = (appInfo.bytesTotal / 1024).toFixed(2);}]]></mx:Script><mx:Style>@font-face{src: url("./fonts/base02.ttf");fontFamily: "Base02";}.myButto
Styling the HSlider control using CSS 2008-01-23 12:29:30 The following example shows how you can style a HSlider (or VSlider) control in Flex using Cascading Style Sheets (CSS). <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="middle"backgroundColor="white"><mx:Style>@font-face{src: url("./fonts/arial.ttf");fontFamily: "ArialEmbedded";}.MyLabel {fontFamily: ArialEmbedded;fontSize: 15;fontWeight: normal;}.MyDataTip {backgroundAlpha: 1.0;backgroundColor: haloBlue;color: white;cornerRadius: 10;fontWeight: bold;letterSpacing: 1;}.MySlider {dataTipOffset: 0;dataTipPrecision: 0;dataTipPlacement: left;dataTipStyleName: MyDataTip;showTrackHighlight: true;labelStyleName: MyLabel;}</mx:Style><mx:Array id="labelArr"><mx:Number>-10</mx:Number><mx:Number>0&l
Embedding fonts by name instead of location 2008-01-23 12:26:20 The following example shows how you can embed a font in Flex by specifying the font name instead of a location by using the local() function instead of the src() function when embedding a font. <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="middle"backgroundColor="white"applicationComplete="init();"><mx:Style>@font-face {src:local("Arial");fontFamily: ArialEmbedded;}@font-face {src:local("Arial");fontFamily: ArialEmbedded;fontWeight: bold;}</mx:Style><mx:Script><![CDATA[private var bTotal:Number;private function init():void {bTotal = Application.application.loaderInfo.bytesTotal;/* Convert from bytes to kilobytes. */lbl.text = (bTotal / 1024).toFixed(2) + " KB";}]]></mx:Script><mx:Applicat
Creating a custom creation complete effect on a Flex Alert control 2008-01-23 12:23:54 The following example shows how to specify a effect
which gets played when an Alert
control is displayed by setting the Alert control’s creationCompleteEffect style. You can also see how to embed both the normal and bold font using CSS and @font-face. <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="middle"backgroundColor="white"><mx:Style>@font-face {src: local("Verdana");fontFamily: VerdanaEmbedded;}@font-face {src: local("Verdana");fontFamily: VerdanaEmbedded;fontWeight: bold;}Alert {fontFamily: VerdanaEmbedded;creationCompleteEffect: myEffect;}</mx:Style><mx:Script><![CDATA[import mx.controls.Alert;private var alert:Alert;private function button_click():void {alert = Alert.show("The quick brown f Read more:complete
, custom
, Creating
Embedding fonts from a Flash SWF file into a Flex application 2008-01-23 12:20:56 The following examples show how you can embed a font from a Flash
SWF into a Flex application using @font-face in a > block, or using the [Embed] metadata. <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="middle"backgroundColor="white"applicationComplete="init()"><mx:Script><![CDATA[private function init():void {var appInfo:LoaderInfo = Application.application.loaderInfo;/* Just grab the filename from the SWF URL. */var fileName:String = (appInfo.url).split("/").pop();/* Convert bytes to kilobytes. */var kbTotal:String = (appInfo.bytesTotal / 1024).toFixed(2);info.text = fileName + " (" + kbTotal + "kb)";}]]></mx:Script><mx:Style>@font-face{src: url('./fonts/fromFlash.swf');fontFamily: "Myriad Web
Embedding fonts for the Flex DateField control 2008-01-23 12:18:05 The following example shows how you can embed fonts for use with the DateField control in Flex. Note that we embed both the normal and bold font weights since by default the month and year are bold in the DateChooser sub-component. <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical"verticalAlign="top"backgroundColor="white"><mx:Style>@font-face {src: local("Comic Sans MS");fontFamily: "ComicEmbedded";fontWeight: normal;unicode-range: U+0030-U+0039, /* 0-9 */U+002F-U+002F; /* slash (/) */}@font-face {src: local("Comic Sans MS");fontFamily: "ComicEmbedded";fontWeight: bold;unicode-range:U+0030-U+0039, /* 0-9 */U+0041-U+0051, /* Uppercase A-Z */U+0052-U+007A; /* Lowercase a-z */}</mx:Style><mx:DateField id="dateField"fontFamily="Co
Creating semi-transparent ComboBox dropdown menus in Flex 2008-01-14 12:51:24 The following example shows how you can create semi-transparent dropdown menus in the Flex ComboBox control by setting the backgroundAlpha style.<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=""layout="vertical" verticalAlign="middle" backgroundColor="white"><mx:Style> .myCustomDropdownStyleName{ backgroundAlpha: 0.4; backgroundColor: white; }</mx:Style><mx:ApplicationControlBar dock="true"><mx:ComboBox id="comboBox"dropdownStyleName="myCustomDropdownStyleName"><mx:dataProvider><mx:Array><mx:Object label="One" /><mx:Object label="Two" /><mx:Object label="Three" /><mx:Object label="Four" /><mx:Object label="Five" /><mx:Object label="Six" /><mx:Object label="Seven" /></mx:Array> &l Read more:Creating
Determining a VideoDisplay control’s current playback state using the state property and stateChange event 2008-01-14 12:41:13 The following example shows how you can listen for stateChange event
s on a Flex VideoDisplay control to display the video’s current state in a ProgressBar control, List control, or just perform specific actions if a certain state is entered. It also shows how you can use a ProgressBar control to display the amount of video that has already been played, and how much is still remaining by listening for the playheadUpdate event and passing the VideoEvent class’s playheadTime property
, and VideoDisplay class’s totalTime property to the ProgressBar class’s setProgress() method.<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="" layout="horizontal"verticalAlign="middle" backgroundColor="white"><mx:Script> <![CDATA[ import mx.collections.ArrayCollection; Read more:playback
Changing the text field width for the ColorPicker control in Flex 3 2008-01-14 12:34:19 The following example shows how you can change the text field width in the ColorPicker control’s drop down swatch panel by setting the swatchPanelStyleName and textFieldWidth styles in Flex 3.<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="" layout="vertical" verticalAlign="top" backgroundColor="white"><mx:Script><![CDATA[ import mx.events.SliderEvent; private function slider_change(evt:SliderEvent):void{var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");cssObj.setStyle("textFieldWidth", evt.value);colorPicker.open(); } ]]></mx:Script><mx:Style>ColorPicker { swatchPanelStyleName: myCustomSwatchPanelStyleName; }.myCustomSwatchPanelStyleName { }</mx:Style><mx:ApplicationControlBar d Read more:Changing
Setting the child layout direction of a Flex Panel container 2008-01-14 12:28:34 The following example shows how you can set a Panel
container’s layout
to horizontal or vertical in Flex by setting the layout property.<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white"><mx:Array id="arr"><mx:Object label="horizontal" /><mx:Object label="vertical" /></mx:Array><mx:ApplicationControlBar dock="true"><mx:Form styleName="plain"><mx:FormItem label="layout:"><mx:ToggleButtonBar id="toggleButtonBar" dataProvider="{arr}"selectedIndex="1" itemClick="panel.layout = event.label;" /></mx:FormItem> </mx:Form> </mx:ApplicationControlBar><mx:Panel id="panel" status="{panel.layout}" width="320" height="160"><mx:Label text Read more:child
, Setting
Customizing the Flex DateChooser control 2008-01-14 12:12:59 The following example shows how you can customize the DateChooser control in Flex by using an embedded font, customizing the header styles, week day names, week day name styles, and colors by setting various styles and properties.<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white"><mx:Style>@font-face { src: local("Base 02");fontFamily: Base02Embedded; unicode-range: U+0030-U+0039,/* 0-9 */ U+0041-U+0051, /* Uppercase A-Z */ U+0052-U+007A, /* Lowercase a-z */ U+002F-U+002F; /* slash (/) */} DateChooser{ cornerRadius: 0;/* pixels */ headerColors: black, black; borderColor: black; themeColor: black; fontFamily:Base02Embedded; todayColor: red;todayStyleName: myTodayStyleName; headerStyleName: myHe
Setting a label’s font weight on a Flex LinkBar and ToggleButtonBar control 2008-01-14 12:10:15 The following example shows how you can set the font weight of a label on LinkBar control and ToggleButton control in Flex by setting the linkButtonStyleName style and buttonStyleName style respectively.<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white"><mx:Style>.myCustomLinkButtonStyleName{fontWeight: normal;}.myCustomButtonStyleName{fontWeight: normal;}</mx:Style><mx:Array id="arr"><mx:Object label="One" /><mx:Object label="Two" /><mx:Object label="Three" /><mx:Object label="Four" /></mx:Array><mx:LinkBar id="linkBar" dataProvider="{arr}" linkButtonStyleName="myCustomLinkButtonStyleName" /><mx:ToggleButtonBar id="toggleButtonBar" dataProvid Read more:Setting
Clearing a selected RadioButton control in Flex 2008-01-14 02:33:56 The following example shows how you can use ActionScript to clear a currently selected radio button by setting the RadioButtonGroup class’s selection property to null.<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script><![CDATA[ import mx.controls.Alert; private function reset():void {answers.selection = null; }private function check():void { if (answers.selectedValue) {Alert.show(answers.selectedValue.toString()); }else { Alert.show("unselected"); } } ]]></mx:Script> <mx:RadioButtonGroup id="answers" /><mx:Form backgroundColor="red"><mx:FormItem> <mx:Text id="question" text="Question..." /></mx:FormItem><mx:FormItem><mx:RadioButt Read more:Clearing
Advanced DataGrid Code 2008-01-05 04:50:51 We are publishing a set of three articles (excerpts from our book) in ColdFusion magazine (October, November and December) on advanced DataGrid techniques. Let the name of the magazine not mislead you - thes articles are written for all Flex developers, regardless of what has server-side technology they use.Here is the url to all code samples from these articles: note that source is available on the first page only. Also, was deploying in the rush - with debugging player you might see message boxes asking for debugger - just cancel them.
Advanced DataGrid Code 2008-01-05 04:47:50 We are publishing a set of three articles (excerpts from our book) in ColdFusion magazine (October, November and December) on advanced DataGrid techniques. Let the name of the magazine not mislead you - thes articles are written for all Flex developers, regardless of what has server-side technology they use. Here is the url to all code samples from these articles: note that source is available on the first page only. Also, was deploying in the rush - with debugging player you might see message boxes asking for debugger - just cancel them.
Flex: ISO-8859-1 vs. UTF-8 2008-01-05 04:45:43 Hint: In a flex/flash project we encoded our files using iso-8859-1 encoding resulting in the danish characters like æ, ø etc. not being encoded correct.The adobe flex compiler seems to interpret all files not containing a Byte Order Mark (BOM) as utf-8 even though we specified the -compiler.actionscript-file-encoding option.Changing our files to utf-8 encoding solved the problem and no -compiler.actionscript-file-encoding option was needed.And luckily for that as the israfil maven flex plugin that we use doesn't support the -compiler.actionscript-file-encoding option in the latest available version (1.0).
Determining if a Flex application has focus using the activate and deactivate events 2008-03-16 10:54:20 The following example shows how you can determine if a Flex application has focus or not by listening for the activate and deactivate events
on the <mx:Application /> container. Full code after the jump. View MXML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white" activate="application_activate(event);" deactivate="application_activate(event);"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; private function application_activate(evt:Event):void { arrColl.addItemAt({type:evt.type, time:getTimer()}, 0); } private function time_labelFunc(item:Object, col:DataGridColumn):String { return numberFormatter.format(item[col.dataField]); } ]]>
Setting a Button control’s icon to an asset from a SWF file in Flex 2008-03-16 10:52:25 The following example shows how you can set a Flex Button control's icon style to an asset from a SWF file using MXML or ActionScript. Full code after the jump. View MXML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="horizontal" verticalAlign="middle" backgroundColor="white"> <mx:Button label="Bullet Add" icon="@Embed(source='icons.swf', symbol='bullet_add')" /> <mx:Button label="Bullet Delete" icon="@Embed(source='icons.swf', symbol='bullet_delete')" /> <mx:Button label="Bullet Star" icon="@Embed(source='icons.swf', symbol='bullet_star')" /> </mx:Application>
Read more:Setting
Styling Alert controls in Flex using the StyleManager class and setStyle() methods 2008-03-16 10:51:15 The following example shows how you can style a Flex Alert
control using the static StyleManager.getStyleDeclaration() method, and the setStyle() method. Full code after the jump. View MXML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.styles.StyleManager; private var alert:Alert; private var alertCSS:CSSStyleDeclaration; private function init():void { alertCSS = StyleManager.getStyleDeclaration("Alert"); } private function showAlert(color:Object):void { alertCSS.setStyle("modalTransparencyColor", color); alertCSS.setStyle("themeColor", color); alert = Alert.show("The quick br Read more:class
Setting a custom broken image skin for the Image control in Flex 2008-03-16 10:49:28 The following example shows how you can set a custom
broken image skin for the Flex Image
control by setting the brokenImageSkin style. Full code after the jump. View MXML <?xml version="1.0"?> <mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.Alert; private var alert:Alert; private function image_ioError(evt:IOErrorEvent):void { alert = Alert.show(evt.text, evt.type); } private function loadImage(src:String):void { image.source = src; } ]]> </mx:Script> <mx:Style> Image { brokenImageSkin: Embed("assets/flex_logo.jpg"); } </mx:Style> <mx:ApplicationControlBar dock="true"> <mx:Button label="Good" click="loadImage('assets/flashplayer_ Read more:Setting
Displaying a video in Flex using the NetConnection, NetStream, and Video classes 2008-03-16 10:47:54 The following example shows how you can display a FLV file in a Flex application using the NetConnection, NetStream, and Video classes, as well as how to use the onMetaData and onCuePoint event handlers to handle video meta data and cue points. Full code after the jump. View MXML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <
Recommend Site To A Friend
