snippets / flex
All snippets tagged flex (8)
-
src/css/styles.css
src/css/styles.css
1 .flatColorRectangleSkin {
2
3 fontFamily: Arial;
4 fontSize: 12;
5 color: #FFFFFF;
6 textAlign:left;
7 width:150;
8 height:30;
9
10 upSkin:ClassReference('charts.NodeSkin');
11 downSkin:ClassReference('programmaticSkinClasses.FlatColorRectangleSkin');
12 overSkin:ClassReference('programmaticSkinClasses.FlatColorRectangleSkin');
13 disabledSkin:ClassReference('programmaticSkinClasses.FlatColorRectangleSkin');
14 }
15
16 .flatColorRoundedRectangleSkin {
17
18 fontFamily: Arial;
19 fontSize: 12;
20 color: #FFFFFF;
21 textAlign:left;
22 width:150;
23 height:30;
24
25 upSkin:ClassReference('programmaticSkinClasses.FlatColorRoundedRectangleSkin');
26 downSkin:ClassReference('programmaticSkinClasses.FlatColorRoundedRectangleSkin');
27 overSkin:ClassReference('programmaticSkinClasses.FlatColorRoundedRectangleSkin');
28 disabledSkin:ClassReference('programmaticSkinClasses.FlatColorRoundedRectangleSkin');
29 }
30
31 .gradientRectangleSkin {
32
33 fontFamily: Arial;
34 fontSize: 12;
35 color: #FFFFFF;
36 textAlign:left;
37 width:150;
38 height:30;
39
40 upSkin:ClassReference('programmaticSkinClasses.GradientRectangleSkin');
41 downSkin:ClassReference('programmaticSkinClasses.GradientRectangleSkin');
42 overSkin:ClassReference('programmaticSkinClasses.GradientRectangleSkin');
43 disabledSkin:ClassReference('programmaticSkinClasses.GradientRectangleSkin');
44 } -
src/charts/Node.as
src/charts/Node.as
1 package charts
2 {
3 import flash.display.DisplayObject;
4 import flash.events.Event;
5
6 import mx.core.IFlexDisplayObject;
7 import mx.core.UIComponent;
8 import mx.core.mx_internal;
9 import mx.events.FlexEvent;
10 import mx.messaging.messages.ErrorMessage;
11 import mx.styles.ISimpleStyleClient;
12
13 use namespace mx_internal;
14
15 //[Style(name="upSkin",type="Class",inherit="no")]
16
17 public class Node extends UIComponent
18 {
19 public var nodeId:int = -1;
20
21 public function Node(/*nodeId_:int*/)
22 {
23 //nodeId = nodeId_;
24 addEventListener(FlexEvent.INITIALIZE, myInitialize);
25 }
26
27 protected function myInitialize(event:Event):void
28 {
29 if(nodeId == -1)
30 throw new Error("The Node ID Property is Mandatory");
31 }
32
33 protected override function updateDisplayList(unscaledWidth:Number,
34 unscaledHeight:Number):void
35 {
36 showSkin("upSkin");
37 }
38
39 mx_internal function showSkin(skinName:String):void
40 {
41 var skinClass:Class = Class(getStyle(skinName));
42 var skin:IFlexDisplayObject = IFlexDisplayObject(getChildByName(skinName));
43
44 if (!skin)
45 {
46 if (skinClass)
47 {
48 skin = IFlexDisplayObject(new skinClass());
49 skin.name = skinName;
50 (skin as ISimpleStyleClient).styleName = this;
51 addChild(DisplayObject(skin));
52 skin.setActualSize(unscaledWidth, unscaledHeight);
53 }
54 }
55
56 }
57
58
59 }
60 } -
src/charts/NodeSkin.mxml
src/charts/NodeSkin.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <Degrafa:GraphicBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml"
3 xmlns:Degrafa="http://www.degrafa.com/2007">
4
5 <mx:Script>
6 <![CDATA[
7 [Bindable]
8 private var awidth:Number=0;
9
10 [Bindable]
11 private var aheight:Number=0;
12
13 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
14 super.updateDisplayList(unscaledWidth, unscaledHeight);
15 awidth = unscaledWidth;
16 aheight = unscaledHeight;
17 }
18 ]]>
19 </mx:Script>
20
21 <Degrafa:fills>
22 <Degrafa:RadialGradientFill id="MainFill" angle="90" >
23 <Degrafa:GradientStop ratio="0" alpha="1" color="#EE9819"/>
24 <Degrafa:GradientStop ratio="1" alpha="1" color="#FAE38F"/>
25 </Degrafa:RadialGradientFill>
26
27 <Degrafa:RadialGradientFill id="WashFill" angle="90" >
28 <Degrafa:GradientStop ratio="0" alpha=".75" color="#FFFFFF"/>
29 <Degrafa:GradientStop ratio="1" alpha="0" color="#FFFFFF"/>
30 </Degrafa:RadialGradientFill>
31 </Degrafa:fills>
32
33 <Degrafa:stroke>
34 <Degrafa:SolidStroke color="#EE9819" id="theStroke" />
35 </Degrafa:stroke>
36
37 <Degrafa:geometry>
38 <Degrafa:Circle centerX="{awidth/2}" centerY="{aheight/2}" radius="{Math.max(awidth/2,aheight/2)}"
39 fill="{MainFill}" stroke="{theStroke}" />
40
41 <Degrafa:Ellipse width="{awidth-7}" height="{aheight/1.5}" x="3" y="3"
42 fill="{WashFill}" />
43 </Degrafa:geometry>
44
45 </Degrafa:GraphicBorderSkin> -
src/programmaticSkinClasses/GradientRectangleSkin.as
src/programmaticSkinClasses/GradientRectangleSkin.as
1 package programmaticSkinClasses {
2
3 import mx.core.UIComponent;
4 import flash.filters.DropShadowFilter;
5
6 public class GradientRectangleSkin extends UIComponent {
7
8 import flash.display.Graphics;
9 import flash.geom.Rectangle;
10 import mx.graphics.GradientEntry;
11 import mx.graphics.LinearGradient;
12
13 protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
14 super.updateDisplayList(unscaledWidth,unscaledHeight);
15 var w:Number = unscaledWidth;
16 var h:Number = unscaledHeight;
17
18 // hold the values of the gradients depending on button state
19 var backgroundFillColor:Number;
20 var backgroundFillColor2:Number;
21 var backgroundFillColor3:Number;
22
23
24 var fill:LinearGradient = new LinearGradient();
25
26 // reference the graphics object of this skin class
27 var g:Graphics = graphics;
28 g.clear();
29
30 // which skin is the button currently looking for? Which skin to use?
31 switch (name) {
32 case "upSkin":
33 backgroundFillColor = 0x929292;
34 backgroundFillColor2 = 0x000000;
35 break;
36 case "overSkin":
37 backgroundFillColor = 0x696969;
38 backgroundFillColor2 = 0x504F4F;
39 break;
40 case "downSkin":
41 backgroundFillColor = 0x888888;
42 backgroundFillColor2 = 0x777777;
43 color: 0xFF0000;
44 break;
45 case "disabledSkin":
46 backgroundFillColor = 0xCCCCCC;
47 backgroundFillColor2 = 0xCCCCCC;
48 break;
49 }
50 // depending on which state the button's in, we set our color for the
51 // gradients on the skin
52 var g1:GradientEntry = new GradientEntry(backgroundFillColor,.10,100);
53 var g2:GradientEntry = new GradientEntry(backgroundFillColor2,.60,100);
54
55 fill.entries = [g1,g2];
56 fill.angle = 90;
57 // fill the rectangle
58 g.moveTo(0,0);
59 fill.begin(g,new Rectangle(0,0,w,h));
60 g.lineTo(w,0);
61 g.lineTo(w,h);
62 g.lineTo(0,h);
63 g.lineTo(0,0);
64 fill.end(g);
65 // if we're not showing the down skin, show the shadow. Otherwise hide it on the "down state" to look like it's being pressed
66 if(name != "downSkin") {
67 filters = [new DropShadowFilter(4, 45,0x000000,.2)];
68 }
69 }
70 }
71 } -
src/programmaticSkinClasses/FlatColorRoundedRectangleSkin.as
src/programmaticSkinClasses/FlatColorRoundedRectangleSkin.as
1 package programmaticSkinClasses {
2
3 import flash.filters.DropShadowFilter;
4 import mx.skins.ProgrammaticSkin;
5
6 public class FlatColorRoundedRectangleSkin extends ProgrammaticSkin {
7
8 protected override function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
9
10 super.updateDisplayList(unscaledWidth, unscaledHeight);
11 var backgroundFillColor:Number;
12 var cornerRadius:Number = getStyle("cornerRadius");
13 var backgroundAlpha:Number = getStyle("backgroundAlpha");
14
15 graphics.clear();
16
17 switch (name) {
18 case "upSkin":
19 backgroundFillColor = 0x6987AC;
20 break;
21 case "overSkin":
22 backgroundFillColor = 0x92B0C0;
23 break;
24 case "downSkin":
25 backgroundFillColor = 0x92B0C0;
26 color: 0xFF0000;
27 break;
28 case "disabledSkin":
29 backgroundFillColor = 0xCCCCCC;
30 break;
31 }
32
33 graphics.beginFill(backgroundFillColor);
34 drawRoundRect(0,0,unscaledWidth,unscaledHeight,{tl: cornerRadius, tr: cornerRadius, bl: cornerRadius, br: cornerRadius},
35 backgroundFillColor,backgroundAlpha);
36 graphics.endFill();
37
38 if(name != "downSkin") {
39 filters = [new DropShadowFilter(4, 45,0x000000,.2)];
40 }
41
42 }
43 }
44 } -
src/programmaticSkinClasses/FlatColorRectangleSkin.as
src/programmaticSkinClasses/FlatColorRectangleSkin.as
1 package programmaticSkinClasses {
2
3 import flash.filters.DropShadowFilter;
4 import mx.effects.Glow;
5 import mx.skins.ProgrammaticSkin;
6
7 public class FlatColorRectangleSkin extends ProgrammaticSkin {
8
9 protected override function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
10
11 super.updateDisplayList(unscaledWidth, unscaledHeight);
12 var backgroundFillColor:Number;
13 graphics.clear();
14
15 switch (name) {
16 case "upSkin":
17 backgroundFillColor = 0x69AC69;
18 break;
19 case "overSkin":
20 backgroundFillColor = 0x808080;
21 break;
22 case "downSkin":
23 backgroundFillColor = 0xACACAB;
24 break;
25 case "disabledSkin":
26 backgroundFillColor = 0xCCCCCC;
27 break;
28 }
29
30 graphics.beginFill(backgroundFillColor);
31 graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
32 graphics.endFill();
33
34 if(name != "downSkin") {
35 filters = [new DropShadowFilter(4, 45,0x000000,.2)];
36 }
37
38 }
39 }
40 } -
src/ProgrammaticSkinning.mxml
src/ProgrammaticSkinning.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
3 xmlns:components="charts.*">
4
5 <mx:Style source="css/styles.css" />
6
7 <components:Node id="button4" x="22" y="170" nodeId="1"
8 styleName="flatColorRoundedRectangleSkin" height="32" width="345"/>
9
10 <components:Node id="button5" x="22" y="240" nodeId="2"
11 styleName="gradientRectangleSkin" height="32" width="345"/>
12
13 <components:Node id="button6" x="22" y="295" nodeId="3"
14 styleName="flatColorRectangleSkin" height="32" width="32"/>
15
16 </mx:Application> -
Embedded Fonts in Modules
how to use embedded fonts in modules and late-load the embedded font.
1 /* save TrueType font file as ./Arial.ttf */
2
3 @font-face {
4 src:url("./Arial.ttf");
5 font-family: myFont;
6 }
7
8 Application
9 {
10 font-family: myFont;
11 font-size: 10px;
12 }
Pages : 1
Flux RSS friendsnippetLatest snippets
- c++ QT saatin yaninda... | 4 months, 3 weeks
- src/css/styles.css | 4 months, 3 weeks
- src/charts/Node.as | 4 months, 3 weeks
- src/charts/NodeSkin.mxml | 4 months, 3 weeks
- src/programmaticSkinClass... | 4 months, 3 weeks
