iphone - colocar - ¿Varias barras de progreso de titanio en una vista de tabla para cargas simultáneas?

progress bar bootstrap animation

Question

Estoy tratando de mostrar el progreso de múltiples envíos xhr en una vista de tabla. Esta es mi primera oportunidad en una vista de tabla (que tampoco se desplaza por alguna razón) y no puedo encontrar la forma adecuada de conectar las barras a onsendstream. Agradezco cualquier comentario sobre el resto de mi código también.

mi función de ventana

Answer 1

No pretendo que varios XHR simultáneos sean estables, pero me funciona en el simulador. Esta pregunta se refería más a la tarea de IU específica, independientemente de si los XHR están o no en cola asíncronamente , pero agradezco cualquier comentario sobre la calidad del código o las mejores prácticas. Aquí está la solución a la que llegué.

// a namespace for the UI code
myApp.ui = {};

// a function for this window
myApp.ui.createCameraWindow = function() {
    var win = Ti.UI.createWindow({
        // I have my own custom header
        title:'''',
    });

    var containerView = Ti.UI.createView({
        backgroundColor:''#85AAD7'',
    });

    var tableQueue = Ti.UI.createTableView({
        backgroundColor:''#85AAD7'',
        separatorColor:''#85AAD7'',
        data:photosQueue, // photosQueue is an empty global array
        width:320
    });

    containerView.add(tableQueue);

    // device stores the candidate file on the system and sends data
    Ti.App.addEventListener(''photoReady'',function(candidate) {
        // here we an add a caption if we please
        var captionView = Ti.UI.createView({
            backgroundColor:''#FFF''
        });

        var candidateIMG = Ti.UI.createImageView({
            // the candidate file was stored with a uniqie identifier called fileStamp
            // don''t forget to change resourcesDirectory to tempDirectory for use on the device
            image:Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory,candidate.fileStamp + ''-thumb320.png''),
            height:367,
            width:320,
            top:0,
            opacity:0.5
        });

        var captionLabel = Ti.UI.createLabel({
            text:''caption'',
            color:''#000'',
            top:-180,
            textAlign:''center'',
            font:{fontSize:50,fontWeight:''bold'',fontStyle:''italic'',fontFamily:''Cochin''},
            opacity:0.5
        });

        var captionBox = Ti.UI.createTextField({
            height:35,
            width:270,
            textAlign:''center'',
            borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
        });

        var submitButton = Ti.UI.createButton({
            title:''Submit'',
            color:''#000'',
            selectedColor:''#FFF'',
            top:220,
            width:130,
            height:35
        });

        captionView.add(candidateIMG);
        captionView.add(captionLabel);
        captionView.add(captionBox);
        captionView.add(submitButton);

        // cover the table view with the temporary caption prompt
        containerView.add(captionView);

        submitButton.addEventListener(''click'',function(){
            candidate.caption = captionBox.value;
            // start the xhr send from another function
            myApp.remote.createPhoto(candidate);
            // go back to the table view
            containerView.remove(captionView);

            var tempFile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory,candidate.fileStamp + ''-thumb75.png'');

            var progressBar = Ti.UI.createProgressBar({
                width:205,
                height:50,
                right:20,
                min:0,
                max:1,
                value:0,
                style:Titanium.UI.iPhone.ProgressBarStyle.PLAIN,
                color:''#FFF''
            });

            var thisRow = Ti.UI.createTableViewRow({
                backgroundColor:''#FFF'',
                layout:"vertical",
                height:75,
                fileStamp:candidate.fileStamp
            });

            // apparently the progress bar needs to be inside a view to align correctly
            var nestedView = Ti.UI.createView({
                height:75,
                width:320
            });

            var tinyThumb = Ti.UI.createImageView({
                image:tempFile,
                height:75,
                width:75,
                left:0
            });

            nestedView.add(tinyThumb);
            progressBar.show();
            nestedView.add(progressBar);
            thisRow.add(nestedView);
            photosQueue.push(thisRow);
            tableQueue.setData(photosQueue);
        });
    });

    // the xhr.onsendstream will repeatedly fire this function and send an object containing an id and e.progress
    Ti.App.addEventListener(''streamProgress'',function(upload) {
        // loop through the global queue
        for (i=0;i<photosQueue.length;i++) {
            // find the the array object that corresponds to the upload object
            if (photosQueue[i].fileStamp == upload.id) {
                // identifiy this object as the tableRow in the UI
                thisRow = photosQueue[i];
                // find its progress bar by knowing the view hierarchy
                var bar = thisRow.children[0].children[1];
                // update the progress bar''s value
                bar.value = upload.progress;
                // update the entire tableView with new data
                tableQueue.setData(photosQueue);
            }
        }
    });

    // the xhr.onload will fire this function and send an object containing an id and a status code
    Ti.App.addEventListener(''confirmation'',function(upload) {
        // loop through the global queue
        for (i=0;i<photosQueue.length;i++) {
            // find the the array object that corresponds to the upload object
            if (photosQueue[i].fileStamp == upload.id) {
                // identifiy this object as the tableRow in the UI
                thisRow = photosQueue[i];
                // if the POST was successful
                if (upload.status == ''201'') {
                    // then make the entire row pleasing
                    thisRow.backgroundColor = ''green'';
                } else {
                    // otherwise make it ugly
                    thisRow.backgroundColor = ''red'';
                }
                // identify the full progress bar in the view hierarchy
                var bar = thisRow.children[0].children[1];
                // remove it regardless
                thisRow.children[0].remove(bar);
                // update the entire tableView with new data
                tableQueue.setData(photosQueue);
            }
        }
    });

    win.add(containerView);

    return win;
};