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;
};