This tutorial shows you how to create the Quotes app that's included on the Sample Apps page. The Quotes app 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:
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, 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:
- Download the tools that you need to get started with Cascades
- Create your first Cascades app
- Import existing apps, such as the Cascades sample apps, into the Momentics IDE
- Learn about list views and data models
- Read about data storage and retrieval
- Define custom QML components to use in your apps
Downloading the full source code
This tutorial uses a step-by-step approach to build the Quotes app from scratch. If you want to take a look at the complete source code for the finished app, you can download the entire project and import it into the Momentics IDE.
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:
background.png - A textured background to use when we display individual quotes
border_bubble.png - The border of each quote
Add.png - A custom image for the Add action
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 about nine-slice scaling, see Images.
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:
- Download the assets.zip file.
- Extract the images folder and sql folder into the assets folder of your project.
Last modified: 2013-10-30