To use a custom component as a statusbar it's quiet easy,
just create your component using MXML or Actionscript, it's the same, and the add this line to your WindowedApplication
statusBarFactory="{new ClassFactory(MyCustomStatusBar)}"
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);
}
}
The goal of this snippet is to create a BitmapData from an assets (for example a MovieClip) stored inside an SWF library created using Flash and loaded through CSS;
//CSS FILE
.myComponentStylName {
backgroundImage : Embed(source="library.swf", symbol="MyMovieClip");
}
//ActionScript Code
var BackgroundImage:Class = getStyle("backgroundImage");
var backgroundImageAsset:SpriteAsset = SpriteAsset(new BackgroundImage());
var bitmapData = new BitmapData(backgroundImageAsset.width, backgroundImageAsset.height);
var matrix:Matrix = new Matrix();
bitmapData.draw(ImageSnapshot.captureBitmapData(backgroundImageAsset),matrix);
The purpuse of this snippet is to create a list and avoid that the selected item remains highlighted
package
{
import flash.display.Graphics;
import flash.display.Sprite;
import mx.controls.List;
import mx.controls.listClasses.IListItemRenderer;
public class ListWithoutSelectionIndicator extends List
{
public function ListWithoutSelectionIndicator()
{
super();
}
override protected function drawSelectionIndicator(indicator:Sprite, x:Number,y:Number, width:Number, height:Number, color:uint,itemRenderer:IListItemRenderer):void{
//this function doesn't do anything in order to prevent the draw of the selection indicator
}
}
}
The following example shows you how to extends the ProgrammaticSkin and
add a gradient as background to a TitleWindow
usage :
WindowedApplication {
TitleWindow: ClassReference("com.gnstudio.skins.TitleWindowSkin");
}
package com.gnstudio.skins
{
import flash.display.GradientType;
import flash.display.InterpolationMethod;
import flash.display.SpreadMethod;
import flash.geom.Matrix;
import mx.graphics.RectangularDropShadow;
import mx.skins.RectangularBorder;
public class TitleWindowSkin extends RectangularBorder{
private var cornerRadius:Number = 6;
private var borderColor:uint = 0xFFFFFF;
private var borderThickness:Number = 1;
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.clear()
if(getStyle("cornerRadius")){
cornerRadius = getStyle("cornerRadius");
}
if(getStyle("borderColor")){
borderColor = getStyle("borderColor");
}
if(getStyle("borderThickness")){
borderThickness = getStyle("borderThickness");
}
var fillType:String = GradientType.LINEAR;
var colors:Array = [0x000000,0x111111,0x333333];
var alphas:Array = [1,.75, .50];
var ratios:Array = [0,128, 255];
var matrix:Matrix = new Matrix();
matrix.createGradientBox(unscaledWidth,unscaledHeight*2, Math.PI/2, 0, 0);
var spreadMethod:String = SpreadMethod.REPEAT;
var interpolationMethod:String = InterpolationMethod.LINEAR_RGB;
graphics.lineStyle(borderThickness, borderColor);
graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod,interpolationMethod);
graphics.drawRoundRectComplex(0,0,unscaledWidth,unscaledHeight,cornerRadius,cornerRadius,cornerRadiu
s,cornerRadius);
}
}
}
The following example shows you how to extends the ProgrammaticSkin and add an image as background of your WindowedApplication positioned at the center of the window;
usage :
WindowedApplication {
borderSkin: ClassReference("com.gnstudio.skins.ApplicationSkin");
}
package com.gnstudio.skins
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
import mx.controls.Image;
import mx.skins.ProgrammaticSkin;
public class ApplicationSkin extends ProgrammaticSkin{
[Embed(source="skin/application/bckg.jpg")]
private var imageClass:Class
private var _image:Bitmap;
private var _bitmapData:BitmapData;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var backgroundColor:uint = getStyle("backgroundColor");
if(!_image){
_image = new imageClass()
_bitmapData = new BitmapData(_image.width, _image.height);
var matrix:Matrix = new Matrix();
_bitmapData.draw(_image,matrix);
}
if(unscaledWidth && unscaledWidth){
graphics.clear();
graphics.beginFill(backgroundColor);
graphics.drawRect(0, 0, unscaledWidth,unscaledHeight);
graphics.endFill();
var x:Number = unscaledWidth/2 - _bitmapData.width/2;
var y:Number = unscaledHeight/2 - _bitmapData.height/2;
var bd:BitmapData = new BitmapData(unscaledWidth,unscaledHeight,true,backgroundColor);
bd.copyPixels(_bitmapData,new Rectangle(0,0,_bitmapData.width,_bitmapData.height),new Point(x,y));
graphics.beginBitmapFill(bd, new Matrix(), false, true);
graphics.drawRect(x, y, _bitmapData.width, _bitmapData.height);
}
}
}
}
With these few lines of code you can easly retrive type and size of an image
var imageInfo:ImageInfo = new ImageInfo(myByteArray);
imageInfo.extractType();
imageInfo.extractSize();
trace(imageInfo.type.toString());
trace(imageInfo.width.toString());
trace(imageInfo.height.toString());
This is a sample application that shows you how simple is add and remove drag and drop functionalities to any DisplayObject component using Nabiro's SmartDragManager class.
Note that you need Nabiro 0.950 or major
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
creationComplete="addDrag()"
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.DragEvent;
import com.gnstudio.nabiro.utilities.SmartDragManager;
private function onChange(e:Event):void{
if(e.currentTarget.selected == true){
addDrag()
}else{
removeDrag()
}
}
private function addDrag():void{
SmartDragManager.makeDraggable(myImage);//make the image on the left draggable
SmartDragManager.makeDraggable(myImage2,false);//make the image on the right draggable without the proxy image
SmartDragManager.makeDroppable(myContainer,onDrop);//make the container droppable
}
private function removeDrag():void{
SmartDragManager.removeDrag(myImage);//remove the drag
SmartDragManager.removeDrag(myImage2);//remove the drag
SmartDragManager.removeDrop(myContainer);//remove the drop
}
private function onDrop(e:DragEvent):void{
var obj:Object = e.dragSource.dataForFormat('item');
var bitmapData:BitmapData = new BitmapData(obj.width, obj.height, true, 0x00000000);
bitmapData.draw(obj as IBitmapDrawable);
var bitmap:Bitmap = new Bitmap(bitmapData);
var img:Image = new Image();
img.source = bitmap;
myContainer.addChild(img);
}
]]>
</mx:Script>
<mx:HBox horizontalCenter="0">
<mx:Image
toolTip="Drag Me"
id="myImage"
source="assets/nabiro_logo-1.png"
/>
<mx:Image
toolTip="Drag Me"
id="myImage2"
source="assets/nabiro_logo-1.png"
/>
</mx:HBox>
<mx:CheckBox
label="Enable Drag"
horizontalCenter="0"
y="130"
selected="true"
change="onChange(event)"
/>
<mx:Panel
id="myContainer"
title="Drop Nabiro logo here"
horizontalCenter="0"
y="150"
width="500"
height="250"
/>
</mx:Application>
