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
New Developer
matshy
Posts: 13
Registered: ‎02-11-2013
My Device: Simulator :D
My Carrier: Plus GSM

QFile DataModel Customizing ListView

Hello Everyone!

This is my first post on this forum, so please bear with us. When I was on BB Jam in Amsterdam, I decided to start my adventure with writing applications on this platform using Cascades. I am currently in the process of writing a simple training application , which will displays list of tasks what I have to do . Using of tutorials available in the Web I created this code, and now I have big problem. How can I custom layout of my dataModel (listmodel)? I would like to add CheckBox to each of list element to mark what I did and what I have to do. Is it possible? Since 3 days I'm reading a lot of materials, documentation and I found that it is possible in XMLdataModel for example, but I completly dont know how create a database by user from application level in XML, JSON etc - I'm still learing, any one of You dear Deveopers ever started, right :smileyhappy: ? Can You give me some solutions how should looks sample code of my idea?

 

 Thank you a lot for any help !

 

Content of my application files:

 

main.qml

import bb.cascades 1.0

Page {
    Container {
        
        layout: StackLayout {
        }
        Label {
            id: label
            text: qsTr("Tasks List")
            textStyle.base: SystemDefaults.TextStyles.BigText
        }
        TextField {
            id: textfield
            hintText: "Enter New Task..."
        }
        Container {
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            horizontalAlignment: HorizontalAlignment.Center
            Button {
                text: "Add to List"
                onClicked: {
                    mainObj.addData(textfield.text);
                }
            }
        }
        ListView {
            dataModel: listmodel
        }
        
        Container {
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            horizontalAlignment: HorizontalAlignment.Center
            Button {
                text: "Save list"
                horizontalAlignment: HorizontalAlignment.Left
                onClicked: {
                    mainObj.saveData();
                }
            }
            Button {
                text: "Load List"
                horizontalAlignment: HorizontalAlignment.Right
                onClicked: {
                    mainObj.loadData();
                }
            }
        }
    }
}

 

taskList.cpp

#include "taskList.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>

#include <QFile>
#include <QTextStream>
#include <fstream>
#include <iostream>

using namespace bb::cascades;

taskList::taskList(bb::cascades::Application *app)
: QObject(app),app(app)
{
    // create scene document from main.qml asset
    // set parent to created document to ensure it exists for the whole application lifetime
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    listmodel = new MyStringListModel();
    qml->setContextProperty("listmodel",listmodel);
    qml->setContextProperty("mainObj",this);
    // create root object for the UI
    AbstractPane *root = qml->createRootObject<AbstractPane>();

    QObject::connect(root,SIGNAL(qmlSignal()),this,SLOT(receiveSignalFromQML()));

    // set created root object as a scene
    app->setScene(root);
}

void taskList::addData(QString data)
{
	listmodel->append(data);
}

void taskList::saveData()
{
	QFile file("data/list.txt");
	if(file.open(QIODevice::WriteOnly))
	{
		QTextStream stream(&file);
		for(int i = 0, s = listmodel->size(); i < s; ++i)
		   stream << listmodel->value(i) << '\n';
	}
}

void taskList::loadData()
{
	std::ifstream in(QString("data/list.txt").toStdString().c_str());
	QStringList list;
	std::string line;
	if(in)
	{
		while(std::getline(in,line))
			list.push_back(QString::fromStdString(line));
		listmodel->append(list);
		emit dataReady();
	}
}

void taskList::receiveSignalFromQML()
{
	listmodel->append("receiveSignalFromQML");
	qDebug() << "Signal Received";
}

 

taskList.hpp

#ifndef taskList_HPP_
#define taskList_HPP_

#include <QObject>
#include <bb/cascades/QListDataModel>

namespace bb { namespace cascades { class Application; }}

/*!
 * @brief Application pane object
 *
 *Use this object to create and init app UI, to create context objects, to register the new meta types etc.
 */
typedef bb::cascades::QListDataModel<QString> MyStringListModel;

class taskList : public QObject
{
    Q_OBJECT
    MyStringListModel* listmodel;
    bb::cascades::Application* app;
public:
    taskList(bb::cascades::Application *app);
    virtual ~taskList() { delete listmodel;}


    Q_INVOKABLE void addData(QString data);
    Q_INVOKABLE void saveData();

    Q_INVOKABLE void loadData();

public slots:
	void receiveSignalFromQML();

signals:
    void dataReady();
};


#endif /* taskList_HPP_ */

 

 

Please use plain text.
Developer
igosoft
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon
My Carrier: Play

Re: QFile DataModel Customizing ListView

Please use plain text.
New Developer
matshy
Posts: 13
Registered: ‎02-11-2013
My Device: Simulator :D
My Carrier: Plus GSM

Re: QFile DataModel Customizing ListView

[ Edited ]

Thank you for quick response. I read this earlier, but I don't understand it at all. Hence my request for sample code. Perhaps it looks like I am lazy but no, I am frustrated already, so please can anybody explain it for me?

Please use plain text.
Developer
dishooom
Posts: 103
Registered: ‎12-31-2012
My Device: Blackberry 9810
My Carrier: Verizon

Re: QFile DataModel Customizing ListView

You would need to use a listItemComponent  to do the above. Try something like the following:

 

      

ListView {
          
            dataModel: listmodel
            listItemComponents: [
                ListItemComponent {
                    type: "item"
                    Container {
                        Label {
                            id: lblTxt
                            text: ListItemData

                        }

                        CheckBox {

                        }
                    }
                }
            ]

           
        }
        

 Be careful to modify the text: ListItemData , so that label name for the text is represented based on the way you have your datamodel structured.

 

-  Dishooom

 

Hope this helps :Angel:

Please use plain text.
New Developer
matshy
Posts: 13
Registered: ‎02-11-2013
My Device: Simulator :D
My Carrier: Plus GSM

Re: QFile DataModel Customizing ListView

Unfortunately it is still not working ....

My listitem is still displays in the default style, and each changes in ListItemComponent are not added. I tried to add CheckBox, or change only font style and both trial fail... Dear Developers, have you any other suggestions?

Please use plain text.