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

  1. About
  2. Definition and placement
  3. Examples
  4. Objectives
  5. Quick overview
    1. Life cycle architecture
    2. Styling and skinning
    3. Data integration
    4. Property binding
  6. Getting started
  7. Resources
  8. Comments (26)
  9. Leave a Comment

Documentation

About

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.

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 form 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 GitHub account containing the most recent sources and encouraging your contribution.

Examples

In a nutshell

Button example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

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
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 :-)
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
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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.

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

Resources



26 Comments

  1. Matthias

    5. Februar 2010

    Respect!

  2. uwe

    5. Februar 2010

    +1! Stabile russische Technik. Mal sehen was ich damit baue.

  3. Matelot

    19. April 2010

    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

    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

    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

    Unfortunately, I am not using Flash and cannot give you any hint how to embed swc libraries there.

  7. Igor D.

    8. Juni 2010

    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

    hello, i am more interested in styling the ui, is there an example?

  9. Kevin

    11. August 2010

    Hi, why so long no update? are you still working on?

  10. Jens Struwe

    11. August 2010

    Yes I do. There will be a major update in a couple of weeks.

    Edit on 2011-06-26: Or in a couple of months, years ;-)

  11. Kevin

    12. August 2010

    Thanks for your reply, I am very concerned your work! Great Work!!!

  12. wangchyz

    15. August 2010

    Great work! I suggest you host it at github, and we can patch it.

  13. jason

    24. August 2010

    how to use these controls in Flex

  14. Jens Struwe

    24. August 2010

    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

    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

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

    Edit by admin: The select box dispatchs now events with version 0.4.0 (before only data binding was possible).

  17. Alain

    9. November 2010

    Hello great job you have done.
    I m the owner of the gwt4air library located here: http://code.google.com/p/gwt4air/.
    For the next versions i m planing exporting your library to java through GWT. Any advices of feedback will be welcome

    Greets,

    Alain

  18. ephraimt

    12. November 2010

    In order for Slider to respond to setSize, you need to add this to its update function:

    if (isInvalid(UPDATE_PROPERTY_WIDTH)) {
    _track.setSize(trackWidth, trackHeight);
    _thumb.boundaryRect = thumbBoundaryRect;
    _thumb.position = valueToThumbPosition(_value);
    }

  19. Sunny

    23. März 2011

    thanks for the great projects posted here. I am integrating the ColorPicker into Flashblocks. I needed to be able to fill in the color history dynamically so I added getter/setters in order to access the private history LinkedSet.

    ColorPickerWindowContent(ColorPickerWindow.getInstance().document).history.add(color)

    Would you say this is the best way to add dynamic colors?

    Thanks again!

  20. Jens Struwe

    24. März 2011

    For now, there is apparently no better way to customize the colors appearing in the history. The clean way would be to enable the ColorPicker to be set up with a list of custom colors as well as a custom history. As you already know, I am planning to move the project to the first version. I’ll consider this requirement when I come to the ColorPicker update.

  21. Chman

    19. Juni 2011

    Great project, thanks. I’m following this.

  22. Scott Blackburn

    15. August 2011

    Hi,

    Thanks this is an excellent resource!!

    Would it possible to use these components for Data Paging? So only data needed gets called when scrolling?

    Here is an example in Flex but I want to avoid the Flex framwork:

    http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/

    Any guidance would ne appreciated.

  23. Jens Struwe

    17. August 2011

    Hello Scott. Paging is basically possible with the list components although it is not implemented explicitly. Whenever you scroll the list the particular item renderers are being reused and receive the appropriate piece of data of your data provider.

    To enable paging you should go these steps:

    1. You need to implement some kind of loading based on the current listIndex displayed by the list. If the item at that index is requested the first time it should load otherwise return the loaded data.

    2. You need to hook into the data setter method of the item renderer and check whether the passed item has been already loaded or not yet. If not, display nothing or a spinning wheel, else show the data. You also need to catch the item’s loading progress within the renderer.

    3. You could my loading manager – it has a page handling built-in (including stopping and resuming paged sequences). Unfortunately not sufficiently documented but already running.

  24. Scott Blackburn

    12. März 2012

    Hi Jens,

    Thank you for your advice! this should give me a good starting point. So the current listIndex is the first visible item in the list?

    Scott

  25. Mariana

    30. April 2012

    Hi Jens,

    I’m having trouble getting the scrollbar to work with a textfield:

    _scrollBar = new ScrollBar();
    _scrollBar.enabled = true;
    _scrollBar.direction = “vertical”;
    _scrollBar.setSize(50, _mainText.height);
    _scrollBar.moveTo(_mainText.x + _mainText.width-50, _mainText.y);
    _scrollBar.setStyles(styleScrollBar);
    _scrollBar.documentSize = _mainText.height;
    _scrollBar.setScrollProperties(10,10,10);
    _scrollBar.owner = _mainText;
    addChild(_scrollBar);

    Shouldn’t setting the owner to a textfield make this the scroll target?

    Cheers!

  26. Leo

    12. Mai 2012

    Hi,

    first of all: THANK YOU!
    Really great work out there. I appreciate that!

    I couldn’t figure out how to customize (font, size, color, …) the tabs in the window element. The window element does have a TabBar as child, but no get/set method for it. Is that the clue? Or is there still another way which i don’t know?

    Thank you very much.
    Keep up the good work!

    Leo

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.