Explore Cascades Builder

The Cascades Builder plug-in for Eclipse is built into the QNX Momentics IDE, the main development tool used for creating BlackBerry 10 applications. If you have experience with Eclipse, most of the features of the IDE should be familiar to you. You can find features that are specific to Cascades, such as the QML preview and Components view, using the QML Editing perspective. To open the QML Editing perspective, click Window > Open Perspective > Other. Click QML Editing, and click OK.

Cascades builder annotated 600

Perspectives can be accessed through the Window > Open Perspective menu, while individual views can be accessed using Window > Show View. To learn more about views and perspectives in Cascades Builder, explore the following sections.

Project Explorer

Cascades builder project explorer

This view is pretty standard for Eclipse, but it features a few files that are specific to Cascades projects:

  • A .pro project file, which includes specific configurations and settings for your project
  • A standard Makefile for your project

Your C++ source files should be stored in the src folder, and your QML files and images should be stored in the assets folder.

Components

This image shows the Cascades builder components list view.

The Components view features a list of commonly used panes, controls, layouts, and animations that you can use in your application. If you have a QML file open in the editor, you can drag and drop components directly into your code. When you drop the component into your code, the IDE generates all the neccessary code for the control.

Editor

This image shows the Cascades builder edit area.

In the editor, you can edit both C++ files and QML files. The editor features syntax highlighting, formatting, code folding, and code completion for both C++ and QML.

This image shows the Cascades builder layout buttons.

If you are editing a QML file, you have five buttons at the top of the window. These buttons help you switch between the different layout settings that are available.

These buttons don't appear if you are editing a C/C++ file.

  • Source Mode: Shows only the source code.
  • Design Mode: Shows only the preview of the UI.
  • Vertical Split Mode: Shows the source code area with the preview area underneath.
  • Horizontal Split Mode: Shows the source code area to the left and the preview area to the right.
  • Swap Editors: Swaps the positions of the code and preview areas.

Preview

This image shows the Cascades builder preview area.

The QML Preview renders your QML code as you type, so you can easily spot anything in your UI that isn't aligned correctly. With the help of the buttons at the bottom of the preview area, you can select items, pan, and zoom. In the top-right corner of the editor, there is a drop-down list that allows you to change the target resolution. You can also change the orientation of the preview to landscape or portrait orientation.

The QNX Momentics IDE automatically detects when your Native SDK version is incompatible with the QML Preview tool and disables the preview feature. This issue might occur if you are using an older version of the Native SDK or your app was created with a previously incompatible version of the Native SDK. You can upgrade to the latest version of the Native SDK, clean your project, and enable QML Preview.

To enable QML Preview, click Windows > Preferences > BlackBerry > QML Editor and clear the Disable QML Preview check box.

Image viewer

This image shows the Cascades builder image viewer.

The image viewer allows you to view your application's image assets directly within the IDE. Just double-click the image in your project and it opens in the editor window.

The most powerful feature of the image viewer is the ability to specify nine-slice scaling properties directly on an image. When nine-slice scaling is turned on and you have an associated .amd file, you can drag the margins vertically and horizontally to where you need them on the image. Then, you can save the slice margin properties in your .amd file. For more information about images and nine-slice scaling in Cascades, see Images.

The image viewer also has features for displaying a grid overlay, revealing transparent pixels using a checkered background, and measuring pixel dimensions.

QML Properties

This images shows the Cascades builder properties view.

The QML Properties view displays various properties associated with a QML component, such as its layout and layout properties, appearance, and even transformations.

Just click on or within a component and the properties are displayed. When you add or change a value in this view, the code in the editor is updated automatically.

Within this section, you can view items by category (the default view), alphabetically, or just the signals.

Assets

This image shows the Cascades builder assets view.

The Assets view displays a list of all the assets within your application project. Just open a QML file in the editor and the view is populated with the list of items in your project.

In this view, you can select and drag assets directly into the editor. When you drop the asset into place, the QML code for loading the asset is automatically created. The Assets view also features a search bar that allows you to filter the assets that are currently displayed.

If your application contains custom QML components, they are listed in their own section called Custom Components. Like any other asset, you can drag and drop these directly into the editor.

Last modified: 2013-03-21