 | • | |
 | • | |
 | • | |
 | • | |
 | • | |
 | • | |
 | • | |
 | • | |
 | • | |
 | • |
Dieser Eintrag folgt jetzt auf Englisch, da das Thema vielleicht für bestimmte Menschen irgendwo auf der Welt hilfreich ist:
For some time now Flash developers have been able to develop RIA (rich internet applications) with the so-called Flex technology by Adobe. The normal method to invoke these pre-defined user interface elements (with classes that are, after all, very similar in concept to the Microsoft Foundation Classes or to Java’s Swing classes) is to add MXML files to a Flex project that describe the elements the application uses.
I’m one of the people who dislike MXML, though - not because of the XML dialect itself but rather because splitting projects into MXML (for the look and feel) and ActionScript (for the behaviour) makes it hard for me to maintain an overview of the project. I prefer to keep anything within ActionScript because that’s more like programming an application in Java; clean and straightforward coding. Unfortunately, Adobe themselves do not describe how to add Flex components using ActionScript only in detail because the conversion from MXML to ActionScript is done by the compiler.
Searching the web for a way to get this nevertheless done revealed one or two links only, describing the principle: Link 1 - Link 2
Since I need almost the whole set of Flex classes in an ongoing project I had to “transcribe” the whole set of the basic Flex MXML attributes to ActionScript. So the code snippet following is for your convenience: Just embed these methods or something similar into your main application class and you’re all set to use just about any Flex element from scratch, by simply creating a new instance. No MXML file needed. Have fun!
Note 1: If you need to add attributes for components not covered here, just look them up in [my_sdk_path]\frameworks\projects\framework\defaults.css and add them in a similar way.
Note 2: The embedded “Assets.swf” file can be found in [my_sdk_path]\frameworks\projects\framework\assets
{
//your properties here
//flex symbol embedding
[Embed(source="Assets.swf",symbol="TreeNodeIcon")] public var defaultLeafIcon:Class;
[Embed(source="Assets.swf",symbol="TreeDisclosureClosed")] public var disclosureClosedIcon:Class;
[Embed(source="Assets.swf",symbol="TreeDisclosureOpen")] public var disclosureOpenIcon:Class;
[Embed(source="Assets.swf",symbol="TreeFolderClosed")] public var folderClosedIcon:Class;
[Embed(source = "Assets.swf", symbol = "TreeFolderOpen")] public var folderOpenIcon:Class;
[Embed(source = "Assets.swf", symbol = "MenuBranchDisabled")] public var branchDisabledIcon:Class;
[Embed(source=".Assets.swf",symbol="MenuBranchEnabled")] public var branchIcon:Class;
[Embed(source="Assets.swf",symbol="MenuCheckDisabled")] public var checkDisabledIcon:Class;
[Embed(source="Assets.swf",symbol="MenuCheckEnabled")] public var checkIcon:Class;
[Embed(source = "Assets.swf", symbol = "MenuRadioEnabled")] public var radioIcon:Class;
[Embed(source="Assets.swf",symbol="MenuRadioDisabled")] public var radioDisabledIcon:Class;
[Embed(source = "Assets.swf", symbol = "MenuSeparator")] public var separatorSkin:Class;
[Embed(source="Assets.swf",symbol="CloseButtonDisabled")] public var closeButtonDisabledSkin:Class;
[Embed(source="Assets.swf",symbol="CloseButtonDown")] public var closeButtonDownSkin:Class;
[Embed(source="Assets.swf",symbol="CloseButtonOver")] public var closeButtonOverSkin:Class;
[Embed(source="Assets.swf",symbol="CloseButtonUp")] public var closeButtonUpSkin:Class;
/**
* Constructor
*/
public function Main()
{
//your code here
setupGlobalStyles();
setupSpecialStyles();
}
/**
* Setup global Flex styles by calling methods normally set up by the MXML compiler
*/
public function setupGlobalStyles():void
{
var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration(”CursorManager”);
if (!style)
{
style = new CSSStyleDeclaration();
style.setStyle( “busyCursor”, mx.skins.halo.BusyCursor );
StyleManager.setStyleDeclaration(”CursorManager”, style, false);
}
style = StyleManager.getStyleDeclaration(”global”);
if (!style)
{
style = new CSSStyleDeclaration();
StyleManager.setStyleDeclaration(”global”, style, false);
}
if (style.defaultFactory == null)
{
style.defaultFactory = function():void {
this.alternatingItemColors = [0xF7F7F7, 0xFFFFFF];
this.backgroundAlpha = 1.0; /* this runs the opacity of nearly every square piece of the components */
this.backgroundColor = 0xFFFFFF;
this.backgroundDisabledColor = 0xDDDDDD;
this.backgroundSize = “auto”;
this.bevel = true;
this.borderAlpha = 1.0;
this.borderCapColor = 0×919999;
this.borderColor = 0xB7BABC;
this.borderSides = “left top right bottom”;
this.borderSkin = mx.skins.halo.HaloBorder;
this.borderStyle = “inset”; //or “solid”
this.borderThickness = 1;
this.buttonColor = 0×6F7777;
this.closeDuration = 250;
this.color = 0×0B333C;
this.cornerRadius = 1;
this.disabledColor = 0xAAB3B3;
this.disabledIconColor = 0×999999;
this.dropShadowColor = 0×000000;
this.dropShadowEnabled = false;
this.embedFonts = false;
this.errorColor = 0xFF0000;
this.fillAlphas = [0.6, 0.4, 0.75, 0.65]; /* last pair are for OVER state */
this.fillColor = 0xFFFFFF; /* kill this?? */
this.fillColors = [0xFFFFFF, 0xCCCCCC, 0xFFFFFF, 0xEEEEEE];
this.filled = true;
this.focusAlpha = 0.4;
this.focusBlendMode = “normal”;
this.focusRoundedCorners = “tl tr bl br”;
this.focusSkin = mx.skins.halo.HaloFocusRect;
this.focusThickness = 2;
this.fontAntiAliasType = “advanced”;
this.fontFamily = “Verdana”;
this.fontGridFitType = “pixel”;
this.fontSharpness = 0;
this.fontSize = 10;
this.fontStyle = “normal”;
this.fontThickness = 0;
this.fontWeight = “normal”;
this.footerColors = [0xE7E7E7, 0xC7C7C7];
this.headerColors = [0xE7E7E7, 0xD9D9D9];
this.headerHeight = 28;
this.highlightAlphas = [0.3, 0]; /* use this to control the ‘light’ cast on the components */
this.horizontalAlign = “left”;
this.horizontalGap = 8;
this.horizontalGridLineColor = 0xF7F7F7;
this.horizontalGridLines = false;
this.iconColor = 0×111111;
this.indentation = 17;
this.indicatorGap = 14;
this.kerning = false;
this.leading = 2;
this.letterSpacing = 0;
this.modalTransparency = 0.5;
this.modalTransparencyBlur = 3;
this.modalTransparencyColor = 0xDDDDDD;
this.modalTransparencyDuration = 100;
this.openDuration = 250;
this.paddingBottom = 0;
this.paddingLeft = 0;
this.paddingRight = 0;
this.paddingTop = 0;
this.roundedBottomCorners = true;
this.repeatDelay = 500;
this.repeatInterval = 35;
this.rollOverColor = 0xCCCCCC;
this.selectionColor = 0×999999;
this.selectionDisabledColor = 0xDDDDDD;
this.selectionDuration = 250;
this.shadowCapColor = 0xD5DDDD;
this.shadowColor = 0xEEEEEE;
this.shadowDirection = “center”;
this.shadowDistance = 2;
this.stroked = false;
this.strokeWidth = 1;
this.textAlign = “left”;
this.textDecoration = “none”;
this.textIndent = 0;
this.textRollOverColor = 0×2B333C;
this.textSelectedColor = 0×2B333C;
//this.themeColor = 0×009DFF; /* haloBlue */
//this.themeColor = 0×80FF4D; // haloGreen
this.themeColor = 0xFFB600; // haloOrange
//this.themeColor = 0xAECAD9; // haloSilver
this.useRollOver = true;
this.version = “3.0.0″;
this.verticalAlign = “top”;
this.verticalGap = 6;
this.verticalGridLineColor = 0xD5DDDD;
this.verticalGridLines = true;
};
var styles:Object = new style.defaultFactory();
StyleManager.mx_internal::inheritingStyles = styles;
}
StyleManager.mx_internal::initProtoChainRoots();
}
/**
* Setup special Flex styles by calling methods normally set up by the MXML compiler
*/
private function setupSpecialStyles():void
{
var style:CSSStyleDeclaration;
//DataGrid
style = new CSSStyleDeclaration();
style.setStyle( “columnDropIndicatorSkin”, mx.skins.halo.DataGridColumnDropIndicator );
style.setStyle( “columnResizeSkin”, mx.skins.halo.DataGridColumnResizeSkin );
style.setStyle( “headerBackgroundSkin”, mx.skins.halo.DataGridHeaderBackgroundSkin );
style.setStyle( “headerSeparatorSkin”, mx.skins.halo.DataGridHeaderSeparator );
style.setStyle( “sortArrowSkin”, mx.skins.halo.DataGridSortArrow );
//StyleManager.setStyleDeclaration( “DataGrid”, style, false );
//Button
style = new CSSStyleDeclaration();
style.setStyle( “Skin”, mx.skins.halo.ButtonSkin );
style.setStyle( “upSkin”, mx.skins.halo.ButtonSkin );
style.setStyle( “overSkin”, mx.skins.halo.ButtonSkin );
style.setStyle( “downSkin”, mx.skins.halo.ButtonSkin );
style.setStyle( “cornerRadius”, 4);
style.setStyle( “fontWeight”, “bold”);
style.setStyle( “horizontalGap”, 2);
style.setStyle( “paddingBottom”, 2);
style.setStyle( “paddingLeft”, 10);
style.setStyle( “paddingRight”, 10);
style.setStyle( “paddingTop”, 2);
style.setStyle( “textAlign”, “center”);
style.setStyle( “verticalGap”, 2);
StyleManager.setStyleDeclaration( “Button”, style, false );
//ScrollBar
style = new CSSStyleDeclaration();
style.setStyle( “trackSkin”, mx.skins.halo.ScrollTrackSkin );
style.setStyle( “upArrowSkin”, mx.skins.halo.ScrollArrowSkin );
style.setStyle( “upArrowOverSkin”, mx.skins.halo.ScrollArrowSkin );
style.setStyle( “upArrowDownSkin”, mx.skins.halo.ScrollArrowSkin );
style.setStyle( “downArrowSkin”, mx.skins.halo.ScrollArrowSkin );
style.setStyle( “downArrowOverSkin”, mx.skins.halo.ScrollArrowSkin );
style.setStyle( “downArrowDownSkin”, mx.skins.halo.ScrollArrowSkin );
style.setStyle( “thumbSkin”, mx.skins.halo.ScrollThumbSkin );
style.setStyle( “thumbOverSkin”, mx.skins.halo.ScrollThumbSkin );
style.setStyle( “thumbOffset”, 0 );
style.setStyle( “repeatDelay”, 35 );
style.setStyle( “repeatInterval”, 500 );
style.setStyle( “stretchCursor”, “stretchCursor”);
StyleManager.setStyleDeclaration( “ScrollBar”, style, false );
StyleManager.setStyleDeclaration( “ScrollThumb”, style, false );
//Tree
style = new CSSStyleDeclaration();
style.setStyle( “defaultLeafIcon”, defaultLeafIcon);
style.setStyle( “disclosureClosedIcon”, disclosureClosedIcon);
style.setStyle( “disclosureOpenIcon”, disclosureOpenIcon);
style.setStyle( “folderClosedIcon”, folderClosedIcon);
style.setStyle( “folderOpenIcon”, folderOpenIcon);
style.setStyle( “verticalAlign”, “middle”);
style.setStyle( “paddingBottom”, 2 );
style.setStyle( “paddingLeft”, 2 );
style.setStyle( “paddingRight”, 0 );
style.setStyle( “paddingTop”, 2 );
StyleManager.setStyleDeclaration( “Tree”, style, false );
//Menu
style = new CSSStyleDeclaration();
style.setStyle( “borderStyle”, “menuBorder”);
style.setStyle( “dropIndicatorSkin”, mx.skins.halo.ListDropIndicator);
style.setStyle( “dropShadowEnabled”, true);
style.setStyle( “horizontalGap”, 6);
style.setStyle( “leftIconGap”, 18);
style.setStyle( “rightIconGap”, 15);
style.setStyle( “paddingBottom”, 1);
style.setStyle( “paddingLeft”, 1);
style.setStyle( “paddingRight”, 0);
style.setStyle( “paddingTop”, 1);
style.setStyle( “verticalAlign”, “middle”);
StyleManager.setStyleDeclaration( “Menu”, style, false );
//Container
style = new CSSStyleDeclaration();
style.setStyle( “borderStyle”, “none”);
StyleManager.setStyleDeclaration( “Container”, style, false );
//Panel
style = new CSSStyleDeclaration();
style.setStyle( “backgroundColor”, 0xFFFFFF);
style.setStyle( “borderAlpha”, 0.4); /* controls the alpha of the panel top, bottom and sides. */
style.setStyle( “borderColor”, 0xE2E2E2);
style.setStyle( “borderSkin”, mx.skins.halo.PanelSkin);
style.setStyle( “borderStyle”, “default”);
style.setStyle( “borderThickness”, 0);
/* borderThicknessBottom is NaN */
style.setStyle( “borderThicknessLeft”, 10);
style.setStyle( “borderThicknessRight”, 10);
style.setStyle( “borderThicknessTop”, 2);
style.setStyle( “cornerRadius”, 4);
style.setStyle( “dropShadowEnabled”, true);
style.setStyle( “paddingBottom”, 0);
style.setStyle( “paddingLeft”, 0);
style.setStyle( “paddingRight”, 0);
style.setStyle( “paddingTop”, 0);
style.setStyle( “resizeEndEffect”, “Dissolve”);
style.setStyle( “resizeStartEffect”, “Dissolve”);
style.setStyle( “roundedBottomCorners”, false);
style.setStyle( “statusStyleName”, “windowStatus”);
style.setStyle( “titleBackgroundSkin”, mx.skins.halo.TitleBackground);
style.setStyle( “titleStyleName”, “windowStyles”);
StyleManager.setStyleDeclaration( “Panel”, style, false );
//Alert
style = new CSSStyleDeclaration();
style.setStyle( “backgroundAlpha”, 0.90); /* controls the alpha of the panel content area. */
style.setStyle( “backgroundColor”, 0×869CA7);
style.setStyle( “borderAlpha”, 0.90); /* controls the alpha of the panel top, bottom and sides. */
style.setStyle( “borderColor”, 0×869CA7);
/* borderThicknessBottom is NaN */
//style.setStyle( “buttonStyleName”, “alertButtonStyle”);
style.setStyle( “color”, 0xFFFFFF);
style.setStyle( “paddingBottom”, 2);
style.setStyle( “paddingLeft”, 10);
style.setStyle( “paddingRight”, 10);
style.setStyle( “paddingTop”, 2);
style.setStyle( “roundedBottomCorners”, true);
StyleManager.setStyleDeclaration( “Alert”, style, false );
//TitleWindow
style = new CSSStyleDeclaration();
style.setStyle( “backgroundColor”, 0xFFFFFF);
style.setStyle( “closeButtonDisabledSkin”, closeButtonDisabledSkin);
style.setStyle( “closeButtonDownSkin”, closeButtonDownSkin);
style.setStyle( “closeButtonOverSkin”, closeButtonOverSkin);
style.setStyle( “closeButtonUpSkin”, closeButtonUpSkin);
style.setStyle( “cornerRadius”, 8);
style.setStyle( “dropShadowEnabled”, true);
style.setStyle( “paddingBottom”, 4);
style.setStyle( “paddingLeft”, 4);
style.setStyle( “paddingRight”, 4);
style.setStyle( “paddingTop”, 4);
StyleManager.setStyleDeclaration( “TitleWindow”, style, false );
//TextInput
style = new CSSStyleDeclaration();
style.setStyle( “borderStyle”, “inset”);
style.setStyle( “borderThickness”, 1);
style.setStyle( “backgroundColor”, 0xFFFFFF);
style.setStyle( “backgroundDisabledColor”, 0xDDDDDD);
StyleManager.setStyleDeclaration( “TextInput”, style, false );
}
}
