This tutorial shows you how to create the Poem Maker app that's included on the Sample Apps page. The Poem Maker app consists of a button and three notes, and each note has part of a sentence on it. The first note contains an adjective and a noun, the second note contains a verb and an adverb, and the third note contains a preposition and a noun. Together, these notes form a poem, such as "A delightful blackberry grows slowly inside a cloud." When you click the button, the app generates a random poem and animates the transition between the old poem and the new one.
You will learn to:
- Use implicit and explicit animations
- Disable implicit animations using an ImplicitAnimationController
Before you begin
You should have the following things ready:
- The BlackBerry 10 Native SDK
- A device or simulator running BlackBerry 10
You can click here to download the tools that you need and learn how create, build, and run your first Cascades project.
Downloading the full source code
This tutorial uses a step-by-step approach to build the Poem Maker 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. To learn how, see Import an existing project.
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. If you're not sure how to do this, take a look at Create a new project.
After you finish, a new project appears in the Project Explorer view with the name that you specified. We also need to import the following images:
background.png - A textured background with graphics that connect the button to the text notes
line_background.png - The background of each text note
rubber.png - The button that generates a new poem
rubber_depressed.png - An image to place on top of the button that represents the pressed state of the button
To import images and the poemgenerator.js file into your project:
- Download the assets.zip file and extract the images folder and poemgenerator.js file.
- Copy the images folder and poemgenerator.js file.
- Paste the images folder and poemgenerator.js file into the assets folder of the project that you created.
Several other files were created automatically when you created your project. In the src folder, you'll see app.cpp, app.hpp, and main.cpp. These C++ source files take care of basic application functions, such as creating the application object, starting the main event loop, and loading a QML file that represents the UI of the application.
In this tutorial, we won't go into the details of these source files. If you want to learn more about what's going on in these files, check out Create your first app.
Last modified: 2014-05-14