Weekend Coder: Cascades loves JavaScript

By Brian Scheirer on 19 May 2013 02:22 pm EDT

Far too often I hear Cascades and C++ in the same sentence and not enough about Cascades and JavaScript. On that same token another common statement I hear about Cascades is QML is for UI and C++ is for logic. Though that is true, what is also true is QML can be used for UI and logic.

The way logic is handled in QML is through the use of JavaScript. At this point you may be asking yourself (or yelling at me through your screen) is I thought JavaScript was only for WebWorks applications!?!?

Well I am about to show you that is not true and give you three examples of how you can implement JavaScript into your Cascades project.

In-Line JavaScript

The easiest way to use JavaScript is to write it in-line with the rest of the QML. Let's demonstrate using a Label and a Button. So consider the following code in the onClicked signal, there is some JavaScript that defines a random number 1-3 and based off that number generates a phrase to have as the text of a Label

JavaScript Function Within the QML File

The next way you can have a JavaScript function defined within your QML file and call that function when necessary. So let's consider some similar code as above except we’ll define it as a function named phrase2() in the main Page {}.

Then we can have the onClicked signal of a Button call our "phrase2 ()" function

Function Defined in a Separate .js File

The third way is to define your JavaScript functions in a separate .js file then connect that file to your QML file. Again we'll create the same function, this time called phrase3(), within a file called otherFunctions.js

Next in your QML file declare the .js file

Now you can call that function inside of a Button onClicked signal by doing the following

For easy copy/pasting you can grab all the code here: https://github.com/bcs925/CrackBerry/tree/master/JavaScript_QML (It’s not a full project just add the main.qml and otherFunctions.js file to your project to see it in action)

There you have it, three ways to define/run JavaScript in QML. It is all a matter of preference/coding style of which way you choose to do it. Typically I like to use inline JavaScript for short/one time use functions.

I like to use defined functions within the QML for longer/used multiple times within that one QML file functions. And I like to use functions defined for very long or functions that will be used in multiple QML files.

Furthermore using JavaScript in your Cascades project will not negatively affect performance of your application. Now you know you can almost completely avoid using C++ in your Cascades apps, you have no reason not to give it a try!

Reader comments

Weekend Coder: Cascades loves JavaScript


If only javascript could solve it all.... C++ is still required to work with the more powerful device functions

Didn't he say something about Bla1ze in a previous Weekend Coder also? Confused he must be.

Posted from my Z10 via CB10

Is this a private thing?
Bla1ze can be whatever the hell he wants to be as far as I'm concerned...


I'd love to try these examples except I can't get the simulator to work.

Quite annoying really.

Posted via CB10

Very cool. As soon as I have the free time to get my dev environment setup, I'm gonna try my hand at a simple app.

BB10 seems so straightforward to develop for.

Posted via CB10

Lol me too. Makes me want to throw my hat in to the ring and learn how to code.

Posted via CB10 & loving it!

Coding is becoming so complex these days. I remember when writing BASIC code and speaking english was almost the same thing. Today we need C++, javascript, html, css, xml, an IDE and a simulator for a Hello World program.

Posted via CB10

BASIC was a horrible, procedural language that led to no end of horrible code (the term "spaghetti code" came from BASIC programs with indecipherable GOTO statements that led all over the place).

I've been using BASIC since 1992, then I moved to QBasic, then to Visual Basic (1,2,3,4,5 and 6), then to VB.NET, and never had that spaguetti code problem you mention. That problem can be caused by any coder with a poor sence of programming logic.
I started to learn html in 1996, a language with absolute no respect por syntax. After a couple of years I realized that creating dummy and useless html pages was not good, then I tried to learn javascript, but the things started to get complex, because javascript was only for client side actions. Server side needed something else (php, asp, etc), so I tried ASP. But wait, there was more: CSS. So by 2003 I needed at least 4 languages to create a useful web page, and there was not any proper WYSIWYG editor.
Then XML became famous, then web services, then mobile platfforms started to rise, then java was also needed for mobile programming.. etc etc etc.
Where are we now? We need a spaguetti of technologies in order to code a program, no matter how simple it is. So is not surprise that fart apps and calculators are so common in any app store.
People need more time learning to code that coding. And by the time we have learned the 10 languages needed for a Hello World, another 10 will appear.
Oh God, I'm tired!!!

Posted via CB10

I think many of us think that programming is not easier over the years. However, I think this division will lead us to more specialized people and the best performance for large IT projects. small IT projects are however increasingly heavy.

I was looking at that during Live as I had the misconception that C++ was required when wanting to go native.
This article gives a good overview.Looks like it could be possible to easily port a Webworks project built with a proper MVC architecture.

One thing to keep in mind though is that no everything is available via QML. Some APIs still require C++ knowledge.

Do javascript libraries such as jquery work, or are they too 'document.getElementById' in the back-end to work w/Cascades?

Syntax of the language is the same but API is different from what you have in browsers, so no document.* or other things from "normal JavaScript" (which is actually ECMAScript API on top of JavaScript language).

Isn't the idea NOT to need to use jQuery anymore because Cascades offers various UI elements? You should be able to handle all the UI in Cascades, no? I dropped jQuery in favor of bbUI.js because it just wasn't optimized enough for a BB10 experience and haven't looked back. But that's with Webworks.