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.

You can access perspectives by using the Window > Open Perspective menu, and you can access individual views by using Window > Show View. To learn more about the views in the QML Editing perspective, 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

QML Preview renders Cascades UI controls in your QML code as you type, so you can easily spot anything in your UI that isn't aligned correctly.

If your project uses API level 10.2 or earlier, QML Preview renders your UI as it would appear on a device running the 10.2.1 version of the BlackBerry 10 OS. If your project uses API level 10.3 or later, QML Preview renders your UI as it would appear on a device running the 10.3.0 version of the OS.

To disable QML Preview, in Windows and Linux, on the Window menu, click Preferences. In Mac OS, on the Momentics menu, click Preferences. Expand BlackBerry and click QML Editor, and then select the Disable check box.

Screen showing the Preview area in Momentics IDE 2.1.

Using QML Preview to view your UI on supported devices

In the upper-right corner of the editor, there is a drop-down list that allows you to change the target resolution for QML Preview. You can also change the orientation of the preview to landscape or portrait orientation. You can use these features to test your UI on all supported BlackBerry 10 devices.

For more information about device types, see Device characteristics.

For more information about designing your UI for BlackBerry 10 devices, see The basics in the UI Guidelines for BlackBerry 10.

Using QML Preview to test your UI

With the help of the buttons at the bottom of the preview area, you can select items, test user interaction, and zoom in your UI.

You can use the touch interaction feature to test your UI. QML Preview responds to mouse events so that you can see how your app responds to user interaction. For example, you can create a TabbedPane control and use the mouse to click each of the tabs in your UI.

You can also click an element that appears in the QML Preview pane and see the associated code selected in the editor. In the image above, clicking the bubble image in the preview pane highlights the corresponding QML in the editor. The selection feature must be turned on for this feature to work.

To toggle between the two modes, click the Selection icon (Momentics IDE 2.1 Selection icon) or the Touch icon (Momentics IDE 2.1 Touch icon).

Some components can't be selected in QML Preview using the selection feature. For example, you can't select an ActionBar , Tab , or TitleBar object in QML Preview.

Setting visual styles and brand colors 10.3

If your project uses API level 10.3 or later, QML Preview supports setting visual styles and brand colors. When you set the brand color for your app on the Application tab of your bar-descriptor.xml file, QML Preview shows your UI using the colors that you set in the theme settings.

For more information about setting visual styles, see Themes.

Learn more

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.

In this section, you can view properties grouped by category (the default), listed alphabetically, or just the signals. To change the view, click the buttons in 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.

The QML Properties view supports design units. A design unit (du) is a unit of length that makes it easier to create a UI for devices that have different screen specifications. UI elements such as components and icons have a base design unit value that you can use to scale assets for all BlackBerry 10 devices.

When you configure your UI using the UIConfig class, the QML Properties view shows the properties of your components in design units. For example, the code sample below uses the sdu() function to convert a design unit value into a pixel value. In the QML Properties view, you can see the size of the Label control in design units. If you don't specify a unit, the QML Properties view shows the size of your component in pixels.

Screen showing the use of design units in QML properties.

For more information about using design units, see Resolution independence.

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.

If you use static asset selectors in your project, only the default assets are shown in the Assets view. For more information, see Static asset selection.

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-06-24



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus