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

  1. References
  2. How JCSS works
  3. What should you do
    1. Install and setup Jakute
    2. Create a component
    3. Create and register a component adapter
    4. Start styling the application
  4. Setting styles
    1. Building style rules
  5. Runtime style modifications
  6. APIDoc for further information
  7. Note to the performance
  8. Comments (1)
  9. Leave a Comment

Documentation

The documentation gives you an overview over all usage aspects of JCSS.

References

How JCSS works

JCSS is a container component that lets you manage all the styles of your application. Once registered, your components are managed during their entire life cycle. JCSS is designed to handle any kind of components. There is not need to let your components inherit from framework provided classes. There is also no need to let your components even know of Jakute. The only requirement to your component is the availability of a public interface to those properties that should be styled using JCSS.

Since there is no Jakute specific code in your component, how do both communicate?

To connect your component with JCSS you are supposed to implement a component specific adapter which takes on the role of an mediator between these two. The adapter knows the public interface of your component and provides on the other hand an interface that is known by JCSS. You create an adapter always from the JCSS core class JCSS_Adapter.as. This class already implements the JCSS side of the communication. So its only up to you to realize the communication to the component. Here is a diagram of the JCSS architecture (click the image to enlarge).

The different roles and responsibilities in JCSS are shown in the next diagram (click the image to enlarge).

What should you do

To run your component with JCSS you need to follow these steps:

  • Install and setup Jakute.
  • Create a component with public interface to style relevant properties.
  • Create a component adapter.
    • Assign component name (required), ID, class or states (others optional).
    • Define styles.
  • Register the adapter together with the component in JCSS.
  • Add your component to the display list (not allowed before the registration).
  • Start styling the application

Install and setup Jakute

  1. Create a new Flash/Flex/ActionScript project.
  2. Download the most recent jakute.swc file from GitHub.
  3. Add the swc to your project. Develop components. That’s all.

Create a component

See the HelloWorld tutorial how such a component looks like.

Create and register a component adapter

See the HelloWorld tutorial how a component adapter can be created.

Start styling the application

See the Button tutorial for a more comprehensive example of creating and styling applications with JCSS.

Setting styles

Once you have created and setup your components, you wish to style them. You may assign styles for your component to the component itself, to an ancestor of that component or to the global style manager. The global style manager can be accessed over the singleton JCSS instance everywhere in your code.

1
2
3
4
5
6
7
8
9
10
var jcss : JCSS = JCSS.getInstance();
jcss.setStyle(...);
jcss.setStyleSheet(...);
...
ancestorAdapter.setStyle(...);
ancestorAdapter.setStyleSheet(...);

...
componentAdapter.setStyle(...);
componentAdapter.setStyleSheet(...);

Styles can be set at any time. If implemented well, runtime assigned styles should modify your component right away. The setStyle() method requires a list of parameter, while the setStyleSheet() method accepts a CSS style sheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
setStyleSheet(<styles><![CDATA[

  ScrollBar Button:over {
    backgroundColor: #DDDDDD;
  }

  ScrollBar Button.up {
    icon: arrow_up.png
  }

  ScrollBar:disabled Button {
    visible: false;
  }

]]></styles>.toString());

Building style rules

See the selector API reference and understand how JCSS selectors work.

Runtime style modifications

JCSS manages the registered components over the entire application life cycle. This includes a monitoring of all style relevant aspects of a particular component. Styles of a component are updated and the component adapter is notified in all of the cases below:

Event What happens
Adapter registered in JCSS - Adapter notified for event “component registered”
Component added the first time - Initial styles calculated
Adapter notified for event “component initialized”
Styles set for a component - Calculation of modified styles
- Adapter notified for event “styles changed”
Component added a second time - Reinitialization of all styles
- Calculation of modified styles
- Adapter notified for event “styles changed”
Ancestor or component state changed for that a stateful rule applies - Calculation of modified styles
- Adapter notified for event “styles changed”
Ancestor or component css class changed - Reinitialization of all class related styles
- Calculation of modified styles
- Adapter notified for event “styles changed”
Virtual parent changed for ancestor or component - Reinitialization of all styles
- Calculation of modified styles
- Adapter notified for event “styles changed”
Component removed - Removal of all internal state listeners and registrations

To say it short, you may move your component around in the display list, you may apply states to components, you may add styles at any time. Your component adapter is always kept up to date.

APIDoc for further information

The APIDoc contains all information necessary to work with the Jakute Styling Engine.

Note to the performance

The Jakute CSS framework is built upon a complicated custom, performance optimized data structure that stores and manages the components, style and states. Setting or updating styles, assigning states, adding or removing components is fast and resource-efficient, regardless if it is done initially or at runtime.



1 Comment

  1. Jakute Flash styling engine - Flashforum

    21. 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.