Menu
Home
Log in / Register
 
Home arrow Computer Science arrow Learn BlackBerry 10 App Development
< Prev   CONTENTS   Next >

SCalc, the Small Calculator

Before wrapping up this chapter, I want to illustrate how QML and JavaScript can be used for developing a slightly more complex application than the ones shown up to this point. This will also give me the opportunity to explain your application's project structure, something that I skimmed over in Chapter 1 (if you want to give the application a try right away, you can download it from BlackBerry World). SCalc is a simple calculator app written entirely in JavaScript and QML (see Figure 2-4). The application's UI is built in QML and the application logic is handled in JavaScript using Matthew Crumley's JavaScript expression engine (https://github.com/silentmatt/js-expression-eval). The engine is packaged as a single JavaScript file that I have dropped in the project's assets folder (parser.js, located at the same level as main.qml).

Figure 2-4. SCalc

As illustrated in Figure 2-4, a root Container contains a TextArea and six child containers, which in turn hold Button controls. Finally, the parent of the root Container is a Page control that represents the UI screen. Another way of understanding the control hierarchy is by looking at the outline view in the QML perspective in Momentics (see Figure 2-5).

Figure 2-5. Outline view (four child Containers below root shown)

You will notice that the containers have a layout property. A layout is an object that controls the way UI elements are displayed on the screen. In our case, we are using a StackLayout, which stacks controls horizontally or vertically. The root container does not define a layout and therefore Cascades will assign it a default StackLayout that stacks controls vertically. (In the child containers, the layout orientation has been set to horizontal, thus displaying the buttons in a row. I will tell you more about layout objects in Chapter 4.) Listing 2-17 is an outline of main.qml.

Listing 2-17. main.qml

import bb.cascades 1.2

import "parser.js" as JSParser Page {

id: calculatorView

// root containter goes here

}

The second import statement imports the JavaScript expression engine as a module and

assigns it to the JSParser identifier (because the file is located in the same folder as main.qml, you don't need to provide a path to the file). Now that the library has been imported, you will be able to use it in your QML document (the expression engine provides a Parser object that you can call using JSParser.Parser.evaluate(expression, "")).

As mentioned previously, the root container contains a TextArea and six child Containers (see Listing 2-18).

Listing 2-18. root Container

Container {

id: root

// padding properties omitted. layout: StackLayout {

orientation: LayoutOrientation.TopToBottom

}

// background properties and attached object omitted. TextArea {

bottomMargin: 40 id: display

hintText: "Enter expression" textStyle {

base: SystemDefaults.TextStyles.BigText color: Color.DarkBlue

}

layoutProperties: StackLayoutProperties { spaceQuota: 2

}

}

Container{ // 1st row of Buttons, see Figure 2-4 Button{id: lefpar ...}

Button{id: rightpar ...} Button{id: leftArrow ...} Button{id: clear ...}

}

... // 5 more Containers

}

The application logic is implemented by handling the clicked signal emitted by the Buttons and by updating the TextView with the current expression. For example, Listing 2-19 shows the implementation for the clicked signal when Button “7” is touched by the user.

Listing 2-19. Button “7”

Button {

id: seven text: "7" onClicked: {

display.text = display.text + 7;

}

}

Finally, the JavaScript expression library's Parser.evaluate() method is called when the user touches the “=” button (the TextView is also updated with the result of the evaluation).

Listing 2-20. Button “=”

Button {

id: equal text: "=" onClicked: {

display.text = JSParser.Parser.evaluate(display.text, "");

}

}

The current input handling logic is quite crude and you can easily enter invalid expressions. As an exercise, you can try to make it more robust.

Project Structure

Figure 2-6 illustrates SCalc's project structure in the Momentics Project Explorer view.

Figure 2-6. Project Explorer

You will find the same structure in all of your applications and you should therefore take some time to get familiar with it. Here is a quick overview of the most important project elements:

n src: You will find the C++ source code of your project in this folder.

n assets: This folder contains your QML documents. You can also create subfolders and include additional assets such as images and sound files. You will generally load at runtime the assets located in this folder.

n x86, arm: Folders used for the build results of your application for the simulator and device respectively. The folders include subfolders, depending on the build type (debug or release). For example, a debug build for the simulator will be located under x86o-g (and the corresponding Device folder is armo.le-v7-g).

n SCalc.pro: This is your project file and includes project settings. You can add dependencies such as libraries in this file (you will see how this works in Chapter 3).

n bar-descriptor.xml: This file defines important configuration settings for your application. In particular, it also defines your application's permissions. You will have to update this file for certain projects in following chapters. The easiest way to proceed is to work with the General and Permissions tabs when the file is open in Momentics (see Figure 2-7).

Figure 2-7. bar-descriptor.xml view

n icon.png: Your application's icon.

Summary

This chapter dissected the core elements of the QML language. You discovered how the different elements of QML fit together by designing your own custom control. You also saw that QML, despite its simplicity, is an extremely powerful programming environment. Most importantly, this chapter gave you some insight on how Cascades uses those same QML constructs, and hopefully unveiled some of the magic involved in Cascades programming.

JavaScript is the glue giving you the tools for adding some programmatic logic to your controls. The environment provided by QML runtime is ECMAScript compliant. This means that at this point you can build full-fledged Cascades applications using QML and JavaScript.

 
Found a mistake? Please highlight the word and press Shift + Enter  
< Prev   CONTENTS   Next >
 
Subjects
Accounting
Business & Finance
Communication
Computer Science
Economics
Education
Engineering
Environment
Geography
Health
History
Language & Literature
Law
Management
Marketing
Philosophy
Political science
Psychology
Religion
Sociology
Travel