Tutorial: Lists

This tutorial shows you how to create the Quotes app that lets you view quotes by famous people. The main screen of the app contains a list of authors, and you can tap a name in the list to view that author's quote. Data for the quotes is stored in an SQL database, and you can edit existing quotes or add your own.

You will learn to:

  • Use a ListView to display a list of data
  • Associate a DataModel with the ListView to provide the data to display
  • Use SQL to read data from a database and update the database with new entries
  • Create custom QML components to represent different parts of the app UI
Animation showing a list item being selected in the Quotes sample app.

Before you begin

This tutorial includes concepts such as data storage and list views. It assumes that you're familiar with the fundamentals of Cascades and the Momentics IDE for BlackBerry, and that you've built and run several Cascades apps already. If you're just starting out and need to know some of the basics, you might want to check out a few of these resources before you start this tutorial:

Downloading the full source code

This tutorial uses a step-by-step approach to build the Quotes app using API level 10.0. We have updated the sample app to include some new features, such as design units, for API level 10.3.0. If you want to look at the complete source code for the updated sample app, you can download the entire project and import it into the Momentics IDE.

Download the full source code

Set up your project

Before we start creating our application, create an empty project in the Momentics IDE, making sure to select the Standard empty project template. There are several graphical assets that our app uses, such as background images and custom buttons. We need to import the following images:

The background for the Quotes sample app.

background.png  - A textured background to use when we display individual quotes

The quote border for the Quotes sample app.

border_bubble.png  - The border of each quote

The custom add button for the Quotes sample app.

Add.png  - A custom image for the Add action

The custom edit button for the Quotes sample app.

Edit.png  - A custom image for the Edit action

We also need to import a special image file called border_bubble.amd, which is an asset metadata file. The quotes in our app can have different lengths, so we need the quote bubble image to scale to fit the dimensions of the quote. We use a nine-sliced image, as an .amd file, to make sure that only the area inside the quote bubble is scaled (not the quotation marks). To learn more, see Nine-slice scaling.

Finally, we need to import the SQL database file that contains our quote data. This file is called quotes.db and is placed in a folder called sql in our project's assets folder.

To import the images and database file into your project:

  1. Download the assets.zip file.
  2. Extract the images folder and sql folder into the assets folder of your project.

Last modified: 2015-03-31



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

comments powered by Disqus