As you know, the current version of Codly doesn’t support creating a list component. So what if my application contains a list and I want to use Codly to create it?

Here are the steps to create a list that contains a complex item style

Designing in photoshop

First, I will need to design the list item as a View components and add the other components to this view.

So, I have started with creating the View and added the label, arrow imageView, icon imageView, and the separator. And placed each of my designs in the corresponding group. Time to publish it.

Developing the list in Titanium

Ok now the application is published to Codly Cloud service and I got the source code from my account.

Here is the code for this item I just got from the Codly service:

<Alloy>  
    <NavigationWindow module="xp.ui" id="nav">
        <Window id="root">
            <ImageView id="img_bg" />
            <View id="view_item">
                <ImageView id="img_separator" />
                <ImageView id="img_img" />
                <ImageView id="img_arrow" />
                <Label id="lbl_conv_1" />
            </View>
            <ImageView id="img_header" />
        </Window>
    </NavigationWindow>
</Alloy>  

And here is the style for it:

"#view_item": {  
    "left": "0%",
    "width": "100%",
    "backgroundTopCap": 0.1,
    "backgroundLeftCap": 0.1,
    "top": "16.8%",
    "height": "15%"
}

"#img_separator": {  
    "left": "0%",
    "width": "100%",
    "backgroundTopCap": 0.1,
    "bottom": "0%",
    "backgroundLeftCap": 0.1,
    "height": "0.92%",
    "image": "/images/separator_image.png"
}

"#img_img": {  
    "left": "4.06%",
    "width": "18.02%",
    "backgroundTopCap": 0.1,
    "backgroundLeftCap": 0.1,
    "top": "0%",
    "height": "80.09%",
    "image": "/images/img_image.png"
}

"#img_arrow": {  
    "left": "94.47%",
    "width": "2.5%",
    "backgroundTopCap": 0.1,
    "backgroundLeftCap": 0.1,
    "top": "39.81%",
    "height": "18.51%",
    "image": "/images/arrow_image.png"
}

"#lbl_conv_1": {  
    "font": {
        "fontSize": 20,
        "fontFamily": "Roboto-Medium"
    },
    "left": "24.68%",
    "color": "#CC3333",
    "width": "66%",
    "text": "Where are you from",
    "top": "32.4%",
    "height": "size"
}

 

Editing the View Xml

I will need to add the ListView, Templates and ItemTemplate and move our view inside it.
I also need to add the bindId for the components that will change.

<Alloy>  
    <NavigationWindow module="xp.ui" id="nav">
        <Window id="root">
            <ImageView id="img_bg" />
            <ListView id="lst" onItemclick="onItemClick">
                <Templates>
                    <ItemTemplate  name="template" id="template" > 
                        <View id="view_item">
                            <ImageView id="img_separator" />
                            <ImageView bindId="img" id="img_img" />
                            <ImageView id="img_arrow" />
                            <Label bindId="title" id="lbl_conv_1" />
                        </View>
                    </ItemTemplate>
                </Templates>
            </ListView> 
            <ImageView id="img_header" />
        </Window>
    </NavigationWindow>
</Alloy>  

 

Edit Item Style

Let’s add the style step by step. First we add the lst style. It will get the top and the width of our View. Let the height be the rest of the view.

"#lst":{  
    "top": "16.8%",
    "width": "100%",
    "height" : "83%"
}

We will change the height of the View to be 100% to fill the height of its parent, the item template. Also the top of the view to be “0” to start at the top of the item.

"#view_item": {  
    "left": "0%",
    "width": "100%",
    "backgroundTopCap": 0.1,
    "backgroundLeftCap": 0.1,
    "top": "0",
    "height": "100%"
}  

The rest of the style will be used as it is. No modifications needed. And we are done styling our ListView.

Adding Some items

Ok we are ready to add some code to test our list. Lets go to our controller and add the logic to generate some list items.

Let’s assume we have this array of data that we will use to fill in the list data.

    var lessons= [{  
        title: "01- Where are you from?",
        icon: "icon1_image.png",
    },
    {
        title: "02- Do you speak English?",
        icon: "icon2_image.png",
    },
    {
        title: "03-What's your name?",
        icon: "icon3_image.png",
    },
    {
        title: "04-Asking directions.",
        icon: "icon4_image.png",
    },
    {
        title: "05- I'm hungry.",    
        icon: "icon5_image.png",
    },
    {
        title: "06-Do you want something to drink?",
        icon: "icon6_image.png",
    },
    {
        title: "07-That's too late.",
        icon: "icon7_image.png",
    },
    {
        title: "08-Choosing a time to meet.",
        icon: "icon8_image.png",
    },
    {
        title: "09-When do you want to go?",
        icon: "icon9_image.png",
    },
    {
        title: "10-Ordering food.",
        icon: "icon10_image.png",
    },
    {
        title: "11-Now or later?",
        icon: "icon11_image.png",
    },
    {
        title: "12-Do you have enough money?",
        icon: "icon12_image.png",
    }];

Now let’s add this data to the list

function prepareData(){  
    var topicSections = new Array();

    var topicSection = Ti.UI.createListSection({
        headerTitle : topic.title
    });

    var sectionData = new Array();

    for (var i = 0; i <= lessons.length - 1; i++) {
        var lesson = lessons[i];
        sectionData.push({
            title:{
                text : lesson.title
            },
            img: {
                image: "/images/" + lesson.icon
            },
            properties: {
                height:"80",
                width:"100%",
            }
        }); 
    } 

    topicSection.items = sectionData;
    topicSections.push(topicSection);
    $.lst.sections = topicSections;
    $.lst.defaultItemTemplate= 'template';
}

And we are done. This is the final result of this tutorial.