XKE

SET ENGINE POC SHOWCASE: Exploring Flex 4 features & Issues

Basic Highlights

• Running Demo• Important Scenarios• Problems Faced & their plausible solutions• Useful Tips• Q & A

Running Demo

Important Scenarios

• Dynamically Populating Flex Navigation Controls ( Accordian, ViewStack …)- Mx:Repeater Vs S:DataGroup

- Why not Datagroup?

- Side effects of using Repeater

Case 1: RepeaterHBox/VBox Navigation Content

Group Group

Any Component with

Id or Databinding

= Compile Time Error(Unable to generate Initialization Code within Repeater due to id or databinding on a component that is not a visual child)

Case 2: Repeater

HBox/VBox Navigation ContentGroup GroupHBox/VBox HBox/VBox

Any Component with Id or Databinding

= Runtime Error(Cannot convert <component> to an array)

Solution: Avoid using S:Group(V or H) within a Repeater or move it into a separate custom component

• Correct use of Item Renderers

• Significance of each stagecreateChildren()• Called once when component is constructed• 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.measure()• 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).

• If the parent has explicit or percent sizes, it skips this step.commitProperties• Called after measure.• Applies all property changes (from setting properties on the component) to the

component (they were stored in private variables for that first frame).• Called a frame after initial property settings.updateDisplayList• Called after commitProperties• Called top down.• You only override this to set visible properties on the component, such

as setActualSize, graphics, etc.

• What to override & When ??- createChildren() : When adding a component like image to the renderer

that is not be changed at the runtime

- 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

- 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

- dataChange() : when adding & removing specific properties like event listeners to/from the item renderer (esp. when scrollbars are present)

• Significance of DefaultDataDescriptor and use Of Creating Custom DataDescriptors

Important Classes:- Canvas Vs BorderContainer- Sprite Vs SpriteVisualElement- Stage- Bitmap & BitMapData …Important Properties & Methods:- drawCircle, drawRect- hitTestPoint, hitTest- getBounds- localToGlobal & GlobalToLocal- mouseX – relative to the local coordinates of the object- stageX – relative to the global stage - localX – relative to the containing sprite- setpixel, copyPixels- Blend Mode• Bitmap Rendering & Canvas Coloring

• Canvas Rendering & Exploring Graphics API

• Charting- Customizing Charts- Complex Charts

• Popups- Creating Popups

- Various Issues: Popups over Popups(for e.g. showing busy cursors),Popups in modules (positioning, accessing Style Manager)

• Skinning & Styling- Creating Custom Skins- Power of Skins in Flex 4- Various Skin Parts- Use of s:Rect, Ellipse, BitmapImage, Gradient (Linear or Radial), AnimateFilters

• Enabling Drag & Drop onto the canvas => giving background colour

• Adding a custom display object onto the canvas => rawchildren.addChild rather than addChild (gives compile time error) AddElement in BorderContainer

• When Drag Source are different & Drop Target is same => Creating Custom DragSource ,DragId & DragImage

• Dynamically control the width of tabs in a multi-tabbed canvases => Use mx:TabBar rather than s:TabBar

• Customizing ToolTips => Create custom Tooltips (Using Tooltip Manager, implementing IToolTip Interface, Creating Custom Tooltip Manager with ToolTip Bundle)

• Showing tooltips & Hiding Tooltips– rollOver & rollOut Handlers

Useful Tips

Questions??