Jeremy Duke

Jeremy Duke

Website URL: http://opensourcebb.com

Introducing the Official OSBB App for BlackBerry 10

Earlier today, the official OSBB App for BlackBerry was approved and appeared in the BlackBerry World storefront. We are excited to have an app available that is native, beautiful, and developed soley by us here at OSBB. Version 1.0 of the app is available for both the full touch and QWERTY BlackBerry 10 devices running BlackBerry 10.1 or higher and is, of course, free.  

osbbapp1

Feeds

When designing the OSBB app, we wanted to show our respect to the BlackBerry UI guidelines, but we also wanted to be a little different, so in the news feeds we added a brief description of each article that can be show or hidden with a single tap of the button located just to the right of the title. If the brief description grabs your interest, the full article can be viewed by tapping the list item.

 


 

osbbapp2

Search Feature

When building the search feature into the app, we wanted to mimic the native search present in native BB10 apps such as the File Manager, and we believe we nailed it.  The search feature will allow you to quickly locate whatever it is that you are looking for.

 


 

osbbapp3

Category Filtering

Hiding just above each topic specfic list, is a dropdown menu that will allow you to get more specific results, and allow you to dive a bit deeper. The dropdown is available in the Reviews section, Resources section, and The Rest section.

While we are definitely excited to have the official OSBB app available, we are even more excited to improve it and further develop it, so let us know what features you would like to see in the app, and as always, happy coding!

Download the Official OSBB App today!

getitatbbw

Example of a First Run Tutorial in Cascades

I'm sure many of you have installed an app onto your device that displayed a brief tutorial the first time you launched it, right?  If you have ever wondered how you could do that in your own app, this sample application will show you one simple way to accomplish this in a Cascades app. 

Info

This sample app utilizes QSettings, so see my previous tutorial about QSettings if you need some help there.

This post will not be a full-fledged tutorial, but I do want to explain some of the aspects of the sample application. First, here are some of the "stuffs" used in the sample application...

QML elements/components used:

  • Sheet {}
  • Page {}
  • Container {}
  • Label {}
  • ListView {}

QML Signals used:

  • onCreationCompleted:
  • onClicked:
  • onTriggered:

Other used:

  • DockLayout
  • StackLayout
  • XmlDataModel 

 How does the application work?

The application is pretty simple, and it uses QSettings to store a bool (true/false) property that is used to determine if the tutorial should open or not when the app is launched.  By default the bool property is set to true and therefore the tutorial fires up when the app is launched. If the user taps the close button to close the tutorial, the tutorial closes, but it will open up again when the user launches the app the next time.  However, if the user taps the Dismiss button to close the tutorial, the tutorial is closed forever or until the app is uninstalled, reinstallled, and relaunched.  

FirstRunImage 1

For the purposes of this sample app I placed a button on the main.qml file that is visible when the tutorial is closed. This button allows you to restore the tutorial popup functionailty without having to uninstall the app. There is also a Label above to button that displays whether the tutorial pop up is disabled or enabled.  

  FirstRunImage 2 

So, head over to the OSBB GitHub and check it out and I have attached a prebuilt and presigned bar file to this post that can be side loaded onto your device (Q10/Q5/Z10/Dev Alpha).  

If you have issues or REALLY want a tutorial, sound off in the comments, and I will whip one up. Also, if you have specific questions, hit me up on twitter @BerryInformed or via the comment section below.

Thanks guys and happy coding!

Simple Example of QSettings in Cascades

There comes a time when building apps, when it is necessary to store a setting, a value, or a string of text in a persistant manner--meaning it remains stored even after the app is closed and reopened. In Cascades, QSettings is one of the options available to developers to accomplish just that.

In this short tutorial, you will learn how to store a string of text via QSettings.  

Starting in the application.cpp (for full source see Github) file we need to add a few things to be able to use QSettings.

...
//!!!ADD!!!
#include <QSettings> ... ApplicationUI::ApplicationUI(bb::cascades::Application *app) : QObject(app) { ... //!!!ADD!!!
qml->setContextProperty("_app", this); ... } ... //!!!ADD!!!
QString ApplicationUI::getValueFor(const QString &objectName, const QString &defaultValue) { QSettings settings; if (settings.value(objectName).isNull()) { return defaultValue; } return settings.value(objectName).toString(); } //!!!ADD!!!
void ApplicationUI::saveValueFor(const QString &objectName, const QString &inputValue) { QSettings settings; settings.setValue(objectName, QVariant(inputValue)); }

The code in bold is what we add to the standard Cascades project source files.

Now to the applicationui.hpp (for full source see GitHub) file

 

 
public:
	...
//!!!ADD!!!
Q_INVOKABLE QString getValueFor(const QString &objectName, const QString &defaultValue); //!!!ADD!!!
Q_INVOKABLE void saveValueFor(const QString &objectName, const QString &inputValue); ...

Now the main.qml file, let's use a TextField to enter a string of text to be stored. When we submit (onSubmitted), we utilize the context property we set in the applicationui.cpp file to call the C++ function from QML. This is what stores the string.

import bb.cascades 1.0
Page {
    Container {
        TextField {
            id: inputField
objectName: "inputField" input { onSubmitted: { //Here is where we save the value or string
_app.saveValueFor(inputField.objectName, inputField.text) outputText.text = inputField.text instructionsLabel.visible = false testLabel.visible = true } } } }

 Now, for the rest of the main.qml the code in this sample is as follows:

import bb.cascades 1.0
Page {
    Container {
        TextField {
            id: inputField
            objectName: "inputField"
            
            input {
                onSubmitted: {
                    //Here is where we save the value or string
                    _app.saveValueFor(inputField.objectName, inputField.text)
                    outputText.text = inputField.text
                    instructionsLabel.visible = false
                    testLabel.visible = true
                }
            }
        
        }
        Label {
            id: outputText
            //Here is where we call or get that value and display it
            text: _app.getValueFor(inputField.objectName, "No Text Set")
            textStyle.base: SystemDefaults.TextStyles.BigText
        }
        Container {
            id: instructionsLabel
            topPadding: 100.0
            visible: true
            Label {
                text: "Type a string of text into the field above and press enter."
                multiline: true
                textStyle.fontSize: FontSize.Large
                textStyle.fontWeight: FontWeight.W100
            }
        }
        Container {
            id: testLabel
            topPadding: 100.0
            visible: false
            Label {
                text: "Now close the app, and the Label above should still have the text you set it to when you open the app back up!"
                multiline: true
                textStyle.fontSize: FontSize.Large
                textStyle.fontWeight: FontWeight.W100
                textStyle.color: Color.Red
            }
        }
    }
}

That's it! Remember to check out the full source on the OSBB GitHub at https://github.com/OpenSourceBB/Cascades-Samples/tree/master/QSettingsExample and you can download the prebuilt and signed bar file attached to this post (Will work for Q10 or Z10 or Dev Alpha).

If you compile and run this sample, it should look similar to the images below.

 

Welcome to the all-new OSBB!

 

Greetings!

First off, thank you for checking out the ALL NEW OSBB!   We have refocused and recommitted to being a community advocate for independent BlackBerry developers.  And as of today, we have just barely scratched the surface of what we plan to offer for developers.

If you have an account with the old OSBB site, you must use the account link at the top right and reset your password before you will be able to log in.

Our mission is...

(short version) ...to put independent developers front and center in everything we do.

(long version) ...to amplify independent developers and their respective applications by providing tutorials for new developers, reviewing the best of the best indie apps, and featuring independent developers in other meaningful ways.

Why are we doing this?

Independent developers have limited to no resources to commit to marketing efforts, and therefore often get overlooked by the community. While, we will not promote any app that isn’t up to snuff, we want to shine some light on all the hidden gems that are present in the BlackBerry World app store.

How do we objectively review apps if we seek to promote them?

Our reviews will be honest, but we will only review quality apps that we feel are worthy of your attention. This will allow us to both be honest with the reader, but also give some attention to worthy developers and their apps. In short, we will not be a marketing arm for ALL indie developers, but we will select and review apps that our editors (all of whom are developers) most appreciate.

What else?

In addition to reviews and other content for the everyday reader, the new OSBB will focus heavily on providing open source code, tutorials, and other content aimed exclusively at helping developers do what they do. Every member of our core team is a developer in HTML5 (Web) and/or Native (Cascades), and we will post materials created for us by members of our extended OSBB membership.

OSBB core leadership contact information:

Jeremy D. - This email address is being protected from spambots. You need JavaScript enabled to view it.

Don B. - This email address is being protected from spambots. You need JavaScript enabled to view it.

Alex B. - This email address is being protected from spambots. You need JavaScript enabled to view it.

Shane C. - This email address is being protected from spambots. You need JavaScript enabled to view it.


Current State of BlackBerry 10 Television Marketing

Ever since seeing the 2013 Super Bowl ad for the BlackBerry Z10, I have been unimpressed with BlackBerry's television marketing strategy for the new BlackBerry 10 devices. As the months have passed, my feelings for the strategy have changed, and have solidified into utter disdain.

About Current Ads

The television commercials that are currently running here in the US are few and far between--and mediocre at best. The TV spots aren't terrible, but I am of the opinion that they are ineffective for a number of reasons which I will speak at length about a bit later. See the video below for an example of the ads that are currently running in the US.

these ads fail based on substance and fail to connect to the viewer in any meaningful way

How did that ad make you feel? More importantly, DID that ad make you feel? That ad didn't move you in any emotional way, correct? These ads fail to connect to the viewer on an emotional level, and they don't showcase the features present on BlackBerry 10 devices as much as they could. So, for me these ads fail based on substance and fail to connect to the viewer in any meaningful way.

How to Market a Smartphone

In order to market a smartphone, one must first understand what a smartphone is, how people use their smartphone, and what the dynamic of the relationship is between a user and his or her smartphone.

Basically, we all know what a smartphone is and we know how people use it. Smart phones are small computers that many people use as their primary means of communication in their daily lives. People uses these gadgets to email, text, video chat, voice call, Tweet, etc. But what many of us fail to realize is how much our smartphone really means to us. People spend a LOT of time with their smart phones, and as a result they have a very specific type of relationship with their devices.

The relationship between the user and his or her smartphone is an intimate one. The device is in your pocket or purse when not in use, in your hand most of the time, on your night stand at night. It wakes you up in the morning, it tells you what you have planned for the day, it reminds you of important events, lets you know when something needs your attention, provides you with weather reports, gives you the news... You get the point.

We care about our smart phones in a way that is different from any other piece of technology

The relationship we have with our smart phones is unique. We care about our smart phones in a way that is different from any other piece of technology. Many of us frantically search for our devices in the event that we misplace it. We feel uneasy when we leave it at home. We perform amazing acrobatic feats to keep our device from crashing to ground when it slips from our hands. It's clear that we care about our devices whether we all realized it before now or not.

So why does all this matter?

It's simple, we have a personal and emotional connection with our devices, and if you want to convince me to start a new relationship with the smartphone that your company makes, you damn well better move me on an emotional level with your commercials. Now obviously the most productive people out there simply want a device that allows them to get their work done efficiently and quickly, but let's face it, they already use a BlackBerry. So, who's left? Those are the ones to whom you must appeal.

The elements of an effective BlackBerry Commercial

So let's analyze the video below created by PixelCarve. The ad was unsolicited and was not sanctioned by BlackBerry.

So, how did that make you feel? Empowered? Excited? Did you learn anything new? In my personal opinion, with a few tweaks this ad should be running on every TV channel as much as possible everyday. This ad is effective for a few reasons (in order or importance)

  • It acknowledges the past and the struggles associated with the legacy BlackBerry devices, but clearly states that BlackBerry has always put an emphasis on communication and Productivity.
"When we invented the smartphone, we didn't quite appreciate what we'd started"
  • It humanizes BlackBerry, the company by allowing viewers to feel as if they can relate to the company on an emotional level.
"There comes a time when every company has to evolve...to become reinspired by what first made them great"
  • It tells the entire story and distinguishes the old from the new. This is critical. Viewers must know that these aren't the same old BlackBerry devices.
"We've been quietly pouring our heart and soul into the foundation of this next evolution..."
  • It emphasizes the power QNX has and exposes the potential that lies ahead for the platform.
"QNX, the operating system so stable, secure, and fast that its relied upon by the likes of NASA..."
  • It gives props to TAT and acknowledges their incredible talent and contribution.
"...to The Astonishing Tribe who design the most beautiful and functional interfaces the world has ever seen"

I know BlackBerry recognizes some of what I am saying in this editorial. This is evidenced in the following video which was shown on stage during the BlackBerry Live Keynote address in May of this year.

Some striking similarities between this video and the PixelCarve video, eh?

In the US, an effective ad is either hilarious, shockingly aggressive, or emotionally moving. The current BlackBerry 10 ads running in the US are none of those things.

With all the previous withstanding, I beg you BlackBerry, for the sake of the company, the brand, the community, and your employees, please take this advice to heart. We are all counting on you and rooting for your success.

BlackBerry Native IDE 10.2: setting up your environment

One aspect about coding natively for Blackberry that intimidates some developers coming from WebWorks or other environments is the use of an IDE -- Momentics in this case.  BlackBerry has done a good job with the latest beta version of Momentics in making things much simpler than they were even a year ago.  The interface is simple and presented in a much less intimating way with the new beta.  So for this tutorial, we will be using the new native IDE version 10.2 Beta 1, which is available here.

Setting up your environment 

When you launch Momentics for the first time you will see the following screen.

First thing you want to do is configure your BlackBerry targets (test device or simulator). You can connect to a test device (Dev Alpha, Q10, or Z10) via wifi or USB, and if you are using a simulator Momentics can automatically discover a simulator that is currently running on your PC. The target device is simply the device on which you want to deploy and test whatever application on which you will be working.

Configuring your target(s) is remarkably simple. First, enable development mode on your device settings (under security and privacy settings). Then, create a password on your device when prompted. Now, connect your device via USB (you can also use the device's wifi IP).  So when the device is connected via USB, the IDE will detect and display confirmation that the device has been detected.  

Click "Next" and you will be prompted for your device password.

Now that you have entered your password, click "Next" again and the IDE will confirm that all went well, and it will detect the OS version of the device. Now, the IDE prompts you for your to choose hte API level in which you want to work. 

In this instance we will choose the Gold 10.1 SDK.  Once you select the API level from the dropdown and click install, the IDE will download and install the selected SDK. Once installed, you are basically off to the races.

Registering Keys with the Signing Authority

Now that you have the SDK installed and everything basically all set up, this is a good time to go ahead and register your signing keys (a one time event).  To do so, click the 'Window' menu, select preferences, click 'Blackberry' on the left vertical menu, then run the 'BlackBerry Deployment Setup Wizard'. 

7

This step may have already been completed earlier in set up. If it looks familiar and you are sure you have done this already you can skip this section.

Once here, click next, then it will find and connect to any devices (which you already did) so move to the next screen.  Hopefully you have requested keys via BlackBerry's website, but if you have not you can register for them at https://www.blackberry.com/SignedKeys/codesigning.html.  One you request keys, you will receive two emails from BlackBerry within about 30 minutes (can take up to 2 hours) and these emails contain two certificates that you will use during this process.

8

IMPORTANT: Please do not forget the PIN you created when registering for your new keys on the Blackberry website!

So select the first option and click next.

9

Save the files attached to each email from BlackBerry somewhere on your hard drive, and from this screen locate and select the requested certificates by browsing for them on your hard drive.  Now enter the PIN you created when you registered for the keys and then create a CSK Password and then confirm the password in the final field, and click next.

On the next screen you will be asked whther or not you want to backup your signing keys.  Please do this, it may save your a lot of headache down the road.  So simply choose a location and a file name, and the IDE will zip up the keys and save them wherever you wish. 

Creating and uploading a Debug Token

Continuing form above, the next screen will prompt you to create a debug token.  A debug token is a .bar file that is installed on your test device that allows you to deploy unsigned applications. This is a crucial part of testing bc you do not want to have to sign builds over and over simply to test your application.  

It is important to point out that the current version or build number of an app can only be signed once, so when you update and build a new version, you have to change the version/build number in order to be able to sign the new version.  Makes sense right?

10

So, to create a debug token simply choose the option to create a debug token and click next.  Once you do so the IDE will create and upload the debug token to your device.

10

Finally, you will receive a confirmation screen to let you know all went well, and I am happy to report that you won't have to do that again unless you request new keys (and its a really simple process anyway). You are now ready to create, test, and sign BlackBerry 10 applications in Momentics.

Creating a Project

To start a new Cascades project choose "New" from the File menu and select "BlackBerry Project" from the pop-out menu.  Then choose Cascades and press next. 

10

On the next screen you can choose from one of the pre-designed templates, or you can start a blank empty project. Choose one and press next, name your project whatever you'd like, and you are now ready to begin coding a new app in the newest BlackBerry Native IDE.

Happy Coding!

Happy Coding!

Getting Started with BBUI.js

 

 

In this tutorial, we will get to know the basic structure of BBUI.js. Recently, I developed an app, Crochet Buddy HD, for PlayBook using BBUI.js for UI elements. to developp the app, I essentially only used the actionbarlist,&nbspbuttons, andscreen;elements when creating the UI.  Below, we will create a sample BBUI.js app using some of these elements

Before diving in, it is important to become familiar with some of the main features of BBUI.js. First, the action bar...

UI Elements: The ‘Action Bar’

The Action Bar in BBUI.js

The action bar is the primary navigation "dock" for the typical BBUI.js based app.  Buttons, tabs, and other elements can be placed on the action bar and various actions can be assigned to the action bar elements.

In Crochet Buddy HD, I created four action bar buttons. Each panel/page in my app resides in it's own .htm file.  To keep everything contained within the BBUI framework, each button does not simply link to the .htm file of the corresponding page. Each item on the action bar is defined as a data-bb-type="action", so look at the code below:

 

<div data-bb-type="screen" data-bb-scroll-effect="on"> [Page HTML code goes here] <div data-bb-type="action-bar"> <div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="bb.pushScreen('HTML_File.htm');" data-bb-title="Action Title">Text Under Button</div> </div>

 

In the code sample above, you have one panel of an app. just before closing the div, you can see we inserted an action bar and defined one button, that when activated  will load 'HTML_file.htm'.

The code in 'HTML_file.htm' will look very similar to the code above, but I will change the action bar.  See code sample below:

 

<div data-bb-type="screen" data-bb-scroll-effect="on"> [Page HTML code goes here] <div data-bb-type="action-bar"> <div data-bb-type="action-bar" data-bb-back-caption="Back"></div> </div>

 

When you define data-bb-back-caption="Back" in the action bar as we did in the above sample, the result is a blank action bar with a functioning back button (see image below)

Action bar with 'back' button

So, as you would expect, when the 'back' button is tapped, you will return to the previous panel.

UI Elements: Lists

There are 2 lists types that can be called within BBUI,js:

  • Arrow Lists
  • Image Lists
  • Grid Lists

Each lists has it's own look and feel (see image below).

To use the various list type in your app, you simply create a div define the list type using the attribute bb-data-type="list type goes here" and create the items in the list. Check out the code sample below:

<div data-bb-type="text-arrow-list">  <div data-bb-type="item" onclick="alert('click')">Sleepy</div>  <div data-bb-type="item" onclick="alert('click')">Sneezy</div>  <div data-bb-type="item" onclick="alert('click')">Dopey</div>  <div data-bb-type="item" onclick="alert('click')">Grumpy</div>  <div data-bb-type="item" onclick="alert('click')">Doc</div>  <div data-bb-type="item" onclick="alert('click')">Bashful</div> <div data-bb-type="item" onclick="alert('click')">Happy</div> </div>

 In the above sample code, we created an arrow-list and the individual items contained within that list. With BBUI.js it really is simple to create UI elements.

Building a sample application

Now that the basics have been discussed, we can build a simple sample BBUI.js application.

Before getting started, there are a couple of things you will need:

  • Download BBUI.js from GitHub here
  • A good IDE or Editor. I prefer Notepad++ which can be downloaded here

Once you have BBUI.js downloaded, unzip the contents. Locate the 'samples' directory and copy and paste it into it's own directory outside of the BBUI.js directory (I copied the samples directory to MyDocuments\bbuiapp1).

Once you have the samples directory in the desired location open up the folder and locate the index.htm file with your favorite text editor.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <!-- * Copyright 2010-2011 Research In Motion Limited. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. --> <html>  <head> <meta name="x-blackberry-defaultHoverEffect" content="false" /> <meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" /> <link  rel="stylesheet" type="text/css" href="/bbui-0.9.2.css"><link /> <script type="text/javascript" src="/bbui-0.9.2.js"></script> <script type="text/javascript"> // For some fun I did some random color scheme generation :o) var bb10HighlightColor, randomNumber; randomNumber=Math.floor(Math.random()*100); if (randomNumber > 60) {   bb10HighlightColor = '#BA55D3'; } else if (randomNumber > 30) {   bb10HighlightColor = '#00BC9F'; } else {   bb10HighlightColor = '#00A8DF'; } // You must call init on bbUI before any other code loads.   // If you want default functionality simply don't pass any parameters.. bb.init(); bb.init({bb10HighlightColor: bb10HighlightColor, bb10ActionBarDark: true, bb10ControlsDark: true, bb10ListsDark: false, bb10ForPlayBook: true, // Fires "before" styling is applied and "before" the screen is inserted in the DOM onscreenready: function(element, id) { if (id == 'dataOnLoad') { dataOnLoad_initialLoad(element); } // Remove all titles "except" input and pill buttons screen if running on BB10 if (bb.device.isBB10 && id != 'input' && id != 'pillButtons') { var titles = element.querySelectorAll('[data-bb-type=title]'); if (titles.length > 0) { titles[0].parentNode.removeChild(titles[0]); } } }, // Fires "after" styling is applied and "after" the screen is inserted in the DOM ondomready: function(element, id) { if (id == 'dataOnTheFly') { dataOnTheFly_initialLoad(element); } } }); </script> </head> <body onload="bb.pushScreen('menu.htm', 'menu');"> </body> </html>

 

You will notice that the index.htm file contains the standard <head> with stylesheets and javascript.

In the <body> of the document bb.pushScreen() is used to load the intital landing page for your app.

Now let's build a page.

Browse back to the 'samples' directory containing the index.htm and delete all other .htm files except for index.htm (don't worry these files are still on your HDD in the BBUI.js directory you extracted earlier) IMPORTANT: Only delete the .htm files, leaving the directories, CSS, and JS files untouched.

Open your favorite text editor and create a new .htm file in the samples directory with the name: home.htm (this will be the very first screen visible when your application is launched)

The structure of each page will be similar, for home.htm use the following:

 

<div data-bb-type="screen" data-bb-effect="fade"> <div style="height:175px; width:550px;margin: 0px auto 0px auto;"> <h1 style="height:12%; text-align:center; padding-top:3%;">App Title or Image</h1> </div> <h2>Please choose an item below</h2> <div data-bb-type="image-list" data-bb-image-effect="fade"> <div data-bb-type="item" onclick="bb.pushScreen('calculator.htm', 'calculator');"data-bb-img="images/icons/icon4.png" data-bb-title="Calculator">A simple function calculator</div> <div data-bb-type="item" onclick="bb.pushScreen('slider.htm', 'slider');" data-bb-img="images/icons/icon3.png" data-bb-title="Slider">Example of a Slider</div>  <div data-bb-type="item" onclick="bb.pushScreen('table.htm', 'table');"data-bb-img="images/icons/icon2.png" data-bb-title="Table Example">An example of a formatted table</div> </div> <div data-bb-type="action-bar"> <div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="bb.pushScreen('action1.htm', 'action1');">Action 1</div> <div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="alert('You clicked Action 2. This could trigger an alert or load a page, or any other action you wish');">Action 2</div> </div> </div>

 

Save this file in the root directory (same directory as index.htm).

Now that we have a landing/home page for our app, we need to open index.htm and have it point to the home page.

In index.htm change

 

<body onload="bb.pushScreen('menu.htm', 'menu');"> </body>

 

to..

 

<body onload="bb.pushScreen('home.htm', 'home');"> </body>

 

Now, save and close index.htm

Once the app is packaged, the steps above will result in the following (click image for larger view):

landingPage

Adding Content

Within the code in home.htm, you will notice that some of the buttons and list items point to .htm files we have not yet created. Each of those pages can contain any HTML code you wish, but should follow the structure below:

 

<div data-bb-type="screen" data-bb-effect="fade"> {your html code here} <div data-bb-type="action-bar" data-bb-back-caption="Back"></div> </div>

 

 The content should be wrapped in <div data-bb-type="screen"> </div>. Essentially,  each .htm page will be treated as a <div> within index.htm.  So, when you use onclick="bb.pushScreen();" the content of that page is loaded within the BBUI.js wrapper.

Other than the index.htm and home.htm files we have already discussed, the following pages need to be created:

In the above bullet list, click any of the pages to see the associated code.

Prior to being able to package your app, you will need to creat a config.xml file.

More information about the config.xml file can be found here.

The config.xml should be formatted as follows:

 

<?xml version="1.0" encoding="utf-8"?> <!-- * Copyright 2010-2011 Research In Motion Limited. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. --> <widget xmlns="http://www.w3.org/ns/widgets"         xmlns:rim="http://www.blackberry.com/ns/widgets"         version="1.0.0.0" id="bbuijssample">   <name>Sample BBUI app</name>   <description>App description</description>   <author>Your Name</author>   <icon src="/images/icon.png" />     <rim:permissions> <rim:permit>access_shared</rim:permit> </rim:permissions>   <rim:orientation mode="portrait" />   <content src="/index.htm" />            <feature id="blackberry.app" required="true" version="1.0.0" />    <feature id="blackberry.invoke" required="true" version="1.0.0"/>    <feature id="blackberry.identity" required="true" version="1.0.0"/>    <feature id="blackberry.ui.dialog" required="true" version="1.0.0"/>    <feature id="blackberry.ui.dialog"/>    <feature id="blackberry.app.event" required="true" version="1.0.0.0"/>    <access subdomains="true" uri="*"/>   </widget>

 

 Included in the assests archive (available for download at the end of this post) are all the files that we create in this tutorial--including and icon. However, if you wish you can create and 86 x 86 PNG icon and save it as "icon.png" in the "images" directory for the app.

Important: For the purposes of this tutorial, many images and other files were not removed from the original BBUI.js files downloaded earlier in the tutorial. Many of these files are not needed, but for the purposes of this tutorial there really is no harm in leaving those files in place.  

With all the files in place you can now package this app. Since we are targeting PlayBook with this app, the Tablet OS Webworks packager should be used.

Note: Included in the assets archive (available for download below) is a presigned .bar file that can be sideloaded onto your PlayBook. I included this to provide a reference for how the app created in this tutorial should look and function.

For help compiling and installing this application on your PlayBook, please see the following information from RIM: HERE

To download all the files used in this tutorial click the button below:
icon-button-download-48

 

Space TV + v1.3.1.3 submitted to BlackBerry World

image

Space TV + for the BlackBerry Z10 is an application designed to provide users with space related news, photos, and video, wrapped in an intuitive and smooth interface. This evening, I submitted an update for the app that includes some new features, some bug fixes, and a little polish.

Version 1.3.1.3 of Space TV + includes the following fixes and feature updates:

  • Now works with or without BBM permissions/integration
  • Added one time tutorial overlay on first launch
  • Optimized orientation settings for video player
  • Added "Contact Us" page allowing users to email support directly from app
  • Added link to review the app in BlackBerry World
  • Added detailed release notes in HELP area
  • The video feeds have been replaced and volume levels should be much better now
  • Further formatting fixes for Image of the Day date display
  • Improved rendering speed for image lists in Curiosity galleries
  • Added notice/disclaimer regarding data usage and streaming HD video

image

image

With the US launch of the BlackBerry Z10 Fast approaching, I now have to decide how to market Space TV + to the masses. Luckily, Space TV + is currently featured in the BlackBerry World carousel, and the app carries Built for BlackBerry certification, so that helps.

Check out Space TV + in BlackBerry World

With regards to marketing my app, it occurs to me that #TeamBlackBerry is made up of the smartest people I know, so why not ask them? So, tell me... tell me how to market Space TV +.

Any suggestions are welcome :)

[UPDATED] Sample Cascades Project: 100% QML Video Player

This will be a quick post, but I wanted to get this out there to BB10 developers. This sample project contains a video player example using only QML (no extra C++).

The industry in which I work demands a lot of hours to be put in by me during the holiday season, so I haven't been able to do as many posts like this as I originally intended.

So, with much haste and without further adieu, download below.

Instructions:

  1. Download the zip archive below to your hard drive
  2. Import the archive as an existing project into the BlackBerry 10 NDK
  3. Once imported you can examine the code and/or compile and run on your BB10 device to see it in action.

Download Here

Subscribe to this RSS feed
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top