It’s dangerous to go alone! Take this: Cascades Builder


Editor’s Note: Here’s a post from Markus Landin, the Product Manager for Cascades™


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:


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.

Join the conversation

Show comments Hide comments
+ -