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>