How can I set an image in my ListView?
I am very new in Titanium and I doing a TODO app, so what I want is according to the task status I would like to show a different image in my ListView, so I belive is needed a function that execute before to render the xml that contains my ListView
I have been 2 days trying for setting an image to my ListView from my controller.js :
This is my ListView, in my index.js:
<Alloy> <Collection src="todo" /> <!--Capture the collections I want to show --> <TabGroup> <!-- Tab included via <Require> tag --> <!-- Aqui estará el formulario para agregar o editar tareas --> <Tab id="addtarea" title="Agregar Tarea"> <Window class="container"> <View layout="vertical"> <TextField id="tareaInput" class="input" hintText="Tarea por hacer..."></TextField> <TextField id="horaInput" class="input" hintText="Hora..."></TextField> <Picker id="fechaInput" type="Ti.UI.PICKER_TYPE_DATE" selectionIndicator="true" useSpinner="true"></Picker> <TextArea id="descInput" class="input" hintText="Descripción..."></TextArea> <Button id="btnTarea" onClick="saveTask">Agregar</Button> <Button id="btnTarea" onClick="updateTask">Modificar</Button> </View> </Window> </Tab> <Tab id="tabPrincipal" title="Listado de tareas"> <Window> <ListView id="elementsOnList" defaultItemTemplate="elementTemplate" > <!--onItemClick= --> <Templates> <ItemTemplate name="elementTemplate"> <View> <Label bindId="textoLista" id="textoLista" onClick="showDetailTask"/> <ImageView bindId="icon" id="icon" onClick="checked"/> </View> </ItemTemplate> </Templates> <ListSection dataCollection="todo"> <ListItem icon:image="images/blank_check.png" textoLista:text="{name}" idTareas="{idTarea}" nombre="{name}" hora="{hour}" fecCreacion="{dateCreated}" fechaTarea="{dueDate}" descripcion="{description}" estatus="{status}" /> </ListSection> </ListView> </Window> </Tab> </TabGroup> </Alloy>
And my controller looks like :
var args = arguments[0] || {}; Alloy.Collections.todo.fetch(); $.index.open(); //Getting the values to show in form $.tareaInput.value = args.nombre; $.horaInput.value = args.hora; //$.fechaInput.value = args.fechaTarea; $.descInput.value=args.descripcion; var idTarea =args.idTarea; //fin valores //Ti.API.info('asfd' + args.nombre); CODIGO var myTasks=Alloy.Collections.todo; Alloy.Collections.todo.fetch(); function saveTask() { //CURRENT DAY var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; //January is 0! var yyyy = today.getFullYear(); // //DO the save process var task = Alloy.createModel('todo', { name : $.tareaInput.value, hour : $.horaInput.value, dateCreated : mm+'/'+dd+'/'+yyyy, dueDate: $.fechaInput.value, description: $.descInput.value, status: 1 //1 será el estado por defecto activo }); myTasks.add(task); task.save(); alert('Tarea guardada éxitosamente'); $.tareaInput.value = ''; $.horaInput.value = ''; //$.fechaInput.value = args.fechaTarea; $.descInput.value= ''; } function updateTask(){ var task = myTasks.get(idTarea); task.set({ "name":$.tareaInput.value, "hour":$.horaInput.value, "dueDate" :$.fechaInput.value, "description":$.descInput.value, }).save(); } function btnVisibility(){ } // =======================================================================================================// // CODIGO PARA LISTVIEW //========================================================================================================// var myTasks=Alloy.Collections.todo; myTasks.fetch(); //FUNCION PARA CAMBIAR IMAGEN function checked(e){ var section = $.elementsOnList.sections[e.sectionIndex]; var item = section.getItemAt(e.itemIndex); var currentImage = item.icon.image; //Antiguo if(currentImage =="images/blank_check.png" && item.properties.estatus ==1){ item.icon.image = "images/checked.png" ; //Change the status in order to know which task has or not completed updateID(item.properties.idTareas, 2); alert('Tarea realizada'); //end update status }else{ item.icon.image = "images/blank_check.png"; updateID(item.properties.idTareas, 1); alert('Tarea activa'); } section.updateItemAt(e.itemIndex, item); } function showDetailTask(event){ var itemSection = $.elementsOnList.sections[event.sectionIndex]; // Get the section of the clicked item // Get the clicked item from that section var item = itemSection.getItemAt(event.itemIndex); var args= { idTareas: item.properties.idTareas, nombre: item.properties.nombre, //Lo que captura el array hora: item.properties.hora, fecCreacion: item.properties.fecCreacion, //Lo que captura el array fechaTarea: item.properties.fechaTarea, descripcion: item.properties.descripcion, //Lo que captura el array estatus: item.properties.estatus }; var taskdetail = Alloy.createController("taskdetail", args).getView(); taskdetail.open(); } function updateID(idTareas, status){ var task = myTasks.get(idTareas); task.set({ "status":status //Por defecto es 1 cuando esta activo si es cero quiere decir que está inactivo }).save(); Alloy.Collections.todo.fetch(); }
Any help will be highly appreciated.
Thanks in advance!