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.

Improvements

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.

Cascades™ Builder is an extension to the Momentics IDE, providing developers with tooling features for developing Cascades applications for BlackBerry® 10. Our goal with Cascades Builder is to increase developers’ efficiency by offering advanced source editing features like code completion, enabling UI profiling and debugging, and offering features like visual editors to design and implement the UI without writing code.

This is a first public beta release, and while we have not yet reached all these goals, we have come a long way in providing some unique and powerful features!

We realize that what matters most to you as a developer is a solid source editor – an editor that simply allows you to write as many lines of code in an as short time as possible. But we also realize the need for instant feedback – the need to try out ideas, to tweak application UI’s pixel positions and margins, and to see the result instantly. We know that you want to get immediate feedback and not have to wait a full change-compile-deploy cycle.

With that said, let’s go through the features of Cascades Builder to demonstrate how you can achieve that desired instant feedback:

Features

These are the most significant features that we provide to you in this beta release:

Getting started: For you to quickly get up and running, there is a project wizard that offers a couple of “Hello world” style project templates. It generates the Cascades project with the required headers and source files, QML files and project files. There is also the possibility to create a project based on one of the bundled examples. More templates will soon be available, based on common BB10 UI patterns.

Source editing: A Cascades application typically consists of combination of QML (for the application’s UI and UI related logic) and C++ for the application logic. The QML editor is probably the most important part of Cascades Builder and currently offers syntax based coloring and simple error highlighting. There are also features like bracket matching and formatting. The most wanted feature in any editor is probably the code assist; as you write the code, you will see context sensitive suggestions of components, properties, etc.

Preview window: The preview window is another powerful feature. While you type the QML to create the UI, you can see the design as it would be rendered on the device. It can even handle databindings and references, and can resolve JavaScript® expressions. Thus, tweaking the QML to adjust that pixel perfect padding has become a simple task, and if you want to check that your expressions work as expected, you don’t need to deploy and run the application on device.

Component palette: Cascades Builder has a component palette that lists the UI building blocks you can use for your application. Although you cannot drag and drop from the components palette into the scene rendered in the preview window, you can use it to drag and drop components into the QML source file.

Properties view: The properties view is a great way to see and explore features and behaviors that the component offers. The properties are grouped in categories so that it is easy to find the properties that are most relevant and often used, and you can see and edit their values. As you edit the values, the changes are immediately reflected in the visual preview and the QML source code. From within the properties view, you can also generate common signal handlers.

Photoshop integration

We strongly believe that close collaboration between designers and developers is key for successful applications. Although this is very much a process issue, it also comes down to the tools and technologies being used. In addition to the powerful Cascades APIs and the development environment you get with Momentics and Cascades Builder, we also provide a extension to Adobe® Photoshop® that we call Cascades Exporter.

As a designer, you would create the visual design for an application screen in Photoshop, and with Cascades Exporter you can export the design as a bundle of separate images together layout information. Cutting a design into separate images is usually a manual and tedious task, but Cascades Exporter now does this for you.

The bundle that is created (and that contains the individual images and the layout information) can then be imported into the IDE. Cascades Builder will add the images to the project, and QML source code is created so that the images are laid out to make the scene look the same as it was in Photoshop.

We do not claim that this is a magical solution that makes it possible to replace the developer with the designer – but it does help the handover of visual assets and makes a great boiler plate for the developer to start off with. Interactivity and dynamics then need to be added by the developer.

And more…

There is more to Cascades Exporter that helps the designer. Its time-saving image scaling feature is designed to maintain edge sharpness when scaling vector shapes. It also helps you to create 9-sliced images – move around guides define how the image should be cut, and then just hit the export button.

What’s next?

There are many important source editing features still to be implemented, and this is our top priority. So in the near term you should expect to see improvements to the code assist, and new features like hyperlink style code navigation. Also, you should see coloring not just for the language key words, but also for objects, properties, and so on. Additionally, there will be validation that does not just catch syntax errors, but catches errors like trying to use an object or property that does not exist.

We will add features to help you with UI debugging and profiling, and to add debugging support for JavaScript so that you can set breakpoints, step through and inspect the code. We are already working with visual editing; i.e. dragging component into a design canvas where you can layout and rearrange the user interface. We will continue to explore how we can help designers and developers work efficiently together. For example, maybe a Photoshop design can be exported not only as a bunch of images, but as actual UI controls?

While we are busy improving the Cascades development tools, we hope that you will be busy developing Cascades applications. We look forward to hearing your comments and opinions on this beta release.