Our very own @mendozamiche, @naveenan5, and myself - @grahamzibar will be in downtown Toronto for a hands-on WebWorks experience this coming Monday, January 21st starting at 6 pm  We’ll be showing you how to build your first BlackBerry 10 app using the BlackBerry WebWorks SDK.

We’ll be doing awesome things like downloading the SDKs, setting-up your environment, enjoying some beverages, and a slew of other fun stuff you’ll need to know so you can make your first super awesome BlackBerry 10 app. I think there will be chicken wings too… (Confirmed – there will be chicken wings – Ed.)

Why come you may ask?? If not for the food, beer, and awesome people, everyone else is making BlackBerry 10 apps, so you should probably give into peer pressure and do the same.

Come see us at the Toronto BlackBerry Developer Group at the Fox & Fiddle this Monday. See you all there!

p.s. If you want to get a head start, try downloading the tools and getting your signing keys before the event.

Join Jason Scott (RIM), Mike Hostetler (appendTo) and Jonathan Creamer (appendTo) on November 15th from 2-3 pm EST for an exciting online presentation about using the official BlackBerry® 10 theme for jQuery Mobile.

During this one-hour webinar, our speakers will show developers how they can build Web applications that easily integrate the design elements and UI of the BlackBerry 10 user experience. Our speakers will provide a walkthrough on building and deploying a BlackBerry 10 app using jQuery Mobile, and will also demonstrate how to use backbone.js to create data bindings and a MVC architecture in your jQuery Mobile application.

As always, attendees are welcome to join into the discussion, as questions will be answered by these experts from the jQuery Mobile development community.

Register today!

We’re very pleased to announce that Sencha has released an update to their Sencha Touch framework that brings beta support for the BlackBerry® 10 operating system. For those unfamiliar with Sencha Touch, it is an impressive JavaScript® framework based entirely on HTML5, CSS and JavaScript that is designed to bring an incredibly powerful set of components to create rich mobile applications. Today’s Sencha Touch release not only brings support for BlackBerry 10, but it also supports the BlackBerry® PlayBook™ tablet.

Sencha Touch includes all of the core concepts around Controllers, including refs, control and routes as well as Device Profiles, which enables you to easily develop applications that can present customized UIs on BlackBerry 10 devices and BlackBerry PlayBook tablet. In terms of components, Sencha touch 2.1 supports all the major components which helps you to develop compelling application for the BlackBerry 10 Platform. Sencha Touch supports Forms, DataView, Carousel, List, TabPanel, NestedList and Navigation View, and the BlackBerry 10 specific CrossCut component.

While Sencha Touch 2.1 includes key upgrades such as significant performance improvements, a new and improved charting and data visualization package, a new infinite list component, and enhanced native support through the Sencha Mobile Packager, the most relevant upgrade to BlackBerry platform is the new BlackBerry theme and the new CrossCut component.

With over fifty built-in components, state management, and a built-in MVC system, Sencha Touch provides everything you need to create immersive applications for the BlackBerry 10 and BlackBerry PlayBook tablet platforms. Sencha Touch also provides access to local hardware services like geolocation and accelerometers as well as system services like localStorage, which allow developers to take advantage of hardware features. For more information on Sencha Touch 2.1, visit their website.

To get started, developers should download the framework and then check out the Sencha Touch Learning Center, where they will find code samples, videos and tutorials. To get an idea of what is possible using the framework, there are a variety of demo applications showcasing the breadth and power of the platform. For the complete BlackBerry guide to Sencha Touch, refer to http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Introducing-Sencha-Touch-2-1-on-BlackBerry10/ta-p/1976695

So how do you actually go about integrating features from these services into your application?  First the needs to allow your application access to their profile, and this bring us to Open Authorization – better known as OAuth.

OAuth you say?!

OAuth is an open standard for authorization used by tons of popular services, foursquare, Twitter, and Tumblr, to name a few.  It allows applications to connect their users to these services without having to handle their username and password.

There are a couple versions of OAuth which we have created sample apps for.

OAuth 1

Let’s be honest, OAuth 1 can be darn right nasty to work with out-of-the-box.  OAuth 1 and I are not really good friends, we’ve had many fights over the past year, and often I’ve been on the losing side.  In a nutshell, the way OAuth 1 works is by having an application perform a series of requests to a service, exchanging “tokens”, and ultimately granting the application access to the service on behalf of the user.  It requires several things to go just right, and if something doesn’t, access is denied.

Luckily there is a really awesome open-source JavaScript library written by Rob Griffiths (@bytespider) called jsOAuth. JsOAuth takes the pain and extensive process of OAuth 1 away, and allows you to focus on connecting your app with a service such as Twitter rather than spend a ton of time working with the OAuth 1 protocol.

OAuth 2

While OAuth 1 is my adversary; OAuth 2 is my best friend.  This is the next evolution of the OAuth protocol and is used by services like foursquare, and Facebook.  OAuth 2 is much friendlier for developers to integrate into their apps, and provides much easier, and straight forward authorization “flows” to work with.  Though the standard is still evolving, it’s solid, and in contrast to OAuth 1, is amazingly easy to work with.

The Sample Apps

Getting started with OAuth can be pretty intimidating to say the least.  As a former 3^rd party developer, I’ve been there.  I’ve screamed at my console log, cried like a baby, and even begged the OAuth gods for it to “just work”.  Since joining the BlackBerry® Developer Relations team here at RIM®, I vowed to help make this process easier for fellow developers and I’m glad to finally say that we’ve released two sample apps on GitHub today to help guide you on your OAuth journey.

The first sample app shows how to integrate Twitter into your application by using the OAuth 1 protocol.  You’ll learn how to quickly and painlessly authenticate with Twitter, and post a Tweet to a user’s timeline by taking advantage of the jsOAuth library.

The second sample shows integration with foursquare, and uses OAuth 2.  It’ll show you how your application can authenticate a user with the service, search for near-by venues, and then check-in to a venue.

The third sample shows how to integrate Facebook and OAuth 2 into your application.  You’ll learn how to authenticate a user with Facebook, and interact with their feed by posting, and reading content.

Each of these samples are completely Open Source, and available on GitHub.  If you find them useful, have any feedback, or need an extra helping hand along your way find me on the BlackBerry Developer Support Forums or Twitter @chadtatro.

In honor of 10/10 and the opening of BlackBerry App World™ for BlackBerry 10 app submissions, we’ve put together a list of the 10 most viewed blog posts in the developer blog about BlackBerry 10. It’s been an eventful couple of months! Check out how far we’ve come:

1. BlackBerry 10 Cascades™ is here!
2. Introducing Built for BlackBerry and the $10K Developer Commitment
3. Standardizing on Screen Resolutions for BlackBerry 10 devices
4. The BlackBerry 10 Native SDK Experience
5. BlackBerry 10 WebWorks™ SDK Released!
6. BlackBerry 10 – The Evolution from Beta to Gold
7. Flight Arrival Boards have been posted!
8. The BlackBerry 10 User Agent String Has Arrived!
9. BlackBerry 10 Samples Galore
10. Creating Outstanding Apps with bbUI.js – Community Tutorial

Now, you can submit your app to the BlackBerry App World for BlackBerry 10.

What was your favorite BlackBerry 10 related blog post? Share with us in the comments below!

BlackBerry® developers, you’re in for a treat. If you haven’t heard already, the BlackBerry web platform for BlackBerry® PlayBook™ tablet OS 2.0 supports WebGL. WebGL is an exciting new technology that is designed to offer advanced rendering capabilities and 3D Graphics for web development. Support for this feature was announced during the BlackBerry DevCon Americas 2011 keynote, and developers can use it as part of their HTML5 and BlackBerry® WebWorks™ web applications.

That’s right – if you wanted to, you could build a standalone BlackBerry application, powered by WebGL, using the BlackBerry WebWorks SDK, and distribute that app to other BlackBerry® PlayBook™ tablet users through the BlackBerry App World™ storefront.

This is a giant step forward for the web development community. As one of the first mobile development platforms to offer a native implementation of WebGL to its developers, BlackBerry provides the web development community a unique opportunity to push the boundaries of what they can do in their application content. WOW!

This is amazing! Wait a sec, what’s WebGL?

WebGL is a cross-platform web standard that is designed to define a specification for enabling 3D graphics, powered by OpenGL ES 2.0. Using WebGL, you can create amazing graphics and subsequently more fun user experiences.

Here is a demo of a game named TunnelTilt running on BlackBerry PlayBook tablet OS 2.0. This sample app was created for the purpose of announcing WebGL at BlackBerry DevCon Americas 2011, and it has since been open sourced as the BlackBerry WebGL-Samples repo in Github:

[YouTube link for mobile viewing]

The 3D graphics are rendered in an HTML5 canvas element that is hardware accelerated. This content can even be interacted with using JavaScript™ and the document object model (DOM).

function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);
initShaders();
initBuffers();

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);

drawScene();
}

Code sample: Learning WebGL Lesson 1 (http://learningwebgl.com/blog/?p=28)

Libraries and Frameworks

The WebGL code that provides highly visual graphics can be very complex, and may present a steep learning curve for new developers who are not familiar with the necessary principles. Building compelling WebGL content may require a deep understanding of trigonometry, geometry and Open GL features.

For example, after reading the following tutorial about how to draw a triangle and square using WebGL, ask yourself if you were expecting to see so many lines of code. There may not be the higher level “draw” or “square” primitives and methods that a developer may find helpful in building real-world applications. WebGL offers lower-level primitives to its developers for building content. Why? It’s because WebGL is a language, not an application framework.

Don’t worry if that’s not what you were hoping to hear! Keep reading.

var square = gl.createBuffer();
var square_vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bindBuffer(gl.ARRAY_BUFFER, square);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(square_vertices), gl.STATIC_DRAW);
square.itemSize = 3;
square.numItems = 4;


Code sample: creating a square using basic WebGL constructs.

Many, and I mean many, developers have recognized the need to simplify WebGL development, and have spent a lot of time and energy building great libraries and frameworks for other developers to use. These libraries translate the low-level functionality of WebGL into higher-level APIs that are easier to use in the context of application development.

Another benefit to developers is that all of this is done using JavaScript APIs. So if you are already familiar with the JavaScript language, you are off to a great start. You can continue to use all of the existing JavaScript development tools that you currently use (e.g. Web Inspector, IDEs, Jslint, etc).

A few examples of community-led projects that web developers can use to build great WebGL content include three.js, CopperLicht, SceneJS, GLGE and Canvas 3d library. There are many more, and the list will continue to grow. These libraries have traditionally focused on desktop browsers, which means authors will need to ensure they have successfully been optimized for mobile too. If you end up using a 3rd party library and find a bug, or if you are concerned about performance, please contact the appropriate author(s) and file an issue with them. Many of these frameworks exist as open source, meaning there is a great opportunity for improvement. As a community, we can work together to ensure these libraries work great on BlackBerry.

var rect = new THREE.Rectangle();
rect.set(0, 0, 100, 100);

Code sample: using three.js library to create a square. Only 2 lines of code!

Performance

So obviously there is a mobile version of the WebGL spec, right? Developers can expect to work with a specification that’s optimized for mobile devices and doesn’t have high memory or CPU requirements as desktop computers?

No, actually, there isn’t! OpenGL ES 2.0 does not have a mobile spec. So the same libraries that are used to produce WebGL content for powerful desktop hardware are also the same libraries used to build content for mobile devices.

What does this mean? It means that WebGL code that was designed for desktop browsers will need to be properly optimized to run on mobile smartphones and tablets. If not, you can expect to experience slow rendering or performance. This is very important for developers to recognize: one cannot assume that if it works on desktop, it will also work on mobile.

Community Activity

Many of you have already seen our web platform team members participating in HTML5 and WebGL developer events worldwide. Recently we had delegates attend and present at events such as onGameStart and New Game Conference. Here are some highlights from these events:

“WebGL is huge!!! And the fact that we will be the first tablet to have it built-in is extra-huge. We need to engage aggressively here to showcase our wares … interest in tablets is high.”

- Laurent Hasson, Director Web Platform, Research In Motion® (RIM®) (onGameStart, Warsaw, Poland)

“Good News! We are actually well positioned in terms of technology … There’s no reason we can’t have the best mobile web platform for gaming and game development.”

- Genevieve Mak, Software Developer, RIM (New Game Conference, San Francisco, USA)

This is awesome. I love WebGL. What should I do now?

The following steps can help you learn how to build a WebGL-powered BlackBerry application:

1. The BlackBerry open source project on Github contains a WebGL-Samples repo where developers can download and/or contribute to code examples. In fact, the source code for the TunnelTilt sample app shown above is available in this repo! Download it today and see how JavaScript, HTML5 and WebGL are being used together to provide an awesome user experience.

2. Log into the DevCon on Demand portal and read through the DEV46 session “Advanced Web Rendering: WebGL, Canvas and Gaming” session that was delivered at BlackBerry DevCon Americas 2011. Don’t miss this session, where Eli Fiddler and Ram Rajagopalan from RIM presented a great overview and best practices about using WebGL as well as some helpful code snippets and examples.

3. Take advantage of the many helpful learning resources you can find online, such as learningwebgl.com by Giles Thomas, which contains many tutorials and sample code. Remember: WebGL is a standard that the BlackBerry web platform supports. This means that most – if not all – tutorials, sample code or labs that you will find can be used to assist you in building WebGL content for BlackBerry. Check out the Mozilla Developer network for a robust collection of WebGL learning resources.

4. Discover how you can use Ripple Mobile Emulator to test WebGL content, and the BlackBerry WebWorks SDK to transform that content into a standalone BlackBerry application.

Did you find a bug? Report bugs in the developer issue tracker. Our goal is to provide developers with a world class WebGL experience on the BlackBerry platform, and we want to hear from you to ensure we are doing so.

Finally, I wanted to extend an invite to you to stay in touch with us. We want to know when you have created a WebGL application, framework and/or game content that runs great on the BlackBerry PlayBook tablet. Send us a message or ask a question in the comments below, or else share a great idea in the forums.

BlackBerry PlayBook tablet users who have installed the OS 2.0 beta may have already seen the improved WebKit engine, as it was upgraded starting with version 2.0.0.7262 of the BlackBerry Tablet OS software. The current version of WebKit on the BlackBerry PlayBook tablet comes from a November 2011 branch of the upstream WebKit code base. A complete list of all changes can be found in the Trac for WebKit issue tracking system.

Wait, do you mean HTML5 development on BlackBerry is designed to be even better now?

Yes I do, and you’re in for a treat.

In general, BlackBerry web developers will see enhanced stability and performance in their web applications running on BlackBerry PlayBook tablet OS 2.0. However, some of the more significant improvements include the following:

• Support for WebGL, including 3D context and native binary data. Take advantage of Open GL ES technology and 3D graphics in your BlackBerry application content.
• Updated Web Inspector is now designed with better debugging support. New features such as settings menu, network panel, contextual menus and pretty print JavaScript® make it easier for developers to debug and optimize their web content.
• HTML5 canvas is now hardware accelerated, meaning it is designed for faster performance and higher frame-per-second (FPS) rendering of 2D graphics content.
• CSS3 accelerated animations and transforms are now smoother thanks to high quality service improvements to graphics rendering for the engine.
• Added FileReader API, which is designed to search, retrieve and display files from the BlackBerry Tablet OS shared folder, and helps integrate camera pictures, videos, music and documents from the BlackBerry PlayBook tablet into your web applications.
• Improved HTML5 support including new form fields (keygen, output, meter) and input types (text, search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range).
• Enhanced XmlHttpRequest object adds support for text and array buffer response type

Show me!

I know you’d much rather see some of these awesome improvements yourself instead of just reading about them, so here are some examples. Using the browser application on a BlackBerry PlayBook tablet running Tablet OS 2.0, open the following pages:

• HTML5 Test – Tablet OS 2.0 currently scores 354 on the HTML5 test, ranking it at the top of the results for tablet browsers. Created by Niels Leenheer.
• TunnelTilt game – Try out the WebGL sample which was demonstrated onstage for the first time at BlackBerry DevCon Americas. Created by Jonathan Feldstein.
• Craftymind GUIMark3 – Performance test from CraftyMind that measures the frames-per-second the HTML5 canvas element can handle under load. Created by Sean Christmann.
• File Reader API – pPge from the kitchenSink BlackBerry WebWorks sample application that demonstrates how to use the file reader API. Created by Adam Stanley.
• Holiday DOM tree – Uses 3D transforms and HTML form elements to display an animated tree of various holiday greetings. Created by Hakim El Hattab.

Meet the Web team

Recently, I asked members of the BlackBerry® Browser team to share their thoughts about the meaning behind the high-quality improvements they have delivered to developers as part of the Tablet OS 2.0 web platform. Here is some of their feedback:

“I know many web developers who now use the BlackBerry PlayBook tablet as their mobile development and testing environment of choice. The support for remote Web Inspector is simply awesome, and a year after we introduced it, remains a defining aspect of our approach to mobile web development. We have made it even better!”

- Laurent Hasson, Technical Director, Web platform

“Personally I’m most excited about all the graphics and animation improvements (CSS3, HTML, canvas, WebGL). I think we’re most proud about being able to bring the full web to tablet – proper implementation of the standards and specifications coupled with a rich, touch-friendly user experience.”

- George Staikos, Vice President, Web Technologies

How do I get started with BlackBerry web development?

I’m glad you asked. Visit the BlackBerry HTML5 WebWorks developer site to learn more about developer tools, such as the Ripple emulator or the BlackBerry WebWorks SDK. See the developer documentation and reference guides for techniques on how to transform samples into fully-featured BlackBerry applications.

Most importantly, tell us if you create something awesome! We want to hear from you.

Hope you enjoy BlackBerry PlayBook tablet OS 2.0.