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