Share 'Styling text fields in Flash with the Jakute CSS framework' on Delicious Share 'Styling text fields in Flash with the Jakute CSS framework' on Facebook Share 'Styling text fields in Flash with the Jakute CSS framework' on Google Bookmarks Share 'Styling text fields in Flash with the Jakute CSS framework' on Twitter

Article | Published: 5. Februar 2011 | Changed: 15. Dezember 2014 | Category: Jakute

I just have added a new Jakute Styling Engine example: Styling text fields with CSS. The example shows pretty compact the possibilities of the framework and is a good starting point to get involved.

There are three Flash TextField objects added to the stage without any configuration.

TextFieldStyles.as
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
package features.textfield {

  import com.sibirjak.jakute.JCSS;

  import flash.display.Sprite;
  import flash.events.Event;
  import flash.text.TextField;

  public class TextFieldStyles extends Sprite {
    public function TextFieldStyles() {
      loaderInfo.addEventListener(Event.INIT, initHandler);
    }

    private function initHandler(event : Event) : void {
      var jcss : JCSS = new JCSS();
      jcss.setStyleSheet(TextFieldStylesCSS.styles);
      jcss.startTypeMonitoring(stage);
      jcss.registerType(TextField, TextFieldAdapter);
     
      var tf : TextField = new TextField();
      tf.text = "TextField 1";
      addChild(tf);

      tf = new TextField();
      tf.text = "TextField 2";
      addChild(tf);

      tf = new TextField();
      tf.text = "TextField 3";
      addChild(tf);
    }
  }
}

A (so called) type adapter realizes the communication between a particular text field and Jakute. There is some state handling built in.

TextFieldAdapter.as
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
package features.textfield {
  import com.sibirjak.jakute.events.JCSS_ChangeEvent;
  import com.sibirjak.jakute.JCSS_Adapter;
  import com.sibirjak.jakute.constants.JCSS_StyleValueFormat;
  import flash.events.FocusEvent;
  import flash.text.TextField;
  import flash.text.TextFieldType;
  import flash.text.TextFormat;

  public class TextFieldAdapter extends JCSS_Adapter {
    override protected function onComponentRegistered() : void {
      cssName = "Text";
      // some reflection to identify our tf in the display list
      var childIndex : uint = component.parent.getChildIndex(component);
      switch (childIndex) {
        case 0:
          cssID = "first";
          cssClass = "input";
          break;
        case 1:
          cssID = "second";
          cssClass = "label";
          break;
        case 2:
          cssID = "third";
          cssClass = "input";
          break;
      }

      defineStyle("x", 0, JCSS_StyleValueFormat.FORMAT_NUMBER);
      defineStyle("y", 0, JCSS_StyleValueFormat.FORMAT_NUMBER);
      defineStyle("w", 300, JCSS_StyleValueFormat.FORMAT_NUMBER);
      defineStyle("h", 16, JCSS_StyleValueFormat.FORMAT_NUMBER);

      defineStyle("type", TextFieldType.DYNAMIC, JCSS_StyleValueFormat.FORMAT_STRING);
      defineStyle("selectable", false, JCSS_StyleValueFormat.FORMAT_BOOLEAN);

      defineStyle("font-family", "serif", JCSS_StyleValueFormat.FORMAT_STRING);
      defineStyle("font-size", 20, JCSS_StyleValueFormat.FORMAT_NUMBER);
      defineStyle("color", "#000000", JCSS_StyleValueFormat.FORMAT_HTML_COLOR);

      defineStyle("background", false, JCSS_StyleValueFormat.FORMAT_BOOLEAN);
      defineStyle("background-color", "#FFFFFF", JCSS_StyleValueFormat.FORMAT_HTML_COLOR);
      defineStyle("border", false, JCSS_StyleValueFormat.FORMAT_BOOLEAN);
      defineStyle("border-color", "#000000", JCSS_StyleValueFormat.FORMAT_HTML_COLOR);
    }
   
    override protected function onStylesInitialized() : void {
      applyStyles();

      component.addEventListener(FocusEvent.FOCUS_IN, focusIn);
      component.addEventListener(FocusEvent.FOCUS_OUT, focusOut);
    }
   
    override protected function onStylesChanged(changeEvent : JCSS_ChangeEvent) : void {
      applyStyles();
    }
   
    private function applyStyles() : void {
      var tf : TextField = component as TextField;
     
      tf.x = getStyle("x");
      tf.y = getStyle("y");
      tf.width = getStyle("w");
      tf.height = getStyle("h");
     
      tf.type = getStyle("type");
      tf.selectable = tf.type == TextFieldType.INPUT;

      tf.textColor = getStyle("color");
      tf.background = getStyle("background");
      tf.backgroundColor = getStyle("background-color");
      tf.border = getStyle("border");
      tf.borderColor = getStyle("border-color");

      var textFormat : TextFormat = new TextFormat();
      textFormat.font = getStyle("font-family");
      textFormat.size = getStyle("font-size");
      tf.setTextFormat(textFormat);
      tf.defaultTextFormat = textFormat;
    }

    private function focusOut(event : FocusEvent) : void {
      setState("focus", "false");
    }
 
    private function focusIn(event : FocusEvent) : void {
      setState("focus", "true");
    }
  }
}

An external CSS style sheet assigns different formattings and behaviors to the text fields.

TextFieldStylesCSS.as
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
package features.textfield {
  public class TextFieldStylesCSS {
    public static var styles : String = <styles><![CDATA[
      Text {
        w: 200;
        h: 26;
        font-size: 20;
        color: #339933;
        border-color: #995500;
        background-color: #F5F5F5;
      }
     
      Text.input {
        type: input;
        font-family: _typewriter;
        background: true;
        border: true;
      }

      Text.input:focus {
        color: #444444 !important;
        border-color: #999999 !important;
        background-color: #FFFFFF !important;
      }

      Text#second {
        x: 60;
        y: 40;
        font-family: _sans;
        color: #DD4400;
        border: false;
      }

      Text#third {
        y: 80;
        w: 300;
        h: 20;
        font-size: 14;
        color: #FFFFFF;
        background-color: #666699;
        border-color: #000033;
      }
    ]]></styles>.toString();
  }
}

The compiled movie:

TextFieldStyles.swf

Please checkout the documentation on further information on style management in Flash with Jakute Styling Engine.



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.