Widgets with child elements

I just published a new Alloy widget for Mads’ popular NappDrawer module. This module provides sliding side-menus like introduced by Facebook.

Good example

The widget is a good example of a new feature in Alloy 1.3, which is the possibility for <require> and <widget> to enclose other elements. Just take a look at this example taken from the widget README:

<Alloy>
    <Widget id="drawer" src="nl.fokkezb.drawer">
        <Window role="leftWindow">
            <Label>I am left</Label>
        </Window>
        <NavigationWindow role="centerWindow">
            <Window>
                <Label>I am center</Label>
            </Window>
        </NavigationWindow>
        <Window role="rightWindow">
            <Label>I am right</Label>
        </Window>
    </Widget>
</Alloy>

How it works

Alloy will compile this to code in something similar to:

$.__views.drawer = Alloy.createWidget("nl.fokkezb.drawer", "widget", {
    id: "drawer",
    children: [$.__views.__alloyId1, $.__views.__alloyId2, $.__views.__alloyId3 ]
});

How to handle it

In your widget or required controller arguments[0].children will give you an array containing all its direct child elements. As you can see in the widget controller, I use the custom role attribute to determine what to do with each of them. How you handle this is in all up to you.

How to use it

This new feature allows you to wrap views that share a common lay-out but have different contents. For example, a custom popup with animations, logic and styling that all sit in the same controller or widget which can be used to wrap multiple popups.

App imagineer: Imagining, Engineering & Speaking about Native mobile Apps with Appcelerator Titanium & Alloy • Meetup organizer • Certified Expert • Titan

Comments