Skip to content
January 12, 2012 / Daniel Freeman

Extending MadComponents

I previously blogged about how to incorporate components from other libraries into a MadComponents layout.  I showed how MadComponents could be mixed with MinimalComps and as3Flobile components.  But the approach I used to be applied to any component library, or components that you write yourself.  (Provided the class constructors have no arguments).

There are two other techniques as well, for including non-MadComponent stuff into a layout.  So I’ll describe them here.

Before I go into that, if you haven’t heard about MadComponents before – it’s a popular free-open-source framework for AIR mobile User Interfaces.  It is significantly more lightweight than the bloated Flex mobile framework, and many users have reported much, MUCH, better performance than Flex.  You can express a layout in XML (incurring NO decline in performance), or you can incorporate the components into standard Pure-AS3 code.  There’s plenty of information about them on this blog, and the code site has lots of examples.  Please join the new Facebook Page – to get up-to date news and discussion.

Anyway, as I was saying, there are two further ways to incorporate new components into MadComponents.

Placeholder Technique

This is where you define an empty placeholder within the layout, and then attach (addChild) a component to the placeholder.  An <image> makes a good placeholder, because you can specify a size for it.

example:

<vertical>
        <button>one</button>
        <image id=”placeholder”>120,90</image>
        <switch/>
</vertical>
 
var placeholder:UIImage = UIImage(UI.findViewById(“placeholder”));
placeHolder.addChild(myComponent);
 

A placeholder can also define a window to StageVideo, or Stage3D behind the MadComponents layout.

UI.extend() Technique

UI.extend() is a static method to add new components to MadComponents.  ExtendedMadness uses it to add its extra components to the MadComponents core.  The constructor parameters of an extended component must conform to this pattern:

public class MyNewComponent extends MadSprite {
 
        public function MyNewComponent(screen:Sprite, xml:XML, attributes:Attributes) {
        screen.addChild(this);

Where screen is the parent container component, xml is the layout xml branch, and attributes contains information about how to lay the component out (although you don’t need to worry about this for a simple component).

Having defined your new component, (or sub-classing an existing MadComponents class), you can add it  to MadComponents like this:-

UI.extend([“newThing”],[MyNewComponent]);

Once you’ve done this, <newThing> is a defined tag that you can use in a MadComponents layout.  For example:-

<vertical>
         <button/>
         <newThing … etc….

Suppose your component needs to be re-rendered, or laid out differently on orientation change.  Landscape <-> Portrait.  Then you must implement the IContainerUI interface, and write each of its methods, including layout(), which is what will be called on orientation change.  Now your component must conform to this pattern:-

public class MyNewComponent extends Sprite implements IContainerUI {
        public function MyNewComponent(screen:Sprite, xml:XML, attributes:Attributes) {
        screen.addChild(this);
 
.
.
.
public function layout(attributes:Attributes):void {
        // Re-layout component
}

You’ll also need to implement the other methods of IContainerUI.  It’s best to look at examples within extendedMadness.

 

Contribute to ExtendedMadness

While I kept the development of MadComponents quite close to my chest, because I didn’t want to compromise its lightweight design.  But if anyone else has inspiration and vision to contribute to ExtendedMadness, then I’d like to open up the project to other contributors.

Advertisements

6 Comments

Leave a Comment
  1. retinafunk / Feb 20 2012 9:06 pm

    Thanks.. I just started using mad components and I love it and it looks like it will replace Flex Hero in my next app.
    My app needs to be have full offline functionality , so I use a synced sqlite local database for my data .

    I figured out how to pass data from my own sqlite model class to mad components views by using the data parameter..fine so far.
    But ideally I like to extend your model class so it has a loadSqlite or loadLocalData method..
    so it can be used in mad comp XML layouts.
    I tried to replace the view model with my offline model instance (extends your model class) but view.model is a read only property..
    How would I proceed best ? Can I extend your model class instad of MadSprite and then add my methods and make it a XML tag with UI.extend() ? or is than not the right approach …

    On the long way it would make sense to add offline capabilities for sqlite to the Mad Comp Model Class I think..and maybe optional auto local storage caching for remote images , like flex has now,
    just a suggestion..

    • Daniel Freeman / Feb 21 2012 4:18 am

      I’ve based MadComponents only on core AS3 classes, and no AIR-only classes. I even made my own JSON class rather than use the one recently introduced in AS3. I’ve done this so MadComponents can be used in the browser, desktop, or mobile – or authored in older IDEs, or non-Adobe IDEs.

      But I had the same idea at one time. How cool it would be to use the <model> and <sendModel> for databases. But I didn’t implement it because the SQlite class is AIR only.

      Possibly, it makes sense to fork a new branch of MadComponents? A specific AIR version? Dunno.

      Anyway, you can’t just add an extended Model.as class using extend. In the next version, I’ll give you an API to swap the Model class for a new one – because I think that’s a great idea. There will be a setter for model, as there’s already a getter. In List.as, because this is where I use Model.

      At the moment, you can extend List, do something to use your new Model class instead of the old one – but you’d have to extend every kind of list where you’d want your new Model used (List, TickTist, TickOneList, LongList, GroupedList, DividedList).

      I hope this helps.

  2. retinafunk / Feb 21 2012 10:57 am

    Thanks a lot for the quick reply.
    I understand a bit better now.
    So only list uses model as now .. I see. ( somehow I thought all components use model .. now I get it why only list did work )
    I think that for now I will skip extending all the list classes and just keep using my own sqlite model class.
    What I do is use Mad Components XML to layout all list , details but no data at start in the layout XML.

    Then on navigate to page events I addEventListener (which updates the view class) for the async database query..and pass custom sql query parameters.

    Works fine so far..

    Thanks for the great work..

    • Daniel Freeman / Feb 21 2012 11:08 am

      Actually, UIForm references Model too. So model tags will work inside forms, as well as lists. But this would correspond to only one record of a database.

  3. Jon Tetzlaff / Apr 15 2012 8:45 pm

    We are trying to extend the UILabel class and add a touch event to it. When we do the UI.Extend method it doesn’t add the label to the screen. Is this a potential bug?

    We then tried to just extend the textfield class and use the same code for the UILabel class. This also did not show up on the screen.

    This is the extend line we are using in our main class before calling UI.create()
    UI.extend([“touchLabel”], [TouchLabel]);

    We added the xml component to the XML also

    Thanks!

  4. Daniel Freeman / Apr 15 2012 11:52 pm

    You’re lucky to catch me – I can answer briefly. (Most questions probably won’t be answered promptly here until late May – everyone is advised to discuss stuff on the facebook group). Don’t forget that UILabel is not in the right format for extended component. Take a look at the components in ExtendedMadness, and see how they’re structured. Sprite, XML, Attributes parameters for constructor, and implements IConstructorUI. Or you can extend UIContainerBaseClass (But you’ll probably want to extend UILabel).

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: