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

Workspace

Momentics stores your projects in a workspace, which is essentially a collection of projects located in the same directory on your file system. Once you've finished creating the HelloCascades project, your workspace should look similar to Figure 1-7.

Figure 1-7. Momentics workspace

Perspectives

A perspective is a task-oriented collection of views and editors. When designing Cascades applications, you will mostly use the QML Editing, C/C++, and Debug perspectives. You can easily switch from one perspective to another using the perspectives toolbar or the Window ➤ Open Perspective navigation menu. Some views, such as the Project Explorer, will appear in multiple perspectives.

In the Project Explorer view, the src subfolder contains the following C++ source files:

n main.cpp: Defines the application entry point main.

n applicationui.hpp and application.cpp: You will find the wizard-generated application delegate declaration and definition.

You've already seen simplified versions of these files in the examples in Listing 1-7. For the moment, you can simply ignore them. The assets subfolder contains the main.qml defining your application's UI.

Let's spice up the default version of the app generated by the Cascades wizard.

1. Create a new folder called images under the assets folder of your project (see Figure 1-5).

2. Copy the swissalpsday.png and swissalpsnight.png from the book's resources in your project's images folder.

3. Open the main.qml file by double-clicking it in Project Explorer. Make sure you're in the QML editing perspective by switching to it using the

perspectives toolbar located in the upper-right corner of the Momentics IDE. The QML editing or Cascades Builder perspective is organized around four important views (see Figure 1-8):

Figure 1-8. Momentics IDE, QML perspective

n The Project Explorer shows you all the resources available in your project, including source folders, asset folders, and targets.

n The Components view located on the lower-left section of the screen displays core Cascades controls that you can drag and drop in the Source view located at the center of your screen.

n The QML Properties view is displayed on the right side of the screen. You can use this view by selecting a QML element in the Source view.

n The main design area is located in the middle of your screen. You can switch between source only, design only, and source-design split modes.

4. In the Source view, remove the text: qsTr(Hello World) + Retranslate. onLocaleOrLanguageChanged property from the Label control.

5. Select the Label in the Source view by double-clicking it, and then update the QML Properties view by doing the following:

n Add “helloCascades” in the id field.

n Add “Hello Cascades” in the text field.

n Scroll down until you reach the Horizontal Alignment property of the label and change it to Center.

main.qml should now look like Listing 1-8.

Listing 1-8. main.qml

import bb.cascades 1.0

Page {

Container {

//Todo: fill me with QML Label {

id: helloCascades

// Localized text with the dynamic translation and locale updates support textStyle.base: SystemDefaults.TextStyles.BigText

text: "Hello Cascades"

horizontalAlignment: HorizontalAlignment.Center

}

}

}

6. Drag a Container control from the Components view and drop it under the label's closing brace in the Source view.

7. Double-click the second Container control:

n Change the id to imageContainer.

n Change the Horizontal Alignment property to Center.

n Change the Layout property to DockLayout.

8. Drag an ImageView control from the Components view and drop it after the DockLayout control's closing brace in the Source view.

9. Select the ImageView control:

n Change the id property to “swissalpsday”.

n Click the Image Source button and select the swissalpsday.png file in the assets/ images folder.

10. Add another ImageView control under the previous one in the Source view.

n Change the id property to “swissalpsnight”.

n Click the Image Source button and select the swissalpsnight.png file in the assets/ images folder

n Set the opacity property to 0.

11. Drag a Slider control from the Components view and drop it in the Source view after imageContainer's closing brace. Change the slider Horizontal Alignment to Center.

12. In the Source view, add the following code in the body of the Slider control:

onImmediateValueChanged: { swissalpsnight.opacity = immediateValue

}

The final version of the QML markup should look like Listing 1-9. If not, try to repeat the previous steps until you reach the same result, or simply update the QML directly in the Source view.

Listing 1-9. main.qml

import bb.cascades 1.0

Page {

Container {

//Todo: fill me with QML Label {

id: helloCascades

// Localized text with the dynamic translation and locale updates support textStyle.base: SystemDefaults.TextStyles.BigText

text: "Hello Cascades"

horizontalAlignment: HorizontalAlignment.Center

}

Container {

id: imageContainer

horizontalAlignment: HorizontalAlignment.Center layout: DockLayout {

}

ImageView {

id: swissalpsday

imageSource: "asset:///images/swissalpsday.png"

}

ImageView {

id: swissalpsnight

imageSource: "asset:///images/swissalpsnight.png"

}

}

Slider {

horizontalAlignment: HorizontalAlignment.Center onImmediateValueChanged: {

swissalpsnight.opacity = immediateValue

}

}

}

}

Congratulations! You've just finished designing your first Cascades application!

 
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