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
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.
Not applicable
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
Not applicable
Last modified: 2015-05-07