Skip to content
October 11, 2011 / Daniel Freeman

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.

But…

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

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

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.

There’s an example of creating a programmatic list here, and another example with a pure actionscript custom renderer here.

UIFormMaker and attachPages

UIFormMaker allows you to make pages that you can add to a pages, viewflipper, or navigation container using the attachPages method.

For example:-

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);

navigation.attachPages([page0, page1]);

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.

Advertisements

16 Comments

Leave a Comment
  1. tolis / Oct 22 2011 11:02 am

    Just a quick question. If I create an UIForm with XML and later I want to add a component via actionscript how is this possible. The only workaround I found is to create the UIForm with the UIFormMaker so I can reference it and attach my component. Is there another solution? Wouldn’t it be better if the UIFormMaker’s classes would be implemented directly in the UIForm ?

    • Daniel Freeman / Oct 22 2011 1:31 pm

      You could use an <image id=”myImage”> placeholder.

      var myImage = UIImage(UI.findViewById(“myImage”));
      myImage.addChild(myComponent);

  2. tolis / Oct 25 2011 3:53 pm

    How could someone deactivate the NavigationBar so it would never appear on any page?

    • tolis / Oct 26 2011 12:05 am

      It seems that the only way I can find to make the NavigationBar disappear and run the application in full screen is to comment the line 78 in UINavigation class _attributes.y = _navigationBar.height. Is there any cleaner way to do this? If I turn the visibility of NavigationBar to false then when I navigate through pages/screens a padding appears on the top of the page/screen.

      • Daniel Freeman / Oct 26 2011 6:11 am

        Instead on <navigation> , you can use <pages> .

        UIPages doesn’t have a navigation bar. It’s a base class of UINavigation. If you use UIPages, you’ll have to invoke all page changes yourself in ActionScript. It won’t do it for you. You need to call uiPages.nextPage(), and uiPages.previousPage(). Refer to the documentation.

  3. tolis / Oct 26 2011 8:19 am

    thanks. You did a very good work. I’m still trying to find what’s more on spark components to reason the extra complexity and size they have.

  4. David / Nov 15 2011 9:43 pm

    I may have missed something, but for the UIPickerBank example, the following line ‘import pureHelpers.UIPickerBank;’ requires the pureHelpers package…where do I get that package?

  5. Richard Haber / Nov 25 2011 12:05 am

    Daniel,

    This is all very promising, as I have been stymied by the atrocious performance of Flex on mobile devices. I’m getting better at using your Mad Components and am looking to see where css or styles come into play. Could you please point me to some documentation regarding this.

    Thanks

    • Daniel Freeman / Nov 26 2011 12:23 am

      Styling is fit-for-purpose, and lightweight like everything else in MadComponents.

      MadComponents are very customisable using the colour and background attributes. Also the skin attribute for a button. For many components (Button, Label, Lists, Picker, etc.), you can also specify the text style as HTML. Eg. <font size=”20″ color=”#CCCCFF”/>.

      Other attributes such as the size (width, height) and its positioning (alignH, alignV, gapH, gapV) aren’t considered as styles, because they’re more to do with the layout, which will adapt to the screen size of the device.

      So what I do, is define all the styles in XML at the top, or in a Styles class. For example:-

      public static const LIGHT_BLUE:XML = <font size=”20″ color=”#FFCCCC”/>;

      public static const BUTTON_STYLE:String = “#9999CC,#EEEEFF,#EEFFEE,40”;

      Wherever you need to apply styles, you do this kind of thing:-

      public static const BUTTON:XML = {MyStylesClass.LIGHT_BLUE}Press Me;

      (Assuming you’ve defined all your styles in MyStylesClass)

  6. Richard Haber / Nov 26 2011 2:33 pm

    Daniel,

    Thanks for the suggestions. Where can I learn these things for myself? Is there any reference documentation with code snippets like this that I can use as these questions arise in the future?

    Richard

    • Daniel Freeman / Nov 28 2011 12:25 am

      It wasn’t really a MadComponents feature. I just utilised ActionScript substitution {} to structure my layout.

      There are five sources of documentation.

      1. This blog, and tutorials, and the questions and answers in the comments are often useful.

      2. Michael’s tutorials http://caffeineindustries.com/

      3. Code samples on the Google site. http://code.google.com/p/mad-components/source/browse/#svn%2Ftrunk Including source code of the components themselves.

      4. Downloadable .pdfs http://code.google.com/p/mad-components/downloads/list

      5. Class documentation http://e2easy.byethost9.com/madcomponents/

      That’s not bad for an unpaid project done in my spare time.

      • Richard Haber / Nov 30 2011 6:35 am

        Daniel,

        Thanks for the pointers. I’ve been to 1,3,4, and 5 and will look closely at 2 next. I’m sure that I will pick up speed with use and time and can contribute back to the community.

        You’ve really stepped out into the express lane by offering this library. There are very few usable libraries like this and I imagine demand will be high. I coded a relatively simple financial data viewer (no calcs, just display) in Flex in a surprisingly short time only to watch it run like it was swimming in molasses. I’m desperate for a solution for mobile apps that respond to user input like a real app does..

        Thanks for all the work you’ve put into this.

        Richard

  7. wilsmex / Dec 14 2011 12:21 am

    Question here.. AMAZING work btw..

    1. added the “MadComponentsPureNavigation.as” to an existing MC as a child via MC.addChild(). It works great.
    2. Call removeChildren() on button listener to remove all of the MC’s children — thus the MadNav stuff…
    3. The following Error comes up whenever I click anything following the removeChildren call…

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.danielfreeman.madcomponents::UIButton/mouseUp()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/MadComponentsLib/src/com/danielfreeman/madcomponents/UIButton.as:141

    Using latest MAD from google…

    Any help?

    • Daniel Freeman / Dec 14 2011 7:23 am

      Try calling the MadComponentsPureNavigation’s destructor() method before you call removeChildren(). (It’s a public method) It SHOULD remove all the listeners and tidy-up everything. Let me know if this doesn’t solve the problem.

      • Andrew Wilson / Dec 14 2011 6:30 pm

        Daniel,

        That did it. I actually had to call the PureNav’s destructor() AND the UIButton’s desctructor(). Then I called removeChildren on my MC, and everything checked out…

        Now I’ve got your MAD list component set up with the InAppPurchases .ANE and everything is slick. Some of my settings pages are also being enhanced by your components. I’ll be sure to point you to the simple little App and give MAD credit (pun intended) when I’m done.

        Thanks.

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: