Flex 4 tips


Published on

This presentation gives an overview of few issues in Flex 4.0 and the tricks to overcome them. Also it includes various Useful tips for creating Advanced RIA through Flex like Custom ItemRenderers, Drawing & Skinning Algorithms, etc.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Flex 4 tips

  1. 1. XKE SET ENGINE POC SHOWCASE: Exploring Flex 4 features & Issues
  2. 2. Basic Highlights <ul><li>Running Demo </li></ul><ul><li>Important Scenarios </li></ul><ul><li>Problems Faced & their plausible solutions </li></ul><ul><li>Useful Tips </li></ul><ul><li>Q & A </li></ul>
  3. 3. Running Demo
  4. 4. Important Scenarios <ul><li>Dynamically Populating Flex Navigation Controls ( Accordian, ViewStack …) </li></ul><ul><li>- Mx:Repeater Vs S:DataGroup </li></ul><ul><li>- Why not Datagroup? </li></ul><ul><li>- Side effects of using Repeater </li></ul>
  5. 5. <ul><li>Case 1: Repeater </li></ul><ul><li>HBox/VBox Navigation Content </li></ul><ul><li>Group Group </li></ul><ul><li>Any Component with </li></ul><ul><li>Id or Databinding </li></ul><ul><li>= Compile Time Error </li></ul><ul><li>(Unable to generate Initialization Code within Repeater due to id or databinding on a component that is not a visual child) </li></ul><ul><li>Case 2: </li></ul><ul><li> Repeater </li></ul><ul><li>HBox/VBox Navigation Content </li></ul><ul><li>Group Group </li></ul><ul><li>HBox/VBox HBox/VBox </li></ul><ul><li>Any Component with </li></ul><ul><li>Id or Databinding </li></ul><ul><li>= Runtime Error </li></ul><ul><li>(Cannot convert <component> to an array) </li></ul><ul><li>Solution: Avoid using S:Group(V or H) within a Repeater or move it into a separate custom component </li></ul>
  6. 6. <ul><li>Correct use of Item Renderers </li></ul>
  7. 7. <ul><li>Significance of each stage </li></ul><ul><li>createChildren() </li></ul><ul><li>Called once when component is constructed </li></ul><ul><li>Called top down. So if Panel calls createChildren, it's createChildren method will calladdChild on all of it's children, which calls initialize, which calls createChildren. </li></ul><ul><li>measure() </li></ul><ul><li>If the parent doesn't have any sizing (percent or explicit), it will need to be sized based on it's children's sizes. This can only happen from the bottom up (took me quite a while to really wrap my head around that). </li></ul><ul><li>If the parent has explicit or percent sizes, it skips this step. </li></ul><ul><li>commitProperties </li></ul><ul><li>Called after measure. </li></ul><ul><li>Applies all property changes (from setting properties on the component) to the component (they were stored in private variables for that first frame). </li></ul><ul><li>Called a frame after initial property settings. </li></ul><ul><li>updateDisplayList </li></ul><ul><li>Called after commitProperties </li></ul><ul><li>Called top down. </li></ul><ul><li>You only override this to set visible properties on the component, such as setActualSize, graphics, etc. </li></ul>
  8. 8. <ul><li>What to override & When ?? </li></ul><ul><ul><li>- createChildren() : When adding a component like image to the renderer that is not be changed at the runtime </li></ul></ul><ul><ul><li>- commitProperties() : when adding & removing a child (for e.g., image) to/from the renderer at the runtime based on some property as this is going to change the display of the item renderer </li></ul></ul><ul><ul><li>- updateDisplayList() : when positioning a component or child with respect to the label, also when the item renderer is removed from the list (or its owner) which results in the change of display </li></ul></ul><ul><ul><li>- dataChange() : when adding & removing specific properties like event listeners to/from the item renderer (esp. when scrollbars are present) </li></ul></ul><ul><li>Significance of DefaultDataDescriptor and use Of Creating Custom DataDescriptors </li></ul>
  9. 9. <ul><li>Important Classes: </li></ul><ul><li>Canvas Vs BorderContainer </li></ul><ul><li>Sprite Vs SpriteVisualElement </li></ul><ul><li>Stage </li></ul><ul><li>Bitmap & BitMapData … </li></ul><ul><li>Important Properties & Methods: </li></ul><ul><li>drawCircle, drawRect </li></ul><ul><li>hitTestPoint, hitTest </li></ul><ul><li>getBounds </li></ul><ul><li>localToGlobal & GlobalToLocal </li></ul><ul><li>mouseX – relative to the local coordinates of the object </li></ul><ul><li>stageX – relative to the global stage </li></ul><ul><li>localX – relative to the containing sprite </li></ul><ul><li>setpixel, copyPixels </li></ul><ul><li>Blend Mode </li></ul><ul><li>Bitmap Rendering & Canvas Coloring </li></ul><ul><li>Canvas Rendering & Exploring Graphics API </li></ul>
  10. 10. <ul><li>Charting </li></ul><ul><li>- Customizing Charts </li></ul><ul><li>- Complex Charts </li></ul><ul><li>Popups </li></ul><ul><li>- Creating Popups </li></ul><ul><li>- Various Issues: Popups over Popups(for e.g. showing busy cursors),Popups in modules (positioning, accessing Style Manager) </li></ul><ul><li>Skinning & Styling </li></ul><ul><li>- Creating Custom Skins </li></ul><ul><li>- Power of Skins in Flex 4 </li></ul><ul><li>- Various Skin Parts </li></ul><ul><li>- Use of s:Rect, Ellipse, BitmapImage, Gradient (Linear or Radial), AnimateFilters </li></ul>
  11. 11. <ul><li>Enabling Drag & Drop onto the canvas => giving background colour </li></ul><ul><li>Adding a custom display object onto the canvas => rawchildren.addChild rather than addChild (gives compile time error)  AddElement in BorderContainer </li></ul><ul><li>When Drag Source are different & Drop Target is same => Creating Custom DragSource ,DragId & DragImage </li></ul><ul><li>Dynamically control the width of tabs in a multi-tabbed canvases => Use mx:TabBar rather than s:TabBar </li></ul><ul><li>Customizing ToolTips => Create custom Tooltips (Using Tooltip Manager, implementing IToolTip Interface, Creating Custom Tooltip Manager with ToolTip Bundle) </li></ul><ul><li>Showing tooltips & Hiding Tooltips– rollOver & rollOut Handlers </li></ul>Useful Tips
  12. 12. Questions??