Grab the .pptx here: Adobe-MAX2011-Performance-Tuning-Flex-Mobile-Apps

Cheers!

This is how I created my new favorite template:

1. Go to FlashBuilder -> Preferences -> Flash Builder -> Editors -> Code Templates -> MXML
2. Click new template
3. Type “left” for the name
4. Select “MXML attributes” from the Context drop-down
5. Fill in suitable description
6. Paste the template body:

   left="${values}" right="${values}" top="${values}" bottom="${values}" ${cursor}

7. Hit “Apply” and close the dialog

Now I’m ready to use it – I start typing “left” and hit the ^space to bring up the suggestions…

…then I select my template and Flash Builder inserts the body and places my cursor on the first field…

…I enter the value – in this case a single “0″ and Flash Builder fills in the values for all four attributes!

Finally, I press “tab” to get to the end of the code snippet and continue with the MXML.

Cheers!

PS : I looove code templates!  Almost as much as conditional breakpoints!!!

1. Clicking on any image in the WheelLayout mode will rotate all the elements until the selected item is centered in front. In this animation the layout runs on every frame of the animation.
2. Selecting different layouts from the drop-down will animate the items’ transformation. In this animation the layout is disabled and is not running during the animation.

Animating the Scroll Position

In the first animation I want the selected item to come “in view”. In the WheelLayout I’ve already implemented the standard API that calculates the scroll distance to an item – getScrollPositionDeltaToElement(). Now in the item renderer of the list – FlickrThumbnail.mxml – I detect when the item has been clicked and then create an animation for the scroll position of the parent Group:

protected function itemrenderer1_clickHandler(event:MouseEvent):void
{
    var g:GroupBase = parent as GroupBase;
    var p:Point = g.layout.getScrollPositionDeltaToElement(this.itemIndex);
    if (p)
    {
        var startX:Number = g.horizontalScrollPosition;
        var startY:Number = g.verticalScrollPosition;
        var anim:Animate = new Animate();
        anim.motionPaths = new [
            new SimpleMotionPath("horizontalScrollPosition", startX, startX + p.x, 500),
            new SimpleMotionPath("verticalScrollPosition", startY, startY + p.y, 500)
        ];
 
        var interpolator:NumberInterpolatorWrapping =
			new NumberInterpolatorWrapping(0, g.contentWidth - g.width);
        var scrollLength:Number = interpolator.getLength(startX, startX + p.x);
        anim.interpolator = interpolator;
        anim.duration = Math.max(550, Math.min(2500, scrollLength * 2));
 
        anim.play([g]);
    }
}

One interesting thing to note is that because of the circular nature of the WheelLayout I wanted the animation to interpolate between the values in a wrap-around manner. For example scrolling from the last element to the first element shouldn’t scroll through any other elements since the first and last elements are visually next to each other. For that reason I implemented a custom interpolator – NumberInterpolatorWrapping.as.

Animating Items between Different Layouts

In this animation I wanted all the elements to move and rotate smoothly when I switch between various layouts. In this animation the start position is defined by the current layout and the end position is defined by the new layout. In-between, while the elements are being animated, they really don’t belong to any layout. For that reason, I disable the layout of the container for the duration of the animation using the autoLayout property of the parent Group.

For convenience I transition between the layouts using states:

<s:states>
	<s:State name="tile"/>
	<s:State name="wheel"/>
	<s:State name="vertical"/>
	<s:State name="horizontal"/>
</s:states>
 
<s:List width="100%" height="100%"
		dataProvider="{photoFeed}"
		itemRenderer="FlickrThumbnail"
		id="theList" useVirtualLayout="false">
 
	<s:layout.vertical>
		<s:VerticalLayout horizontalAlign="center"/>
	</s:layout.vertical>
	<s:layout.horizontal>
		<s:HorizontalLayout verticalAlign="middle"/>
	</s:layout.horizontal>
	<s:layout.tile>
		<s:TileLayout horizontalAlign="center" verticalAlign="bottom"
                                      columnWidth="112" rowHeight="132"
				      requestedColumnCount="5"/>
	</s:layout.tile>
	<s:layout.wheel>
		<my:WheelLayout gap="20" axisAngle="{axisSlider.value}"
		verticalCenterOffset="{offsetSlider.value}"/>
	</s:layout.wheel>
</s:List>

Because the elements could be both moved and/or rotated in 2D or 3D, I use a parallel of both effects:

<fx:Declarations>
    <s:Parallel id="myEffect" effectEnd="myEffect_effectEndHandler(event)">
        <s:Move3D applyChangesPostLayout="false"/>
        <s:Rotate3D applyChangesPostLayout="false"/>
    </s:Parallel>
</fx:Declarations>

And finally, when I switch from one layout state to another, I want to run the effect. Now I need to perform the following steps:

1. Make the effect target all of the elements.
2. Capture the start values (the position and rotation defined by the old layout).
3. Switch the layout (by changing the state) and call validateNow() so that all elements are positioned and/or rotated by the new layout.
4. Turn off the autoLayout property so that the new layout doesn’t interfere with the running effect.
5. Run the effect. Note that at this point the effect is going to capture the animation end values – the position/rotation defined by the new layout. I’ve already captured the start values at step 2, so I’m all set.
6. When the effect is done, turn the layout back on.

private function animateTo(toState:String):void
{
    // Make sure any previous animation is stopped.
    if (myEffect.isPlaying)
        myEffect.stop();
 
    // Add targets
    myEffect.targets = new Array();
    for (var i:int = 0; i < theList.dataGroup.numElements; i++)
        myEffect.targets.push(theList.dataGroup.getElementAt(i));
 
    // Create Transition for all elements
    myEffect.captureStartValues();
 
    // Go to the end state
    var fromState:String = this.currentState;
    setCurrentState(toState);
 
    // Validate everything before turning off the layout
    theList.validateNow();
 
    // Turn the layout off before running the effect
    theList.dataGroup.autoLayout = false;
 
    // Play the effect
    myEffect.play();
}
 
protected function myEffect_effectEndHandler(event:EffectEvent):void
{
    theList.dataGroup.autoLayout = true;
}

Note that my demo has one limitation – I needed to turn off virtual layout so that everything works fine. If I have virtual layout running, I’m not guaranteed that the old and new layouts will assign the items to the same item renderers.
Click on the image at the top to go to the demo, where you can select “view source” from the right-click menu to get the code.

Baseline Concepts in Flex

• Each IVisualElement has a baselinePosition. This is the vertical distance from element’s top (origin) to its text base.
• To align an IVisualElement‘s text to a specific point within its parent, say A=100, we roughly do the following element.y = A – element.baselinePosition.
• Each IVisualElement has a baseline constraint. How this is going to be used is up to the parent layout. By default BasicLayout/Canvas interpret it as the position within the parent to which the element’s text base should be aligned, meaning that the actual calculation is element.y = element.baseline – element.baselinePosition.

What I Want

1. Still keep all the cool functionality of the HorizontalLayout without copying code.
2. Ability to specify a global baseline. The layout should position all the elements such that their text aligns to that global baseline. I also want the ability to individually offset the elements from the global baseline. I want the element’s baseline constraint, if specified, to serve as such an offset.
3. If I’m too lazy to specify the global baseline, the layout should calculate it for me. In that case there shouldn’t be any extra space around the elements and the layout’s borders.
4. The global baseline should be [Bindable]. Since the layout is calculating it in certain cases, I want to be able to read it back whenever its value changes.

Here’s an example of the layout in action:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:local="*">
 
    <s:BorderContainer horizontalCenter="0" verticalCenter="0"
                       minWidth="0" minHeight="0">
 
        <s:layout>
             <local:HBaselineLayout verticalAlign="baseline"/>
        </s:layout>
 
        <s:CheckBox label="hello"/>
        <s:Button label="button"/>
        <s:Label text="and label"/>
 
    </s:BorderContainer>
 
</s:Application>

Implementation

1. I extended the HorizontalLayout class and had to override the verticalAlign property getter in order to modify the enum metadata and add “baseline” as an option.
2. I added a globalBaseline property. I had to override the updateDisplayList() method. After the super.updateDisplayList() has finished with sizing and positioning the elements, I’d iterate over them and position them using something like this element.setLayoutBoundsPosition(element.getLayoutBoundsX(), globalBaseline + element.baseline – element.baselinePosition).
3. Calculating the globalBaseline is easy enough. If all the elements are aligned at the globalBaseline, then a certain portion of each element will be above that line and the rest will be below the line – top portion and bottom portion. Then I have topPortion = element.baseline – element.baselinePosition and bottomPortion = element.height – element.baseline + element.baselinePosition. Now since I don’t want any extra space around the elements I want the element that sticks out the most above the globalBaseline to touch the top edge of the container, while the element that sticks out the most below the globalBaseline to touch the bottom edge of the container. Therefore the globalBaseline is going to be the maximum of the top portions, while the measured height of the container is going to be the globalBaseline + the maximum of the bottom portions. I created a helper function to calculate the maximums of the top and bottom portions and used it in the overridden measure() and updateDisplayList() methods.
4. Finally, I added a property actualBaseline and made sure to dispatch an event when it changes. I update the actualBaseline at the end of updateDisplayList() so that at the time of the event it’s certain that all elements are already sized and positioned correctly.

Here’s an example of a working app, to get the source right-click on the application and select “view source”.

Now VGroup and VerticalLayout have a “verticalAlign” property with the three supported values of “top“, “middle“, “bottom“. Accordingly HGroup and HorizontalLayout get a “horizontalAlign” property with the supported values of “left“, “center” and “right“. The alignment modes work for the layouts with and without virtualization enabled.
An important difference to note is that when “clipAndEnableScrolling” is set to “true” and the containers are scrolling (the content is bigger than the container), the Spark layouts ensure that the entire content can be scrolled in view by internally reverting to the “top“/”left” alignment respectively.

When playing with the attached sample, you’ll notice difference between the clipping and the non-clipping containers when scrolling is in effect (drag the slider left to force smaller height for the containers).

The sample was compiled with SDK version 4.0.0.13553, source: MajorAxisAlignment.mxml

Customize the ItemRenderer‘s “dragging” state.  The drag indicator is the image that the user sees when they select and item and drag it away from the source container. By default the Spark List creates a drag indicator by duplicating all the ItemRenderers for the items being dragged. Therefore a natural way to customize the drag indicator is by customizing the ItemRenderer skin. Spark makes that easy by introducing the  optional “dragging” state.
Customize the List‘s optional “dropIndicator” skin part.  The drop indicator is the image that the user sees as an indicator of where the dragged items are going to be inserted in the destination container.  By default, the Spark List displays a horizontal/vertical line along the gap between the at the insertion point.  Spark makes that easy by automatically managing the “dropIndicator” optional dynamic skin part.

Customize the Drag Indicator

I’ll set up a custom ItemRenderer and I’ll flesh out the optional “dragging” state.
CustomDraggingItemRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer focusEnabled="false" 
				xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark">
 
	<s:states>
		<s:State name="normal" />            
		<s:State name="hovered" />
		<s:State name="selected" />
		<s:State name="normalAndShowsCaret"/>
		<s:State name="hoveredAndShowsCaret"/>
		<s:State name="selectedAndShowsCaret"/>
		<s:State name="dragging"/>
	</s:states>
 
	<s:Rect left="0" right="0" top="0" bottom="-1" includeIn="dragging">
		<s:stroke>
			<s:SolidColorStroke color="0xDDBBCC" weight="1"/>
		</s:stroke>
		<s:fill>
			<s:SolidColor color="0x5010CC" alpha="0.3"/>
		</s:fill>
	</s:Rect>
	<s:Label id="labelDisplay" verticalCenter="0" 
			 left="3" right="3" top="6" bottom="4" 
			 fontWeight.dragging="bold"/>
 
</s:ItemRenderer>

When the Spark List creates the duplicate ItemRenderes for the drag indicator, it will set them to their “dragging” state. Note that at that point the List’s data item will be rendered by two ItemRender instances – one to display the item in the List itself and one to display the item in the drag indicator.

Customize the Drop Indicator

I’ll set up a custom List skin. I’ll replace the “dropIndicator” skin part. Note that since the part is a dynamic part (created only during drag-and-drop operation) it’s placed inside the <fx:Declarations/> tag.
CustomDropIndicatorListSkin.mxml:

 <fx:Declarations>
    <!--- 
          Defines the appearance of the the List's drop indicator.
          To customize the drop indicator appearance, create a custom ListSkin class.
          The List's layout takes care to size and position the dropIndicator.
          The size of the <code>dropIndicator</code> is typically set to the size of the 
          gaps between the items.
          The minimum and maximum settings are typically respected only in the direction
          along the major axis (the gap axis).  For example a VerticalLayout ignores the 
          <code>minWidth</code> and <code>maxWidth</code> settings, 
          but respect <code>minHeight</code> and <code>maxHeight</code>. 
 
          @copy spark.components.List#dropIndicator
    -->
    <fx:Component id="dropIndicator">
        <s:Group minWidth="3" minHeight="3" maxWidth="3" maxHeight="3">
			<s:Line width="20" left="3" verticalCenter="2">
				<s:stroke>
					<s:SolidColorStroke color="0xFF0000"/>
				</s:stroke>
			</s:Line>
 
			<s:Path left="50" verticalCenter="-2" scaleX="-1" 
					data="M 0 5 L 30 5 26 0 40 8 26 16 30 11 0 11 Z">
				<s:stroke>
					<s:LinearGradientStroke rotation="5" weight="1">
						<s:GradientEntry color="0xD8D8D8"/>
						<s:GradientEntry color="0x000000"/>
					</s:LinearGradientStroke>
				</s:stroke>
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="0xD8D8D8" />
						<s:GradientEntry color="0x888888" />
					</s:LinearGradient>
				</s:fill>
			</s:Path>
        </s:Group>
    </fx:Component>
</fx:Declarations>

Click on the image at the top of the page to see the example in action. The sources are available here. The example was compiled with the Gumbo Flex SDK build 13553.

16
17
18
19
20

// Setup the matrix
 var centerX:Number = projection.projectionCenter.x;
 var centerY:Number = projection.projectionCenter.y;
 matrix.appendTranslation(-centerX, -centerY, projection.focalLength);
 matrix.append(projection.toMatrix3D());

After that just pass in the matrix and the point to be projected to Utils3D.projectVector(). Then translate the result by centerX and centerY.
Here’s the helper function source, it takes in bounds, the matrix of the object and the perspective projection and returns the projected 2D bounds:

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

public static function projectBounds(bounds:Rectangle,
 matrix:Matrix3D,
 projection:PerspectiveProjection):Rectangle
 {
 // Setup the matrix
 var centerX:Number = projection.projectionCenter.x;
 var centerY:Number = projection.projectionCenter.y;
 matrix.appendTranslation(-centerX, -centerY, projection.focalLength);
 matrix.append(projection.toMatrix3D());
 
// Project the corner points
 var pt1:Vector3D = new Vector3D(bounds.left, bounds.top, 0);
 var pt2:Vector3D = new Vector3D(bounds.right, bounds.top, 0)
 var pt3:Vector3D = new Vector3D(bounds.left, bounds.bottom, 0);
 var pt4:Vector3D = new Vector3D(bounds.right, bounds.bottom, 0);
 pt1 = Utils3D.projectVector(matrix, pt1);
 pt2 = Utils3D.projectVector(matrix, pt2);
 pt3 = Utils3D.projectVector(matrix, pt3);
 pt4 = Utils3D.projectVector(matrix, pt4);
 
// Find the bounding box in 2D
 var maxX:Number = Math.max(Math.max(pt1.x, pt2.x), Math.max(pt3.x, pt4.x));
 var minX:Number = Math.min(Math.min(pt1.x, pt2.x), Math.min(pt3.x, pt4.x));
 var maxY:Number = Math.max(Math.max(pt1.y, pt2.y), Math.max(pt3.y, pt4.y));
 var minY:Number = Math.min(Math.min(pt1.y, pt2.y), Math.min(pt3.y, pt4.y));
 
// Add back the projection center
 bounds.x = minX + centerX;
 bounds.y = minY + centerY;
 bounds.width = maxX - minX;
 bounds.height = maxY - minY;
 return bounds;
 }

The full source is here projectedbounds.mxml.