CODEWITHSUNDEEP
listviewtitanium-alloy
Maniz
Maniz

Reputation: 415

Titanium Adding custom template to a listview

I'm currently building an application with Titanium studio and Alloy. In one of my Windows, I'm trying to dynamically add ListItem in a listView by pressing some button (allowing the user to retrieve an image or some file).

I need to add some listItem with some particular structures : An image supposed to show the dataType, a label for the file name, and another image to delete the listItem. Here is my template :

ligneFichier.xml

<Alloy>
<ItemTemplate name="ligneFichier" id="ligneFichier">
     <View class="item-container">               
         <ImageView bindId="typeDonnee" />
         <Label bindId="nomFichier" />  
         <ImageView bindId="supprimer" />
     </View>
</ItemTemplate>
</Alloy>

And then, in the controller of my page :

myController.js

var data = [];
        var tmp = {
            typeDonnee : {
                image : '/images/image.png'
            },
            nomFichier : {
                text : event.media.file.name
            },
            supprimer : {
                image : '/images/supprimer.png'                 
            }
            //I tried to use this line :
            //template: 'ligneFichier',
            //But it tells me that template is undefined
        };
        data.push(tmp);

        //My listView
        $.listeFichiers.sections[0].items = $.listeFichiers.sections[0].items.concat(data);

So I tried to link the template with alloy directly :

       <ListView id="listeFichiers" height="100" headerTitle="" template="ligneFichier">
            <ListSection id="photo" headerTitle="">

            </ListSection>
            <ListSection id="audio" headerTitle="">

            </ListSection>
        </ListView>

But, when I add a line, it doesn't use my template, it doesn't even find the text, it only write 'label'. And then, in the console, there is that message :

Please use 'properties' binding for builtInTemplate

So I tried to replace the binding name by 'Properties' but with no success... Does this mean something to someone? Do not hesitate to ask for some precisions or to tell me if I forgot some sample.

Upvotes: 1

Views: 5068

Answers (1)

LHIOUI
LHIOUI

Reputation: 3337

I think that alloy can't recognize your template because it was defined in a separate file. Try to define it in the same file like this :

 <ListView id="listeFichiers" height="100" headerTitle="" defaultItemTemplate='ligneFichier'>
  <Templates>
   <ItemTemplate name="ligneFichier" id="ligneFichier">
     <View class="item-container">               
        <ImageView bindId="typeDonnee" />
        <Label bindId="nomFichier" />  
        <ImageView bindId="supprimer" />
     </View>
  </ItemTemplate>
 </Templates>
   <ListSection headerTitle="Title">
     <ListItem typeDonnee:image="yourimage.png" nomFichier:text="FileName" supprimer:image="supprimer.png" />
   </ListSection>
 </ListView>

EDIT : You can use require to add your template :

in templateName.xml :

 <Alloy>
   <ItemTemplate name="ligneFichier" id="ligneFichier">
     <View class="item-container">               
        <ImageView bindId="typeDonnee" />
        <Label bindId="nomFichier" />  
        <ImageView bindId="supprimer" />
     </View>
  </ItemTemplate>
  </Alloy>

then add it to your listview templates 

 <ListView id="listeFichiers" height="100" headerTitle="" defaultItemTemplate='ligneFichier'>
  <Templates>
   <Require src="templateName"/>
  </Templates>
   <ListSection headerTitle="Title">
     <ListItem typeDonnee:image="yourimage.png" nomFichier:text="FileName" supprimer:image="supprimer.png" />
   </ListSection>
 </ListView>

I have tested it :)

Upvotes: 5

Related Questions