Home FAQs & How-To Absolute Beginner’s Guide to Developing a BlackBerry 10 App: Part 2

Absolute Beginner’s Guide to Developing a BlackBerry 10 App: Part 2

by - -
1803

It’s that moment you’ve all been waiting for.  It’s finally time to get your app up and running!  Make sure you’ve completed Part 1 of the guide, which helps you through the process of installing the BlackBerry 10 app-building tools.  I’ve decided that I’ll start you guys off simple.  And I mean SUPER simple.  You won’t need any godly wizard-like coding skills whatsoever.

It’s quite a process, but if I can do it, I’m confident you can do it too!

Step 1: Launch the IDE

Open up the BlackBerry 10 QNX Momentics IDE.  If you installed it in the default folder, the address is C:\bbndk\bbndk.bat if  you really can’t find it.  You will also find it within the start menu, or desktop if you made a desktop icon in the setup.

The icon looks like this:

When you first start it up, it will take a few seconds to load up.  You’ll probably be prompted to set a workspace folder where your apps will be stored.  Try not to put any spaces in the folder name.

You’ll then be greeted by the “Welcome” screen.  But we’re too cool for that.  We’re going to dive right in.  Click on the rightmost option called “Workbench”.

Welcome to the IDE!  Just like an episode of “MTV Cribs”, this is where the magic happens.

 

 Step 2: Create a project

Go to File–> New–> “BlackBerry Cascades C++ Project“.  Fill out the name of your project (again, avoid any spaces).  Don’t worry, this is NOT the name of your app, you can change that later.

We want simple.  Let’s go for a standard “empty” project.  Really, its not empty.  It’s got some stuff we’re going to throw out later to really start from scratch.

And we wait…

Make sure you open the QML Editing perspective.  Trust me, its awesome!

Alright!  What you’re looking now at is an app, I swear!  Ah, but want all you see is a few lines of “blah, blah, blah”, right?  Just click horizontal split mode.   It’s where I’ve circled below.

On the right side of the screen, you’ll see the app in all its QML editing perspective glory.  Then click on the “Full View” (or whatever its called) button where I’ve shown you.  You’ll see the app running on the entire interface of the Dev Alpha.  All it says is “Hello world” though, and that’s boring.

We COULD run this app on our Dev Alpha or simulator, or even submit it to App World, but that would be mad lame when we could easily write our own app with some of Cascades’ finest features!

Delete the “Hello World” stuff so all we have left is the first “import” line that simply tells the program that we’re going to use super-cool Cascades stuff.

You’ll be left with pretty much nothing.   Perfect!

Step 3: Making your own first app loaded with Cascades stuff

Good news!   Not a single character of code is needed!

Drag and drop a Page from the components box at the bottom right of the window into the editor.

Next, in the QML Properties box on the right, choose “Container{}” in the content option.  This will put a “container”  in your app that holds all the cascades stuff.

So far so good?  Now the fun part starts!  Let’s just throw lots of Cascades stuff in our app just for fun.

Let’s drag and drop a “TextArea” component from the component box on the bottom right.  Make sure to place it inside the Container.

Then place a “Button” component after the TextArea component, but also inside the container as I’ve shown.

I’ve tossed a TextArea, a Button, a Checkbox, a DateTimePicker, a DropDown, a Label, a Slider, a TextField and a ToggleButton into my app just by dragging and dropping stuff.  It’s ok, get greedy!  Make sure you don’t drag any componets within other component’s curly brackets (bad stuff happens).  Check out how my screen looks.

All these components are customizable by clicking on them in the main editor and changing their options in the QML Properties box on the right side.  This goes a long way to making your app better looking and you don’t have to code anything at all! Awesome eh?

Here is my total code that you can copy and paste if you messed up the dragging and dropping:

import bb.cascades 1.0

Page {
id: pageID
Container {

background: Color.create (“#E0E0E0″)

TextArea {

}
Button {
id: buttonID
text: “text”
onClicked: {

}
}
CheckBox {

}
DateTimePicker {

}
DropDown {

}
Label {
id: labelID
text: “text”

}
Slider {
id: sliderID
fromValue: 0
toValue: 1
preferredWidth: preferredWidth
onValueChanging: {

}
}
TextField {

}
ToggleButton {

}
}
}

Now, let’s test it out!  Follow Step 4A if you have a Dev Alpha, or Step 4B if you only have the simulator.

Step 4A:  Run your app on the Dev Alpha

Now we have to get your Dev Alpha in development mode.  Go into the settings on the Dev Alpha by swiping down from the top of the screen.  Go to Security, then Development Mode, then enable it by selecting the toggle switch.  You’ll have to set a password for your device.  Keep it simple, like “123″.  You will also see a Development Address which should be 169.254.0.1.  Keep it like that.  Next, plug in your Dev Alpha to your computer with a USB cable.

Head back in the QNX IDE where you are working on your app.  Right click inside the Project Explorer Box at the top right of the windows.  Select New, then BlackBerry target.  Fill in the Development address as 169.254.0.1 and your password.  Then press Finish.

Next, go to the file called “bar-descriptor.xml” and double click on it to open it up.

Under Related Settings and Actions, click on Configure Package signing and Debug tokens.

At the top, click BlackBerry Deployment Setup Wizard.

For the first step of the wizard, we’ll have to set up the device.  Click Next.

Select the second option because we connected using USB.  Fill in the IP address and password, or you can try Auto-Discover.

After clicking next, you’ll now have to create a CSK password.  Import those PBDT and RDK files you got from RIM in two seperate emails in Part 1 and set up a password.  You will also have to type in that PIN you had when you first applied for signing keys in Part 1 of this guide.

After that, you will create a debug token it will be uploaded it to your Dev Alpha.  This gives your Dev Alpha a special permit to run your exclusive app.

If all goes well, you should finish the wizard with no issue.

Make sure the 169.254.0.1 target in the Project Explorer doesn’t have an “X” on the icon.  If it does, then right-click it, go to BlackBerry tools–> Connect.  If even that doesn’t work, turn off wifi on your Dev Alpha.  Restart the QNX IDE and try to connect to the target again.  Check and make sure it is connected by USB as well.

Step 4B: Run your app on the BlackBerry 10 Simulator

The simulator is pretty simple to set up.   Open up VMware Player that we installed in Part 1.  Click Open a Virtual Machine.

Make sure you know where you installed it from Part 1.   Load it up and the simulator will start to boot!  If you’re not running a fancy pants machine, it would be a wise idea to grab a sandwich as this can take a while.

Ok, so you’re now running BlackBerry 10 on your computer…technically.  Remember, to escape from the simulator, press Alt and Control at the same time.  Swipe down from the top, just like the Dev Alpha or PlayBook and head into Security–> Development Mode, and enable it.   You’ll have to put in a password, remember this.  It will say a Development address, but ignore that.

Exit out of the settings menu and click on the new development mode icon at the top of the screen.  That is your real Development address.  Write this down somewhere.  It should start with 192.168….

Head back over to your QNX IDE and double click on the “bar-descriptor.xml” file in your MyApp project.

Under Related Settings and Actions, click on Configure Package signing and Debug token.

At the top, click BlackBerry Deployment Setup Wizard.

In the Device Setup step, check the box beside Simulator, type in the Development address of the simulator and the password.

After that, mash the Next button until the wizard is finished.

In the Project Explorer, right click the new target for the simulator (it will be called the set of four numbers of the development address), and select BlackBerry Tools –>Connect.

PHEW!   Now that the hard part is done….let’s actually see what we’ve accomplished.

Step 5: Build and Run your app

Double check to make sure that the purple icon in the Project Explorer doesn’t have an x on it!  If not, following the last part of Step 4A or Step 4B.  Notice in the image below how my icon (169.254.0.1, don’t worry about the other ones ;) ) has q red “X”s beside it.  Make sure yours doesn’t so it looks like this.

Now, click on your project (mine’s called MyApp) in the Project Explorer.  Then click on the arrow beside the hammer icon.  Select Device-Debug.

Your app will then be built.

Finally, we get to run it (yay!).  Right-click on your project in the Project Explorer screen and select Run As…–>BlackBerry C/C++ Application.

It usually takes a minute or two to actually run your app on the device or simulator.    And presto, you’ll be playing with your own Cascades app!

 

It won’t do anything useful, but you’ve completed the basic part of developing a native BlackBerry 10 app.  In a future guide, I’ll step it up a notch and we’ll see how far we can go with cascades!

There are also tons of samples here and you can import those projects and run them on your Dev Alpha or simulator as well.

If you need any help or guidance at all, sound off in the comments below.  I’ll do my best to answer any questions!