×

Warning

JUser: :_load: Unable to load user with ID: 1175
JUser: :_load: Unable to load user with ID: 612

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!

Read more...

The Power of Ant Build

There's several official ways for WebWorks developers to package their apps: Ripple (which I have personally never actually used) and the command line (my former favorite) being the big two. However, Tim Windsor from the BlackBerry Dev Relations team created what is, in my opinion, the best and easiest way to package and sign your WebWorks apps: the Ant Build Script.

If you want to skip the rest of this post and read Tim's excellent documentation on getting it all set up, just head over to https://github.com/blackberry/BB10-WebWorks-Community-Samples/tree/master/Ant-Build-Script. But if you're not convinced yet, read on.

First, why is the Ant Build Script awesome? 

It's awesome because it lets you quickly and easily compile your apps via the command line in a variety of ways. Before I had the Ant Build Script, I'd write my app, add it to a zip, move it to a folder I set up for signing/packaging, open the command line, and type "bbwp c:/apps/AppName.zip -g mypassword -buildId 0"; if I wanted to say add web inspector, I'd have to add -d, and there were a few other operators that I've forgoten. Then I'd drag it to a sideloading bat to sideload it onto my BlackBerry.

With the Ant Build Script, all I have to do is open the command line tool in the app folder (shift+right click) and type "ant build" and my bar is compiled and sideloaded to my BlackBerry. That simple.

If that convinced you that the Ant Build Script is awesome (if it didn't, read it again), then here's how to get it set up:

Set Up

1Download the Ant Build Script from https://github.com/blackberry/BB10-WebWorks-Community-Samples/tree/master/Ant-Build-Script and extract it to somewhere you don't mind keeping it.

2Open the buildTasks.xml (it's in the tools folder) with a program like Notepad++ and edit the variables you need, such as the location of your SDKs and your signing key password.

3Download Apache Ant from http://ant.apache.org/bindownload.cgi (you want the binary zip)

4Unzip Apache ant anywhere you want (I put it into the root of my C drive)

5Add Ant_Home to your System Variables

The easiest way to do this is to type "System Variables" into the Windows Search bar. You can also get to it by right clicking on the computer icon.Click the "New" Button.
For Variable Name, type ANT_BUILD For Variable Value, enter the directory of the Ant build folder. For me, that was C:/ApacheAnt

6Now, whenever you want to package a new app, copy the build.xml file from the Ant Build Script folder, edit it to suit your needs, and run "ant build"

That should be it! If you have any problems with my instructions, check out Tim's to see if he explained something better than I did, or email us here at OSBB to let us know.

Read more...

getUserMedia: stream video to your BB10 WebWorks App

If you ever wanted to stream into your BlackBerry 10 WebWorks app, it's pretty simple to do. This tutorial will include a brief example showing how to do it (and include all the necessary code).

1. Prepare all the basic elements for your app; the config.xml, any custom scripts and styling, and get everything set up.

2. Add the needed features and elements to your config.xml:

<rim:permissions>
<rim:permit>use_camera</rim:permit>
</rim:permissions>

I also recommend you use the following to lock the orientation: 

<feature id="blackberry.app">
<param name="orientation" value="portrait" />
</feature>

3. Create the following video and canvas elements on the page you want to stream video to:

<canvas id="canvas"></canvas>
<video id="video" style="display: none;" autoplay></video>

You'll probably want to include the height/width of your canvas in that element.

4. Add the code!If you're using bbUI, you can add it to the onDomReady event. If you're not, the easiest way to use it is to use a DOMContentLoaded event listener: document.addEventListener('DOMContentLoaded', function() {})

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d')
navigator.webkitGetUserMedia({video: true}, function(stream) {
     video.src = window.URL.createObjectURL(stream);
     setInterval(function () {ctx.drawImage(video, 0, 0, 300, 500);}, 20);
});

That's it! 

And if you're on your BlackBerry 10 device, or using Google Chrome, here's the above code in action:

Click here to see the code in action

Read more...

Visual Connection (also, dynamic bbUI coding).

A few weeks ago, early on a quiet Sunday morning, I felt the familiar buzz in my pocket that means someone had posted a comment in one of my BBM groups. With an ease born of inestimable hours of experience, I whipped out my BlackBerry to mock the person who was wasting their weekend morning by being awake.

The mocking never actually happened; as I read the BBM group post from Brian, I decided that the idea was quite good, and worth discussion (Brian also lives 2 time zones over for me, so mocking him for being awake wouldn't have made much sense).

"Hey, my wife got this really cool game on her phone where you guess a word based on pictures. There isn't anything like that for BlackBerry, why don't we make one?"

We decided to make the BB10 version in Cascades (which is what Brian uses, because it's absolutely amazing for BlackBerry), and the PlayBook version in WebWorks (which is what I use, because it's not quite as amazing for BlackBerry as Cascades yet (but close), but is amazing in general). After over a week of intensive coding, development, and testing, Visual Connection was born.

//End fancy sentimental backstory.

I could go on about how cool Visual Connection is (because it is. It's awesome. To quote Trogdor, "Ohh... this is the best game I've ever played"), but that's really not that beneficial to anyone unless you haven't tried the game, in which case, you should head over to BlackBerry World and get it (Hypnotoad wants you to buy Visual Connection). So instead, I decided to briefly show how you can use bbUI to keep your code small, by creating a template and loading elements with JavaScript. This is the method used in Visual Connection to stop the app from being huge - if there was a seperate .html document for each level, that would be 300 pages, soon to be 400. If you want to follow along, I've included a very simple sample at the end of this post that you can download and test in Ripple.

1. First, get slightly familiar with bbUI. If you've never heard of bbUI, check out https://github.com/blackberry/bbUI.js.

2. Next, create your template. In the example, the template is called screen.html. You'll use bb.pushScreen('page',''id') to load it.

3. Write the JavaScript functions that will load different things based on the bb.pushScreen ID. In the example, this is what it looks like:

if (id == 'page1') element.getElementById('pagetext').innerHTML = "You loaded screen.html with a page ID of 'page1'. Yay!"
if (id == 'page2') element.getElementById('pagetext').innerHTML = "This time, you loaded screen.html with a page ID of 'page2'. See how it's different?"

(because we're using onscreenready, we use element instead of document).

4. Insert the javascript code into the onscreenready function of the bbUI index.html.

5. Run your app!

As you can see, it's a fairly simple process that can be used to help keep the size of your app more manageable.

Download the dynamic-bbUI sample

Check out Visual Connection in App World

If you want to read about the Cascades version of Visual Connection, check out Brian's BBCascades blog post.

Read more...

Running a C++ Functions from QML

When I first read about Cascades "they" said use QML for the UI and C++ for the logic.  Okay, great so I wrote a function in C++ and made a pretty UI in QML... Now what?  In this example I'll go through the steps it takes to call a C++ function from the QML.  However this example won't have a pretty UI.

Read more...

Rock, Paper, Scissors - Full Tutorial

Who doesn't like a good old fashion game of Rock, Paper, Scissors? So here's an example app of it...  This tutorial is broken up into 3 parts:
Part 1 will focus on how to create the logic aspects (QML/JavaScript and C++).
Part 2 will create a user friendly user interface (UI) to liven up the app with graphics (QML).
Part 3 will combine the logic and UI, as well as add some additional features such animations and a help page.

Before getting into the explanations the full source code this app has been posted to github: https://github.com/bcs925/BrianScheirerOpenSource/tree/master/RockPaperScissors

And the app can be downloaded from App World (only available on BB10, Dev Alpha):  http://appworld.blackberry.com/webstore/content/135020/?model=Dev%20Alpha&lang=en

I like to do the logic first because I figure if you can't get the functionality working why bother making a pretty UI?  So without further ado... Let's get started!

Part 1: The Logic

Since this example uses both QML/JavaScript and C++ for the logic it is necessary to have some amount of UI.  As well as creating a barebones UI allows you to test that everything is working as it should. One thing to especially notice is that I chose identifiers for the id of each item to be representative of what the item is or does.  This will be especially true once the final UI is made in Part 2 and things won't be this close together in the code.

First part of the test UI will be 3 buttons: Rock, Paper, and Scissors.  These will act as the 3 signals that control the game.

        Container {
            Button {
                id: rockbutton
                objectName: "rockbutton"
                text: "ROCK!"
                onClicked: {
                }
            }
            Button {
                id: paperbutton
                objectName: "paperbutton"
                text: "PAPER!"
                onClicked: {
                }
            }
            Button {
                id: scissorsbutton
                objectName: "scissorsbutton"
                text: "SCISSORS!"
                onClicked: {
                }
            }
        }

Next is a Label that states what option the computer decided to pick:

            Label {
                id: computerpick
                text: "BlackBerry picks: ..."
            }

After that is the winner:

            Label {
                id: winnerlabel
                text: "Winner"
            }

Finally, there is a container that holds labels for your win/loss/tie record:

        Container {
            layout: StackLayout {
                layoutDirection: LayoutDirection.LeftToRight
            }
            Label {
                text: "Record: "
            }
            Label {
                id: win
                text: "0"
            }
            Label {
                text: "-"
            }
            Label {
                id: lose
                text: "0"
            }
            Label {
                text: "-"
            }
            Label {
                id: tie
                text: "0"
            }
        }

Now it is time to create the logic within the buttons and C++ functions.  The way it made sense for me to do it was to let QML/JavaScript handle the setup for each choice then pass those choices to C++ for it to return the winner.  So for instance for the "rockbutton" onClicked signal it generates a "var = number" of 1-3 for the computer's choice and takes "1" as the user's choice for Rock. (For Scissors it is "2" and for Paper it is "3" for the user's choice.)  Then passes those two numbers into clickedRock() C++ function to find out the winner.  I am not going to go through each line individually but as you see below in the full code it is just a bunch of if/else statements for deciding who wins/loses/ties based off the rules of Rock, Paper, Scissors. 

Lastly, for the win/loss/tie record keeping, this is accomplished by looking at the outcome of the game and the previous total for either win/loss/tie. Based on the outcome the codeWinning() C++ function adds 1 to the appropriate value.

And that's it for logic.  See below for full code of main.qml, app.cpp, and app.hpp.  Since I didn't go too in depth, feel free to ask questions in the comments field about any aspect of the logic.

main.qml

import bb.cascades 1.0

Page {
    content: Container {
        Container {
            Button {
                id: rockbutton
                objectName: "rockbutton"
                text: "ROCK!"
                onClicked: {
                    var winning = win.text;
                    var losing = lose.text;
                    var ties = tie.text;
                    var number = Math.floor((Math.random() * 3) + 1);
                    var gameoutcome = app.clickedRock(1, number);
                    if (number == 1) {
                        computerpick.text = "BlackBerry picks: Rock";
                    } else if (number == 2) {
                        computerpick.text = "BlackBerry picks: Paper";
                    } else {
                        computerpick.text = "BlackBerry picks: Scissors";
                    }
                    if (gameoutcome == 1) {
                        winnerlabel.text = "You WIN!";
                    } else if (gameoutcome == 2) {
                        winnerlabel.text = "BlackBerry WINS!";
                    } else {
                        winnerlabel.text = "Draw";
                    }
                    if (gameoutcome == 1) {
                        win.text = app.codeWinning(winning);
                    } else if (gameoutcome == 2) {
                        lose.text = app.codeWinning(losing);
                    } else {
                        tie.text = app.codeWinning(ties);
                    }
                }
            }
            Button {
                id: paperbutton
                objectName: "paperbutton"
                text: "PAPER!"
                onClicked: {
                    var winning = win.text;
                    var losing = lose.text;
                    var ties = tie.text;
                    var number = Math.floor((Math.random() * 3) + 1);
                    var gameoutcome = app.clickedPaper(2, number);
                    if (number == 1) {
                        computerpick.text = "BlackBerry picks: Rock";
                    } else if (number == 2) {
                        computerpick.text = "BlackBerry picks: Paper";
                    } else {
                        computerpick.text = "BlackBerry picks: Scissors";
                    }
                    if (gameoutcome == 1) {
                        winnerlabel.text = "You WIN!";
                    } else if (gameoutcome == 2) {
                        winnerlabel.text = "BlackBerry WINS!";
                    } else {
                        winnerlabel.text = "Draw";
                    }
                    if (gameoutcome == 1) {
                        win.text = app.codeWinning(winning);
                    } else if (gameoutcome == 2) {
                        lose.text = app.codeWinning(losing);
                    } else {
                        tie.text = app.codeWinning(ties);
                    }
                }
            }
            Button {
                id: scissorsbutton
                objectName: "scissorsbutton"
                text: "SCISSORS!"
                onClicked: {
                    var winning = win.text;
                    var losing = lose.text;
                    var ties = tie.text;
                    var number = Math.floor((Math.random() * 3) + 1);
                    var gameoutcome = app.clickedScissors(3, number);
                    if (number == 1) {
                        computerpick.text = "BlackBerry picks: Rock";
                    } else if (number == 2) {
                        computerpick.text = "BlackBerry picks: Paper";
                    } else {
                        computerpick.text = "BlackBerry picks: Scissors";
                    }
                    if (gameoutcome == 1) {
                        winnerlabel.text = "You WIN!";
                    } else if (gameoutcome == 2) {
                        winnerlabel.text = "BlackBerry WINS!";
                    } else {
                        winnerlabel.text = "Draw";
                    }
                    if (gameoutcome == 1) {
                        win.text = app.codeWinning(winning);
                    } else if (gameoutcome == 2) {
                        lose.text = app.codeWinning(losing);
                    } else {
                        tie.text = app.codeWinning(ties);
                    }
                }
            }
        }
        Container {
            topMargin: 50.0
            Label {
                id: computerpick
                text: "BlackBerry picks: ..."
            }
            Label {
                id: winnerlabel
                text: "Winner"
            }
        }
        Container {
            layout: StackLayout {
                layoutDirection: LayoutDirection.LeftToRight
            }
            Label {
                text: "Record: "
            }
            Label {
                id: win
                text: "0"
            }
            Label {
                text: "-"
            }
            Label {
                id: lose
                text: "0"
            }
            Label {
                text: "-"
            }
            Label {
                id: tie
                text: "0"
            }
        }
    }
}

app.cpp

#include "app.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>

using namespace bb::cascades;

App::App()
{
    QmlDocument *qml = QmlDocument::create("main.qml");
    qml->setContextProperty("app", this);
    
    AbstractPane *root = qml->createRootNode<AbstractPane>();
    Application::setScene(root);
}

int App::clickedRock(int user1, int user2)
{
    int winner;

    if((user1 == 1) && (user2 == 2))
    winner=2;
    else if ((user1 == 1) && (user2 == 3))
    winner=1;
    else if ((user1 == 1) && (user2 == 1))
    winner=0;

    return (winner);

}

int App::clickedPaper(int user1, int user2)
{
    int winner;

    if((user1 == 2) && (user2 == 2))
    winner=0;
    else if ((user1 == 2) && (user2 == 3))
    winner=2;
    else if ((user1 == 2) && (user2 == 1))
    winner=1;

    return (winner);

}

int App::clickedScissors(int user1, int user2)
{
    int winner;

    if((user1 == 3) && (user2 == 2))
    winner=1;
    else if ((user1 == 3) && (user2 == 3))
    winner=0;
    else if ((user1 == 3) && (user2 == 1))
    winner=2;

    return (winner);

}

int App::codeWinning(int record)
{
    int add1;
    add1 = record+1;
    return add1;
}

app.hpp

#ifndef APP_H
#define APP_H

#include <QObject>


class App : public QObject
{
    Q_OBJECT

public:
    App();

Q_INVOKABLE int clickedRock(int user1, int user2);
Q_INVOKABLE int clickedPaper(int user1, int user2);
Q_INVOKABLE int clickedScissors(int user1, int user2);
Q_INVOKABLE int codeWinning(int record);


};

#endif // ifndef APP_H

Read more...

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

 

Read more...

My BB Keeps Rebooting!!!!

I went through a several month period of time where my new BB 9650 would reboot every couple of hours. This went on for 4 months. Here is what I did to troubleshoot the problem:

First check that your battery fits tightly against the posts. You may need to insert part of a business card as a shim to snug it up.

May be a corrupt 3rd party app or setting

1.  Backup with BB DM. Reload OS without any 3rd party apps. Also, do not restore any preferences, options or settings, just the important stuff like emails, SMS, calendar and address book. I did this several times and it would fix the problem for only about a day or two.

Still rebooting/freezing

2.  Copy all SD card files/folders to your laptop. Reformat the SD card and copy everything back.

Still rebooting/freezing

3.  May be a corrupt database. Create a free Gmail account and add it to your BB. Go into your gmail setup on your BB and tell it to sync contacts and calendar. Once all your contacts and calendar are on the web version of Gmail, turn off the sync on on your BB. Open DM and select Delete Data to delete all Calendar and Contact information. Once this is done, your address book and calendar should be empty. Next turn on the sync for both Contacts and Calendar in the gmail setup on your BB. This may take up to 30 minutes for everything to download. Once that is done, do a battery pull and *228. You can turn off the sync for both once everything is successfully restored, if you want.

You need to use Gmail to restore your contacts and calendar because it seems that backing up and restoring with DM just puts the same corrupt database back on your BB. Go figure?!?

Step 3.  is what finally fixed my 9650. It seems I had a corrupt calendar. Hope this helps.

Read more...

How to Stop Work Emails from Popping Up On Your BB While at Work

So you’re at work with your BB lying on your desk (waiting for notifications from OSBB that a new hybrid has come out!) and your desktop computer notifies you that you have a new work email. Seconds later your BB notifies you of the same email! Arrgggghhhhh!!!! If you get a lot of emails, this can get a little annoying to say the least. You usually delete the email on your phone and answer the one on your desktop computer; full keyboard, big screen, it is just easier.

Here’s how to solve that. When you get to work and while you’re firing up the ole desktop, go into your BB Email Settings, log in to BIS, click on your work email and choose ‘Filters’ from your short menu. For ‘When no filters apply’ choose ‘Do not forward messages to the device’. Next set an appointment on your calendar for quitting time to remind you to go back into your email settings and edit the filter so it will forward to your BB again.

You don’t have to set an alarm on your calendar to remind you to turn on the filter in the morning when you get to work because when you get your first work email and your BB annoyingly alerts you of the same email . . . . believe me, that will remind you to turn on that filter.

Read more...

Losing your memory or is your Content Store getting too big?

I thought I was losing my memory...is that a memory leak??? What was happening to it? I start with 270+ after installing a most excellent OSBB hybrid and then...slowly...over a period of a few weeks my memory would deteriorate...on my BB too! Well I think I found out what the "memory leak" really is. It is 3rd party apps storing information in the Content Store. Over a period of time it can get HUGE! Mine got up to 20+ MB. What make matter worse is that when you backup and restore with DM, you just move that big ole Content Store from your BB to your back up and back to your BB again. Here is my memory after about a week.

To check how much is lost to the content store, go to Options, Device and Status Information, hit the menu key and select Database Sizes where you scroll down to Content Store.

The next time you hook up to DM, just select Delete Data from the menu, choose Specific Data and scroll down to Content Store (see below).

After you delete the Content Store, reboot and you’ll see you’ve recovered the same amount of data (see below)

I do this about once a week or so, when I do my regular back up.

Jerry

Read more...
Subscribe to this RSS feed
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top