Appcelerator Titanium Alloy ListView & Facebook Friends Part Two. Using the ListView template in view.xml. New feature coming in Alloy 1.2

index.js

/**
 * called when an item in the ListView is clicked; we will get the section
 * index, and addition event information
 *
 * @param {Object} _event
 */
function loadMoreBtnClicked(_event) {
    alert('not implemented yet');
}


/**
 * this is how its done as of alloy 1.2
 *
 * @param {Object} _data
 */
function createListView(_data) {

    // this is pretty straight forward, assigning the values to the specific
    // properties in the template we defined above
    var items = [];
    for (var i in _data) {
        
        // add items to an array
        items.push({
            template : "template1",            // set the template
            textLabel : {
                text : _data[i].name           // assign the values from the data
            },
            pic : {
                image : _data[i].pic_square    // assign the values from the data
            }
        });
    }
    
    // add the array, items, to the section defined in the view.xml file
    $.section.setItems(items);

}

function _doFacebookLoginAction() {

    if (!fb.loggedIn) { debugger;
        fb.permissions = ["read_stream", "email"];
        fb.authorize();
        return;
    }

    var query = "SELECT uid, name, pic_square, hometown_location  FROM user ";
    query += "where uid IN (SELECT uid2 FROM friend WHERE uid1 = " + fb.uid + ")";
    query += "order by last_name limit 1000";
    Ti.API.info("user id " + fb.uid);
    fb.request("fql.query", {
        query : query
    }, function(r) {
        if (r.success) {
            createListView(JSON.parse(r.result));
        } else {
            alert('error happened!');
        }
    });

    // set login callback
    fb.addEventListener('login', function(e) {
        _doFacebookLoginAction();
    });

}

// open the view
$.index.open();

var fb = require("facebook");

// YOU MUST DO THIS
// set this in your tiapp.xml file
fb.appid = Ti.App.Properties.getString("ti.facebook.appid");

// Start process by loggin in
_doFacebookLoginAction();

index.tss

".container": {
    backgroundColor: "white"
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
},
".imageThumb" : {
	width: '50dp',
	height: '50dp',
	left: 0
},
".title" : {
	color: '#000',
	left: '60dp',
	top: 0,
	textAlign: 'left'
},
".template1[platform=ios]" : {
	height: '56dp'
},
".template1[platform=android]" : {
	height: Ti.UI.SIZE
}

index.xml

<!-- THIS CODE REQUIRES ALLOY 1.2.0 -->
<Alloy>
    <Window class="container" formFactor="handheld">
        <ListView id="list" defaultItemTemplate="template1">
            <Templates>
                <ItemTemplate name="buttonItem" height="Ti.UI.SIZE">
                    <!-- will use this in the next blog post -->
                    <Button id="loadMoreBtn" onClick="loadMoreBtnClicked">Load More</Button>
                </ItemTemplate>
                <!-- main template for displaying the list items -->
                <ItemTemplate  id="template1" name="template1"  class="template1">
                    <ImageView id="pic"  bindId="pic" class="imageThumb"/>
                    <View id="textContainer">
                        <Label id="textLabel" bindId="textLabel" class="title"/>
                    </View>
                </ItemTemplate>
            </Templates>
            <!-- we only have one section and the items are contstucted using template1 -->
            <ListSection id="section" >
                <ListItem template="template1" />
            </ListSection>
        </ListView>
    </Window>
</Alloy>

God bless you for this code. Appcelerator should add this as an example in the docs as it gives better clarity than any sample in there.

This very good sample code for listView, to create custom template of listview, this very easy to implement , and easy to maintain and easy to code,understandable +1 for this code.
Thanx Aaron

Thanks Aaron,
This snippet is so useful since Titanium's documentation is so poor! Got everything I needed for listview implementation:)