Share 'Examples' on Delicious Share 'Examples' on Facebook Share 'Examples' on Google Bookmarks Share 'Examples' on Twitter

  1. Contextual selectors
  2. States Example
  3. Selector Test
  4. Style Rule Editor
  5. All Examples
    1. Features
    2. Hello World
    3. Selector API
    4. Component Configuration
  6. Comments (1)
  7. Leave a Comment

Examples

Categories: Features (6), Hello World (3), Component Configuration (2), Selector API (4)

Contextual selectors

The example shows ID and class and descendant selectors in action. There are two boxes with each two children. Different attributes are assigned to each of them. Contextual selectors enable the selective styling of the boxes depending on their attributes or position in the display list.

Selectors.swf
SelectorsCSS.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
package features.selectors {
  public class SelectorsCSS {
    public static var styles : String = <styles><![CDATA[
      /* Layout */
     
      Box.big {
        w: 200; h: 200;
      }
     
      Box.big#second {
        x: 220;
      }
     
      Box.small {
        x: 30; y: 30; w: 140; h: 60;
      }
     
      Box.small#second {
        y: 120;
      }
     
      /* Colors */
     
      Box#first {
        background-color: #FFFFFF;
      }
     
      Box.small {
        border-size: 2;
        border-color: #006699;
        background-color: #00BBFF;
      }
    ]]></styles>.toString();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package features.selectors {
  import features.selectors.box.Box;
  import com.sibirjak.jakute.JCSS;
  import com.sibirjak.jakute.JCSS_Sprite;
  import flash.display.Sprite;

  public class Selectors extends Sprite {
    public function Selectors() {
      JCSS_Sprite.jcss = new JCSS();
      JCSS_Sprite.jcss.setStyleSheet(SelectorsCSS.styles);
     
      var container : Box = new Box();
      container.jcss_cssID = "first";
      container.jcss_cssClass = "big";
      addChildrenTo(container);
      addChild(container);
     
      container = new Box();
      container.jcss_cssID = "second";
      container.jcss_cssClass = "big";
      addChildrenTo(container);
      addChild(container);
    }
   
    private function addChildrenTo(container : Box) : void {
      var box : Box = new Box();
      box.jcss_cssID = "first";
      box.jcss_cssClass = "small";
      container.addChild(box);

      box = new Box();
      box.jcss_cssID = "second";
      box.jcss_cssClass = "small";
      container.addChild(box);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
package features.selectors.box {
  import com.sibirjak.jakute.JCSS_Sprite;
  import com.sibirjak.jakute.constants.JCSS_StyleValueFormat;
  import common.ColorUtil;
  import flash.display.GradientType;
  import flash.geom.Matrix;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class Box extends JCSS_Sprite {

    private var _tf : TextField;

    public function Box() {
      jcss_cssName = "Box";
      jcss_defineStyle("x", 0, JCSS_StyleValueFormat.FORMAT_NUMBER);
      jcss_defineStyle("y", 0, JCSS_StyleValueFormat.FORMAT_NUMBER);
      jcss_defineStyle("w", 150, JCSS_StyleValueFormat.FORMAT_NUMBER);
      jcss_defineStyle("h", 150, JCSS_StyleValueFormat.FORMAT_NUMBER);
      jcss_defineStyle("background-color", "#BCCC7A", JCSS_StyleValueFormat.FORMAT_HTML_COLOR);
      jcss_defineStyle("border-color", "#81991F", JCSS_StyleValueFormat.FORMAT_HTML_COLOR);
      jcss_defineStyle("border-size", 1, JCSS_StyleValueFormat.FORMAT_NUMBER);
    }

    override protected function jcss_onStylesInitialized() : void {
      createLabel();
      draw();
    }

    private function createLabel() : void {
      _tf = new TextField();
      _tf.mouseEnabled = false;
      _tf.autoSize = TextFieldAutoSize.LEFT;
      _tf.textColor = 0x333333;
      _tf.text = jcss_componentSelectorAsString();
      _tf.x = _tf.y = 2;
      addChild(_tf);

      var textFormat : TextFormat = new TextFormat();
      textFormat.font = "_sans";
      textFormat.size = 9;
      _tf.setTextFormat(textFormat);
      _tf.defaultTextFormat = textFormat;
    }

    private function draw() : void {
      // position and opacity
      x = style("x");
      y = style("y");
     
      // gradient
      var matrix : Matrix = new Matrix();
      matrix.createGradientBox(style("w"), style("h"), Math.PI / 180 * 45, 0, 0);
      var gradient : Array = gradient = ColorUtil.getGradient(style("background-color"));

      with (graphics) {
        clear();
        // border
        if (style("border-size")) {
          lineStyle(style("border-size"), style("border-color"));
        }
        // background
        beginGradientFill(GradientType.LINEAR, gradient, [1, 1], [0, 255], matrix);
        drawRect(0, 0, style("w"), style("h"));
      }
    }
   
    // shortcut to jcss_getStyle()
    private function style(styleName : String) : * {
      return jcss_getStyle(styleName);
    }
  }
}

States Example

The example shows state selectors in action. There are two nested boxes, initially not having any custom styles applied. Using a small style sheet, the boxes turn into buttons by responding to mouse over and mouse down events.

States.swf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package features.states {
  public class StatesCSS {
    public static var styles : String = <styles><![CDATA[
      Box {
        w: 200; h: 150;
        border-color: #CC9900;
        background-color: #FFBB00;
      }
     
      Box Box {
        w: 100; h: 50; x: 70; y: 70;
        border-color: #DDDDFF;
        background-color: #00BBFF;
      }
     
      Box:over {
        background-color: #FFCC00;
      }
     
      Box:down {
        background-gradient: dark_to_bright;
      }
     
      Box Box:over {
        background-color: #00CCFF;
      }
    ]]></styles>.toString();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package features.states {
  import features.states.box.Box;
  import com.sibirjak.jakute.JCSS;
  import com.sibirjak.jakute.JCSS_Sprite;
  import flash.display.Sprite;

  public class States extends Sprite {
    public function States() {
      JCSS_Sprite.jcss = new JCSS();
      JCSS_Sprite.jcss.setStyleSheet(StatesCSS.styles);
     
      var box : Box = new Box();
      box.addChild(new Box());
      addChild(box);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
package features.states.box {
  import com.sibirjak.jakute.JCSS_Sprite;
  import com.sibirjak.jakute.constants.JCSS_StyleValueFormat;
  import com.sibirjak.jakute.events.JCSS_ChangeEvent;
  import common.ColorUtil;
  import flash.display.GradientType;
  import flash.events.MouseEvent;
  import flash.geom.Matrix;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class Box extends JCSS_Sprite {
    // states
    private var _over : Boolean = false;
    private var _down : Boolean = false;
    // children
    private var _tf : TextField;

    public function Box() {
      jcss_cssName = "Box";
      jcss_defineStyle("x", 0, JCSS_StyleValueFormat.FORMAT_NUMBER);
      jcss_defineStyle("y", 0, JCSS_StyleValueFormat.FORMAT_NUMBER);
      jcss_defineStyle("w", 150, JCSS_StyleValueFormat.FORMAT_NUMBER);
      jcss_defineStyle("h", 150, JCSS_StyleValueFormat.FORMAT_NUMBER);
      jcss_defineStyle("background-color", "#BCCC7A", JCSS_StyleValueFormat.FORMAT_HTML_COLOR);
      jcss_defineStyle("background-gradient", "bright_to_dark", JCSS_StyleValueFormat.FORMAT_STRING);
      jcss_defineStyle("border-color", "#81991F", JCSS_StyleValueFormat.FORMAT_HTML_COLOR);
    }

    override protected function jcss_onStylesInitialized() : void {
      createLabel();
      draw();

      addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
      addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
      addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
    }

    override protected function jcss_onStylesChanged(changeEvent : JCSS_ChangeEvent) : void {
      // redraw necessary
      if (changeEvent.valueHasChanged("w")
        || changeEvent.valueHasChanged("h")
        || changeEvent.valueHasChanged("background-color")
        || changeEvent.valueHasChanged("background-gradient")
        || changeEvent.valueHasChanged("border-color")) {
        draw();

      // only reposition or opacity update
      } else {
        x = style("x");
        y = style("y");
      }
    }

    private function mouseOverHandler(event : MouseEvent) : void {
      if (event.target != this) return;

      _over = true;
      jcss_setState("over", "true");
      setLabel();
    }

    private function mouseOutHandler(event : MouseEvent) : void {
      if (event.target != this) return;

      _over = false;
      jcss_setState("over", "false");
      setLabel();
    }

    private function mouseDownHandler(event : MouseEvent) : void {
      if (event.target != this) return;

      _down = true;
      jcss_setState("down", "true");
      setLabel();

      stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
    }

    private function mouseUpHandler(event : MouseEvent) : void {
      stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

      _down = false;
      jcss_setState("down", "false");
      setLabel();
    }

    private function setLabel() : void {
      _tf.text = jcss_componentSelectorAsString();
      if (_over) _tf.appendText(":over");
      if (_down) _tf.appendText(":down");
    }

    private function createLabel() : void {
      _tf = new TextField();
      _tf.mouseEnabled = false;
      _tf.autoSize = TextFieldAutoSize.LEFT;
      _tf.textColor = 0x333333;
      setLabel();
      _tf.x = _tf.y = 2;
      addChild(_tf);

      var textFormat : TextFormat = new TextFormat();
      textFormat.font = "_sans";
      textFormat.size = 9;
      _tf.setTextFormat(textFormat);
      _tf.defaultTextFormat = textFormat;
    }

    private function draw() : void {
      // position and opacity
      x = style("x");
      y = style("y");
     
      // gradient
      var matrix : Matrix = new Matrix();
      matrix.createGradientBox(style("w"), style("h"), Math.PI / 180 * 45, 0, 0);
      var gradient : Array = gradient = ColorUtil.getGradient(
        style("background-color"), 20, style("background-gradient")
      );

      with (graphics) {
        clear();
        // border
        lineStyle(1, style("border-color"));
        // background
        beginGradientFill(GradientType.LINEAR, gradient, [1, 1], [0, 255], matrix);
        drawRect(0, 0, style("w"), style("h"));
      }
    }
   
    // shortcut to jcss_getStyle()
    private function style(styleName : String) : * {
      return jcss_getStyle(styleName);
    }
  }
}

Selector Test

This example does not show code but a test application. It lets you experience the flexibility of the JCSS selector API. Just click an item in the list and see what items are selected.

Category: Selector API
SelectorTest.swf

Style Rule Editor

This example does not show code but a test application. You may add, change or remove style rules on your own and test the selector API of JCSS. Use the select boxes as typing shortcuts.

Related: Selector Test
Category: Selector API
StyleEditor.swf

All Examples

Features

Loading external style sheet

The example shows loading and processing of an external CSS file. There is a containing box enclosing a child box. The main code adds the boxes without setting any property, so both have initially the same dimension, position and color. All formattings are read from the external file.

Category: Features

Styling TextFields

In this example you can see a way to style components without knowing their actual instance. The type flash.text.TextField is registered in JCSS to be automatically initialized. There are three basic TextField objects added to the stage. Our external CSS turns two of them in clickable input fields.

Category: Features

Contextual selectors

The example shows ID and class and descendant selectors in action. There are two boxes with each two children. Different attributes are assigned to each of them. Contextual selectors enable the selective styling of the boxes depending on their attributes or position in the display list.

States Example

The example shows state selectors in action. There are two nested boxes, initially not having any custom styles applied. Using a small style sheet, the boxes turn into buttons by responding to mouse over and mouse down events.

Moving display objects 2

The example shows how objects being moved in the display list automatically receive style updates due to contextual declarations made in an external style sheet. This example extends the basic moving example with more boxes and the ability to preview the nested box depending on the current dropping target.
Try out this example by moving the inner box from one container to another.

Category: Features

Moving display objects

The example shows how objects being moved in the display list automatically receive style updates due to contextual declarations made in an external style sheet.
Try out this example by moving the inner box from one container to another.

Category: Features

Hello World

HelloWorld1 (Default adapter configuration)

The example shows you the very basic setup of a JCSS application and a JCSS component.
A simple box component is created that has no relation to the styling framework. The box is configured for JCSS in the main application by using an instance of the base adpater JCSS_Adapter. This approach may be appropriate when a component is used only once in an application and we are not able or willing to put the JCSS adapter right in the component.

Category: Hello World

HelloWorld2 (Custom adapter configuration)

The example shows you the very basic setup of a JCSS application and a JCSS component.
A simple box component is created that has no relation to the styling framework. A component specific adapter is then set up by extening the base adpater JCSS_Adapter. This approach may be appropriate when we want to reuse the configuration for multiple instances of our component and we are not able to put the JCSS adapter right in the component.

Category: Hello World

HelloWorld3 (UI base class configuration)

The example shows you the very basic setup of a JCSS application and a JCSS component.
A box component is created and configured by subclassing the base ui class JCSS_Sprite which provides an internal JCSS adapter. The main application does not need to care about the component configuration and registration. This approach is the most preferred way to set up a component for JCSS.

Category: Hello World

Selector API

Selector Test

This example does not show code but a test application. It lets you experience the flexibility of the JCSS selector API. Just click an item in the list and see what items are selected.

Category: Selector API

Style Rule Editor

This example does not show code but a test application. You may add, change or remove style rules on your own and test the selector API of JCSS. Use the select boxes as typing shortcuts.

Related: Selector Test
Category: Selector API

Component Configuration

Custom Style Formatter

The example shows how a custom style formatter is implemented and registered in JCSS. The custom formatter allows to use color literals (red, blue) instead of HTML color values (#FF0000, #123456) in style sheets. The component uses the key of the registered formatter when defining its styles.

Creating a Component Adapter

The example shows the three ways to create a component adapter.



1 Comment

  1. Jakute Flash styling engine - Flashforum

    13. Januar 2011

    [...] [...]

Leave a Comment

You have a question or have experienced an issue? Please post it in the forum: http://sibirjak.tenderapp.com/ in order to make the discussion available at a more central place.