JAM 24 – HTML5 Frameworks: Up-And-Comers that are Building Steam

Ask any Web developer how many JavaScript frameworks there are out there and you’ll likely end up waiting a long time as they answer. There are so many to choose from and new ones appear in the wild on a daily basis: UI frameworks, libraries, shims & polyfills, animation, graphs, gestures, MVC, performance, etc. We developers who solve difficult coding problems are eager to share their solutions in the form of JavaScript frameworks, allowing others to also build compelling application content. In this session, I’m going to share a few of my own personal favorite frameworks that are focused on improving the quality of your HTML5 applications or games. I even plan on doing a live coding demo of an HTML5 gaming framework. Wish me luck!

JAM23 – Lab: Getting Deep Device Integration with Third Party Extensions

Okay folks, I’m really excited about this one. This session is actually a 2 hour lab that will empower developers to boost the quality of their HTML5-powered WebWorks applications and take them to the next level of awesomeness.  Developers – have you ever built a Web app using technologies like HTML5, CSS or JavaScript and encountered a situation where the feature you wanted to implement could not be added because it was not defined in any Web standards?  Some examples include: blinking the LED light, sending a message via Bluetooth or keeping the device backlight on (none of these are features that can be added using standard JavaScript).  The BlackBerry 10 OS has a powerful native API platform that can be leveraged in a WebWorks application by exposing native code to the JavaScript engine via custom Third Party extensions.  During this lab, attendees will not only learn how to build WebWorks extensions for BlackBerry 10, but they will actually create their own!  By the time this lab is over, everyone will have a functional WebWorks application running on their free BlackBerry Z10 smartphone that makes use of a native extension. It’s going to get crazy in there.

Next week is BlackBerry Jam Americas 2013 and as a member of the Developer Relations team, I’ll be stationed at various locations over the three days helping out developers when I can. Better yet, i’m also hosting a lab that I hope you will find a lot of fun and very informative on stereoscopic 3D and HDMI output for your apps. I’m also presenting a session on getting the most out of Momentics to help you build and package your apps in an efficient manner and streamline your development process. This is something all developers should care about since saving time during development often means you can take on more projects and earn more in the process.

JAM54 – Lab: Adding a new Dimension to your BlackBerry Apps – Stereoscopic 3D ( and other advanced applications for output to the HDMI display)

My first experience with stereoscopic 3D, like most people, was from playing with a ViewMaster as a child. In the years since, I have experimented with stereoscopic photography, utilizing stereoscopic 3D graphics in 3D modeling and rendering software I worked on in university and during the first few years of my career, and now I am reviving some of that early work in my spare time and applying that knowledge to develop stereoscopic software for the BlackBerry 10 platform.

Stereoscopic 3D represents another way your app can engage with its users and set it apart from the competition. Imagine users playing your game on the big screen with the game play literally in their face or taking a look at NASA rover stereoscopic photos with their smartphone and feeling like they are looking out the window at the Red Planet. That’s the kind of emotion and excitement that this technology brings to those who truly appreciate it.

The techniques we will review in the lab produce stereoscopic 3D output via the HDMI display in a manner that should be compatible with the majority of 3D TVs and monitors in the market today.  The diagram below provides an overview of what type of output is generated and I will have sample code on hand so that attendees can dive right in and integrate it into their applications.

Is that all we will cover? Absolutely not. The stereoscopic techniques rely on HDMI output. HDMI output can be useful in a number of other types of apps as well. We will review some other use cases and show how the existing sample code can be adapted for those purposes. If you want to incorporate stereoscopic 3D output into your app or if you just want to know how to output content to the HDMI display in general, join in on the fun. After the lab is over, the 3D TV will be moved into the Jam Space for attendees so you will have the rest of the event to access the TV and test the changes you make to your apps and demo your efforts to others.  I’m looking forward to seeing what our developers produce with this new tool in their arsenal.

 JAM39 – Build and Packaging for native apps

As your app portfolio grows, you are probably trying to come up with ways to reuse code you wrote in a different application or organize it better, turnaround changes faster. Maybe the app’s download time is a little slow and you want to improve on it but don’t know how? If any of these questions apply to you, you want to attend this session. We will run through some tips and tricks we use for internal apps and some little known options available in the Momentics IDE to help you develop a build system to be more efficient during the development process.  We will show you some tips on how to build a Qt or Cascades shared library. If you develop on multiple platforms, we will share some tips from our porting guides on how best to create a shared pool of code that you can build on multiple platforms. If you want to use a shared library developed by someone else, we’ll show you how to integrate that library with the IDE for seamless integration with your apps.

These sessions are just the tip of the iceberg of the session catalog at this year’s conference. Join us in Orlando and learn a lot about what you can do now and what’s coming in future versions of BlackBerry 10. I am looking forward to seeing some familiar faces and to meeting more developers again this year.

This article will aim to explain how to build a native app from the command line, using the tools bundled in the BlackBerry 10 Native SDK and your favourite text editor.

Set up your environment

The Native SDK includes a script called bbndk-env.sh (or .bat on Windows) in the root folder that initialises the environment variables that the other tools depend on. I will refer to the install location of the Native SDK as $NDK_DIR.

Mac: source $NDK_DIR/bbndk-env.sh
Win: $NDK_DIR/bbndk-env.bat

So what does this script set?

The most important environment variables are:

QNX_TARGET: This directory contains all the configuration files and libraries for the BlackBerry 10 device, the target that we want our app to run on.  You can see all the libraries which can be linked against in $QNX_TARGET/armle-v7/lib and $QNX_TARGET/armle-v7/usr/lib.

QNX_HOST: This directory contains the tools and configuration files for our host system, ie Windows, Mac or Linux. It includes a compiler, linker and assembler for cross compiling to various architectures, as well as command line tools for packaging, signing and deploying your application.

Building for the ARM architecture

You may have noticed the use of armle-v7 in the above directory structure. This refers to the processor architecture on BlackBerry 10: ARM Little Endian Version 7. To build binaries that run on BlackBerry 10 you need to compile for this architecture.

Start by creating a folder to hold our app’s files, call it GoodbyeIDE. From now on I will refer to this as $PROJECT_DIR. Inside this folder create a file called main.c with the following content:

#include <stdio.h>
int main()
{
  fprintf(stdout, "Goodbye IDE!\n");
  return 0;
}

Now lets compile it. Change to $PROJECT_DIR and execute:

qcc -Vgcc_ntoarmv7le main.c -o main

Lets explain this command in a bit more detail. qcc stands for QNX C Compiler. BlackBerry 10 is built on top of QNX and uses many of its build tools.

qcc is essentially a wrapper for gcc  (GNU Compiler Collection). The -V switch tells qcc which version of gcc to use, in this case its the ntoarmv7le version which stands for QNX Neutrino ARM Version 7 Little Endian (a bit of a mouthful).

To build for the BlackBerry 10 simulator you need to use the gcc version for the x86 architecture.

qcc -Vgcc_ntox86 main.c -o main

To view a full list of the available gcc versions run:

qcc -V

The main.c -o main part of the command just specifies the input C filename and output binary filename.

OK, so now we should have a binary (called main) that will run on a BlackBerry 10 device. This binary won’t run on your host operating system since it’s not compiled for the same architecture. If you have a working gcc you can compile it by doing:

gcc main.c -o main2
./main2

When you execute main2 you should see “Goodbye IDE”.

Create the BAR descriptor XML

BlackBerry 10 apps are packaged as BAR (BlackBerry Application aRchive) files. To create a BAR file we need a descriptor file called bar-descriptor.xml. This file includes information about the app such as name, version, required permissions and a list of assets.

Create the bar-descriptor.xml file with the following content:

<qnx>
  <id>com.example.GoodbyeIDE</id>
  <versionNumber>1</versionNumber>
  <name>Goodbye IDE</name>
  <asset path="main" entry="true">main</asset>
</qnx>

From our point of view the most important line in bar-descriptor.xml is this one:

<asset path="main" entry="true">main</asset>

This specifies that the BAR contains a file called main which is the entry point for the app.

A full list of BAR application descriptor parameters is available here.

Packaging and deploying your app

Now that we have a binary and an application descriptor we are ready to create a BAR file.

A BAR file is essentially a zip file which contains all your app’s assets and the meta information from bar-descriptor.xml. In fact, if you rename a .bar file to .zip you will be able to extract it to see all the files in that app.

To create a BAR file run the following command:

blackberry-nativepackager -package GoodbyeIDE.bar bar-descriptor.xml -devMode -debugToken ~/Library/Research\ In\ Motion/debugtoken1.bar

Note that the -devMode and -debugToken flags are only required if you are deploying to a physical device. This is a handy feature that allows you to deploy your app without signing it, as long as your debug token is installed on the device.

To do this you’ll need to register with RIM to sign applications and create a debug token.

So now you have a BAR file called GoodbyeIDE.bar you can deploy it to the device using the following command:

blackberry-deploy -installApp 169.254.0.1 -password pass GoodbyeIDE.bar

169.254.0.1 is the IP of your target and pass is the device password.

If you take a look at your application icons, you should see a new one called Goodbye IDE (as specified in the <name> tag in bar-descriptor.xml).

If you tap on the icon your app should run! But…nothing happened, right?

Viewing log files over SSH

Actually the app did run, it’s just that all it did was print “Goodbye IDE!” to the stdout. The stdout on BlackBerry 10 is directed into a log file. We can view this log file by SSHing onto the device. Here’s how:

First we have to tell the device that we want to create a secure connection to it:

blackberry-connect 169.254.0.1 -password pass

Now open an SSH client (such as putty) and run:

ssh devuser@169.254.0.1

You should now be connected via SSH. Feel free to poke around! Apps are installed in /accounts/1000/appdata. Each app is given its own sandbox folder with a unique name based on its id (which we specified in bar-descriptor.xml).

Example sandbox folder name: com.example.GoodbyeIDE.testDev__GoodbyeIDEcf9b848

The log file can be found in the logs directory under the sandbox folder name. To view the file just run:

cat log

The log file is re-created each time the app is run. To test that the app is working delete the log file, tap on the app icon and run the above command again.

Summary

That’s it for now. The next article will focus on making your life easier by using Makefiles, the Qt build system and creating a more logical project folder structure.

We’ll be continuing this video series leading up to BlackBerry Jam Americas in Orlando in order to give some more background surrounding the topics that we’ll be discussing in detail during the conference.

In this particular video, we’re joined by Geordie Ferguson to talk to us about the ins and outs of headless applications and the areas that we’re exploring to bring this type of functionality to an upcoming release of BlackBerry 10.

The BlackBerry Developer Relations team has paired up with Skillsmatter to offer training on BlackBerry 10 development. To kick off the partnership, we are running a BlackBerry Jam event on March 7th in London.

Our dynamic duo of Developer Evangelists from the UK, Luca Sale and Don Turner, will run the bulk of the program which will cover everything you need to know about development for BlackBerry 10.

Attendees will gain insight on building applications for the new BlackBerry 10 platform. Beginner and master mobile application developers will be able to attend in-depth sessions focused on HTML5 development with BlackBerry WebWorks and Native C/C++ development for the BlackBerry platform with our BlackBerry 10 Native SDK. Developers will be able to interact with development experts who can provide guidance, tips and tricks, and other information to help get started building apps for BlackBerry 10.

After a fully packed day of sessions, we’ll head to the local pub!

To find out more and register, please visit Skillsmatter.

Networking in BlackBerry 10 is done through the QNetwork module. You no longer need to worry about transport selection. Your typical HTTP communication can be handled through QNetworkAccessManager. It provides methods such as get() and post(), which take a QNetworkRequest and then asynchronously return a QNetworkReply.

For example:

QUrl *url = new QUrl("http://www.iana.org/domains/example/");

    QNetworkAccessManager *manager = new QNetworkAccessManager(this);

    connect(manager, SIGNAL(finished(QNetworkReply*)),
    		this, SLOT(replyFinished(QNetworkReply*)));

    manager->get(QNetworkRequest(*url));

And then in your replyFinished slot:

void App::replyFinished(QNetworkReply* reply) {
	qDebug() <readAll();

	// Call deleteLater to make sure the reply gets cleaned up
	reply->deleteLater();
}

You can also do TCP with QTCPSocket and QTCPServer, UDP with UDPSocket , and FTP with QFtp.

And of course, lower level libraries such as cURL are available if you should require them.

Our SDKs (both API and tooling) remain gold as of the previous release and we have not introduced any new API or tooling changes in this release.  However, that being said, we continue to build new versions of the BlackBerry 10 device software that contain various bug fixes and stability improvements.  Our BlackBerry 10 software is being tested by over 150 carriers around the world and as they provide feedback we continue to release software incorporating this feedback.

What this means is that even though our API signatures and tooling are not changing; the underlying device software will go through a continuous improvement cycle. As an app developer you will want to upgrade to the latest software on your BlackBerry 10 Dev Alpha testing device in order to get the latest fixes as well as perform some sanity testing with your app to make sure there are no unexpected issues.  If you are trying to debug your app on the latest and greatest device release, you will likely want to pick up the latest Native SDK target OS so that you can get the right libraries and symbols for debugging on the latest version of device software that you are working with.

The good news is that you can download the the latest Native SDK target OS via the Update Manager that we provide as part of our Momentics IDE suite. If you click on Help in the menu bar, you will see an item that says ‘Update Native SDK’.

Once you click on Update Native SDK, you will see a dialog pop up that provides a list of Native SDK targets OS releases you can download. The latest Native SDK target OS as of the time of writing of this blog article is BlackBerry 10 Native SDK 10.0.9.2318. You should see this in the list.  Select it via the checkbox, click Next and follow the steps to download the latest Native SDK target OS.

As we get closer to the launch date of our device and the gold release of our BlackBerry 10 device software we want to make sure that you have the latest BlackBerry 10 Native SDK target to test and debug with on your BlackBerry 10 Dev Alpha testing devices.  As we build new iterations of our OS software, we will continue to release these to you via our Update Manager so you can keep up with the most recent versions.

Update – Brian Scheirer pointed out that there have been some awesome community samples too! -Ed.

For me, 2012 has definitely been a year of helping developers learn about our native and Cascades development tools. If you’re like me, you’re probably spending the holiday nights doing some coding – so I’ve put together this list of “The Best of Native Development for 2012″.

Cascades Webcasts
Thousands of developers from across the globe joined us for four webcasts to learn beginner to advanced Cascades concepts.  We were able to interact with developers directly, answer questions, and get immediate feedback as samples and code were displayed.  The format proved so successful that we’ve hosted many more webcasts on topics such as the BBM social platform, augmented reality apps, and OpenGL integration.

The live web casts were recorded and are available for viewing here.

Porting Guides
If you have existing content for another platform, we are making it easy to bring that content to the BlackBerry 10 platform.  Being able to re-use code across platforms reduces development and maintenance costs.  Distributing your application to multiple platforms opens you up to whole new market segments and increases your potential user base.  There a number of informative porting guides available to help you build for BlackBerry 10.

• iOS to BlackBerry 10 - http://devblog.blackberry.com/2012/12/porting-ios-apps-to-blackberry-10/
• Android to BlackBerry 10 - http://devblog.blackberry.com/2012/11/porting-android-game-to-blackberry-10/
• Qt to BlackBerry 10 - http://devblog.blackberry.com/2012/11/porting-qt-apps-to-blackberry-10/

Samples
The best and easiest way to learn to program is to look at sample code.  For every feature that BlackBerry 10 offers there is a sample project showing you how to put it into action.  Whether it’s integrating with BBM, using the Invocation Framework, getting sensor information, or communicating via Bluetooth, we’ve got you covered.

There are samples built right into the Momentics development environment, on the Cascades and Native microsites, and hosted on our github repo.  And if you find a feature that we missed, or an API without a clear example then let us know on Twitter @BlackBerryDev or in our developer forums and we’ll add what you need to get started!

• Cascades Samples - https://github.com/blackberry/Cascades-Samples
• Native SDK Samples - https://github.com/blackberry/NDK-Samples
• Cascades Microsite - https://developer.blackberry.com/cascades/sampleapps/

Stump the BlackBerry Devs
In August we launched a challenge to the BlackBerry Developer community to come up with a UI that would be difficult to implement in the Cascades UI framework.  The Cascades tools development team would try to implement the submissions in a flexible manner that could handle multiple screen resolutions and form factors.  They implemented three of the challenges and presented the solutions during the Unconference Day at BlackBerry Jam Americas.  We were able to show that Cascades is robust framework that is able to create stunning interfaces even when faced with challenging design requirements.  All the solutions are hosted on ourgithub repo.

If you have any Cascades or native dev questions – check out our forums and connect with me on Twitter.

Everyone loves a good webinar. OK, perhaps that’s an overstatement. Nevertheless, we hear loud and clear that our developer community loves them. The series of webinars we have run throughout the summer in conjunction with each successive SDK release have been extremely successful. So why stop now? Tomorrow – Tuesday, December 18th – we are bringing you two webinars that will cover all the latest information related to gold release Native and HTML5 SDKs for BlackBerry 10. The launch event date is coming up fast, so head on over to the registration pages and mark your calendars.

BlackBerry 10 Native SDK

We will take a quick look at what we have achieved so far with our native SDK. We will then look at the latest and greatest API and tooling features that have arrived in this most recent beta as well as the beta that preceded it. This includes things like advertising, SMS and invocation framework enhancements. Also, for the first time you will get a quick preview of the cards that are available to invoke and how you can invoke them. We will also cover some of the important IDE enhancements that have arrived, including the update manager, a brand new spanking project wizard, and the latest and greatest features that have been added to the Microsoft Visual Studio Plugin.

REGISTRATION:
http://www.blackberrydeveloperevents.com/events/webcast/registration/register.html?scoid=1079239157

BlackBerry 10 WebWorks SDK

We’ll take a look at the latest gold release as well as the most recent beta that preceded it. Starting with a quick overview of BlackBerry WebWorks, we will move to a summary of all of the latest features. We will then dive deeper into some of the more interesting features with a live look at code and functioning samples.

REGISTRATION:
http://www.blackberrydeveloperevents.com/events/webcast/registration/register.html?scoid=1079318388

Why BlackBerry?

Over the past months, we’ve been showing you what the new BlackBerry 10 platform is all about and how easy it is to create rich and astonishing-looking apps for BlackBerry 10 using the Cascades UI framework. Not only does BlackBerry 10 offer an awesome platform and an extensive set of tools to choose from, but BlackBerry World is the most profitable mobile application store for app developers to submit their apps. According to the Evans Data Corporation, 13% of vendors using BlackBerry World are making over $100,000, which is more than Apple, Android and Windows Mobile. With BlackBerry 10, you have the option to integrate your application with BBM functionality, thus increasing the engagement and discoverability of your app. It is reported that BBM connected apps make up 20% of the app downloads from BlackBerry World. Also, the Built for BlackBerry Program and the $10K Developer Commitment programs are offering amazing incentives to bring your app to BlackBerry 10. I’d say that is a pretty convincing motivation to start developing apps on BlackBerry 10. So let’s get started!

Tips on Porting Native iOS apps to BlackBerry 10

Knowing that you’ve already developed and deployed profitable apps on the iOS platform, we would also like to see your great apps on BlackBerry 10 and watch you march toward another successful launch. To help you along, we have compiled several tips to help you through the porting process. We published a detailed porting guide for iOS apps on our Cascades microsite. The guide describes the similarities and differences between native iOS and BlackBerry 10 apps and platforms, as well as providing information and best practices for the porting process.

Tip 1: Know the Platforms and SDKs: iOS VS BlackBerry 10

Both the iOS and BlackBerry 10 platforms:

• Manage the device hardware and provide the technologies and services to develop native apps;
• Provide their own SDK to build, test and deploy native apps which can run directly on their devices;
• Communicate directly with underlying hardware through well-defined APIs;
• Are structured similarly in a layered manner, outlined in the image above. BlackBerry 10 is based on the QNX Neutrino RTOS. The QNX Neutrino RTOS acts as a kernel and gives the platform key functionality such as multi-tasking and memory management. Both platforms offer core services, graphics and audio accessibilities, application and UI development frameworks.

Because both platforms use this layered architecture, the way you use frameworks is similar between iOS and BlackBerry 10. As a best practice for both platforms, you want to use higher-level frameworks over lower-level frameworks in your app whenever possible. This helps to reduce the amount of code you have to write, and can simplify complex features. This applies when creating new apps, as well as porting existing apps. The important thing to note for the porting process is that in most cases, although the frameworks are different between iOS and BlackBerry 10, there are equivalent APIs that you can use to map iOS frameworks to BlackBerry 10. In our iOS porting guide, we provide more detailed mappings for commonly used classes and UI components between iOS and BlackBerry 10.

Tip 2: Know the Development Tools: Xcode VS QNX Momentics IDE

One of the challenges of bringing your app to a different platform is learning to use a new IDE. Xcode and the QNX Momentics IDE share a number of similar features such as creating projects, designing user interfaces, writing code, debugging and running applications on simulators or devices which should offer some familiarity for experienced iOS developers. Both tools come with a project explorer, a source editor, and a UI previewer/editor to organize and write the application code using static libraries and plug-ins. Both tools support the gcc compiler to compile C/C++, and it is possible to perform source level debugging using GDB.

Xcode has an integrated UI design tool called Interface Builder and uses Objective-C for creating the UI for apps.

The QNX Momentics IDE is an Eclipse based environment to develop native BlackBerry 10 applications. It comes with the built-in Cascades Builder for the UI development using C/C++ and QML. Understanding and familiarizing with the development tools will lead you to make better choices during the porting process.

Tip 3: Know the Development Language: Objective-C, C/C++ and QML

Native iOS apps are built using Objective-C language and frameworks while Native BlackBerry 10 apps can be developed using C/C++ and QML. Because Objective-C is a set of extensions to the standard ANSI C language, you can mix Objective-C with C/C++ code. This similarity between Objective C and C/C++ allows you to reuse the Objective-C code that you already have by wrapping to C++ using the PIMPL idiom. In the context of porting your app, wrapping allows you to use your existing Objective C libraries on BlackBerry 10.

QML is a JavaScript-based, declarative language for developing an application’s user interface. If you are not familiar with QML, don’t worry! Cascades gives you the flexibility to create your UI in both QML and C++. Here is how to integrate the two in detail. The following two code samples written in QML and C++ achieve the same result when the application is run.

Adding a label using QML

import bb.cascades 1.0
Page {
    content: Label {
        text: "Hello world"
    }
}

Adding a label using C++

Page* root = new Page;
Label* label = Label::create()
                .text("Hello world");
root->setContent(label);
app->setScene(root);

Tip 4: Design your app targeting multiple platforms: Reuse! Reuse! Reuse!

It will save you a lot of time during the porting process if your native application is designed and developed targeting multiple platforms by separating UI code, business logic and platform dependent code. Follow the best practices to develop cross-platform applications:

• Separate business logic from UI code following the Model-View-Controller (MVC) pattern. BlackBerry 10 doesn’t enforce you to follow the MVC pattern. Although you can develop your app’s UI in both QML and C++, it is encouraged to write UI code in QML and business logic in C++ since the benefits of this practice are greater when porting apps.
• Use cross-platform libraries, frameworks, and engines to maximize the reuse of your app code. For example, consider using Open Audio Library (OpenAL) interface for audio and OpenGL ES for graphics. They are a cross-platform standard.
• Use SQLite for the app’s database engine. It is supported on both iOS and BlackBerry 10.
• Wrap your Objective-C code to C++ to reuse.
• Isolate platform dependent code and package them separately. You can replace or rewrite the platform specific code by mapping the equivalent or similar classes and functions.

There isn’t an easy way to reuse your UI code and platform specific code. After all, iOS and BlackBerry 10 are two different platforms. You would have to spend some time researching and finding similar classes, UI elements, and/or equivalent components between iOS and BlackBerry 10 for porting. The good news is that we put significant amount of resources to guide you through the process. The porting guides, webcasts, blogs and forums are one click away on our BlackBerry Developer’s Website.

Tip 5: Quality, not Quantity: Follow BlackBerry 10 UI guidelines and best practices

Follow the BlackBerry 10 UI guidelines and design principles to create the best experience possible for your users and take advantage of the unique BlackBerry 10 features. BlackBerry 10 eliminates gaps between action and response, makes the experience smooth and effortless avoiding any interruption in the flow, and creates an experience where content is maximized in your app. Aim for 60 frames per second (FPS) so that the UI and the screen refresh rate are in sync.

There you have it. Port responsibly!

For more information about porting iOS apps to BlackBerry 10, please refer to the following:

BlackBerry 10 Best Practices
Porting native iOS apps
Porting apps from iOS
BlackBerry 10 Library Support at a glance