Improved Pure ActionScript support in MadComponents
I’ve been wrapped up with other projects lately – so I haven’t had the time to blog about MadComponents. But in my absence, Michael Martinez has been blogging some interesting tutorials. And there’s more on the way.
Michael also created the MadComponents logo shown in the corner.
MadComponents is up to version 0.6.2. The last two minor updates and new examples are for the benefit of developers who prefer to code in a procedural Pure ActionScript style, rather than XML layouts.
Why XML Layouts?
Expressing a MadComponents layout in XML accomplished three things behind the scenes (that you don’t need to think about):-
1. It adapts the layout to the screen size. Different devices have different screen sizes. An XML layout description is relative, not absolute.
2. It scales the layout adjusting to the pixel density of the device. For example, one of my test devices is an HTC desire. It has quite a high pixel density. If it were not for the automatic scaling, the MadComponents UI components would be too tiny to operate.
3. It automatically adapts to screen orientation. When the device is rotated between portrait and landscape – the UI is re-drawn.
These three features save you a lot of trouble. That’s why I based MadComponents on an XML layout description, rather than programmatic UI creation. There’s no need to worry about bloated-ness either. Some developers with experience of Adobe Flex and MXML might worry that an XML layout leads to bloated code. But the problem with Flex isn’t MXML, and there’s nothing inherently inefficient about XML parsing and UI rendering – provided that the UI components are optimised for mobile devices.
While I still advocate the XML approach that I’ve described previously, not all developers like this approach. Some would prefer having more control to do things their own way, rather than allow the MadComponents framework to take the reins.
So I’ve made some small changes to MadComponents, and added some helper classes to allow developers to get more out of MadComponents without XML.
UIPickerBank is a helper class that enables you to create a bank of pickers.
new UIPickerBank(this, 10, 20, 320.0, 434.0, 4);
This will create a picker bank with 4 columns at absolute coordinates (10,20), width 320 pixels, and height 434 pixels. There is a further optional parameter to specify widths. For example, “30,20%,30%,50%” specifies 30 pixels, and then the remaining width allocated in the ratio 20%,30%,50%.
There’s an example of using the programmatic picker bank here.
UIListMaker is a helper class to simplify making a list programmatically.
new UIListMaker(this, 0, 0, 320.0, 434.0);
This will create a list at (0,0), with width 320, and height 434.
UIFormMaker and attachPages
UIFormMaker allows you to make pages that you can add to a pages, viewflipper, or navigation container using the attachPages method.
var navigation:UINavigation = new UINavigation(this, <null/>, new Attributes(0, 0, WIDTH, HEIGHT));
var page0:UIFormMaker = new UIFormMaker(navigation, WIDTH, PAGE_HEIGHT);
var page1:UIFormMaker = new UIFormMaker(navigation, WIDTH, PAGE_HEIGHT);
To add components to a UIFormMaker page, don’t use addChild(), use attach(), attachHorizontal(), or attachVertical() methods of UIFormMaker. For example:-
page0.attach(uiButton); // Adds the button to the page.
page0.attachVertical(uiButton); // Adds the button, and positions it vertically below the last component.
page0.attachHorizontal(uiButton); //Adds the button, and positions it to the right of the last component.
There’s an example of creating a programmatic navigation based application here.
Help Spread the Word
I’ve contributed these components freely to the Flash Mobile developer community. Please help spread the word about MadComponents and ExtendedMadness, by blogging and twittering. It would be great if you could contribute more examples and tutorials, or even just talk about these libraries and what they can do.
Please click on the star on the Project Home page (log-in to see it under Project Information), to show your appreciation of MadComponents.