Developer's Blog

I’ve created a repository for the some extension components which I consider necessary for Spark. The first one is AutoComplete component , version 0.1 – in the repository you can find the source code of the test here. I’m very happy with the way Gumbo have evolved – the initial build of AutoComplete component didn’t took too much developing effort.

Enjoy!

This one was supposed to be written after the FlexCamp, but because we’re not presenting it anymore I’m releasing it right now.

As its name says, the Hour Minute NumericStepper can be used to set the “time” for various needs : let’s say that your application requires the user to input the exact time of an event. This component could be developed in three ways: extending NumericStepper, extending TextInput or extending UIComponent. The time is 24 hours format, so the user doesn’t have to set the AM or PM.

I choose the UIComponent method because the event stack gets overloaded when you extend NumericStepper and try to process the values. Extending UIComponent was not easy and the main inspiration came from NumericStepper class – I tried to replicate most of the methods and properties, without leaving the optimization on the second place. The component is programmatic skinned and has a custom event, interfacing IDataRenderer, IDropInListItemRenderer and others – required for creating itemRenderers and itemEditors.

You can find more components like this on the market (try searching Adobe exchange and Flex.Org components) but this one has the following advantages:

- it has separated controls for hours and minutes, making it more intuitive

- low data loss due to event stack overflow

- controlling events and skins at low level

- implements interfaces for all ListBased components

There may be many disadvantages, but I could find more than this : the NumericStepper is included in the framework, so extending it would lead to a smaller size for the product.

It can be used as a standalone component and also as a itemRenderer – the example below is showing the itemRenderer / itemEditor usage.

Usage:

var myDGColumn : DataGridColumn = new DataGridColumn();
myDGColumn.dataField = "lastdayarrived";
myDGColumn.headerText = "Hour";
myDGColumn.editorDataField = "value"; //do not forget to set this one, even if its about another component
var myColumnItemRenderer : ClassFactory = new ClassFactory();
myColumnItemRenderer.generator = HMNS2;
myDGColumn.itemRenderer = myColumnItemRenderer;
myDGColumn.rendererIsEditor = true;

To skin it, insert the sequence in your application:

var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("HMNS2");
if (!style) {
style = new CSSStyleDeclaration();
StyleManager.setStyleDeclaration("HMNS2", style, false);
}
if (style.defaultFactory == null) {
style.defaultFactory = function():void {
this.downArrowSkin = HMNSDownSkin;
this.cornerRadius = 0; //I like corner radius 0
this.focusRoundedCorners = "";
this.upArrowSkin = HMNSUpSkin;
};
}

View source is enabled. Enjoy!

Update : since this blog traveled through a lot, the view source above it is not working. To get the archive click here.