Announcing MinimalComps: Minimal AS3 UI Component Set
I love AS3. Flex is cool, but not often so suited for the kind of work I like to do, which is usually more custom stuff, not so much form-based Flex-like applications. This brings up a problem though. I still have the occasional need for a button with a label, a slider, color chooser, checkbox, etc. I'm either forced to use Flex, jump over to the Flex Authoring tool for my coding, figure out how to hack the Flash CS3 components SWC into a Flex Builder AS3 project , or create my own components.
I don't really want to use Flash Authoring as my compiler. As far as using the CS3 comps in Flex Builder, I assume it can be done, but haven't tried. From my few attempts to use them in Flash CS3, I have not been so impressed with them to really want to use them in Flex builder.
So, in the end, I started making a few of my own components. There were a couple of personal projects I was playing around with a few months ago where I needed some basic components. And rather than just continue making one-off UI elements, I started making a set based on a common component class with similar interfaces, etc.
As these were just experimental projects, skinning, styling, and layout stuff, as well as advanced features like databinding weren't really something I needed. So they are pretty minimal. That's one reason for the name. Also, all the graphics are drawn with the drawing API. No gradients or rounded corners. There's a single bitmap font embedded that all the components which need to display text use. So they have kind of a minimal look and feel. Finally, it's a pretty minimal set of components. No list or combo box, data grid, text area, scroll pane, etc. So with those three factors, there wasn't much question about the name. 
Just so you know I'm not totally anti-Flex, one of the projects where I was using them started to become much more complex and really needed better layout and databinding, as well as some more advanced components. So I wound up migrating that over to a Flex project. The other project was just a larger experiment using sound visualization and wound up not really going anywhere.
So I recently realized that I had this component set sitting there on my hard drive not being used at all and others might possibly benefit from it. As they really are pretty minimal, and would really benefit from others' contribution, I'm releasing them open source. I'll just stick the code up here for now, but if there if some real interest in further development arises, I'll put them on Google Code or OSFlash or something.
Anyway, here's what they look like:
The set includes a CheckBox, PushButton, HSlider, VSlider, InputText, ProgressBar, RadioButton, ColorChooser (text input only) and Panel. Other than changing some of the basic colors or messing with the code, what you see is what you get. But just to show how easy they are to use, here's a snippet of the class that creates the above demo:
-
var panel:Panel = new Panel(this, stage.stageWidth / 4, stage.stageHeight / 8);
-
panel.setSize(stage.stageWidth / 2, stage.stageHeight * 3 / 4);
-
-
var checkBox:CheckBox = new CheckBox(panel, 20, 20);
-
checkBox.label = "Check it out!";
-
-
var label:Label = new Label(panel, 20, 40);
-
label.text = "This is a label";
-
-
var pushbutton:PushButton = new PushButton(panel, 20, 60);
-
pushbutton.label = "Push Me!";
-
pushbutton.width = 100;
-
-
var hSlider:HSlider = new HSlider(panel, 20, 90);
-
-
var vSlider:VSlider = new VSlider(panel, 130, 20);
-
-
var inputText:InputText = new InputText(panel, 20, 110);
-
inputText.text = "Input Text";
-
-
_progressBar = new ProgressBar(panel, 20, 140);
-
-
var radio1:RadioButton = new RadioButton(panel, 20, 160);
-
radio1.label = "Choice 1";
-
-
var radio2:RadioButton = new RadioButton(panel, 20, 180);
-
radio2.label = "Choice 2";
-
-
var radio3:RadioButton = new RadioButton(panel, 20, 200);
-
radio3.label = "Choice 3";
-
-
var colorchooser:ColorChooser = new ColorChooser(panel, 20, 230);
-
colorchooser.value = 0xff0000;
One thing you see there is that you can pass in the parent and x/y position for the component right in the constructor. So, rather than the repetitive task of create component, addChild, set x position, set y position, you can do it all in one line. Components that fire events such as click or change, also take a fourth parameter of defaultHandler so you can set up the event like so:
-
myButton = new PushButton(this, 10, 20, onClick);
and it automatically takes care of adding onClick as a handler for the MouseEvent.CLICK event.
To use them, you can either add the source directory to your Source Path in Flex Builder Project Properties, or Class Path in Flash CS3. Or add the SWC to your Library Path in Flex Builder (recommended). The classes are somewhat documented, but I didn't generate any docs yet.
[edit]I just realized that because the components use an embedded font, simply linking to the source folder won't work unless you embed that font in your own project, or import it into your library in CS3 and export it for AS. Linking to the SWC in Flex Builder should work fine though. I guess to link to the SWC in CS3, you need to add it to the Components Panel, but I haven't had much luck doing that yet. Might need to compile a different version in CS3 itself for use in CS3.[/edit]
I'm not sure if these will be useful to anybody, but if one person uses them, that's better than them sitting on my hard drive until AS4 comes out and makes them useless. I think they are great for prototyping at least, as they are so easy to create and set up. I also think that while the style is set in stone, it can look kind of cool when you have a lot of them together. They are also REALLY tiny in terms of file size. The whole demo above is only 20k.
You can download the source here:
http://www.bit-101.com/minimalcomps/
It's a zip file containing the whole Flex Library project - source, SWC, everything. Creative Commons Attribution-Share Alike 3.0 License. Enjoy.
