How To - Articles

Learning BB10 Cascades... After HelloWorld

BlackBerry 10 Cascades Learn Cascades App Development

In this "how to" article I'd like to share my experiences/recommendations in BB10 Cascades app developing after completing the "HelloWorld" example. I want to share this because I originally wanted to get into mobile app developing years ago but always got stuck after HelloWorld and didn't really know where to go next. I eventually figured it out and part of me making a blog was to prevent others from struggling early on like I did.  I hope this helps anyone who ends up in a similar situation not give up.

The first few steps are pretty straightforward and many people have posted them, so what the hell I will too:

---

1. Download the SDK and simulator: https://developer.blackberry.com/cascades/download/

2. Set-up your developer environment by working through the steps on BlackBerry's Developer Site: https://developer.blackberry.com/cascades/documentation/getting_started/setting_up.html.  The "Build an Application" section walks you through loading a built in sample and how to deploy.

3a. RIM has provided a very good write up of a simple project to create from scratch after making HelloWorld (or Hello Cascades if you choose their first sample).  That can be found here: https://developer.blackberry.com/cascades/documentation/getting_started/first_app/index.html. This sample starts to give you a taste of Cascades.

3b. Another good first app, after HelloWorld app, would be following N4BB's write up (http://n4bb.com/absolute-beginners-guide-to-developing-a-blackberry-10-app-part-2/) of adding all kinds of stock features to a QML screen.  I think this may be even more basic than RIM's example I have in 3a but after you make this and deploy it none of buttons actually do anything (because you didn't put the necessary code to do so).

---

But after this, if you were like me, you may be wondering what to do next.  And every developer will tell you there is no correct next step.  Most will also tell you to start reading all the documentation (which is good advice) but if I had to take a stab at the total length of RIM's Cascades Docs and API references I'd put in the neighborhood of 750 pages. Furthermore, after you get past the "Getting Started" pages (essentially steps 1-3 above), the docs are in no particular order so it can't really be read like a book.  The steps below are my recommended order of what to do next:

4. One thing that was hard for me to grasp when first working in QML was how Containers wrapped other elements.  In the example mentioned in 3a RIM does a good job of showing Containers as boxes with dotted lines in the screen captures.  However, I think its best to see objects being "coded" in front of you so now is a good time to watch my video of making a UI:

5. Now that you've seen a QML UI in two examples and a video I suggest downloading the CookBook example (QML version, https://developer.blackberry.com/cascades/sampleapps/).  Loading it on your simulator/DevAlpha and playing with it as a user.  See all the "stock" buttons/controls that available.  After you've played around with all the items then go into the code to see what makes them do things.  I wouldn't worry too much on the "how to make things do stuff" quite yet.  I encourage you to continuously check back to this sample anytime you want to use a new element or something you don't use very often such as a the DateTimePicker.

5b. If you don't know how to load a sample app after you've downloaded watch this video:

6. Presumably at this point you know/understand how to make a UI but not really mastered how to make buttons/dropdowns/checkboxes/etc do "things".  Next great example to work through on RIM's site is: https://developer.blackberry.com/cascades/documentation/ui/custom_components/custom_components_tutorial.html. In this example you will make things (images, image properties, text, etc) change from a button using a JavaScript function.

7. Another good example of a simple (very simple in UI especially) is my sample on calling a C++ function into the QML.  At the end of the example I say how this same function can be done using JavaScript.  But the fundamentals of how to call in a C++ function are the same regardless of the complexity of the C++ function you are calling. http://bbcascadescode.tumblr.com/post/29294239402/running-c-function-from-qml-trivial-example

8. Learn the different Layout/Navigation styles to make more complex UIs. Layouts: Stack, Dock, Absolute. (https://developer.blackberry.com/cascades/documentation/ui/layouts/index.html)  Navigations: Single Page, TabbedPane, NavigationPane. (https://developer.blackberry.com/cascades/documentation/ui/navigation/index.html)

9. Continue to master JavaScript calls. Not necessarily full js functions like the sample in step6 but things like having a SegmentedControl control a DropDown: http://bbcascadescode.tumblr.com/post/29925690006/using-segmentedcontrol-to-control-a-dropdown. I have a few other tutorials throughout my blog that are short and sweet like this one. For the most part you will be using JavaScript to make things do "stuff" in you QML file.

Following my six additional steps you should be comfortable jumping into more complicated samples/examples and the documentation will make more sense.  For example, the write up for playing a custom sound is very good (https://developer.blackberry.com/cascades/documentation/design/audio_video/playing_custom_sounds_in_an_app_tutorial.html) but it assume you understand a lot of fundamentals. 

Love to hear if this helps you get past HelloWorld and/or if you have any other recommendations for the "developer who just finished HelloWorld and doesn't know what to do next".  Shoot me an email, tweet, or sound off in the comments below.

-Brian

embed video plugin powered by Union Development