Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
Developer
Posts: 60
Registered: ‎04-14-2014
My Device: z10
My Carrier: Digitel

ListView at PlayCloud 10 Tranfers TAB Style

The title is very descriptive, I need to create something exactly the same (or at least very similar) to PlayCloud 10 Transfers TAB, wherein the progress of load and download to X server is observed.

 

Until now in my APP, uploads and downloads can be made one at a time and progress is displayed in a ProgressDialog, but I wish they can make multiple loads and downloads and are managed from a list, each independent.

 

Any idea to do this? I see no way to do. Smiley Sad

My Answer is good? Nice! Please, Clicked the "Thanks" button, this is very helpful for me! Smiley Happy
Mi respuesta es buena? Que bien! Por favor, haz clic en el botón "Gracias", esto es muy útil para mí! Smiley Happy
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: ListView at PlayCloud 10 Tranfers TAB Style

[ Edited ]

You can obviously thread your app so that multiple connections can be handled at the same time, is this what you are asking for?

 

http://developer.blackberry.com/native/reference/cascades/qthread.html

 

You can then use a thread pool to keep track of them all...

 

http://developer.blackberry.com/native/reference/cascades/qthreadpool.html


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Developer
Posts: 60
Registered: ‎04-14-2014
My Device: z10
My Carrier: Digitel

Re: ListView at PlayCloud 10 Tranfers TAB Style

[ Edited ]

I could handler all in a only thread, using Signals and Slots, Am I wrong? My question is more relate with One Slots that handle One CustomItem in a ListView, but when exist multi uploads and downloads exist too multi Slots working at same time and handle diferents customItems in the ListView. U understand?

My Answer is good? Nice! Please, Clicked the "Thanks" button, this is very helpful for me! Smiley Happy
Mi respuesta es buena? Que bien! Por favor, haz clic en el botón "Gracias", esto es muy útil para mí! Smiley Happy
Developer
Developer
Posts: 60
Registered: ‎04-14-2014
My Device: z10
My Carrier: Digitel

Re: ListView at PlayCloud 10 Tranfers TAB Style

IMG_20140612_213423.png

 

How can I make this? 2 (or more) downloads with independent refresh! So far I've only managed add different values to listView, but only the first value in the list gets all refreshes, others are not refresh.

My Answer is good? Nice! Please, Clicked the "Thanks" button, this is very helpful for me! Smiley Happy
Mi respuesta es buena? Que bien! Por favor, haz clic en el botón "Gracias", esto es muy útil para mí! Smiley Happy
Developer
Developer
Posts: 60
Registered: ‎04-14-2014
My Device: z10
My Carrier: Digitel

Re: ListView at PlayCloud 10 Tranfers TAB Style

U need code? I have this:

 

in main.qml

 

...

 

                                CustomListItem {
                                    id: customItemTransfer
                                    highlightAppearance: HighlightAppearance.Full
                                    dividerVisible: true
                                    content: Container {
                                        id: containerCustomItem
                                        objectName: "containerCustomItem"
                                        
                                        layout: StackLayout {
                                            orientation: LayoutOrientation.LeftToRight  
                                        }
                                        Container {
                                            layout: DockLayout {}
                                            horizontalAlignment: HorizontalAlignment.Center
                                            verticalAlignment: VerticalAlignment.Center
                                            ImageView {
                                                id: ivCustomItemView
                                                objectName: "ivCustomItemView"
                                                scalingMethod: ScalingMethod.AspectFit
                                                imageSource: {
                                                    FuncionesFB.seleccionarIcono(ListItemData.mimetype);
                                                }
                                            }
                                        }
                                        Container {
                                            layout: StackLayout {
                                                orientation: LayoutOrientation.TopToBottom
                                            }
                                            layoutProperties: StackLayoutProperties {
                                                spaceQuota: 7
                                            }
                                            Container {
                                                layout: StackLayout {}
                                                layoutProperties: StackLayoutProperties {
                                                    spaceQuota: 1
                                                }
                                            }
                                            Container {
                                                layout: DockLayout {}
                                                horizontalAlignment: HorizontalAlignment.Left
                                                verticalAlignment: VerticalAlignment.Bottom
                                                Label {
                                                    id: lNameCustomItemView
                                                    objectName: "lNameCustomItemView"
                                                    text: ListItemData.name;
                                                    textStyle.fontSize: FontSize.Medium
                                                    textStyle.fontWeight: FontWeight.W500
                                                }
                                            }
                                            Container {
                                                layout: DockLayout {}
                                                horizontalAlignment: HorizontalAlignment.Left
                                                verticalAlignment: VerticalAlignment.Center
                                                leftPadding: 3
                                                Label {
                                                    id: lProgressCustomItemView
                                                    objectName: "lProgressCustomItemView"
                                                    textStyle.fontSize: FontSize.XSmall
                                                    textStyle.color: Color.DarkGray
                                                }
                                            }
                                            Container {
                                                layout: DockLayout {}
                                                horizontalAlignment: HorizontalAlignment.Left
                                                verticalAlignment: VerticalAlignment.Top
                                                ProgressIndicator {
                                                    id: piCustomItemView
                                                    objectName: "piCustomItemView"
                                                    fromValue: 0.0
                                                    toValue: 100.0
                                                    onValueChanged: {
                                                        if(customItemTransfer.ListItem.initialized) {
                                                            var index = customItemTransfer.ListItem.indexPath;
                                                            var dataModel = customItemTransfer.ListItem.view.dataModel;
                                                            dataModel.
                                                            
                                                        }
                                                    }
                                                }
                                            }
                                            Container {
                                                layout: StackLayout {}
                                                layoutProperties: StackLayoutProperties {
                                                    spaceQuota: 1
                                                }
                                            }
                                        }
                                    }
                                }

 

 
....
 
dataModelTransfer.append(Qt.globalItem);
 

In .cpp file
 
void fireball::progresoBajada(qint64 enviados, qint64 totales) {
	//ImageView* ivCustomItemView = master->findChild<ImageView*>("ivCustomItemView");
	//Label* lNameCustomItemView = master->findChild<Label*>("lNameCustomItemView");
	
	Label* lProgressCustomItemView = master->findChild<Label*>("lProgressCustomItemView");
	ProgressIndicator* piCustomItemView = master->findChild<ProgressIndicator*>("piCustomItemView");
	if(lProgressCustomItemView && piCustomItemView) {
		piCustomItemView->setValue((QString::number(enviados*100/totales)).toFloat());
		lProgressCustomItemView->setText(QString::number(enviados*100/totales) + tr("% downloaded"));
	}
	pdBajada->setProgress((QString::number(enviados*100/totales)).toInt());
	pdBajada->setStatusMessage(QString::number(enviados*100/totales) + tr("% downloaded"));
	pdBajada->update();
	if(pdBajada->progress() == 100) {
		pdBajada->cancelButton()->setLabel(QString::null);
		pdBajada->confirmButton()->setLabel(tr("Close"));
		pdBajada->customButton()->setLabel(QString::null);
		pdBajada->confirmButton()->setEnabled(true);
		pdBajada->update();
	}
}

 

Im really lose in this situation, please help me.

My Answer is good? Nice! Please, Clicked the "Thanks" button, this is very helpful for me! Smiley Happy
Mi respuesta es buena? Que bien! Por favor, haz clic en el botón "Gracias", esto es muy útil para mí! Smiley Happy
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: ListView at PlayCloud 10 Tranfers TAB Style

Best guess is that they are using asynchronous data transfer.

 

You can take a look at some of the asynchronous classes available...

 

http://developer.blackberry.com/native/reference/cascades/bb__data__asyncworker.html

 

You would then tie a signal with the amount of data downloaded from the worker to a slot in the listview item that then updates the ProgressIndicator.

 

Sorry but writing it for you would take too much time away from my own projects. Smiley Happy

 

 

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Highlighted
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: ListView at PlayCloud 10 Tranfers TAB Style

[ Edited ]

However here's some code I wrote a while back that is similar and may be helpful, it links a ProgressDialog to writing out an XML file...

 

void FileHelper::startXmlProcess(QString filename, bool import) {
	// Set up the Progress Dialog
	mProgressDialog = new SystemProgressDialog(this);
	mProgressDialog->confirmButton()->setLabel(QString::null);		// Remove Confirm button
	mProgressDialog->cancelButton()->setLabel(tr("Cancel"));
	mProgressDialog->setState(SystemUiProgressState::Active);
	mProgressDialog->setTitle(import ? tr("XML Import") : tr("XML Export"));
	mProgressDialog->setBody(tr("Checking..."));
	mProgressDialog->setProgress(0);

	// Create a thread
	mThread = new QThread;
	mXmlHelper = new XmlHelper();
	mXmlHelper->setDatabase(mDb);
	mXmlHelper->setFilename(filename);

	// Give QThread ownership of XML Helper Worker Object
	mXmlHelper->moveToThread(mThread);

	bool connectResult = connect(mXmlHelper, SIGNAL(statusChanged(QString)), this, SLOT(onStatusChanged(QString)));
	Q_ASSERT(connectResult);

	connectResult = connect(mXmlHelper, SIGNAL(progressChanged(int)), this, SLOT(onProgressChanged(int)));
	Q_ASSERT(connectResult);

	connectResult = connect(mXmlHelper, SIGNAL(error(QString)), this, SLOT(onError(QString)));
	Q_ASSERT(connectResult);

	// Connects the thread's started() signal to the process() slot in the XML Helper
	if (import)
		connectResult = connect(mThread, SIGNAL(started()), mXmlHelper, SLOT(importXml()));
	else
		connectResult = connect(mThread, SIGNAL(started()), mXmlHelper, SLOT(exportXml()));

	Q_ASSERT(connectResult);

	// Connect XML Helper finished signal to trigger thread quit, then delete
	connectResult = connect(mXmlHelper, SIGNAL(finished(QVariant)), mThread, SLOT(quit()));
	Q_ASSERT(connectResult);

	// Connect XML Helper finished signal to trigger folder change
	connectResult = connect(mXmlHelper, SIGNAL(finished(QVariant)), this, SIGNAL(xmlImportFinished(QVariant)));
	Q_ASSERT(connectResult);

	// Connect XML Helper cancelled signal to trigger thread quit, then delete
	connectResult = connect(mXmlHelper, SIGNAL(canceled()), mThread, SLOT(quit()));
	Q_ASSERT(connectResult);

	// Connect XML Helper cancelled signal
	connectResult = connect(mXmlHelper, SIGNAL(canceled()), this, SIGNAL(xmlImportCanceled()));
	Q_ASSERT(connectResult);

	// Make sure the thread object is deleted after execution has finished
	connectResult = connect(mThread, SIGNAL(finished()), mThread, SLOT(deleteLater()));
	Q_ASSERT(connectResult);

	// Check for Cancel button or natural closure on the Progress Dialog
    connectResult = connect(mProgressDialog,
         SIGNAL(finished(bb::system::SystemUiResult::Type)),
         this,
         SLOT(onDialogFinished(bb::system::SystemUiResult::Type)));
	Q_ASSERT(connectResult);

	// Make sure the progress dialog is deleted after execution has finished
	connectResult = connect(mThread, SIGNAL(finished()), mProgressDialog, SLOT(deleteLater()));
	Q_ASSERT(connectResult);

	Q_UNUSED(connectResult);

	mThread->start();
}

void FileHelper::onError(QString error) {
	mProgressDialog->setState(SystemUiProgressState::Error);
	mProgressDialog->setBody(error);
	mProgressDialog->show();
}

void FileHelper::onStatusChanged(QString status) {
	mProgressDialog->setBody(status);
	mProgressDialog->show();
}

void FileHelper::onProgressChanged(int progress) {
	mProgressDialog->setProgress(progress);
	mProgressDialog->show();
}

void FileHelper::onDialogFinished(bb::system::SystemUiResult::Type type) {
    if (type == bb::system::SystemUiResult::CancelButtonSelection) {
    	mXmlHelper->abort();
    }
}

The XMLHelper worker class is too complex to put here as it is linked to exporting sql data from my app to an XML file but basically for your purposes all it does is signal how much of he total data has been written or signals a status change...

 

 

[data loop ]

    emit progressChanged((++at * 100) / total);

[ end loop]

[ ... ]

    if (m_bAbort) {
    	file.remove();
		m_qsStatus = tr("Export cancelled");
    	emit statusChanged(m_qsStatus);
		emit canceled();
    } else {
    	m_qsStatus = tr("Export finished");
    	emit statusChanged(m_qsStatus);
        emit finished(0);
    }

 

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Developer
Posts: 60
Registered: ‎04-14-2014
My Device: z10
My Carrier: Digitel

Re: ListView at PlayCloud 10 Tranfers TAB Style

Thanks for your answer, you placed code really helps me to understand some things, but really,  I do not quite understand is, How does indicate the number of item to update in the listview?

 

If I have a queue of downloads and the first download is complete, then the second element of the list should start to download, how do I tell the listview to update the second item and not the first item again?

My Answer is good? Nice! Please, Clicked the "Thanks" button, this is very helpful for me! Smiley Happy
Mi respuesta es buena? Que bien! Por favor, haz clic en el botón "Gracias", esto es muy útil para mí! Smiley Happy