It seems like the browser you are using has JavaScript disabled. As a result, the site will not function properly. We really want you to enable it so you may experience our site as we intended it. If you have no idea what we are talking about or if you need help, visit http://www.enable-javascript.com×
This website uses cookies. By continuing to browse this site you are agreeing to our use of cookies. Find out more on our cookie page.×

Oops, it seems like you're using an old browser that we do not fully support. If you're able to, please upgrade your browser here.×
This website uses cookies. By continuing to browse this site you are agreeing to our use of cookies. Find out more on our cookie page.×

Exploring the UI

When you run the Freemium app, you see the main screen of the app. The
app has two options: play a game or purchase goods in the store. The UI of this app is
created as a NavigationPane. The two options are custom Page components that are pushed onto the
NavigationPane when the user taps a button on the main page. The UI
also has a Banner ad and an ImageButton to invite a friend to download the app over
BBM.

Let's take a closer look at the main.qml file that's used to display the
UI:

In the code sample above, the NavigationPane is used as the main component of the UI to stack the
screens of the UI and show only one screen at a time. For more information about this
type of navigation, see Drill down. This app has three digital goods
and tracks whether the user has purchased them with three Boolean values:

There are two digital goods that represent items for game play, and there is one digital
good that allows the user to remove ads from this app. This digital good demonstrates
two monetization techniques: offering ads to encourage the user to purchase other apps
and offering the ability to remove ads at a cost to the user.

The code sample above uses the attachedObjects property to
attach the two custom pages StorePage and GamePlay to
the NavigationPane. A PaymentManager instance is also attached to
handle all requests to the Payment
Service.

As soon as the UI is created, setConnectionMode() is called to make sure that
we make only simulated purchases while we're debugging our app. Then the sample code
requests all the user's existing purchases. We create a
retrieveLocalPurchases() function that retrieves existing purchases
from a local persistent store. A QSettings object is used to store
and retrieve QString values representing the SKUs of
purchased digital goods. We explore this function later.

The requestExistingPurchases() function requests
the list of previous purchases from the Payment
Service
cache. We supply false as the argument so that the list of purchases is
returned from the cache and not from the Payment
Service
server.

In this sample, requestExistingPurchases(false) returns goods that
are purchased in the same app session, which is useful to know when you're testing the
logic for restoring past purchases. Since this app is in test mode,
requestExistingPurchases() doesn't return anything.

The actual layout of the UI is created as a Page with a Container, which is laid out in landscape
orientation.

The orientation of the Freemium sample app is set in the
bar-descriptor.xml file. For more information about running an application in a specific
orientation, see Orientation.

The UI in the main Page has some key elements. The background image is
added as an ImageView and a Banner appears on top of
the background image. The Banner ad uses a custom
FreemiumBanner component. You can learn more about this custom
component in Adding ads.

Three more ImageView controls provide a visual representation of the
state of the game based on the items that the user purchases. When the user purchases an
item, the UI updates to display the new addition to the game.

The two options in the game ("Shop" and "Play") are added to a Container
as ImageButton objects. The app uses the push() function to push the two
custom pages StorePage and GamePlay to the
NavigationPane when the clicked() signal is emitted.

Finally, a Container with an ImageButton is added to the UI so that the user can invite
a friend to download this app over BBM.
The inviteUserToDownloadViaBBM() function is a public
slot that is declared in the header file of our sample app and exposed to QML so that it
can be called when the clicked() signal is emitted.
This walkthrough doesn't go into the details of this technique but you can learn more
about exposing C++ values and objects to QML in QML and C++ integration. To learn more about BBM,
see BBM Social Platform.

1. Choose your focus

This is the focus controller. Use this controller to choose your primary development approach (Cascades or Core).

By selecting a focus, you get to decide what content should be front and center on the site.

2. Download the tools

Before you start developing, you'll need to visit the Downloads tab. Here you'll find downloads for the BlackBerry 10 Native SDK, BlackBerry 10 Device Simulator, and some other useful tools.

3. Try the sample apps

Now featuring a filter control, the Sample apps tab allows you to search for samples by name or by feature.

Select either the Core or Cascades check boxes to display the samples relevant to your focus.

4. Educate yourself

The Documentation tab contains tons of examples, tutorials, and best practices to guide you along the path towards building an awesome app.

The documentation for your preferred focus always appears at the top of the left-hand navigation, but you can still access the rest of the documentation at the bottom.

5. Start developing

The Reference tab is where you'll find essential details about how to use our APIs.

You can use the left-hand navigation to choose how you would like to browse the reference: by module, by topic, or alphabetically. If you have an idea of what you are looking for, start typing it in the Filter box.