A fast way to replace
tokens in strings is to use the method
replace of the
mx.utils.StringUtil class.
The method will search for tokens with the pattern {n} and replace them with the parameters you give.
This is most effective when you have the string in your resource bundle and you need to inject some data into it.
var itemName:String = "Book";
var itemPrice:int = 10;
var localized:String = resourceManager.​getString("IB_store", "store.confirm");
trace(localized); // "You bought {0} for {1} €"
var message:String = StringUtil.substitute(localized, itemName, itemPrice);
trace(message); // "You bought Book for 10 €"
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;
In the Flex SDK 3.5.0.12683 the ComboBox Class has a strange behavior, if you change the dataprovider after you have played with your ComboBox, the list of item in the dropdown is not refreshed.
Possible solutions to the problem are :
1) Switch back to the 3.4 SDK
2) Add the following few lines of code after updating the dataprovider : myComboBox.dropdown.dataProvider = yourArray;
Enjoy : )
myComboBox.dropdown.dataProvider = yourArray
If you are trying to extend a custom component and you get the following error
"Multiple sets of visual children have been specified for this component (base component definition and derived component definition)."
the problem is that you have created an MXML component with some children hardcoded;
Surfing the net I've found an interesting discussion
here but the solution provided there hasn't convinced me at all.
After some attempts I've finally found a nice solution that is not to hardcode components inside the MXML but create components using actionscript and then add them to the displayList in the createChildren method.
override protected function childrenCreated():void{
super.childrenCreated();
if(!btn){
btn = new Button();
btn.label = "my as button";
addChild(btn);
}
}
a new class was added in Nabiro: MarchingAntsRect wich render a rectangle with dotted line, used to represent a selection area, here is a very simple demo:
<?xml version="1.0"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="800" height="600"
layout="absolute">
<mx:Script>
<![CDATA[
import com.gnstudio.nabiro.ui.MarchingAntsRect;
override protected function childrenCreated():void{
super.childrenCreated();
var maRect1:MarchingAntsRect = new MarchingAntsRect();
var r1:Rectangle = new Rectangle(10, 30, 100, 30);
maRect1.draw(r1);
var maRect2:MarchingAntsRect = new MarchingAntsRect();
var r2:Rectangle = new Rectangle(130, 80, 200, 400);
maRect2.draw(r2);
var maRect3:MarchingAntsRect = new MarchingAntsRect();
var r3:Rectangle = new Rectangle(10, 170, 30, 160);
maRect1.draw(r3);
mainPanel.addChild(maRect1);
mainPanel.addChild(maRect2);
mainPanel.addChild(maRect3);
}
]]>
</mx:Script>
<mx:Panel id="mainPanel" width="100%" height="100%" />
</mx:Application>
If you define a custom style property for your components, you may need a default value for that style, in order to be able to read it (from inside or outside the component) without setting it before (or getting an exception).
During the class initialization the stylemanager checks if there's a style declared for the component. If not it creates a new style declaration. The defaultFactory take care of setting the default values. If a property isn't set in your custom style (css file or other ways) the default value will be used.
Kudos to Ivan for the code tweaking.
package
{
import mx.core.UIComponent;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;
/**
* Custom styles for custom component.
*/
[Style(name="thickness", type="uint", format="Number", inherit="no")]
[Style(name="backgroundColor", type="uint", format="Colors", inherit="no")]
public class MyCustomComponent extends UIComponent
{
private static var classConstructed:Boolean = classConstruct();
private static function classConstruct():Boolean
{
var defStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("MyCustomComponent");
if (!defStyles)
{
defStyles = new CSSStyleDeclaration();
StyleManager.setStyleDeclaration("MyCustomComponent ", defStyles, true);
}
defStyles.defaultFactory = function():void
{
this.backgroundColor = 0xCCCCCC;
this.thickness = 20;
}
return true;
}
public function MyCustomComponent()
{
super();
}
}
}
When you use Resource Bundles in you application you can access them through the ResourceManager class, in an MXML file you can get the same resoult through the @Resource directive, obviously you to pass the key and the name fo the file.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Form>
<mx:FormItem label="@Resource(key='name', bundle='RegistrationForm')">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="@Resource(key='address', bundle='RegistrationForm')">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="@Resource(key='city', bundle='RegistrationForm')">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
</mx:Application>
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();
}
If you need to put something inside a Container and have it always visible, even when the content gets scrolled, you can add it to the rawChildren of the Container.
var container:Container = new Container();
container.width = 100;
container.height = 100;
var label:Label = new Label();
label.width = 200;
label.height = 20;
label.text = "I'll be alvais above the container's content";
container.rawChildren.addChild(label);
If you have a library project shared between many developers, everyone needs to be aware that when a class is added to the library it has to be checked in the compilation list for it to end in the final swc file.
To avoid this task to everyone, you can mantain a single class, wich will contains only the import of the classes that you want to be compiled. Now you can check only that single class and forget about the .flexLibProperties, the other classes will be dragged inside the swc by the imports.
This approach is used by the flash team in the textLayout project.
////////////////////////////////////////////////////////////////////////////////
//
// ADOBE SYSTEMS INCORPORATED
// Copyright 2008-2009 Adobe Systems Incorporated
// All Rights Reserved.
//
// NOTICE: Adobe permits you to use, modify, and distribute this file
// in accordance with the terms of the license agreement accompanying it.
//
//////////////////////////////////////////////////////////////////////////////////
package flashx.textLayout
{
internal class EditClasses
{
import flash.text.ime.CompositionAttributeRange; flash.text.ime.CompositionAttributeRange;
import flash.text.ime.IIMEClient; flash.text.ime.IIMEClient;
import flashx.textLayout.container.TextContainerManager; TextContainerManager;
...
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<flexLibProperties includeAllClasses="false" version="3">
<includeClasses>
<classEntry path="flashx.textLayout.EditClasses"/>
</includeClasses>
<includeResources/>
</flexLibProperties>
