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.

I’m super excited to be presenting three sessions at BlackBerry Jam 2013 in Orlando next week! As a former 3^rd party developer I’ve had the chance to attend several BlackBerry events over the past couple of years. Now that I’m working on the Developer Relations team I’ve got the opportunity to not only attend these awesome events, but also present some killer content to my developer friends!

Here’s what I’ll be doing next week:

Are you building an app which requires a solid database of venues, and an amazingly easy API to interact with? Myself, Erin Rahnenfuehrer, and Kyle Fowler of Foursquare will be presenting JAM37, “Building context-aware applications by leveraging the power of Foursquare APIs”.

Looking to make to most out of your app by connecting it with all the big name social networks like Foursquare, Twitter, Facebook, and LinkedIn? Again, myself, Erin Rahnenfuehrer, and Kyle Fowler will be presenting JAM52, “Get Social: Connecting your app to Facebook, Twitter, Foursquare, and more!”.

Are you trying to make the most out of your BlackBerry World app reports? Jerome Carty, the creator of Blaq, and I will present an in-depth look at how to measure the success of your app using BlackBerry World Reports, and enhancing them with Distimo Analytics.

Which sessions are you looking forward to the most?  Let me know on Twitter (@chadtatro), and I’ll see you in Orlando!

Looking for a *simple* #html5 PLATFORMER engine (mario, sonic, metroidvania)? GUI, particles, 60fps, sfx+ mcfunkypants.com/ludus/ #LD48 #1gam

— Christer Kaitila (@McFunkypants) April 23, 2013

A few days ago, Christer Kaitila (better known as @McFunkypants to some) dropped news regarding the HTML5 based platformer engine called Ludus. Initially, I was a little disheartened as it appeared the engine was targeted solely towards the Windows 8 platform, a peculiar thing for an engine that leverages cross platform technology. I was delighted to find this was not actually the case and that Ludus is in fact crafted in the true open spirit of the web.

Armed with this knowledge, I wanted to get a sense of how the engine performed on BlackBerry 10, and proceeded to build both of the sample applications, Rubba Rabbit and Gwendolynn, with our BlackBerry 10 WebWorks SDK.

Rubba Rabbit running on a BlackBerry Z10. Not Pictured: The funkiest of sound tracks.

As the engine revolves around HTML5 technologies, the sample projects were already 90% of the way to being BlackBerry 10 applications. One missing component was the config.xml file which is leveraged during packaging to specify various components (application name, author, icon images, etc.) To simplify the process, I leveraged the BlackBerry WebWorks config.xml generator by Nuno Donato (@nunodonato). I was even able to set an appropriate icon and splash screen thanks to the image resources included with each project.

In fact, that’s another thing that’s pretty awesome about Ludus. If you visit the Woot Studio landing page, you’ll get a lot of good information, a behind the scenes look at the two samples, and something many game developers treasure: Free Game Art. Currently there are three themes (Outer Space, Steam Punk, and Zombie) ranging across a number of categories (characters, weapons, effects, etc.)

Gwendolynn running on a BlackBerry Z10; satisfying my passion for looting and jumping.

With my config.xml files in hand and making no changes to the actual sample project files, the next step was to leverage the Ripple tools in packaging the HTML5 resources into a BlackBerry 10 application. Once packaged, I had a signed BlackBerry 10 application (BAR file) that I then deployed to both a BlackBerry Z10 and BlackBerry Q10.

Overall the process took maybe ten minutes download-to-deployment. For developers that don’t have a BlackBerry 10 WebWorks environment set up, there are a few things you will need for an initial setup:

1)      Download and install the BlackBerry 10 WebWorks SDK.

2)      Request and install BlackBerry 10 Code Signing keys.

3)      Leverage the command line or Ripple to package your HTML5 project.

Following this, creating BlackBerry 10 applications from your existing (or new) HTML5 projects down the line will take no time at all.

Some Things That Made Me Smile

One of the things that I was really happy to see was that I was able to deploy the same packaged application (BAR file) to both the BlackBerry Z10 and BlackBerry Q10 without modification. The game resources scaled well and both applications were playable on both devices.

In fact, on the BlackBerry Q10, I was very pleased to see that the WASD and space bar controls worked right out of the box! This left me with both touch screen and keyboard control options on the BlackBerry Q10 where screen real estate is more limited than the full touch BlackBerry Z10.

Aside from a few hiccups, performance was great, averaging approximately 55 frames per second. The fact that I didn’t need to change any code for my initial deployment was just icing on the cake.

Some Things to Look Out For

On a whole I’m very pleased with my initial look at the Ludus engine, but there were a few things that came up that developers may want to keep in mind. The first thing I noticed was that pinch to zoom was permitted, meaning if I was interacting with the touch screen, two controls at a time, occasionally the screen would rescale instead of processing my touch events. Luckily, we’re able to set the <meta> viewport element to disable user-scaling and there is a Knowledge Base article on how to accomplish this for BlackBerry 10.

Related to the above, there were a few instances where the screen resized which forced the application into a paused state. This appeared related to how the screen coordinates were being interpreted following the scaling and the pause button located in the center of the screen was inadvertently being “interacted with”. With the above viewport modification though, this issue went away.

Finally, I did notice a slight stutter on occasion if I was collecting multiple items at once. As best as I could tell, this was related to 3-4 sounds playing simultaneously on top of the background music. Once the Web Audio API lands in BlackBerry 10, we’ll be able to do a whole lot more.

That being said, the good far outweighs the above, and we have gameplay videos to prove it. Here we have a BlackBerry Z10 and BlackBerry Q10 playing both Rubba Rabbit and Gwendolynn.

All in all Ludus is looking to be a very promising platformer engine and I’m excited to see what the HTML5 community does with it. The next steps are to dive into a project of my own to get a sense for the actual development process; I’m looking forward to it already. If you’re doing any development yourself, or have any questions about the BlackBerry 10 aspect, I want to your feedback and insight! Don’t hesitate to reach out via Twitter (@WaterlooErik) or email (eoros@blackberry.com).

Lastly, a big thank you to Woot Studio, McFunkypants and PlexiPixel for their contribution to the HTML5 community with this project.

So what is a Built for BlackBerry app? In a nutshell, a BFB app is an application which is designed from start-to-finish to be awesome in performance, looks, and functionality. Apps which apply for, and pass, the Built For BlackBerry program tell users that this app meets BlackBerry’s high standards for quality and performance.

My latest sample app was created to give you a head start in achieving the BFB designation, allowing you to focus more of your time on the functionality of your app, rather than the actual UI and setup. It’s simply a starting point/blank slate for you to work with and customize.

I’ve incorporated all of the features we look for in a Built For BlackBerry app. Right out of the box you’ll have an application that meets the BlackBerry 10 UI guidelines, connects to BlackBerry Messenger and to the Share Framework. There are also several other features including: App Menu (swipe down), Toasts, Window Covers, and device specific Splash Screens. I’ve even included CSS media queries to show you how to style your app on a Z10 vs. Q10 with CSS!. This will allow you to quickly customize this “boiler-plate” to meet your own needs and focus on the content of your app rather than getting the “right” look.

Check-out the application over at GitHub.

If you find this sample useful, have any questions, or just want to keep up-to-date on the world of BlackBerry WebWorks and HTML5, follow me on Twitter!

We’re offering developers in Milan, Italy and Madrid, Spain the chance to visit our local Tech Centres and spend a day with us learning about developing applications for BlackBerry 10 using the BlackBerry 10 WebWorks SDK.

If you are an HTML5 /Javascript/CSS developer and want to leverage your existing skills to create BlackBerry 10 apps, then this is the course for you.

We have full day instructor led course, free of charge, running in Madrid on 9^th May and Milan on 21^st May in our respective Tech Centres. You will create, compile, package and deploy on your own system during the hands on labs.

After attending this course you should be able to:

• Describe the current technical landscape as it relates to BlackBerry application development
• Set up a development environment in order to create BlackBerry 10 WebWorks applications
• Create, compile, and package BlackBerry 10 WebWorks applications
• Deploy and test BlackBerry 10 WebWorks applications

To find out more and to register please visit http://www.gpxs.net/en/courses?v=27000103

We’re excited that the BlackBerry Certified Builder program has launched! If you have expertise in Web/HTML5 or native application development for the BlackBerry platform, then you’ll want to keep reading to understand all the benefits that this program offers you.

To achieve the BlackBerry Certified Builder designation, you must pass a thorough exam designed to test your knowledge in either Web/HTML5 or native application development. Once you pass the exam and earn your BlackBerry Certified Builder designation, it’s yours to use as you choose to show that you have successfully met BlackBerry’s high standards for development quality, skill, and knowledge.

Getting Certified

You need to write an exam to become a BlackBerry Certified Builder. There are two streams:

1. BlackBerry Certified Builder for Web – This is for those developing Web applications using the BlackBerry 10 WebWorks Software Development Kit.

Review the guidelines to see if you’re a candidate for this certification.

2. BlackBerry Certified Builder for Native – This is for those developing applications using the BlackBerry 10 Native Software Development Kit and Cascades UI framework.

Review the guidelines to see if you’re a candidate for this certification.

We have links to resources on our BlackBerry Certified Builder website to help you get ready for the exam. Check them out here.

You can take the BlackBerry Certified Builder exam at one of the designated test centers of our certification vendor, Prometric. They have hundreds of test center locations around the world so you should be able to find one in your region. Visit the Prometric website to find a location near you, search for seat availability, and schedule or cancel exams.

If you want to know more about the logistics of writing the exam, finding out results, or exam retakes and security – you can check out the Terms and Conditions.

Benefits and perks

Anyone who successfully earns their BlackBerry Certified Builder designation will have access to an icon they can use as a quick visual to let employers, colleagues, and the developer community know they are certified.

“A beautiful use of the BlackBerry 10 technology.”

“An absolutely amazing app. Well done.

Many of these reviews refer to USA TODAY as a Native app – in fact, some encourage Native developers to produce apps of this quality – especially impressive as it is a 100% HTML5 WebWorks app.

“Great Native App. Very addictive as you can easily navigate through the menu”

“Watch and learn, that’s how you make a native app”

“Must have. Go native or go home!”

USA TODAY is a perfect example of what can be achieved using HTML5 and the powerful BlackBerry 10 WebWorks Platform to produce an app that proudly carries the Built for BlackBerry ribbon.

Performance

Performance was critical to USA TODAY – news, sports, weather, pictures and video sections are combined into a responsive, intuitive viewing experience. Each section contains subsections, while each subsection contains lists and grids of articles. With this much content, view management becomes quite difficult. Having worked closely with Backbone.js (http://backbonejs.org) for a few years, I did not hesitate to recommend it to be the ‘backbone’ of the USA TODAY application.

Backbone.js is a MVC (Model-View-Controller) framework that provides the tools and discipline to write de-coupled, re-usable code while not imposing any non-standard syntax. It is also highly customizable, which is ideal for large projects.

The USA TODAY application uses Backbone.js to its full potential. Articles, gallery, weather, videos, and other data are stored as Data Models and Collections, which are passed to views that combine the data with HTML templates to display it on the screen.

A View is a JavaScript object that contains a set of properties and methods responsible for displaying a region of the application UI. The View also maintains its own DOM structure, which is typically compiled with data to render and display on the screen. HTML templates are code snippets that are re-used across an application. These templates may vary from static pieces of UI to complex dynamic views that contain logic such as loops.

These views are also responsible for listening for changes in the data of the collections and updating regions of UI when a change occurs. Picture the weather section for example: if the weather data on the server changes, we need to update the UI. In order for the UI to reflect the change in the weather and change the graphic from cloudy to sunny, the data model can explicitly tell the view to update, but by doing so, the view becomes tightly coupled with the data model. If we were to add a weather widget to the main screen of the application – we are also required to add a call its update methods from within the data model and so on.

Backbone and other MVC frameworks encourage the use of Publish/Subscribe programming pattern, where views subscribe to changes on the data model. When the data changes on the server, subscribed views receive a change notification, which typically triggers an update of UI. The data model does not need to be aware of what views are subscribed, and therefore remains flexible and de-coupled. This is very similar to how we bind to click events on buttons – imagine having to change the button’s logic to call functions, versus listening for click events.

This pattern also allows for smaller UI region updates. For example, we can bind a function to only update the current weather UI region, if the weather for the week hasn’t changed. Smaller UI updates result in smaller re-render regions, which drastically improve performance, especially when targeting mobile.

The USA TODAY application uses this pattern throughout the application, which makes UI updates efficient and seamless.

Code organization

As the complexity of any application increases, organizing code into modules becomes a necessity. Unfortunately, JavaScript does not natively satisfy all use cases for ‘modules’ yet, so USA TODAY relies on Require.js (http://requirejs.org) to separate code into neatly organized modules that are confined to performing a single task. Require.js supports Asynchronous Module Definition (AMD), that allows modules to be loaded as needed at run-time, rather than making them available as the application initializes using tags. Require also adds the ability to define dependencies, similar to more traditional languages such as C++ and Java. This ensures required scripts or templates are available to the module when it is initialized. This also means fewer name conflicts, as libraries and functions are defined in the scope of the module rather than globally, as with the tag.

The source code for USA TODAY is inside an intuitive folder structure. Views, collections, models and templates are separate. Logic, structure and styles are separated into JavaScript, HTML and CSS respectively, which is a great practice for all HTML5 developers. This allows for easy maintenance and debugging as well as adding of new features, while maintaining stability. Modules can be swapped in and out, as they are designed to be de-coupled from one another, and communicate with each other using a router and URL hashchanges.

UI/UX decisions

Aside from great performance, USA TODAY offers stunning native looking graphics and transitions that make it shine as a Built for BlackBerry App.

The menu, action bar and all other UI elements were made from scratch to closely mimic their native counterparts. They’ve closely followed our UI guidelines, including colors, graphics, sizes that make this application practically indistinguishable from a native BlackBerry 10 application.

(http://developer.blackberry.com/devzone/design/bb10/application_structure.html).

When viewing an article, frequently used actions such as font size and share are located on the action bar, which is very intuitive to both existing BlackBerry 10 users as well as those new to the platform.

Within the article, USA TODAY allows navigating back and forth using swipe gestures. This allows the reader to navigate through a list of articles without ever leaving the article view – a fantastic UX decision that keeps the user immersed in the experience, which is one of the core promises of the BlackBerry 10 platform.

Using the font action, readers can quickly modify the font-size, which is a key feature in any news reader app.

The main menu reveals itself as the content view slides out in a smooth transition, thanks to hardware accelerated CSS3 animations. There is lots of attention to detail here – transitions are timed in way that they don’t interfere with each other, such as the gentle fading out of the content view to focus on the menu, which is done right after the menu is fully revealed, as to not interfere with the sliding animation resulting in a smooth transition.

The main menu is a great example of how to provide intuitive, easy to use navigation for an application that includes a ton of sections and sub-sections. It is also an excellent example of how developers can extend our UI guidelines to enhance the User Experience further. Unlike other BlackBerry 10 Applications, the menu contains sections as well as sub-sections, which adds a great personal touch to the user interface and makes an excellent use of space from a User Experience perspective.

Within ‘Day in Pictures’, clicking on a photograph reveals slideshow mode. Using WebWorks API, device orientation is rotated to landscape and photos are displayed and scrolled in widescreen HD. Tapping on the photo will reveal the header, description and action bar, which fades away in a few seconds – another example of attention to detail. Navigating between photos is done by swiping gestures very much like in the native Pictures app for BlackBerry 10.

(API here: https://developer.blackberry.com/html5/apis/blackberry.app.html#.rotate)

Service Integration

Each article displays a share icon on the action bar, which integrates with the BlackBerry 10 Share framework to display all available media where the article may be shared. The USA TODAY application makes use of the invoke WebWorks API to query the device and return a list of all applications that can be used to share content.

(API here: <a href=”https://developer.blackberry.com/html5/apis/blackberry.invoke.html#.query” target=”_new”>https://developer.blackberry.com/html5/apis/blackberry.invoke.html#.query)

Conclusion

When starting a new HTML5 project, developers have a plethora of frameworks to choose from. Some are used for data and view management alone, while others provide all-in-one solutions, both platform-specific and platform-agnostic. By leaning towards a custom solution with the help of Backbone.js and Require.js, developers at Clearbridge Mobile Inc. remained completely in control over the performance and user experience from start to finish, resulting in a very responsive and attractive application. They’ve followed our UI guidelines, integrated platform services and added a personal touch to the user interface. As a result, USA TODAY is a perfect example of how to build a stunning HTML5 application that is truly Built for BlackBerry.

A typical BlackBerry 10 application consists of a number of full-screen views, containing elements (headers, footers, lists, buttons, etc…) that are stacked to take up available screen estate.

This article outlines layout techniques that may be used to create such views in HTML5/WebWorks applications, targeting the BlackBerry Z10 and BlackBerry Q10.

This is a typical vertical stack layout with a header, content and footer. The header and footer typically have a fixed height, while the content section stretches up to fill available space depending on screen size.

Absolute/Fixed layout pattern

The absolute/fixed layout allows developers to position elements anywhere on the screen using x and y coordinates. This is not uncommon in layouts today, and is quite easy to implement as long as the number of root elements (header,content,footer) remains low. The developer is required to provide exact dimensions and positions of all elements so they don’t overlap and appear to be ‘stacked’. As the number of root elements increases – for example we add a search bar to the root, it’s top value is positioned at (height of header) px, while content top is be positioned at (height of header + height of search bar) px, and so on.

Source with comments here: https://github.com/anzorb/UI-Layouts/tree/master/absolute

HTML:

<body>
    <div id=”container”>
        <header>
             <section id=”search-bar”></section>
        </header>
        <content></content>
        <footer></footer>
   </div>
</body>
</pre>

CSS:

/* set all sections to absolute */
body,html,.container{
	width:100%;
	height:100%;
	background: #181818;
	margin:0;
}

/* set all sections to absolute */
header,
.content,
footer{
	position: absolute;
}

/* when absolute, we need to explicitly specify the top and bottom coordinates to fill content in */
.content{
	top:240px;
	bottom:120px;
	width:100%;
	background:#181818;
	/* scrolling properties */
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

/* common attributes, such as background color and width to stretch to cover the whole screen */
header,
footer{
	background:#bbbbbb;
	width:100%;
}

/* when using absolute, it makes more sense to place the search bar inside of header */
header {
	top:0;
	height: 220px; /* 100 (search bar) + 120 (self) */
}

/* positioned at the bottom of our container */
footer {
	height:120px;
	bottom:0;
}

Pros:

Cross-platform (works across 100% of mobile and desktop browsers)

Cons:

Developers are required to provide exact measurements, and number of root elements needs to remain low to avoid manual calculations.

Stack/Flexible layout pattern

Source: http://www.html5rocks.com/en/tutorials/flexbox/quick/

While targeting smartphone applications, developers often need to stack components to take up the available screen height. Header, content and footer sections appear under one another, with the content section flexible and scrollable if its contents overflow the available height. Other elements, such as the search bar can be inserted into the stack, pushing content down and decreasing the height of any flexible regions automatically.

With flex-box, creating a stack layout is easy as it relies on the browser engine to decide how to position and stretch elements to fill the screen. All elements remain relatively positioned which means we are no longer required to provide top or bottom values, and choose which elements have fixed widths and which are to remain flexible.

Please note: At the time of writing this article, the flex-box standard has split into ‘old’ flex-box and ‘new’ flex-box. The new flex-box standard support is nearly non-existent or broken in most browsers. Although BlackBerry 10 supports both standards – I chose to focus on the old flex-box in this article for wider browser support. The concept remains the same – flex-box allows stack layouts for web applications.

Source with comments here: https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/UI-Layouts/box

HTML

<body>
    <div id=”container”>
        <header></header>
        <section id=”search-bar”></section>
        <content></content>
        vfooter></footer>
   </div>
</body>

CSS

/* set your container's display to -webkit-box */
.container{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-align: stretch;
}

/* setting contents flexibility to 1, ensures that it stretches to fill available space */
.content{
	-webkit-box-flex: 1;
	width:100%;
	background:#181818;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

/* fixed heights for header and footer */
header,
footer{
	background:#bbbbbb;
	height:120px;
	width:100%;
}
/* OR flexible heights thanks to flex-box
header.flexible{
	height: auto;
}

The -webkit-box-flex: 1; property is the ratio of how much available space is allocated to the element relative to other elements. So if we wanted to have two content sections on top of one another, taking up the same height while remaining flexible and adapting to available screen space, we can add the same property (webkit-box-flex: 1) to our second content section. Since the ratio is 1:1, both will take up the same room, while stretching as available screen estate increases.

The Stack/Flexible layout also simplifies use cases where headers/footers and other elements need to remain flexible. For example in an application that displays news articles the header displays news articles’ titles and may take up anywhere from a single line to 3 lines vertically. Ideally, especially when using gradient we want the header to stretch as to not truncate the text :

Developers can also leverage min-height and max-height to tell the renderer how flexible the header will be. Since header is a child of container, and container is flexible, no other properties are required.

/* this allows header to grow up to 170px, which allows for the use case discussed above */
header{
	max-height:170px;
	line-height:45px;
}

Pros:

Truly flexible, no exact dimensions are required.

Offers a ‘stack’ layout model to HTML5 developers, not uncommon among Cascades developers.

Cons:

Confusion over new and old flex-box.

Browser support (not supported in IE and Opera).

*Although a library exists that ports functionality to IE 6-9 and Opera 10

https://github.com/doctyper/flexie

Detecting and adapting to Landscape orientation

Source code here: https://github.com/blackberry/BB10-WebWorks-Samples/blob/master/UI-Layouts/box/media-queries.css

The BlackBerry Z10 screen is 720px wide, which means that we have 720px of screen height to work with when the device is in landscape. It is often good practice to resize certain elements such as the header and/or footer to allow for more content. The following example demonstrates how to use CSS Media Queries to increase the amount of content visible when in landscape:

Here’s the CSS that makes this possible.

@media screen and (orientation:landscape){
     header
     ,footer{
	height:90px;
     }
}

The Landscape orientation media query is triggered when viewport height is less than viewport width. This means that if the device is in portrait, and we pull up the keyboard, landscape orientation will also get triggered, resulting in the rules above applied even though the device is in portrait. This is because the virtual keyboard causes a decrease in the screen height to a point where screen is a few pixels shorter than it is wide. This may be an issue if for example the footer contains wider buttons in landscape. The user will see the buttons get wider as the virtual keyboard pops-up – not the best User Experience.

One way to tackle this is by adding a width property:

/* detect landscape orientation and device width of 1280px */
@media all and (orientation:landscape) and (width:1280px){
     header
     ,footer{
	height:90px;
     }
}

This restricts our rule to only be in effect when the screen width (or innerWidth) is 1280, in other words, only if device is really in landscape.

A number of core BlackBerry 10 Applications allow the virtual keyboard to overlay the action bar. This allows for greater screen estate, especially if the application relies on messaging a lot (think BBM for example).

A good practice is to have a minimum height where all elements are displayed, and if height is smaller, begin to hide the elements to allow for more content.

The virtual keyboard is 413px high in portrait and 274px high in landscape.

Remaining space when the keyboard is up:

1280 – 413 = 867px (portrait 1280×720 or 1280×768)

768 – 274 = 494px (landscape 1280×768)

720 – 274 = 446px (landscape 1280×720)

This means we can target 450px as the minimum height in landscape and 870px in portrait.

Using CSS Media Queries, let’s hide the header and footer if height does not exceed 450px/870px:

/* hide header and footer when available height is shorter than target */
@media 
all and (max-height:870px) and (max-width: 768px), /* portrait 1280x720 and 1280x768 */
all and (max-height:450px) and (width: 1280px) /* landscape */
{
    header,footer{
		display:none;
	}
}

Before with VKB up – portrait:	After with VKB up – portrait:

Before with VKB up – portrait:	After with VKB up – portrait:

CSS Media queries also allow developers to target specific devices, by detecting device height and width. The following rules apply if the device screen is 720×720, making the header and footer shorter to allocate more room to the content section.

/* detect BlackBerry Q10 and make header and footer shorter for more screen estate  */
@media all and (width:720px) and (height: 720px)
{
    header,
    footer{
            height: 90px;
    }     
}

Since the BlackBerry Z10 offers 768px of screen height when in landscape, while the Q10 offers 720px, it is often easier to apply the same rules to both, as to provide more content in both cases, without having to maintain two separate sets of rules for each.

Here’s how the above rule can be combined with one mentioned earlier:

/* detect landscape orientation and Q10 device */
@media 
all and (orientation:landscape) and (width:1280px),
all and (width:720px) and (height: 720px)
{
     header
     ,footer{
	height:90px;
     }
}

Please note that these CSS queries are designed for the flexible layout model only .There would have to be more rules to make it work with the fixed model, as we are required to provide exact positions changes along with size changes when orientation changes – another pro for the flexible box model.

In conclusion, it’s worth noting that both code quality and performance improve when leaving the layout tasks to the layout engine (CSS), rather than detecting orientation/screen size using JavaScript and applying classes/style. The stack model has been used by Native developers for quite some time and is finally making a debut to HTML5 and provides an intuitive way to create layouts that adapt across devices with different form factors.

Be sure to check out the full source code here (https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/UI-Layouts) and save it for when you are working on the layout of your next BlackBerry 10 application.

Sources

QUICK HITS WITH THE FLEXIBLE BOX MODEL by Paul Irish

http://www.html5rocks.com/en/tutorials/flexbox/quick/

Media Queries for Standard Devices

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

For those who don’t me, my name is Pratik Sapra and I work as a Gaming Consultant on the Developer Relations team at BlackBerry. In my role, I work with game developers on the technical side and help them bring awesome gaming titles to the BlackBerry platform. I am really looking forward to this weeks Game Developer Conference along with the rest of the BlackBerry gaming crew.

In that regard, I am very excited to share that we have a great set of in-booth sessions (Booth 1216) lined up at our GDC booth. We will be presenting a wide range of topics covering everything you need to know about game development on BlackBerry 10. You will be hearing directly from BlackBerry gaming experts on topics including Native Development, Cocos2dx, Unity, Scoreloop and many more. We will be kicking off each day with a general overview session followed by a set of how-to sessions focused on specific topics and technologies. Scroll down below for the full session schedule.

Wednesday, March 27^th

10:00 – 10:15AM            Native Game Development on BlackBerry 10

11:00 – 11:15AM            How to set up a native game in under 10 minutes on BlackBerry 10

1:15 – 1:30PM                  How to add gamepad support to BlackBerry 10 games

2:00 – 2:15PM                  How to write an HTML 5/ WebGL game on BlackBerry 10

2:30 – 2:45PM                  How to write an Adobe AIR application on BlackBerry 10

3:00 – 3:15PM                  How to write a multiplatform game on Blackberry 10

Thursday, March 28^th

10:00 – 10:15AM            Social Gaming on BlackBerry 10

11:00 – 11:15AM            How to bring your Unity 4 game to BlackBerry 10

1:15 – 1:30PM                  How to port your iOS game to BlackBerry 10, Tips & Tricks

2:00 – 2:15PM                  How to bring your Cocos2dx game to BlackBerry 10

3:00 – 3:15PM                  How to add Leaderboards and Achievements to BlackBerry 10 games using Scoreloop

Friday, March 29^th

10:00 – 10:15AM            Building your Gaming Strategy for BlackBerry 10

10:30 – 10:45AM            How to add in-game advertising to BlackBerry 10 games

11:00 – 11:15AM            How to add in-app payment services to BlackBerry 10 games.

1:15 – 1:30PM                  How to package, publish and distribute your BlackBerry 10 game on BlackBerry World

2:00 – 2:15PM                  How to save BlackBerry 10 game state in the cloud

2:30 – 2:45PM                  How to convert, build and debug BlackBerry 10 games with Visual Studio

It has been discovered that bbUI.js version 0.9.5 has a rendering issue when run on BlackBerry 10.1. The device was not being accurately detected and as a result, application content was not being rendered to the screen correctly.

Issue: Grid & Image List in bbUI.js 0.9.5 running on BlackBerry 10

A fix for this issue was applied last month in version 0.9.6 which is available for download from Github. Developers have since been updating their applications and I would encourage you do the same if you haven’t done so already.  A recompile and re-submit of your application to BlackBerry World may be required.  Doing so will ensure that users will continue to enjoy your content, as it was designed, when they upgrade to BlackBerry 10.1. Note: At the time of writing, there is no ETA for when 10.1 will be published.

Upgrade Instructions:

1. Download bbUI.js version 0.9.6.
2. Replace the bbUI.js and bbUI.css files in your application.
3. Review the change Log to confirm whether any feature updates, performance improvements or compatibility changes affect your application.
4. Recompile using the BlackBerry 10 WebWorks SDK.
5. Test! Use the Dev Alpha C simulator to preview how your content will appear on BlackBerry 10.1.0.1020.
6. Once you are happy with the quality of your application, re-submit in BlackBerry World.

Fixed: Grid & Image List in bbUI.js 0.9.6 running on BlackBerry 10.1