Data access using QML

The direct data access classes ( JsonDataAccess SqlDataAccess, and  XmlDataAccess) are useful methods of loading and storing data that you use in your apps. In many cases, you'll need to access this data using QML and load it into a Cascades component (for example, loading it into a data model for display in a list view). You can use the  DataSource class to do just that.

The DataSource class lets you access the same JSON, SQL, and XML data but provides a QML component for you to use, complete with properties and signals. There are properties that let you specify the source of the data, the query to use (for SQL and XML data), and the type of data that you're accessing. There's also a property that you can use to specify whether the data source is local to the device or is located remotely. Remote XML or JSON data is loaded asynchronously using an HTTP data source URL, with the help of the  QNetworkAccessManager  class. After you load data using a DataSource, you can provide it directly to a data model and list view to display it in your app.

You're free to use the DataSource class in C++, but it's really designed as an easy way to load data using QML. To use a DataSource in QML, you need to add it to an attachedObjects list in your app. You also need to register the class as a QML type in one of your C++ source files, and import the library in your QML file. After data is loaded successfully, the  dataLoaded() signal is emitted and you can use the onDataLoaded signal handler to start working with the data (for example, by inserting it into a data model). If the data isn't loaded successfully, the  error() signal is emitted and includes a DataAccessErrorType that you can use to handle the error.

Loading data from a local source

Here's an example of how to use a DataSource to access data in an SQL database that's located locally on the device. The source property specifies the file to load data from, and the query property specifies the SQL query to run. After the data is loaded, it's inserted into a GroupDataModel that's associated with a ListView.

import bb.cascades 1.0
import bb.data 1.0
  
Page {
    content: ListView {
        id: myListView
         
        // Associate the list view with the data model that's defined in the
        // attachedObjects list
        dataModel: dataModel
         
        listItemComponents: [
            ListItemComponent {
                type: "item"
                 
                // Use a standard list item to display the data in the model
                StandardListItem {
                    title: ListItemData.firstname + " " + ListItemData.lastname
                    imageSource: ListItemData.image
                    description: ListItemData.title
                }
            } // end of ListItemComponent
        ]
    } // end of ListView
     
    attachedObjects: [
        GroupDataModel {
            id: dataModel
        },
        DataSource {
            id: dataSource
             
            // Load the data from an SQL database, based on a specific query
            source: "sql/contacts1k.db"
            query: "select * from contact order by firstname, lastname"
             
            onDataLoaded: {
                // After the data is loaded, insert it into the data model
                dataModel.insertList(data);
            }
        } // end of DataSource
    ]
     
    onCreationCompleted: {
        // After the root Page is created, direct the data source to start
        // loading data
        dataSource.load();
    }
} // end of Page

Not applicable

Loading data from a remote source

Here's how to load data from a remote source (in this case, XML data from an RSS feed). The source property specifies the URL of the remote data source, and the query property specifies the types of items to retrieve. You'll notice that the type property is also used, and accepts a value from the DataSourceType::Type  enumeration. Typically, the data type is inferred from the value of the source property or query property. However, in this case, the type property is required to explicitly state that the data is XML data.

// In a C++ source file in your app
 #include <bb/data/DataSource>

...

// Register the DataSource class as a QML type so that it's accessible in QML
bb::data::DataSource::registerQmlTypes();
import bb.cascades 1.0
import bb.data 1.0
  
Page {
    content: ListView {
        id: myListView
     
        // Associate the list view with the data model that's defined in the
        // attachedObjects list
        dataModel: dataModel
     
        listItemComponents: [
            ListItemComponent {
                type: "item"
         
                // Use a standard list item to display the data in the data
                // model
                StandardListItem {
                    reserveImageSpace: false
                    title: ListItemData.title
                    description: ListItemData.pubDate
                }
            }
        ]
    }
   
    attachedObjects: [
        GroupDataModel { 
            id: dataModel
             
            // Sort the data in the data model by the "pubDate" field, in
            // descending order, without any automatic grouping
            sortingKeys: ["pubDate"]
            sortedAscending: false
            grouping: ItemGrouping.None 
        },
        DataSource {
            id: dataSource
             
            // Load the XML data from a remote data source, specifying that the
            // "item" data items should be loaded
            source: "http://news.google.com/news?topic=h&output=rss"
            query: "/rss/channel/item"
            type: DataSourceType.Xml
       
            onDataLoaded: {
                // After the data is loaded, clear any existing items in the data
                // model and populate it with the new data
                dataModel.clear();
                dataModel.insertList(data)
            }
        }
    ]
   
    onCreationCompleted: {
        // When the top-level Page is created, direct the data source to start
        // loading data
        dataSource.load();
    }
}

Not applicable

Last modified: 2014-09-30



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus