Cascades Tooling – What’s new in Beta 2


Guest post from Markus Landin, Product Manager about the newest Cascades™ development advancements! – Ed.

For developers that are new to Cascades development, it might be worthwhile to give a brief explanation of what Cascades Builder and Cascades Exporter are. Cascades Builder is an extension to the Eclipse based Momentics™ IDE, providing developers with tooling features for developing Cascades applications for BlackBerry® 10. Our goal is to provide powerful source editing features like code completion, WYSIWYG style visual editing, and UI debugging and profiling functionality.

Cascades Exporter is an extension to Adobe® Photoshop® that automatically cuts up the layers and crops them snugly. The images and their layout positions are saved as a bundle that can be imported to Cascades Builder and converted to QML.

In my previous blog post I wrote about the features that we had in place for the first beta release, and the direction we are heading.


Below you can read about the improvements we have made to the different feature areas in our second beta release.

Design view

As we have seen from your feedback, the design view is the one feature that stands out. But although it is a great feature, it has not been perfected. For example, a user study showed that it is not obvious how to switch on the preview. The tiny icons for switching between code and preview were apparently not self-explanatory enough.

Another tiny icon that did not do its job was the “error cue” — the green/red square in the top-right corner of the design view, which should indicate rendering problems due to errors in the QML. But even if you understood its purpose, it was easy to miss when it switched from green to red and virtually impossible for those with a color vision deficiency.

Now we have replaced the green/red square with an error indication that should be impossible not to see. A new icon clearly signals that the rendering is broken, together with an error message that explains the type of problem.


Another neat improvement to the design view is the “fit to window” zoom level, instead of only being able to select one of the predefined zoom levels like 100 or 50 percent. Please refer to the following Knowledge Base article for details on some known issues which will be addressed in an upcoming patch.

Edit actions in outline view

In the previous release, the outline view was purely “read only”. But even without the possibility to edit or rearrange the UI nodes within the outline view, it did serve a purpose. The tree of UI nodes that you can fold/unfold offered a convenient way to get an overview of the UI implementation, which quite quickly can become large and complex.

Certain tasks are easiest done by typing code; others by using your mouse. With the outline view improvements in this release, we take yet another step towards being a visual design tool. Using your mouse, you can now drag a component from the components palette into the UI tree in the outline view. You can also use the mouse to rearrange and remove objects.

New project templates

The purpose of the project templates is to set up the necessary project structure and to provide boilerplate code to kick start your application development. The first beta release only had two project templates. And considering that one of them was called “Empty project”, there was not really much to choose between.

With this release there are eight different and well-commented project templates. They all have quite different purposes, with different UI scenarios (and UI controls) in mind. All of them based on common BlackBerry 10 UI patterns, using a variation of Cascades core UI controls.

QML source editing improvements

As I wrote in my previous blog post, really solid source editing is what we believe is application developers’ – and hence our – top priority. This is something that (not surprisingly) was confirmed by a survey we conducted after the first beta release. Especially improved QML code assist (or “code completion”) was a commonly asked-for feature. This is something that we have been and will continue to be working on. The source editing improvements in this release, however, are in the area of QML validation. The previous release had validation of QML syntax. You would see an error if you did not type a colon after having typed a property. But there was no validation logic that checked that the property actually exists and is valid.

With this release, we have a certain amount of semantic QML validation in place. In addition to checking that the form of your code is correct, we also check that the code is semantically valid. For example, making sure that the properties you are trying to use actually exist:

More specifically, unknown properties and signals are now marked as an error. An error is also shown for read-only properties, when there are duplicate properties and for invalid format of the ‘id’ property. Warnings are displayed for id properties with quotes. Since we do not yet check for user defined QML components, we mark unknown components as info and not as error.

Another source editing improvement, albeit small compared to the improved validation, is color settings for syntax highlighting. Now you can customize the color of your QML code, with color options for keywords, comments, errors, etc.

Cascades Exporter

It is inspiring to see the Cascades Exporter being picked up. Since Cascades Exporter is a plugin to Adobe Photoshop and targets designers, the adoption is obviously not as widespread for developers as Cascades Builder. But for the people using Cascades Exporter, it seems to do its job well. On a scale between one and ten on how useful the features of Cascades Exporter were, approximately 50 percent of the survey respondents gave it a ten.

Performance improvements

A quite significant flaw in the previous release was that switching between layers became slow for Photoshop documents with a hundred or so layers. The lag was even a whole second for documents with a thousand layers. With the performance improvements in this new release this action is instant, even for very large documents.

As a side effect to fixing the layer switching lag, the export action has now become faster. The bigger the document, the more noticeable the difference, with a performance increase of roughly 20 percent for a large document.

UI controls palette

The resulting artifacts when exporting Photoshop design previously were essentially bitmaps and text objects. We have continued with the notion of UI controls in the Photoshop design and introduced a UI controls palette. A subset of the BlackBerry 10 controls are available in the palette and can be used in the design.

When performing the export action, these are preserved as actual controls, as opposed to being exported as bitmaps. So when importing the design into Cascades Builder, a Button in the Photoshop document will become a Button control in the QML file in Cascades Builder.

The near future

There is unfortunately a certain amount of tabbing wackiness left in this release. But this is being worked on, and will see the light together with other improvements in the next release.

Among the improvements that we have in the works is QML components aware validation and code assist. If, for example, you have a WarpDrive.qml, when invoking the code assist it will include WarpDrive among the proposals.

There will also be support for comment toggling, code indentation, and the formatting will be much better when dragging a control from the palette into the source editor. We’d love to hear what you think – let us know in the comments.

Join the conversation

Show comments Hide comments
+ -