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

  1. Features
  2. Hello World
  3. Selector API
  4. Component Configuration
  5. Comments (1)
  6. Leave a Comment

Examples

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

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.