Weekend Coder: Cascades loves JavaScript

By Brian Scheirer on 19 May 2013 02:22 pm EDT
5
loading...
0
loading...
54
loading...

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!

32 comments

sk8er_tor

Awesome! Just another reason for developing apps for the BlackBerry 10 platform :)

textngo

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

morpho4444

Bla1ze! you are not a developer!

Kat0908

Bla1ze didn't write this article.

KDB84

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

Posted from my Z10 via CB10

G-bone

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

#BB10Believe

morpho4444

Oh he is reading it my friend... he knows I'm into him!

morpho4444

Hey look Yoda, I'm not confused, I have it pretty clear, Bla1ze... (stay with me)... is not, a developer!

morpho4444

I know how to read. I just said Bla1ze was not a developer

KermEd

What does that have to do with the article?

Posted via CB10

BaconMunch

Well I believe Bla1ze earned his LE BB10 passed on approved apps for BB10. Why the hate?

Mathrin

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

Quite annoying really.

Posted via CB10

gbolahanojo

What happens when you try to run the simulator

ForcePosted using the Z10

mnc76

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

LostOnThePianoRoll

I have no idea about coding but i read every single word in this article!

Posted via CB10

00stryder

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

Posted via CB10 & loving it!

Pete The Penguin

Another excellent article Brian and another reason for developing BB10 applications.
More please.

Posted via CB10 from my Q10.

Jinxs1591

Trying to make a App can anyone tell me If you can use a Javascript API with cascade on BB10

Moridin1138

Yep, sure can.

Posted via CB10

remmo

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

Thunderbuck

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).

remmo

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

Mathieu Hamel

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.

TimeLikeInfinity

No idea... but hey Ho.... love my Zed10 :)

Posted via CB10

ofutur

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.

bb10_fan

Yet, there is still no love between PlayBook and Cascades....

mavsguy842

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

Jerry112

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).

andrei_avram

No...jQuery doesn't work.

edyb

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.

416365416c

"Furthermore using JavaScript in your Cascades project will not negatively affect performance of your application."

Incorrect. In fact, the QML docs explicitly suggest being careful with JavaScript usage: http://qt-project.org/doc/qt-4.8/qdeclarativeperformance.html#limit-java... . For performance-critical sections of your application you should probably still be using C++ (for trivial stuff, like these examples, no big deal).