Share 'What is Jakute' on Delicious Share 'What is Jakute' on Facebook Share 'What is Jakute' on Google Bookmarks Share 'What is Jakute' on Twitter

  1. Style your application using CSS
  2. Load external style sheets
  3. Set styles programmatically
  4. Update styles at runtime
  5. Use states for interactivity
  6. Use ID and class selectors to filter components
  7. Use descendant selectors to filter components
  8. Move components around the display list
  9. Control styling with specifities and priorities
  10. Leave a Comment

What is Jakute

The Jakute Styling Engine (JCSS) is a CSS framework for Flash. This pages shows you briefly the features of JCSS.

Style your application using CSS

With Jakute you may configure your application using style sheets. Style sheets can be created at runtime or may be loaded from an external source. You can apply style sheets globally or to a particular component instance. The following example shows 4 boxes before and after styles apply.

WithoutStyles.swf
JCSS.getInstance().setStyleSheet(<styles><![CDATA[
  Box#first { w: 90; h: 90; color: #FF9900; }
  Box#second { w: 70; h: 70; x: 100; y: 10; color: #0099FF; }
  Box#third { w: 50; h: 50; x: 180; y: 20; color: #DDDD00; }
  Box#last { w: 30; h: 30; x: 240; y: 30; color: #66DD66; }
]]></styles>);
WithStyles.swf

Load external style sheets

Box {
  w: 200; h: 150;
  border-color: #CC9900;
  background-color: #FFBB00;
}

Box Box {
  w: 50; h: 50; x: 120; y: 70;
  border-color: #DDDDFF;
  background-color: #00BBFF;
}
var loader : URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, stylesLoaded);
loader.load(new URLRequest("styles.css"));
...

private function stylesLoaded(event : Event) : void {
  JCSS.getInstance().setStyleSheet(event.target.data);

  var box : Box = new Box();
  box.addChild(new Box());
  addChild(box);
}
LoadExternalStyles.swf

Set styles programmatically

You are also allowed to set or update styles programmatically. In difference to external or style sheets written in XML, programmatic styles allow you to use variables to specify the style values.

1
2
3
scrollBar.setStyle("Button:over", "background-color", bgColor);
scrollBar.setStyle("Button.up", "icon", upIcon);
scrollBar.setStyle(":disabled Button", "visible", false);

Update styles at runtime

JCSS is not limited to initial or default styles. With JCSS you can set and update styles at any time. The subject components of the declared style rules are notified automatically.

private function setLabelColor(color : uint) : void {
  _button.jcss_setStyle("Label", "color", color);
}

private function setBackgroundColor(color : uint) : void {
  _button.jcss_setStyle("ButtonSkin", "backgroundColor", color);
}

private function setBorderColor(color : uint) : void {
  _button.jcss_setStyle("ButtonSkin", "borderColor", color);
}

...
ButtonExampleFinal.swf

Use states for interactivity

States is perhaps the most charming feature of JCSS. You now states from HTML/CSS where they are called pseudo-classes. There can be multiple states for one component. You may apply states to multiple selectors of a style rule.

Box:over {
  background-color: #FFCC00;
}

Box:down {
  background-gradient: dark_to_bright;
}

Box Box:over {
  background-color: #00CCFF;
}

...
States.swf

Use ID and class selectors to filter components

The selector API of JCSS supports ID and class selectors. While the component css ID is persistent, the css class may be changed at runtime.

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;
}

Box#first {
  background-color: #FFFFFF;
}

Box.small {
  border-size: 2;
  border-color: #006699;
  background-color: #00BBFF;
}
Selectors.swf

Use descendant selectors to filter components

Descendant selectors are useful in modular applications where the same component appears in different contexts.

Let’s say we have a scrollbar in a list component for that we like to change the navigation buttons color. In such a case we may use a selector that includes only those buttons who are children of a scrollbar.

List ScrollBar Button {
  background-color: #66CCFF;
}

Move components around the display list

Once registered, your component styles are always up to date – even when you modify the display list.

Box#red Box {
  background-color: #FFCC66;
}

Box#blue Box {
  background-color: #66CCFF;
}

Box#yellow Box {
  background-color: #EEEE66;
}

Box#green Box {
  background-color: #99FF99;
}
MovingDisplayObject4.swf

Just drag the inner box from one container into another.

Control styling with specifities and priorities

If there are many style rules addressing the same style property of a particular component, JCSS evaluates specifity and priority of the style to determine the rule that wins over the others and finally applies.

Button {
  background-color: black default; // lowest precedence
}

Button {
  background-color: yellow; // overrides default style
}

ScrollBar Button { // more specific
  background-color: red;
}

ScrollBar Button.up { // more specific
  background-color: blue;
}

ScrollBar Button.up:over { // more specific
  background-color: green;
}

Button {
  background-color: grey !important; // higher priority
}


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.