ActionScript Data Provider Controls at Russischer Bär Project Blog

This is the ASDPC library main blog post.

I started the development of the libray a few months ago with a TreeView component, I wanted to make fully customizable. Soon it turned out, that the tree required additional elements (list, scrollbar, button, label), which I created with similiar perfection. Primarily for the use in my examples, I later added a couple of nifty general purpose components such as a color picker, a combo box or a popup window. Now I am in possession of a sophisticated UI framework, that I am going to share here.

Note, this blog article is supposed to be updated, complemented or corrected in the future.

Definition and placement

The ASDPC library consists of a set of standard user interface controls applicable to any project without any architectural requirement. The library is targeted to simplify the development of control and from based ActionScript applications.

Using the ASDPCs does not require special knowledge or technical preparation. The controls can be used in both commercial or non-commercial projects. Hence, the software is placed under an open source software licence. There is a google code account containing the most recent sources and encouraging your contribution.

Examples

In a nutshell

Button example

package com.sibirjak.asdpc.overview {
    import com.sibirjak.asdpc.button.Button;
    import com.sibirjak.asdpc.button.ButtonEvent;
    import com.sibirjak.asdpc.common.Example;
 
    public class ButtonExample extends Example {
        private var _count : uint;
 
        public function ButtonExample() {
            var button : Button = new Button();
            button.setSize(80, 24);
            button.label = "Click: " + _count;
            button.addEventListener(ButtonEvent.CLICK, buttonClickHandler);
            addChild(button);
        }
 
        private function buttonClickHandler(event : ButtonEvent) : void {
            Button(event.target).label = "Click: " + ++_count;
        }
    }
}

ListView example

package com.sibirjak.asdpc.overview {
    import com.sibirjak.asdpc.common.Example;
    import com.sibirjak.asdpc.listview.ListItemEvent;
    import com.sibirjak.asdpc.listview.ListView;
    import com.sibirjak.asdpc.textfield.Label;
 
    public class ListViewExample extends Example {
        private var _label : Label;
 
        public function ListViewExample() {
            var listView : ListView = new ListView();
            listView.setSize(160, 120);
            listView.dataSource = [
                "Item1", "Item2", "Item3", "Item4",
                "Item5", "Item6", "Item7", "Item8",
                "Item9", "Item10"
            ];
            listView.addEventListener(ListItemEvent.SELECTION_CHANGED, selectHandler);
            addChild(listView);
 
            _label = new Label();
            _label.text = "No item selected";
            _label.moveTo(0, 130);
            addChild(_label);
        }
 
        private function selectHandler(event : ListItemEvent) : void {
            if (event.selected) {
                _label.text = event.item + " selected";
            } else {
                _label.text = "No item selected";
            }
        }
    }
}

(Deselect item: Ctrl key + Click)

Objectives

No framework obligation

All controls can be used natively without any requirement to the particular application type (Flex, ActionScript or Flash).

Extensive customization capabilities

All controls can be almost entirely customized in functionality and appearance. However, default renderers and skins are applied, if not specified else. Even those default renderers and skins are highly customizable.

Performance

The controls have been developed, tested and improved for an optimal performance.

Quick overview

Life cycle architecture

The core of the library is a general base class called View. This class provides a life cycle, which is inherited to each particular control. The life cycle maintains the construction and update process of a component by invoking methods in a well defined order.

The View also offers a property change cache to avoid redundant computing. All subsequent property updates are collected and executes them cumulatively at only one single point (in the next frame). This is often called deferred rendering.

Styling and skinning

Each control defines its own particular style properties. Styles can be set to a control directly or to any display ancestor of that control. Most of the styles can also be set at runtime, which means after a control has been added to the stage the first time.

The styling possibilities:

Setting styles to controls or default renderers and default skins
Creating own skins for controls and default renderers
Creating own renderers
Creating own controls :-)

package com.sibirjak.asdpc.overview {
    import com.sibirjak.asdpc.button.Button;
    import com.sibirjak.asdpc.button.skins.ButtonSkin;
    import com.sibirjak.asdpc.common.Example;
    import com.sibirjak.asdpc.textfield.Label;
 
    public class StyleExample extends Example {
        public function StyleExample() {
 
            // button 1
 
            var button : Button = new Button();
            button.setSize(60, 30);
            button.toggle = true;
            button.label = "Off";
            button.selectedLabel = "On";
 
            button.setStyle(ButtonSkin.style_backgroundColors, [0xAAAAAA, 0x333333]);
            button.setStyle(ButtonSkin.style_overBackgroundColors, [0xBBBBBB, 0x444444]);
            button.setStyle(ButtonSkin.style_borderColors, [0x999999, 0x000000]);
 
            button.setStyle(Button.style.labelStyles, [
                Label.style.color, 0xEEEEEE,
                Label.style.underline, false,
                Label.style.size, 12
            ]);
            button.setStyle(Button.style.overLabelStyles, [
                Label.style.color, 0xEEEEEE,
                Label.style.underline, true,
                Label.style.size, 12
            ]);
            button.setStyle(Button.style.selectedLabelStyles, [
                Label.style.color, 0xEEEEEE,
                Label.style.underline, false,
                Label.style.size, 12
            ]);
 
            addChild(button);
 
            // button 2
 
            button = new Button();
            button.setSize(60, 30);
            button.moveTo(80, 0);
            button.toggle = true;
            button.label = "Off";
            button.selectedLabel = "On";
 
            button.setStyles([
                ButtonSkin.style_backgroundColors, [0xFF0000, 0xAA0000],
                ButtonSkin.style_overBackgroundColors, [0xFF0000, 0xDD0000],
                ButtonSkin.style_borderColors, [0xFF0000, 0x990000],
                ButtonSkin.style_cornerRadius, 0,
 
                Button.style.labelStyles, [
                    Label.style.color, 0xFFFFFF,
                    Label.style.size, 12
                ],
                Button.style.overLabelStyles, [
                    Label.style.color, 0xFFFFFF,
                    Label.style.size, 12
                ],
                Button.style.selectedLabelStyles, [
                    Label.style.color, 0xFFFFFF,
                    Label.style.size, 12
                ]
            ]);
 
            addChild(button);
        }
    }
}

Data integration

The list controls (ListView, TreeView, SelectBox) visualise data of an external data source. Here is no restriction in the type of the data source. The ASDPC library has a built-in support for the native types Array and XML and for the AS3Commons collections. All other types can be used by creating custom data source adapter (which is easy and makes fun).

If a data source dispatchs change notifications (items added, removed), all list controls reflect those changes and update automatically.

Property binding

Most of the controls are equipped with binding capabilities. Whenever a bindable property changes, a registered binding listener receives notification. Note, the binding here is something different than the Flex binding.

package com.sibirjak.asdpc.overview {
    import com.sibirjak.asdpc.common.Example;
    import com.sibirjak.asdpc.textfield.Label;
    import com.sibirjak.asdpcbeta.checkbox.CheckBox;
 
    public class BindingExample extends Example {
        public function BindingExample() {
            var checkBox : CheckBox = new CheckBox();
            checkBox.label = "Hidden";
            checkBox.selectedLabel = "Visible";
            checkBox.moveTo(0, 1);
            addChild(checkBox);
 
            var label : Label = new Label();
            label.text = "I am visible";
            label.moveTo(80, 0);
            addChild(label);
 
            checkBox.bindProperty("selected", label, "visible");
        }
    }
}

Getting started

There is not much to get the controls running.

Download the SWC and copy it into your project.
Import the controls of your desire into your class and write code.

Resources

16 Responses to “ActionScript Data Provider Controls”

Feed for this Entry Trackback Address

1 Matthias
5. Februar 2010 at 11:27

Respect!
2 uwe
5. Februar 2010 at 22:49

+1! Stabile russische Technik. Mal sehen was ich damit baue.
3 Matelot
19. April 2010 at 13:01

Firstly…wow what a fantastic resource…thanks.

I just tried running the last example (property binding) in the Flash CS4 IDE. The code runs well, however, I get three similar warning messages. These are:

Description : “Warning: 1090: Migration issue: The onMouseDown event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( ‘mouseDown’, callback_handler).”
Source: protected function onMouseDown() : void {

The other two are similar but for the following sources:
protected function onRollOut() : void {
protected function onRollOver() : void {

The source class is Button.as

Can you please explain why this may be happening?

Kind regards

Matelot
4 Jens Struwe
19. April 2010 at 16:31

Thank you for reporting this issue. I found a description here:

http://stackoverflow.com/questions/2549588/how-to-suppress-flash-migration-warnings-1090

Even if it sounds silly, I will rename the particular methods to something not colliding with the next commit.
5 Igor D.
17. Mai 2010 at 15:22

I need help implementing this in CS4 – AS3, I have struggled for almost two days – while implementing yahoo astra took only 10 minutes.
I just cannot configure it to use SWC or custom class path. Is there any possible way for you to publish one example FLA file.
Thank you very much.
6 Jens Struwe
17. Mai 2010 at 15:39

Unfortunately, I am not using Flash and cannot give you any hint how to embed swc libraries there.
7 Igor D.
8. Juni 2010 at 18:05

Fantastic! After 40 days of using ASDPC with CS4 I feel free too say that this is the best flexible component set ever! Thank you very much!
8 peter
21. Juni 2010 at 21:29

hello, i am more interested in styling the ui, is there an example?
9 Kevin
11. August 2010 at 02:08

Hi, why so long no update? are you still working on?
10 Jens Struwe
11. August 2010 at 07:38

Yes I do. There will be a major update in a couple of weeks.
11 Kevin
12. August 2010 at 06:26

Thanks for your reply, I am very concerned your work! Great Work!!!
12 wangchyz
15. August 2010 at 05:34

Great work! I suggest you host it at github, and we can patch it.
13 jason
24. August 2010 at 08:32

how to use these controls in Flex
14 Jens Struwe
24. August 2010 at 08:44

Since the Flex containers only support UIComponent instances
as their children, you need to wrap an ASDPC control into a
UIComponent.

Besides this wrapping, you use the control in the way here described.
15 Eric Marcos
6. September 2010 at 21:34

Hi!
Great job! I don’t feel comfortable with Flex mx/spark UI components because I do a lot of pure AS3 projects, so I started trying your library a few days ago and it seems to suit very well in my projects.
I readed that you’re about to release a new version… do you know when it will be ready?
down to more technical questions: I’ve been trying the SelectBox component and I couldn’t figure out which event is thrown when an item is selected, can you help me with that?

thank you
16 Eric Marcos
6. September 2010 at 21:49

nevermind, I just found it in your SelectBoxExample.as:
_selectBox.bindProperty(
SelectBox.BINDABLE_PROPERTY_SELECTED_ITEM, itemSelected
);

Russischer Bär Project Blog