We’ve been working the last few months with the team at Sencha to bring the support for BlackBerry 10 out of beta and ready to be used by developers.  We’re glad to announce with Sencha that the wait is over! Performance and a full BlackBerry 10 theme are here for BlackBerry 10.  Now, you can develop visually compelling applications using components in Sencha Touch 2.1.1 without worrying about the performance. The Webkit rendering optimization from the BlackBerry 10 Web platform combined with the Sencha’s performance optimization resulted in great venue for the developers who are developing this application for the first time. Additionally, these optimizations will also help developers who have already developed a Sencha Touch application and are looking to bring it to the BlackBerry 10 platform.

If that wasn’t enough by itself, we are very happy and excited to announce that the latest Sencha Touch release has the full support for BlackBerry 10 theme.  As mentioned at BlackBerry Jam 2012, Sencha is committed to supporting BlackBerry 10 and we’ve been working together with their team to bring these new visuals to their product. With this theme support you can start building BlackBerry 10 themed HTML5 applications using Sencha Touch to give your application the BlackBerry 10 native look and feel. Sencha and BlackBerry are committed to delivering the best platform for building BlackBerry 10 applications with open web standards. The latest Sencha Touch release delivers the BlackBerry 10 native look and feel to most of the UI components such as Forms, DataView, Carousel, List, TabPanel, NestedList and Navigation View. Let’s take a closer look at some of these UI components, styled for BlackBerry 10.

Form Elements

Form Elements are one of the most common mobile UI elements, and a building block for many applications, and Sencha has given that native BlackBerry 10 look and feel to them. So, if you want your application to look and feel like a BlackBerry 10 application, you should definitely take advantage of these form elements.  The input adapts to the virtual keyboard as well.  If you have an input type of password or email, keyboard changes configuration to match the input type using standard HTML5 integrated elements.

Action Bar

Sencha Touch also includes BlackBerry 10 specific components. The first one we’ll look at is the action bar at the bottom.  The action bar is a styled Sencha Tab Panel and it’s designed in a way that you can switch between pages very easily and this is the same type of design you see in the BlackBerry 10 native applications. You can see this same sort of design with other frameworks, and Sencha has brought the same design to be used for BlackBerry 10 developers.  As you can see, it adapts whether you are in portrait or landscape.

CrossCut Menu

In addition to above, the BlackBerry 10 CrossCut menu is also supported by the BlackBerry 10 theme as a new Sencha Touch component. As a developer, you can leverage the CrossCut menu component to create compelling BlackBerry 10 style application using just web technologies and give the native BlackBerry 10 look and feel to the app.  If you’re interested in using the component, it’s the new Ext.bb.CrossCut component (xtype: crosscut). Here is the code snippet, which shows how to use the CrossCut component with in the Sencha Touch framework. The complete reference for the CrossCut menu is available here.

To enable the BlackBerry 10 theme, refer to the Sencha blog post for instructions.

If you are new to Sencha Touch, it is an impressive JavaScript® framework based entirely on HTML5, CSS and JavaScript, and 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 continues Sencha’s support for the BlackBerry® PlayBook™ tablet.  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.

If you have a Sencha Touch application already and looking to bring it over to BlackBerry 10, stop worrying.  You can bring your Sencha Touch application to BlackBerry 10 in few steps.  Here is the complete porting guide and the developer video, which shows you step by step instructions to bring your Sencha Touch application to BlackBerry 10.

code:

a.icon.good2 {
	background: #215387 url(test-sprite@2x.png) 4px -6px / 40px 82px no-repeat;
	}

Note: Including the size in the background property is not supported in older browsers. See example 2 below for a more backwards compatible solution.

Issue:

The W3C spec for the background shorthand property specifies that when declared without a size property it initializes size to ‘background-size: auto auto;’. Previously there was quirk with WebKit where if size was omitted it just didn’t initialize the size property for the background. This allowed for a previously declared background-size declaration to remain intact, displaying the image at its proper size. This quirk has since been removed and the latest release of WebKit now follows the W3C spec.

Bad code

a.icon {
	background-size: 40px 82px;
	}
a.icon.bad {
	background: #215387 url(test-sprite@2x.png) 4px -6px no-repeat;
	}

Produces

Solution

1. Add size to the background short-hand property and eliminate the background-size property

Code

a.icon.good2 {
     background: #215387 url(test-sprite@2x.png) 4px -6px / 40px 82px no-repeat;
}

Produces

2. If you must resize a background-image via a background-size property declare background size after the background property so it isn’t overridden.

Code

a.icon.good {
	background: #215387 url(test-sprite@2x.png) 4px -6px no-repeat;
	}
a.icon.good {
	background-size: 40px 82px;
	}

Produces

References:

http://www.w3.org/TR/css3-background/#the-background
https://bugs.webkit.org/show_bug.cgi?id=97761
http://lists.w3.org/Archives/Public/www-style/2012Oct/0112.html
http://caniuse.com/#search=background-size

Today, I am thrilled to tell you that the BlackBerry® 10 browser meets the Ringmark Ring 1 benchmark standard for HTML5 app compatibility. The browser team here at RIM has been working closely with the HTML5 experts at Facebook, who developed the Ringmark HTML5 test suite, to ensure the BlackBerry 10 browser would meet the standard. By meeting the Ringmark Ring 1 benchmark standard, developers can add a level of advanced functionality to their HTML5 apps and be confident that the BlackBerry 10 browser can execute the app without problem.What is Ringmark?
Ringmark is an HTML5 test suite developed by Facebook and delivered to the Open Source community. It identifies a much needed standard to ensure consistency and a basic level of functionality for HTML5 app developers. In fact, Facebook says, “One of Ringmark’s primary goals is to prove that web features work for mobile web developers.” This is a great benefit to web developers and we wanted to showcase our support for this kind of standardization initiative. More info is available here – check it out or you can run the test suite against your mobile browser by visiting http://rng.io. Developers with a BlackBerry 10 Dev Alpha testing device running the latest BlackBerry 10 developer OS, will find that the browser passes all the Ring 1 tests successfully.

What is Ring 1?
Ringmark connects various features into tiers, or Rings. Ring 1, which is actually the second tier, identifies functionality developers would need at a fundamental level to build some of the more advanced types of apps in HTML5, such as 2D games, music and video apps, and camera apps.

So, where do we go from here? On to Ring 2! We’re diligently working to continue our support for the Ringmark standard and to provide developers an increased sense of confidence in the web as a platform.

We’re no strangers to the importance of standardization – especially in support of Web technologies. I’m proud to say that the BlackBerry 10 Browser is not only the highest scoring browser for HTML5 standard support (on html5test.com), but is actually built entirely in HTML5! Talk about putting your money where your mouth is, right?

We also participate in W3C’s Core Mobile Web Platform Community Group (AKA CoreMob), along with Facebook and other organizations dedicated to promote the adoption of the mobile web as a platform for app development.

Check out Ringmark and let us know what you think. And, in the meantime, score another amazing achievement for the BlackBerry 10 browser!

On Thursday, October 18^th user groups around Los Angeles are organizing an event for all to come and learn a little more about this thing we call mobile development – Mobile Camp LA. Regardless of what floats your boat (game development, UI frameworks, cross-platform strategies, etc.) there are sessions for everyone.

In addition to these sessions (including an in-depth look at the Ripple tool by our very own Gord Tanner), we’ll be having another kind of activity that runs throughout the day. Once again we’ll be out in the community providing developers who are serious about getting their apps on BlackBerry® 10, with the opportunity to take home a BlackBerry 10 Dev Alpha testing device.

How do I qualify?

I’m glad you asked. First, you’ll need to have an application that you’ve developed using PhoneGap and you’ve already taken to market outside of BlackBerry App World™.

Next, you need to bring your application source (or an already compiled BAR file) and we’ll get it up and running on a BlackBerry 10 Dev Alpha testing device. If all goes well, we’ll have a station on hand where you can submit the newly created application to BlackBerry App World, and you get to walk away with the device!

If there are obstacles, well that’s what we are there for and we will do all we can to assist you in overcoming them on site and getting your app submitted. If they cannot be addressed on site, we will take your contact information to provide continued support after the event.

Most importantly, you need to be one of the first ten developers to do so!

What can you do to speed up the process and get your hands on one of these devices and  back to the conference and sessions as quickly as possible?

• Pre-register as a BlackBerry Developer in the BlackBerry App World Vendor Portal. The entire process is free.
• Request your BlackBerry Code Signing Keys in advance.
• Have your laptop, application source, and development tools ready to go.

For those that haven’t heard, obtaining a Blackberry 10 Dev Alpha testing device will be one of the steps to a limited edition BlackBerry 10 smartphone after the launch in Q1 2013 – details to follow. Submissions received will also be eligible for the 10k Developer Commitment!

When the BlackBerry 10 Dev Alpha testing devices run out, we will be entering other developers who visit us at the booth in a raffle to win BlackBerry® PlayBook™ tablets. Remember, if you can get your app working on BlackBerry PlayBook, it can easily be ported to BlackBerry 10.

We’ll be there throughout the conference to assist PhoneGap developers with their porting, so be sure to plan out the sessions you want to see accordingly. To get a better idea of what’s being offered, be sure to visit the Mobile Camp LA event page.

See you on Thursday, fellow devs! Follow me on Twitter for updates at @WaterlooErik.

There is still time to register for the October 11^th  webinar “Beta 3 update for the BlackBerry® 10 WebWorks™ SDK”.

As planned, this release delivers a number of significant features that were listed on the WebWorks beta roadmap.  In fact, we made an even bigger splash than anticipated by providing more features than promised (see release notes). Some highlights include: BBM™, contacts, notifications, localization and cards support through the invocation framework.

What do these features look like and how can you use them in your own BlackBerry 10 WebWorks applications? Join me, Adam Stanley, and Erik Oros from BlackBerry Developer Relations for a hands-on demonstration and interactive discussion about some of the new features and changes provided in the latest version of the BlackBerry 10 WebWorks SDK.

We found many examples of things we’re doing right (e.g. automatic updates in Ripple). However, as we hoped to find, we also discovered examples of sub-optimal experiences where new developers could possibly be road blocked in their ability to complete their BlackBerry application. It is these latter examples that proved why we ran this exercise, and we are committed to continuing this review and will re-evaluate the platform again on a regular schedule.

Our group first started by identifying who our development community was. How did they think? What was important to them? How would their potential backgrounds influence how they flow through the “getting started with BlackBerry” experience? Our focus was on the following 5 personalities:

• “The coder” – Lives in a text editor and can modify their own path variable. Comfortable troubleshooting advanced issues without assistance. Likely have built a mobile app already.
• “The beginner” – Just getting started with mobile development or are evaluating BlackBerry Web dev. May have strong development skills in another language or none at all.
• “The desktop web developer” – Have a very strong understanding of client-server web development. Have successfully built web sites and may have used frameworks like jQuery, Sencha or Dojo.
• “The enterprise developer” – Cross platform is a primary goal. Prefers to use IDEs and typically works under an IT enforced environment.
• “The PhoneGap developer” – Someone who has come to the BlackBerry developer site to learn how to port their PhoneGap application

So what did we find? Lots! In fact, I’m still going through all the feedback. Everything from “would be nice” changes to “this is a gating bug and must be fixed” is being documented, and our intent is to file issues so the public can track them in the developer issue tracker . Here are just some of the results from the group:

• Discovery process: Search engine optimization should be improved. Keywords that each developer persona would expect to search for did not always generate correct search results.
  [Michelle] Search term: “enterprise development for BlackBerry 10” on Google. First result is to register for an outdated/unrelated course; next search results are for BlackBerry® Enterprise Server development.
• Sample applications: A number of BlackBerry WebWorks sample applications are published in Github. We need to refine the flow of navigating a user between blackberry.com and github.com. Also, for new developers, Github is unfamiliar. Some preparation of what to expect and how to use it will be helpful:
  [Kevin]: Sample apps… I am not super familiar with Github. Didn’t like getting dumped into git for samples. I’d prefer to get a zip to download. Managed to figure it out then.
  [Brent] – Click the link for samples on Getting Started – Taken to Github – what is Github? And what are these samples for – what do they do?
• HelloWorld sample: More developers will successfully complete the “Creating HelloWorld for BlackBerry 10” tutorial if we provide a direct link to a ZIP file that contains the sample application assets.
  [Brent] HelloWorld sample – copying and Pasting seems like a waste. Possible to download the helloworld package? – Creating config.xml in notepad and pasting the copied xml text puts it all on one lovely line. #NotImpressed
• Ripple: The Ripple Mobile emulator is currently designed to build and sign a BlackBerry WebWorks application. It also provides an option to deploy to a target device, but only when the app is unsigned. For simulators this is ideal; however, not for live devices where a debug token would be required. Not all developers want / know how to use a debug token.
  [Ed] The build choices are confusing and missing the one option I want. I want “package and sign, or package sign and deploy” to a real device. Package and launch is confusing because I don’t want to package and launch to a simulator, but when I do want to for a real device, I want it to do so signed, not with debug tokens I don’t use. I suggest: “Package”, “Package & Sign”, “Package & Sign & deploy” (to a real device” and “Package and launch” to simulator. the last one, the least likely to use.

Here’s how you can send us feedback -

1. Join the discussion in the BlackBerry Web and BlackBerry WebWorks community forum.
2. Log into the developer issue tracker and file a bug report. Remember to provide as much detail as possible about how to reproduce the problem and what are the expected / actual results.
3. Let’s have a chat via @BlackBerryDev on Twitter® or the BlackBerryDevCommunity on Facebook®.

Questions like these are very important and the reasons why I and nine others from our team have gathered today to analyze and explore further.  In the room today we have:

• Developer Relations: Adam Stanley, Michelle Mendoza
• R&D: Chris Del Col, Dan Silivestru, Matt Lantz
• Documentation: Ryan Lehman, Kevin Bater, Kate Wilhelm
• Product Management: Tim Neil
• Wireless Application Architects: Brent Thornton, Ed Bourne

The goal of today’s exercise is to take a step back, and put ourselves in the shoes of our development community.  We are putting the BlackBerry HTML5/WebWorks platform under a microscope to get a deeper understanding of its DNA.

Everyone in the room is uninstalling their SDKs and clearing their minds in order to live through the experience of getting started with BlackBerry Web development for the very first time.  We’re putting on the hats of different developer personalities and discovering how those mindsets affect how they discover the platform, read use our documentation, access samples and use our SDKs.

We want to ensure a developer never has to get stuck at “Now what do I do?”  The next step, whether it is downloading Ripple, installing a code signing key or testing via remote web inspector should be clear.

How did you get started with BlackBerry dev for the first time?

@n_adam_stanley#bbdevxp Sample Apps always be the best way, off course later its necessary read the documentation =)

— PabloC (@twipoc) October 3, 2012

@n_adam_stanley The first apps were all copy&paste from samples.#bbdevxp Now doing the same on #bb10

— Simon Hain (@SimonHain) October 3, 2012

As the folks who are behind the scenes actually building the tools, websites and learning resources that developers use, it’s important we are clearly providing a positive experience that enables our developers to be successful.  Right now we are ½ way through the day and we’ve discovered finding proactive ways to make the existing experience even better for our web community.  Some examples include:

• More focus on putting samples at the forefront of the getting started process.
• Providing offline documentation.
• Better linking between API reference guides, samples and developer documentation.

I want to hear your feedback.  Tell me what was important to you as a developer when you first started and I’ll make sure your voice is heard.

Post a comment below or send us a tweet using hashtag #bbdevxp or post in the BlackBerry Web community forums and let us know what’s on your mind!

It’s with great pleasure that we announce the inclusion of BlackBerry® 7 and BlackBerry® 10 platforms to the resource site “When can I use…”.

When can I use… features tables that detail desktop and mobile browsers support of web standards such as HTML5, CSS3, SVG and more.

The BlackBerry Website Relations team worked very closely with Alexis Deveria (founder of “When can I use…” and a developer) to ensure all supported tags and values were properly tested. Alexis used our BlackBerry simulators (BlackBerry 10 WebWorks™  SDK and the BlackBerry WebWorks Smartphone SDK to complete the testing. RIM would like to thank Alexis for his efforts. His tests validated what we already knew – this is one great browser!