Tutorial: Explore Cascades Exporter

The Cascades Exporter plug-in for Adobe Photoshop allows you to package the graphics in a Photoshop document (.psd) for use in a BlackBerry 10 application.

You can use the Cascades Exporter to export the image layers as separate images, rescale images for various screen sizes, and export text as separate layers. To use your images in a Cascades application, you will also learn how you can import your images into the Momentics IDE for BlackBerry.

You will learn to:

  • Export image layers as separate images.
  • Scale your images for different screen sizes.
  • Convert text layers to images.
  • Import your images into the Momentics IDE.

Before you begin

Before you begin, download the cascades_exporter_assets.zip file which contains the .psd images used in this tutorial.

Cascades Exporter provides several buttons and options. By default, these buttons and options are disabled but are enabled when you open a .psd file (for this tutorial we use Cowbell_playbook1.psd).

Managing the Cascades Exporter plug-in

Check boxes

  • Export: Marks the selected layer for export.
  • Merge with group: Merges selected layers with the parent group when these layers are exported.


  • Export: Exports your layers to a .tmz file. This file contains your cut images and their layout positions in an .xml file.
  • Export selected: Exports only the layers that are highlighted in the layer window.
  • Rescale: Scales your canvas and images. This feature is useful if you need to support multiple resolutions.
Screen showing the Cascades Exporter plug-in for Adobe Photoshop.

Global settings

  • Export all text layers as images: Exports your text layers as images instead of text in the .xml file. This option is useful if you have effects on your text layer, such as bevel, which would not be reflected in the .xml file.
  • Ignore hidden layers: Exports only the visible layers.
  • Review export: Opens up a custom image viewer, after your images are exported, where you can see the results (by default, this option is selected).
  • Use relative coordinates: Allows you to configure the layout information by using coordinates which are relative to the parent group. You can preserve the tree hierarchical structure of the groups. This option is disabled, all exported layers are in a flat structure.
Screen showing the settings screen in Cascades Exporter.

Developer view

The Developer view of Cascades Exporter includes more advanced features. These include Image set option and nine-slicing option.

To switch to the Developer view, click the button in the upper-right corner of the Cascades Exporter window and select Developer view.

Screen showing how to navigate to the developer view in Cascades Exporter.

Add Controls to your application

In developer view, you can see the BB10 Controls option available in the drop-down list.

You can add BlackBerry 10 core controls to your layout and inspect how they look in your finished application. You can add controls (for example, buttons, check boxes, sliders, and so on) and arrange and resize them. For more information on Cascades core controls, see Controls and visual components.

Screen showing the developer view menu in Cascades Exporter.

To add placeholder images to your .psd file, click BB10 Controls.

Screen showing the controls available for the BlackBerry 10.

When you export your design and import it into the Momentics IDE, the controls that you add by using the plug-in are translated into the corresponding QML code. This code automatically places the controls in the correct position which can save you time.

Although you can resize all these controls in Photoshop, only some retain your preferred size in actual code when you export the images. For example, TextArea retains your specified size in both height and width, and the buttons, sliders, progress bars, drop-down lists, and text fields retain only your specified width. Check mark boxes and radio buttons cannot be resized.

Last modified: 2015-03-31

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

comments powered by Disqus