In order to have a clean main application file in Flex 4 we can define a custom application skin and remove contentGroup from it. This way there is no way to add any mxml elements inside of the main application file. Even if you do, they wont show up. Main application file in this way has only the script block and maybe metadata and other similar blocks if you declare them. At the end you will have almost perfectly clean main application file. Here is the example.
// Application File.
<?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"
skinClass="com.gnstudio.skins.MyApplicationSkin"
preinitialize="onPreinitialize(event)"
minWidth="700" minHeight="440">
<fx:Metadata>
[ResourceBundle("IB_Main")]
</fx:Metadata>
<fx:Style source="../css/main.css"/>
<fx:Style source="../css/fonts.css"/>
<fx:Script>
<![CDATA[
private function onPreinitialize(event:FlexEvent):void {
// Initialize your application here.
}
private function myMethod():void {
// My method stup. All components are in MyApplicationSkin.
}
]]>
</fx:Script>
</s:Application>
// Application Skin.
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">
<fx:Metadata>[HostComponent("MyApplication")]</fx:Metadata>
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<!-- application background -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>
<s:Group left="0" right="0" top="0" bottom="0">
<my:Component1 id="component1"/>
<my:Component2 id="component2"/>
</s:Group>
</s:Skin>
When defining custom states for your spark component, make sure you override getCurrentSkinState() method. You will determine skin state according to your custom and some already existing flags like enabled. Here is an example.
//----------------------------------
// States
//----------------------------------
/**
* Opened Normal State
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("openedNormal")]
/**
* Opened Disabled State
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("openedDisabled")]
/**
* Closed Normal State
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("closedNormal")]
/**
* Closed Disabled State
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("closedDisabled")]
override protected function getCurrentSkinState():String {
var state:String;
if (opened) {
state = enabled ? "openedNormal" : "openedDisabled";
} else {
state = enabled ? "closedNormal" : "closedDisabled";
}
return state;
}
If you have a renderer that has many different components and you need to mouse out and mouse over events when user moves mouse over the renderer, you have two options. Use only one element of your complex renderer to detect mouse over and mouse out. If this is not acceptable the other solution is to set mouseChildren to false on the renderer and use hit test in order to detect mouse interaction on different renderer elements. Check out the example of complex renderer event handling done with hit test approach.
private function onListRendererAdd(event:RendererExistenceEvent):void {
var renderer:DisplayObjectContainer = event.renderer as DisplayObjectContainer;
if (renderer) {
renderer.mouseChildren = false;
renderer.addEventListener(MouseEvent.MOUSE_OVER, onListRendererOver);
renderer.addEventListener(MouseEvent.MOUSE_OUT, onListRendererOut);
renderer.addEventListener(MouseEvent.CLICK, onListRendererSelection);
renderer.addEventListener(MouseEvent.CLICK, onListRendererInfo);
}
}
private function onListRendererRemove(event:RendererExistenceEvent):void {
var renderer:IEventDispatcher = event.renderer as IEventDispatcher;
if (renderer) {
renderer.removeEventListener(MouseEvent.MOUSE_OVER, onListRendererOver);
renderer.removeEventListener(MouseEvent.MOUSE_OUT, onListRendererOut);
renderer.removeEventListener(MouseEvent.CLICK, onListRendererSelection);
renderer.removeEventListener(MouseEvent.CLICK, onListRendererInfo);
}
}
private function onListRendererOver(event:MouseEvent):void {
// This event will be dispatched only once when user rolls over the renderer.
}
private function onListRendererOut(event:MouseEvent):void {
// This event will be dispatched only once when user moves from the renderer.
}
private function onListRendererSelection(event:MouseEvent):void {
var renderer:DisplayObject = event.target;
if (renderer && renderer.selectionControl.hitTestPoint(event.stageX, event.stageY)) {
// Check if the mouse was on the selection control when the click event was dispatched.
// This way we know that the mouse click was on the selection control.
}
}
private function onListRendererInfo(event:MouseEvent):void {
var renderer:DisplayObject = event.target;
if (renderer && renderer.infoControl.hitTestPoint(event.stageX, event.stageY)) {
// Check if the mouse was on the info control when the click event was dispatched.
// This way we know that the mouse click was on the info control.
}
}
Spark list vertical scroll setup that works like Flex 3 mx list item by item scrolling. The point is to setup s:VScrollBar with smoothScrolling false and to set step size that equals list item height. You will also want to set the list height in a way that list items don't get cut off at the bottom (list height = n x item height).
<s:DataGroup id="contentGroup" width="341" height="100">
<s:layout>
<s:TileLayout horizontalGap="9" verticalGap="0" columnWidth="69" requestedColumnCount="4"/>
</s:layout>
</s:DataGroup>
<s:VScrollBar viewport="{contentGroup}" top="0" left="330" height="100" smoothScrolling="false" stepSize="100"/>
Easy and quick setup of spark list with vertical scroll.
<s:DataGroup id="contentGroup" width="100%" height="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:DataGroup>
<s:VScrollBar viewport="{contentGroup}"/>
If you have your Google Maps JavaScript API overlayed over a Flash content in iframe you may experience really slow performance in IE. Solution is to set the wmode to "opaque" for IE. Note that for other browsers this might cause some issues. Our experience shown that it's best to set wmode to "opaque" exclusively for IE and for other browsers set it to "window", which is default wmode.
/* Set wmode to "opaque" in your HTML wrapper for Object and Embed tags. */
If you draw a resized 9-slice scale Sprite to a BitmapData, the result will be non-resized original bitmap data of your Sprite.
To take a bitmap capture from a resized 9-slice scale Sprite, add it to a Sprite container and draw the Sprite container to a BitmapData.
Note that non of the Sprites need to be added to the display list to accomplish this.
[Embed(source="/../assets/nine_slice_frame.png", scaleGridTop="100", scaleGridBottom="1100", scaleGridLeft="100", scaleGridRight="1500")]
private const NINE_SLICE_FRAME:Class;
var nineSliceFrame:Sprite = new NINE_SLICE_FRAME() as Sprite;
nineSliceFrame.width = 400;
nineSliceFrame.height = 400;
// Use dummy Sprite instance to take a bitmap capture of resized Sprite with 9 slice scale applied.
var dummySprite:Sprite = new Sprite();
dummySprite.width = 400;
dummySprite.height = 400;
dummySprite.addChild(nineSliceFrame);
var nineSliceFrameBitmapData:BitmapData = new BitmapData(400, 400, true, 0x00000000);
nineSliceFrameBitmapData.draw(dummySprite);
var nineSliceFrameBitmap:Bitmap = new Bitmap(nineSliceFrameBitmapData);
addChild(nineSliceFrameBitmap);
To use embedded fonts with Adobe Text Layout Framework (TLF) you need to switch on the 'embedAsCFF' option and use Flex SDK 4.0 to compile the fonts. Please note that the 'embedAsCFF' attribute replaced the old 'cff' attribute in Flex SDK 4.0. After succesfully embedding the fonts make sure that you set the fontLookup property of the TextFLow to FontLookup.EMBEDDED_CFF.
// Embedding 'Anonymous Pro' font family
[Embed(source='/fonts/Anonymous Pro B.ttf', embedAsCFF='true', fontName='AnonymousPro', fontWeight='bold', fontStyle='normal', mimeType='application/x-font')]
private static var AnonymousProB:Class;
[Embed(source='/fonts/Anonymous Pro BI.ttf', embedAsCFF='true', fontName='AnonymousPro', fontWeight='bold', fontStyle='italic', mimeType='application/x-font')]
private static var AnonymousProBI:Class;
[Embed(source='/fonts/Anonymous Pro I.ttf', embedAsCFF='true', fontName='AnonymousPro', fontWeight='normal', fontStyle='italic', mimeType='application/x-font')]
private static var AnonymousProI:Class;
[Embed(source='/fonts/Anonymous Pro.ttf', embedAsCFF='true', fontName='AnonymousPro', fontWeight='normal', fontStyle='normal', mimeType='application/x-font')]
private static var AnonymousPro:Class;
// TextFlow options
textFlow.fontLookup = FontLookup.EMBEDDED_CFF;
textFlow.cffHinting = CFFHinting.HORIZONTAL_STEM;
textFlow.renderingMode = RenderingMode.CFF;
Even if you don't apply scale to the Shape and draw a very long line (e.g. 76800 pixels long), Flash Player has problems maintaining the stroke thickness. You can use this snippet to draw a black rectangle 1 pixel tick and maintain the exact thickness even if you draw a extremely long line. Same technique can be observed in the Flex HRule and VRule classes. Note that the line gets blurred if you don't draw the rectangles using round numbers.
private var border:Shape = new Shape();
private function renderBorder():void {
if (!border.parent)
addChild(border);
var strokeThickness:int = 1;
var strokeColor:uint = 0x000000;
var borderRect:Rectangle = new Rectangle(0, 0, 76800, 51200);
border.x = 40;
border.y = 40;
var g:Graphics = border.graphics;
g.clear();
// Uncomment following lines to see the issue when using standard way to draw lines.
// g.lineStyle(strokeThickness, strokeColor);
// g.drawRect(borderRect.x, borderRect.y, borderRect.width, borderRect.height);
g.beginFill(strokeColor);
g.drawRect(borderRect.x, borderRect.y, borderRect.width, borderRect.height);
g.drawRect(borderRect.x + strokeThickness, borderRect.y + strokeThickness, borderRect.width - (2 * strokeThickness), borderRect.height - (2 * strokeThickness));
g.endFill();
}
By default container components in Flex framework have problem with clipping child components that have transformation applied. With setting the scroll rect of the container component the issue with the clipping is fixed.
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
scrollRect = new Rectangle(0, 0, unscaledWidth, unscaledHeight);
}
