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.

Native UI elements

The Cascades SDK provides a full set of native UI elements which can easily be added to your applications: buttons, fields, text areas etc. Each of these elements will provide hooks to let you easily listen for any standard events (touch, click, toggle) and properties to allow you to customize them for your application needs.

Develop using both QML declarative and C++

Whether you are a C++ guru, a declarative czar, or someone just getting started with programming, Cascades has a place for you! The user interface can be handled using entirely C++ or QML (Qt Markup Language). Data processing can be handed off to JavaScript® written in your QML files or passed off to C++ for some additional heavy lifting. The UI developed in either QML or C++ can be identical, and the QML is optimized on load to run just as fast as if it were written in C++.

Of course, for those of you that would like to have the best of both worlds, that’s also a possibility as C++ and QML can work together. QML can be used to rapidly create your UI while C++ is used to handle the business logic of your application. The result: A fast and easy way to prototype application UI while working on building and refining the business logic in tandem.

Animations!

One of my favorite parts about Cascades is the native UI elements: they look great and sync together, but they are also animated. Each element that can be interacted with has its own signature animation; when a check box is toggled, the check mark doesn’t just appear – it springs in to place! Small, non-intrusive, signature effects that result in a fun and inviting experience – even with check boxes – is what makes Cascades great!

Flawless user experience

The Cascades SDK is built using client-server architecture where the client handles all UI is handled by the client thread and the server thread handles all the heavy lifting (data processing, networking etc). To the end user, this means that even if the server is working hard to process data, the client will stay responsive and extremely lag-resistant.

A split screen showing QML coding alongside the real-time design view

Fantastic visualization and design tools

The Cascades SDK provides both Source and Design views when creating your user interface in QML. The source view lets you write the source for your UI while the design mode provides a real-time representation of how the UI will look, saving you loads of time.

To tag along with the theme of expediting UI design, the Cascades team has also developed a plug-in for Adobe® Photoshop®, The Cascades Exporter plug-in for Adobe Photoshop. This plug-in is really worthy of its own blog post, but in short, it allows you to design your UI in Adobe Photoshop then export the design in a way that can be imported right into your application. From design to implementation in a just a few short steps!

What can you expect moving forward?

Expect more and more features, functionality and astonishing ideas to be added to the SDK and IDE as we near the Gold SDK release and beyond. You can also expect to see a great deal of training in the very near future which will cover topics from “Getting Started” right through to more advanced topics like “Using OpenGL in Your Cascades Application”. Stay tuned for announcements on these!

If you would like to find more information on developing applications using the Cascades SDK, then please head over to the Cascades micro-site where you will find SDK and simulator downloads, sample applications and a wealth of documentation.

One last thing: this is a Beta, so if you do find any small bugs or think of some functionality that you would like added to make your application or developer experience even better, please log an issue in Issue Tracker.

That’s it for me. I cannot wait to see what applications you all come up with! Keep us posted with your progress by dropping us a line on Twitter® at @BlackBerryDev.