The QML Editing perspective

QML support is built into the Momentics IDE for BlackBerry. 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.

Screen showing the QML Editing perspective in the Momentics IDE.

Perspectives can be accessed through the Window > Open Perspective menu. Individual views can be accessed using Window > Show View. To learn more about views and perspectives in Momentics IDE, explore the following sections.

Project Explorer

The Project Explorer view is 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.

Screen showing the Project Explorer in the Momentics IDE.

Components

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 necessary code for the control.

Screen showing the Components list view in the Momentics IDE.

Editor

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.

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.

Animation showing the layout settings that are available in the QML perspective.

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. The Swap Editors button swaps the positions of the code and preview areas.

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

To make sure that your app meets accessibility guidelines, you can use the QML editor to check whether your code contains required accessibility properties. By default, this validation is turned on in the QML editor.

For more information about accessibility, see Accessibility.

QML Preview

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 and zoom. In the upper-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.


Screen showing the Preview area in the Momentics IDE.

The 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.

To learn more about using QML Preview, see Troubleshooting QML Preview.

Image viewer

The image viewer allows you to view your application's image assets directly within the IDE. 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.

Screen showing an image in the image viewer in the Momentics IDE.

Outline

The Outline view provides two views to display the structure of a QML file that's open in the editor.

Both views allow you to navigate and restructure code in your QML file.

You can toggle between the two views by using the icon in the upper-right corner of the Outline view.

You can use Design View to see the outline of the components and their layout in your app. This view shows you each component in the outline by ID.

Screen showing the outline using Design View in the Momentics IDE.

You can use Code View to see the hierarchy of components in your app. This view shows you each component in the outline by component name.

You can also view C/C++ code in Outline view. The Outline view displays an outline of the structural elements of the C/C++ file that's open in the editor.

QML Properties

The QML Properties view displays various properties associated with a QML component, such as its layout and layout properties, appearance, and even transformations. Click 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 properties grouped by category (the default), listed alphabetically, or just the signals. To change the view, click the buttons at the upper-right corner of the QML Properties view.

You can use the Accessibility category of the QML Properties view to change the accessibility properties of a Control. For more information about accessibility, see Accessibility.

Screen showing the Properties view in the Momentics IDE.

Assets

The Assets view displays a list of all the assets within your application project. 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 assets directly into the editor.

Screen showing the Assets view in the Momentics IDE.

Last modified: 2014-01-23

comments powered by Disqus