Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

ListView with Alloy

$
0
0

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!


Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>