| | {section} |
| | {column:width=80%} |
| | |
| | h1. Tips, tricks, and techniques |
| | |
| | This page lists tips, tricks, and coding techniques for Adobe Flex 3. To suggest a tip, post it as a comment and we will add it to the page. |
| | |
| | *Tip #1*: Many of these items also apply to Flex 2.0.1. |
| | |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Moving+to+Flex+from+Authorware} |
| | {adbe-next: http://learn.adobe.com/wiki/display/Flex/Creating+Flex+Builder+Projects+that+Use+Server+Technologies} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {column} |
| | {section} |
| | h3. General tips |
| | |
| | *Setting a delay function* |
| | * *Question*: I want to delay execution of a statement, by 5 seconds. How do I go about making the function wait? |
| | * *Answer*: Flash.utils.Timer is the way. There are many usage examples in the {adbe-popup:http://livedocs.adobe.com/flex/3/html/08_Dates_and_times_4.html#120464}Programming ActionScript 3.0 book{adbe-popup}. There are examples later of clocks, etc. as well. |
| | |
| | *ToolTip not appearing over transparent parts of renderer* |
| | * *Question*: I made a custom renderer and assigned a string to its tooltip property. The renderer has a label, an image, and some blank space between and around the label and image. The tooltip only appears if you hover over the label or the image. What should I do here? |
| | * *Answer*: Alpha=0 |
| | |
| | h3. User Interface tips |
| | |
| | *Creating Pods* |
| | * *Question*: Does any one know where I might some already existing sample code for Flex and ActionScript that would quickly let me move "pods" around in the same manner as the old demo at http://flexapps.macromedia.com/flex/Vanilla/main.htm? |
| | * *Answer*: A few links for doing MDI style apps with panels: |
| | ** http://blogs.adobe.com/flexdoc/2007/03/creating_resizable_and_draggab.html |
| | ** http://www.wietseveenstra.nl/blog/2007/04/04/flex-superpanel-v15/ |
| | ** http://coenraets.org/blog/2007/05/new-mdi-style-trader-desktop-with-flex-and-apollo/ |
| | ** And Ely Greenfield's DragTile component does some vaguely similar animation while dragging & dropping: http://www.quietlyscheming.com/blog/components/animated-dragtile-component/ |
| | |
| | *Setting DividedBox position explicitly* |
| | * *Question*: How do I set the position of a DividedBox explicitly? I tried using getDividerAt() to get the divider but that *returns a 'BoxDivider' type which I can't find defined anywhere. I then tried to just set the position, with the function moveDivider() but that does a relative move, I need to move to an absolute position. |
| | * *Answer*: hdivbox.getDividerAt(0).x = 220; |
| | |
| | | *Setting a Panel footer* |
| | * *Question*: How can I insert text in the footer of a panel? |
| | * *Answer*: Use a ControlBar container. |
| | {code} |
| | <mx:Panel> |
| | <mx:Label text="stuff" /> |
| | <mx:ControlBar> |
| | <mx:Label text="footer text" /> |
| | </mx:ControlBar> |
| | </mx:Panel> |
| | {code} |
| | |
| | h3. Performance tips |
| | *Client-side performance* |
| | * "Improving client-side performance": http://livedocs.adobe.com/flex/3/html/performance_02.html#206700 |
| | |
| | *Charting performance* |
| | * "Improving charting component performance": http://livedocs.adobe.com/flex/3/html/performance_09.html#218130 |
| | |
| | *Best practice: styleName for selected items in ListBase control* |
| | |
| | * *Question*: We have a ListBase-based control (TileList) that has a custom itemRenderer associated with. For selected items we want things to appear differently, and the easiest way to accomplish this is by changing the styleName for the itemRenderer for selected items. I can trap all selectItem events and change the styleName for de-selected and selected items, but it seems like a lot of overhead work. Is there something easier available? |
| | * *Answer*: Changing stylename is expensive. If you care about speed (which usually doesn't matter that much in a tilelist), you could grab different properties from the one stylesheet. The default renderers have textRollOverColor and textSelectionColor styles; they use instead of "color" when highlighted or selected. |
| | |
| | h3. XML tips |
| | |
| | *Converting XML to a URL variable* |
| | * *Question*: I want to take a chunk of xml and convert it to an URLVariable. So I have: |
| | {code} |
| | <root> |
| | <item1>blah</item1> |
| | <item2>anotherBlah</item2> |
| | </root> |
| | {code} |
| | And I want to end up with something like this: |
| | {code} |
| | Var urlVar:URLVariables = new URLVariables(); |
| | urlVar.item1 = blah; |
| | urlVar.item2 = anotherBlah; |
| | {code} |
| | * *Answer*: I think it goes something like this: |
| | {code} |
| | var xml:XML = <root> |
| | <item1>blah</item1> |
| | |
| | <item2>anotherBlah</item2> |
| | |
| | </root> |
| | |
| | |
| | var urlVar:URLVariables = new URLVariables |
| | var xmllist:XMLList = xml.*; |
| | var n:int = xmllist.length(); |
| | for (var i:int = 0; i < n; i++) |
| | { |
| | urlVar[xmllist[i].name()] = xmllist[i].toString(); |
| | } |
| | {code} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Moving+to+Flex+from+Authorware} |
| | {adbe-next: http://learn.adobe.com/wiki/display/Flex/Creating+Flex+Builder+Projects+that+Use+Server+Technologies} |
| | |
| | |
| | |
