Weekend Coder: Passport Keyboard Scrolling and Gestures
Developers | 59 Comments Weekend Coder: Passport Keyboard Scrolling and Gestures After a two month break, Weekend Coder is back with another installment. Today I bring you some Passport specific goodies using the touch enabled keyboard. Ironically enough, I was writing this tutorial about two months ago and this ultimately lead to the development of Work Wide. Perhaps even...

Forums

Photos

Timeline Beta

Nov 29, 2014 Weekend Coder: Passport Keyboard Scrolling and Gestures
59 Comments
Peek

After a two month break, Weekend Coder is back with another installment. Today I bring you some Passport specific goodies using the touch enabled keyboard. Ironically enough, I was writing this tutorial about two months ago and this ultimately lead to the development of Work Wide. Perhaps even more ironically, Work Wide shares no code from this tutorial but based off the screenshots you'll probably see the inspiration. However without further ado, let's take a look at some code for keyboard scrolling and gestures.

Continue Reading →
Sep 28, 2014 Weekend Coder: Passport developing considerations
71 Comments
Peek

Even though we've had a square screen to develop on with Q10/5 and a big screen to work with on Z10/30/3, the Passport now brings us a combination of big and square. From an app developing point of view this may present some challenges but also brings opportunities for new UI/UX designs that just aren't possible on current devices.

Continue Reading →
Aug 23, 2014 Weekend Coder: Touching the screen
36 Comments
Peek

All BlackBerry devices running BlackBerry 10 have touchscreens and when a user touches things in an app they expect it do something. That means a developer has to listen for these touch events and react. Seems like a no brainer, huh? Well as a developer you need to know what code takes user screen interaction and turns it into an enjoyable and expected behavior. Obviously there is no way for me to explain every possible scenario, there are definitely major ones every developer needs to know about to successfully code a Cascades app.

Continue Reading →
Jul 12, 2014 Weekend Coder: World Cup Bingo with GridLayout
22 Comments
Peek

One of the more overlooked additions to 10.3 in Cascades is the new layout called GridLayout. While it is not that impressive of a feature it is definitely a welcomed addition to Cascades, especially for any developers who have attempted to create a grid layout on their own. Since there isn’t much to show with GridLayout, I have also themed my grid into a World Cup Bingo Card with some JavaScript to make it a bit more interesting.

First, let’s take a look at GridLayout. Much like the other layouts (Stack, Dock, Absolute) you’ll define it as a “layout:” within a Container. Inside the GridLayout the only parameter is columnCount. This parameter does exactly what it sounds like, sets the number of columns. For example:

    Container {
        layout: GridLayout {
            columnCount: 5
        }

    }

For a Bingo card we need 5 columns, so the columnCount is set to 5. From here each defined parent component will represent a “cell” in the grid and will be placed next to each other from left to right until the columnCount is reached and then it will start a new row. So for instance a Label will be considered a component and so will a Container. However any children inside that Container won’t apply to the columnCount of the GridLayout. So consider the following code and QML preview:

Notice how since the two Labels (2 and 3) are inside of a Container they are contained within a single cell within the GridLayout. For my Bingo Card example, to help keep myself organized I find it best to use custom components in conjunction with GridLayout. I created a custom component in BingoTile.qml and each cell will be made up of the component BingoTile. Now my GridLayout would look something like the following:

    Container {
        layout: GridLayout {
            columnCount: 5
        }
            BingoTile {
                id: tileB1
                tileLabel: ""
            }
            BingoTile {
                id: tileB2
                tileLabel: ""
            }
            BingoTile {
                id: tileB3
                tileLabel: ""
            }
            BingoTile {
                id: tileB4
                tileLabel: ""
            }
            BingoTile {
                id: tileB5
                tileLabel: ""
            }
            BingoTile {
                id: tileI1
                tileLabel: ""
            }
           // And so on for tile I2 through O5
    }

That’s about it for GridLayout. No other options available. This is disappointing because I was hoping to have a bit more customization much like a table in HTML where you can set cells to span over multiple columns or rows. Additionally, I was hoping for the ability to have border decoration and cell padding and spacing (again more features from basic HTML tables). If you take a look at the source code you’ll see that in my custom component of BingoTile.qml I mimic borders for this example. So while it is not an easily set parameter it is definitely possible to do in GridLayout.

Now to make this GridLayout sample more interesting and themed to the World Cup, I’ve randomly generated what goes into each BingoTile using a couple JavaScript functions. First I have a switch function that contains all the “soccer” (football for the rest of the world) events I could think of, which was 33 different events. And that function looks like:

function wordSwitch(a) {
    var b;
    switch (a) {
    case 1:
        b = "goal";
        break;
    case 2:
        b = "corner kick";
        break;
    case 3:
        b = "foul";
        break;
//...
    case 32:
        b = "ghost goal";
        break;
    case 33:
        b = "advantage foul";
        break;

    }
    return (b);
}

Next I have a function that creates an array of 24 unique numbers between 1 and 33 because a Bingo card has 25 tiles with 1 free space. And I did not want any two tiles on the Bingo card to be the same. The last part of this function runs each of my 24 unique numbers in the array through the switch function and applies them to each of my BingoTile’s tileLabel. And that looks like:

function makeCard() {
    var arr = [];
    while (arr.length < 24) {
        var randomnumber = Math.ceil(Math.random() * 33);
        var found = false;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == randomnumber) {
                found = true;
                break;
            }
        }
        if (!found)
            arr[arr.length] = randomnumber;
    }
    tileB1.tileLabel = wordSwitch(arr[0]);
    tileB2.tileLabel = wordSwitch(arr[1]);
    tileB3.tileLabel = wordSwitch(arr[2]);
    tileB4.tileLabel = wordSwitch(arr[3]);
// etc for B5 through O3
    tileO4.tileLabel = wordSwitch(arr[22]);
    tileO5.tileLabel = wordSwitch(arr[23]);
    console.log(arr); 
//console log just to see the array

}

The makeCard() function runs each time the app is opened, this is done by doing the following:

import bb.cascades 1.3
import "functions.js" as MyFunctions

Page {
//...
    onCreationCompleted: {
        MyFunctions.makeCard();
    }
}

 Additionally I have added an application menu so you can generate a new card by swiping down from the top and triggering the “New Card” action.

If you check out the source code I’ve posted to github below, you’ll see I have added a few other features such a TapHandler on each BingoTile to change the background from white to green when tapped. And there are a few other features thrown in. With a little decoration and a few more features, this could be a "real" app. Feel free to check out the source code and for any non-coders out there I have attached the .bar file too if you want to load up the Bingo card and play along while watching the last two games of the World Cup this weekend.

More information / Download World Cup Bingo Sample code from Github

Download World Cup Bingo .bar file (10.3 required)

Continue Reading →
Jun 21, 2014 Weekend Coder: Some 10.3 Action[Bar]
56 Comments
Peek

It’s been a few weeks since I’ve posted in the Weekend Coder series, and what a few weeks they’ve been when it comes to BlackBerry apps and development. Specifically, what does the Amazon partnership mean for native development? Obviously no one knows for sure but regardless of what the future holds, it won’t affect my passion for coding for BlackBerry 10. I plan to keep developing, in Cascades, because I enjoy it. And today I am going to share some of the new features 10.3 brings to the ActionBar.

The most obvious change to the ActionBar is the introduction of the signature action. Defining which action you’d like to be your signature action is as simple as defining the placement parameter.

Continue Reading →
Apr 27, 2014 Weekend Coder: Analyzing BlackBerry World Reports
25 Comments
Peek

Today is my one year anniversary of writing Weekend Coder posts here on CrackBerry. Much the same as companies report end of year data (sales numbers, market share, etc), I thought it would be fun to do the same with app data. So I am going to do exactly that using the data that BlackBerry provides in the “Download Reports” section of the BlackBerry World Vendor Portal.

Continue Reading →
Apr 20, 2014 Weekend Coder: CrackBerry's app developer guide
43 Comments
Peek

As the well-known saying goes, “A journey of a 1000 lines of code starts with a single import statement”… Oh, wait that’s not a saying at all is it? Well here's something that is well known for many new developers, it is often difficult to figure out how to get started. And the second biggest challenge is what to do next after getting started. The first is a relatively easy question to answer and for the second, while there is no single correct answer there are definitely better paths to choose than others.

So, here I hope to dig back into previous Weekend Coder posts and put them into an order that should help new developers progress through Cascades.

Continue Reading →
Mar 29, 2014 Weekend Coder: Custom game UI
22 Comments
Peek

Much like musicians are often inspired by each other, I think that app design can be inspired from others too. A few weeks back I showed my interpretation of how to make a custom TabbedPane inspired by the Sochi Olympics app and today I have another design to share. Before I go any further, please don’t confuse this with stealing code/ripping off apps. These examples all contain original code that I am sharing for others to get an idea of a way something can be done.

Continue Reading →
Mar 08, 2014 Weekend Coder: Updating an app; A love story
16 Comments
Peek

This weekend I have something a little different for this series, and I think it is something that developers and non-developers alike will enjoy. The best I can explain it is as a self-reflection of developing for BlackBerry 10 and specifically centering my thoughts on one of my apps, Random Stories+.

First a little background, Random Stories+ (RS) is an ad lib style app/game where it asks you for various words by parts of speech (verb, noun, adjective, etc) and fills those words into a story to make a potentially silly sounding story. Version 1.x of RS was one of the first apps I ever wrote and I did the majority of the development prior to BlackBerry 10 launching. After launch it was never a particularly popular app so it kind of fell by the wayside and I moved on to other projects.

From a development standpoint this is a relatively easy scenario to code. Pretty much have the user start a story (2 length options, quickie with 5 blanks and epic with 10 blanks) and have a function randomly select one of the stories for which the user could then enter their words. After the user presses submit those words would be concatenated into the rest of the story. Hilarity ensues?

At this point, you may be wondering why I am telling this story. Well the short answer is simple, self-review and self-improvement. The long answer, however, I think is much more interesting and has screenshots!

I have seen many people write articles about if you look at your old code and you barely understand it means you have advanced as a developer. And in my case, with this code being over a year old, this couldn’t be more true. Let’s first take a look at the workflow of the 3 main releases of the app:

Continue Reading →
Feb 23, 2014 Weekend Coder: More custom UI's with Fancy Transitions
30 Comments
Peek

Since BlackBerry 10 Cascades came out a little less than two years ago there have been three major releases of tools and APIs for developers to play around with. And I, like many weekend coders, have spent most of my time trying to use those tools for their somewhat obvious purposes. But as the tool releases have slowed and we have all had time to gain some mastery of the provided tools it’s time to for us developers to create some custom user interfaces and experiences.

Continue Reading →
Feb 08, 2014 Weekend Coder: Mimic Cascades layouts with custom elements
41 Comments
Peek

There’s been a lot of buzz about the new Sochi Winter Olympics app, obviously from end users following the Olympics and from developers too. When the app first launched, it looked like it had to be an Android port or WebWorks but it ran way too smoothly to be either. We later confirmed that it was written in Cascades, with all custom effects and navigation.

Continue Reading →
Jan 19, 2014 Weekend Coder: Cascades roadmap wish list
57 Comments
Peek

In the months leading up to every release of Cascades, BlackBerry provided a roadmap of what’s ahead. However, after the release of 10.2 there haven’t been any updates to that roadmap. I have reached out to my contacts at BlackBerry Dev Relations and they’ve assured me that there is still new tools being worked on, they just haven’t updated the roadmap for whatever reason.

So since there is no clear sign of what’s ahead, the next best thing to do is what we do best here at CrackBerry; wildly speculate and create a wish list! I’ve compiled a short list of ideas of my own as well as ones from talking with some fellow Cascades developers.

  1. Expand GestureHandler: Currently we have gestures such as single tap, double tap, and pinch but no “swiping” gesture. I know it is possible to create your own touch events that look for “swipe like behavior” but why not add this to core functionality? This expansion could be as simple as the four basic directions with minimal customization.
  2. ListView Improvements: Lists are everywhere in apps, from news feeds to chat messages. One idea that comes to mind is the ability to have the list loop. It is possible to have a Picker loop which follows the same general structure as a ListView but has a different use case and user experience. Another idea is to allow a ListView to have top down content but render bottom up. The idea here is for lists where the most recent event is at the bottom and a user would scroll up to see previous items, think message logs.
  3. More Headless Triggers: I’m not trying to beat a dead horse here but there are some obvious triggers missing from the few that are available. Long running headless is a bandaid solution to having so few triggers. The obvious missing events that come to mind are time/date, incoming call, call ended, and incoming message. I know there are many others but those are the ones I hear come up the most.
  4. Support Qt5: I don’t personally use much pure Qt but I know many others have been very vocal about only having Qt4.8. One of the biggest reasons is that Qt5 adds Qt Quick predefined controls as well as overall improvements throughout the framework.
  5. Finish the delayed items on the roadmap. There are four items, accent colors, simple grid layout, image from url, and list rearrange, on the current roadmap that are listed as delayed with no target release date. Honestly these were some of the things I was most looking forward to in 10.2. Accent colors is already available for WebWorks developers and allows for a nice pop of color without changing too much of the core BlackBerry 10 look and feel. And simple grid layout may be for selfish reasons because making the grid in Logic Puzzles was a huge pain.

I’ve heard other requests and have a few of my own but I think the ones listed above have a broad appeal to the community. However, feel free to add your own API improvements and requests in the comments below that you’d like to see added to the next Cascades release. Please keep these from a developer standpoint and not end user features.

 

Continue Reading →
Jan 05, 2014 Weekend Coder: Text Styling
18 Comments
Peek

One of the easiest ways to make your app have a unique look is to change the text styling. Among basic changes such as color and size that have always been available in Cascades, 10.2 brings the option to change the font to any .otf or .ttf font included in your code. Let’s take a look at the available text styling and how to implement them in your app.

Continue Reading →
Nov 30, 2013 Weekend Coder – 10 months of coding for BlackBerry 10
56 Comments
Peek

November is the 10 month mark for BlackBerry 10 so I thought it would be fun to reflect on the past 10 months from a developer’s perspective. I believe BlackBerry 10 has come a long way in a short amount of time and as a hobbyist developer I have had relatively good success in terms of downloads and sales.

I think the best place to start is to take a look at the tools BlackBerry has deployed for developers. On launch day, January 30th, we had version 10.0 which contained many of the basic APIs required to make apps in a variety of languages. Out of the gate, BB10 has supported 4 very different platforms: Native code/Cascades (C++, QML), WebWorks (HTML), Adobe Air (Actionscript), and Android Runtime (Java).

Continue Reading →
Nov 24, 2013 Weekend Coder – Three types of menus
19 Comments
Peek

Love it or hate it, BlackBerry 10 devices no longer have the “BlackBerry menu” button we were all familiar with on legacy devices. That is not to say there are no longer menus in BlackBerry apps, in fact developers have three types of menus at their disposal. Let’s take a look at each and discuss the use case for each. Also I encourage non developers to read this one to learn where developers are putting menus in their apps.

Continue Reading →
Nov 10, 2013 Weekend Coder: Handling orientation changes
23 Comments
Peek

While designing my first app that is intended for media consumption (rather than my usual puzzle games), I quickly realized that it is necessary to to take into account orientation changes. The orientation is the direction the device is being held, either landscape or portrait. The idea of properly handling orientation is to effectively use screen real estate for both use cases.

Continue Reading →
Oct 20, 2013 Weekend Coder: App Name, icon, and splash screen
30 Comments
Peek

Three important aspects of your BlackBerry app are the name, icon and the splash screen (also known as the loading screen). They are the first three things a user will see when launching your app so they are important to have. The name will appear below the icon. The icon is the face of your app when users are browsing BlackBerry World or once downloaded in their grid of icons. The splash screen is the first thing shown when a user launches your app.

Continue Reading →
Sep 14, 2013 Weekend Coder: Setting a default tab
10 Comments
Peek

Earlier this week I stumbled upon a request for someone wanting to create a feature that is present in the native Calendar app and I thought it would make for a great tutorial. What they wanted to mimic was to allow the user to set a default tab when opening the app. The use case in the Calendar app is you can choose between Day, Week, or Month for your default view. Not only do I think this is a neat ability, there’s probably a few more use cases.

I’ve created a sample app available on the Weekend Coder github site and I suggest pulling that open and following along while reading through the tutorial. Now let’s take a look at the pieces that make up this app.

Continue Reading →
Sep 08, 2013 Weekend Coder: Using ListView to create an RSS feed
22 Comments
Peek

Way back at my first conference, BlackBerry Jam Americas 2012, I heard an interesting statistic: 80% of all apps contain lists. And if you think about it's not that surprising of a statistic considering most of the social network apps (Twitter, Facebook, etc) and everyone's favorite app, CB10, are a list of items. Because of that BlackBerry made sure to have a very good feature for lists, and they do called ListView. So this tutorial will mainly focus on ListView but will have a few other features to make the sample application a bit more full featured.

A bit more back story about this tutorial (feel free to skip this part if you just want to learn coding stuff), I wrote this example app very quickly (given a 2 day deadline) for a friend who lives in Trinidad and Tobago and wanted to show it off at a local developer meet up. So the feed is for a local newspaper there. But since RSS feeds usually follow the same .xml format you should be able to replace the source with any feed of your choosing. Finally, this tutorial may not be the best one to read if you are completely new to Cascades because I skip some explanations for the sake of length. On to the tutorial...

Continue Reading →
Aug 25, 2013 Weekend Coder: The app making process
36 Comments
Peek

Regardless of platform or coding language, to successfully create an app there is a general process I like to follow. When most people think of coding apps, they focus on the coding aspect, however that it just one piece of the process. So let’s take a look at my four steps of creating an app.


Planning


Step one of almost any good process involves planning. In the case of apps and games you want to decide some core features and functions. Once features are decided it is a good idea to start creating mock ups. This can be accomplished in a few ways. BlackBerry offers two great solutions; first they have a Wireframe design PowerPoint slides that have all the core components. Next if you are using Cascades and proficient at Photoshop you can use the Exporter Tool to create your UI in Photoshop. This will act as mockups and once you are complete you can import those mock ups into your QML and it will write the UI code for you. But my favorite method, and probably the most low tech solution imaginable, is good old pen and paper. I keep a few notebooks with design sketches and notes.


Also during this planning phase, is where you should decide things like what language, platform, price point, timing, and scope. Platform and language go hand in hand because if you want cross platform, something like Cascades may not be the best idea. Price point, timing and scope are less for the hobbyist and more if you are looking at it from a return on investment point of view. But even for a hobbyist, you should decide if something will be paid/free before going into it to know the level of support you may need to eventually provide. Timing is important especially in the case of time specific app. Probably not much sense to release an app for the Rio de Janeiro 2016 Olympics right now. And finally scope is to define the exact features that will be included. This is to prevent feature creep which could ultimately delay timing/release of your app indefinitely (more on this below).

Coding


This is the most obvious step of the process. Few things to consider here is to remember to review as you go. If you start ending up somewhere you didn’t want to be, you can go back to the planning phase and reassess. Then on the flip side of that, when you start coding you might start coming up with more ideas to make your app better, more in depth, feature rich, etc. And often times you can add in those features as you go. But in the case of big new features it may be best to shelf some of those ideas for a future update. If you fall into the phenomenon known as feature creep you may never end up releasing your app.

Testing


Obviously as you are coding, you check code for errors and see if the app operates how you intended. But at the end of the day, for usability testing, you are terrible tester. You know where all the buttons are; after all, you put them there.


So what I try to do is find a wide range of testers. I have a 9 year old niece (child), my wife (adult in the tech generation), and mother/mother-in-law (pre tech generation). Not only are they a wide range of ages but I pick people who aren’t afraid to hurt my feelings. Additionally, they all have different levels of technical backgrounds. Getting tester like the ones above will help you get a well-rounded product that has mass appeal.
One thing you may be asking yourself is why not test in the planning phase? I have come to the conclusion that nobody wants to look at sketches and notes, but everyone wants to play on phones. I have gotten much better feedback this way, even if it meant rewriting a lot code.

Updating

The final phase, updating, is an ongoing process. Even after you take in internal feedback and make those updates you will get a lot more feedback from end users. It is always a good idea to give your end users what they want to keep them happy. Plus often times they are your best means of marketing. Also remember all those great ideas you shelved for future releases as to actually release your product in a timely manner. After all, doesn’t everyone love version 2.0 of apps?


In closing, there are a few other things you should consider during you app making process beyond the four steps mentioned above. Throughout the full process it is a good idea to tease/market your app. Once you have released your app, reach out the BlackBerry fan blogs to see if they will do a review. Finally and most importantly have fun while doing all of this. Apps are meant to be fun (even if they serve a serious purpose). Feel free to sound off in the comments below with your app making methodology.
 

Continue Reading →
Aug 17, 2013 Weekend Coder: Utilizing in-app purchases
19 Comments
Peek

I have tried a few pricing models, free only, free w/ ads, free version/paid version, etc but the best I've found is using the "freemium" model. The idea behind freemium is the app is initially free but to access additional portions or to gain extra ability in the app is to pay real money. This same methodology can be applied to already paid apps, thus recreating premium plus apps. Not only have I found this as the most financially beneficial but end users seem to like it the best too and it is not that difficult to implement. To add in-app purchases we'll use the BlackBerry Payment Service.

Few things before I get started, this is not an exhaustive sample on in-app purchases, in fact I am only going to go through a purchase of a consumable good. In app purchases have multiple models within it such as subscriptions and non-consumable goods. Implementing the others are much different but I’ll leave that to you to implement based off your own needs.

Though there is already a really good BlackBerry sample here, there are just too many bells and whistles in there that I find to be annoying. This sample will use the PaymentServiceControl.cpp and .hpp files from that sample but I will strip out the unnecessary parts. Plus I'll explain everything along the way. So go ahead and grab those files from the sample mentioned above.

Continue Reading →
Jul 28, 2013 Weekend Coder: Dynamic active frames for your app
22 Comments
Peek

One of the unique new features in BlackBerry 10 is the the minimized view of an app, also called the active frame. By default it is a smaller version of whatever the app looks like when maximized, however app developers have the ability to change it. Not only can it be changed to a static view, it can also be dynamically updated from signals within the code. Both of these features seem to be under utilized in most apps I see in BlackBerry World currently. Maybe nobody knows about it or maybe they don't know how to implement it... Well that's about the change!

Few coding active frames facts:

  • Can be static or dynamic
  • For all-touch smartphones, the active frame is 334 pixels wide by 396 pixels high
  • For smartphones with a physical keyboard, the active frame is 310 pixels wide by 211 pixels high
  • A complete list of best practices when creating active frames can be found here.

Next, I've put together a video tutorial showing BlackBerry's stock example of the dynamic actives frames in action, then took it a step further and tied it to a QTimer to have the active frame update itself. I have added both the code for DynamicFrame and ActiveTimer to my CrackBerry Weekend Coder Github repository. One note that I did change the ActiveTimer JavaScript a little bit in the uploaded project to account for the timer stopping when hitting zero. As always feel free to sound off in the comments below with any questions.

Continue Reading →
Jul 21, 2013 Weekend Coder: Submitting apps to BlackBerry World
19 Comments
Peek

So you’ve written all your code, packaged your app, and now you are ready to post it for download or sale on BlackBerry World. Once you log into your vendor account, you may find the process to submit your app long and confusing. To help you, I’ve put together a complete walkthrough video explaining every step of the way.

Continue Reading →
Jul 06, 2013 Weekend Coder: Keyboard shortcuts make apps better
36 Comments
Peek

Keyboard shortcuts are the real reason why hardware keyboard phones still exist! Since I leave the editorial pieces to other writers, I won’t rant about how much I love keyboard shortcuts. Instead I’ll do what I do best and show all you fine people how to add them to your Cascades apps.

Before I get started and before anyone asks, no you can’t open the Z10 keyboard and use keyboard shortcuts, these are just for Q5 and Q10 users. On that same note the Z10 will ignore shortcut so you don’t need to repackage without shortcuts for your app to work on the Z10.

There are two main ways to define shortcuts. The shortcut can either be a “System Shortcut” or a “Custom Shortcut.” System shortcuts a list of shortcuts that the user may be familiar with based on using default apps like the Hub. For instance if you press “S” in the Hub a search bar will appear. So if your app has similar functionality you can call the system shortcut for search and when the user presses “S” you can have your search bar appear. Alternatively you could define a custom shortcut for they key “S” to do the same thing. So you may be asking yourself why use a system shortcut. The reason is system shortcuts are localized. If the user sets their language to Spanish the system shortcut for search is “B”. A full list of system shortcuts with their localized letters can be found here.

Next, I like to think of shortcuts being able to be defined in two main places, on an action and not on an action. I’d like to show you an example of each. I’ll use a mix of system and custom shortcuts to show each of those as well. Let’s first look at a system shortcut on an action, consider the following code:

import bb.cascades 1.0 Page {     //...     actions: [         ActionItem {             id: action1             title: "Search"             onTriggered: {                 //call function to open your search             }             shortcuts: [                 SystemShortcut {                     type: SystemShortcuts.Search                     onTriggered: {                         //call function to open your search                     }                 }             ]         }     ] }

This code will create an action in the overflow menu. That action can be called by opening the overflow menu and then pressing the action called “Search.” Or it can be accessed by pressing the “S” key. One neat feature you get for free when using action in the overflow menu is shortcuts automatically show in the top right corner of the action.

Looking back at the code above, realize you’ll need to put your function(s) in two signals for them both to work. It needs to be in the action itself and in the shortcut. Both of these are onTriggered signals.

Now let’s look at an example of using shortcuts that are not tied to an action. I think a great way to show this is to have a shortcut do the same thing as a Button. So the shortcut isn’t necessarily having the system press the button for you, rather you define a shortcut that does the same thing as a Button. Again let’s look at some code:

import bb.cascades 1.0 Page {     Container {         Button {             text: "Help"             onClicked: {                 mySheet.open();             }         }     }     attachedObjects: [         Sheet {             id: mySheet             //...         }     ]     shortcuts: [         Shortcut {             key: "H"             onTriggered: {                 mySheet.open();             }         }     ] }  

This code above has a Button that opens a Sheet. Also there a custom shortcut defined within main Page that defines the key “H” to open the same sheet. Custom shortcuts are limited to single keys, you can have “Shift+H” or “Alt+H” as well but not “K+H”. Additionally you can have “Enter” as shortcut. Another thing to consider when using custom shortcuts you should let your users know what they are by putting as list of them somewhere in your app. Say for example in your help Sheet:

Sheet {     id: mySheet     Page {         Container {             Label {                 text: "Press the 'H' key to open the Help.\n                 Press the 'Enter' key to close Help."                 multiline: true             }             Button {                 text: "close"                 onClicked: {                     mySheet.close();                 }             }                  }         shortcuts: [             Shortcut {                 key: "Enter"                 onTriggered: {                     mySheet.close();                 }             }         ]     } }

One last thing I’d like to bring up about shortcuts is there are a few built in for you. These are called Control Shortcuts. Much like system shortcuts, control shortcuts perform user expected actions but don’t need to be defined in any way. Say for instance if a ScrollView or ListView is the element in focus, if key “T” is pressed the ScollView/ListView will be returned to the top. Same can be done with “B” for bottom. There are few other instances of these listed in the official docs, as well as you may notice some others when playing around on your own.

Now go have fun adding shortcuts to your own apps to make hardware keyboard BlackBerry phones "better" than their full touch counterparts.

Continue Reading →
Jun 30, 2013 Weekend Coder: GAP HTML5 tool for BlackBerry 10 apps
15 Comments
Peek

One of our friends at BlackBerry let us know about a new unofficial tool, GAP (Graphical Aid Plus) for HTML5 WebWorks development.  This tool eliminates the need of using command line for various tasks when developing for WebWorks. Though I prefer coding Cascades apps myself, this tool is really cool and may even entice me to tinker a bit more with WebWorks. With that being said, let’s take a closer look at this tool.

Check out the complete walkthrough of GAP on the BlackBerry Devblog post here. This tool provides a GUI that allows you to do a handful of things:

  • Request signing keys
  • Register signing keys
  • Backup signing keys
  • Restore signing keys
  • Create and install debug tokens
  • Build WebWorks apps
  • Install .bar files in the simulator or any device

All of these tasks are straight forward. I can personally attest that the 10 step process explained in the Devblog post made signing WebWorks apps extremely easy. Plus the video walkthrough of the tool explains everything you will need to know.

No joke, using this tool was the first time I had ever signed a WebWorks app. After requesting and receiving new signing keys (which only takes a few hours via email), I was up and running in about 5 minutes and could sign apps for deployment to BlackBerry World.

So if you are afraid of the command line or just don’t want to bother with it, definitely check out this tool! Either way I am glad to see another great tool that makes it faster/easier to develop for BlackBerry.
 

Continue Reading →
Jun 29, 2013 Weekend Coder: Navigating through your app
24 Comments
Peek

We're continuing our series on learning how to write BlackBerry apps from a hobbyist perspective. This edition, we dig into tabbed navigation panes in Cascades...

Continue Reading →
Jun 16, 2013 Weekend Coder: Tour of the Momentics IDE
31 Comments
Peek

A few days ago we told you BlackBerry updated all the development SDKs to version 10.2 Beta and along with new coding features, the Cascades developing environment (Momentics) got a major overhaul. It features a more streamlined toolbar, better design preview performance, and a bunch of other goodies. So I thought this would be a good time create a video walkthrough of not only the new features of Momentics but a complete overview of the environment.

During the first Weekend Coder post, Hello World, I showed how to create your first app in Cascades. However, I didn’t show much of the interface, toolbars, etc of Momentics. Some of you were probably wondering why and even asked in the comments. I did that on purpose because I knew Momentics was going to get an overhaul in this update. Now that I’ve had a chance play around with the update, I (and indirectly you) am glad I waited because it brings some nice new features and really cleans up the developing experience. Check out the video to see what I mean. As always let me know if you have any questions/comments.

Continue Reading →
Jun 02, 2013 Weekend Coder: Navigating developer resources
32 Comments
Peek

There are plenty of resources out there to help you develop apps for BlackBerry. The usual go-to spot is BlackBerry’s developer site. The next best place for getting help is from other developers. Developers tend to be willing help other developers, however to receive help you need to go about it in the correct manner. When you go looking for help there are certain do’s and don’ts you should follow, so in this posting I’d like to go over some of the resources available to BlackBerry app developers and how to effectively use them.

The main places to look for help are BlackBerry official docs, official BlackBerry forums, 3rd party documentation, CrackBerry developer forums, and generic resources (books, websites, etc.) for specific coding languages. Let’s go ahead and take a closer look at each of these resources.

BlackBerry Official Docs:

Use of the official documentation is pretty straight forward. The documentation provided by BlackBerry for each platform is extensive, and each platform is broken out into its own microsite: Android, Cascades, Native C++, Air, and WebWorks (HTML)…. Oh and good ol' BBOS Java and Themes. (But nobody cares about these anymore, BB10 all the way!)

Once in your platform of choice, the documentation is further broken out into subsections for finer details on particular topics. You’ll find topics such as UI features, navigation, sensors, and API extensions. Also, there are official BlackBerry open source example apps for each platform. These samples are not only there for you to look at and see how things work, but you are free to use the code in your own apps! Digging a bit deeper into BlackBerry’s github repository you will find additional community submitted open source apps for your platform. Again you are free to use the code in these samples in your own apps. Best of all, these microsites are searchable. The search box on each microsite is restricted to that particular microsite documentation and its associated forum. This is very handy to use if you know the name of the function and/or element you are looking for without navigating through the documentation menus.

Next, I look at the BlackBerry developer’s blog as an extension of their documentation. Their blog spans all topics/platforms. They post a few times a week and it's definitely worth checking these articles because not all of it ends up in the main documentation site. Not only are these articles helpful, but here’s a chance to directly interact with the BlackBerry developer relations team. All the members of the developer relations team monitor these articles so feel free to use the comments in these articles to ask for clarification.

Finally, independent of your platform of choice, BlackBerry has provided a universal set of BlackBerry 10 app guidelines. The topics covered in this section are things like icons (size, shape, colors, etc.), menu uses/placement, and how your app should generally look/feel to give users a familiar “BlackBerry 10 experience.” (NOTE: Games are often excluded from these guidelines.)

3rd Party Documentation:

Most of you guys are probably aware of my sites: www.BBcascades.com and www.bbcascadescode.tumblr.com for examples/write-ups for Cascades. However there are a few others I use (in no particular order): www.twocasualcoders.com (Cascades), www.opensourceBB.com/osbbx (Cascades, WebWorks), www.BoredWookie.net (Cascades), www.Filearchivehaven.com (All languages except Cascades). Beyond what these guys post on their sites, they often have commenting systems/contact info so that you can ask them direct questions for either a clarification on one of their postings or to request other forms of help.

Saving the best for last, be sure to check out all the other articles on the Weekend Coder topic here on CrackBerry!

Official BlackBerry Forums:

Here’s where things may start getting tricky for the novice developer. Maybe tricky isn’t the right word… intimidating? Here’s the low down, developers in those forums aren’t there to hold your hand or have casual conversation. Don’t confuse that with they won’t help you with “basic” or “easy” stuff, they just don’t want to have a lot back and forth before getting somewhere. Let me illustrate this with an example:

DON’T DO THIS:

Title: Button won’t work

Question: I have a Button and I want it to change the color of my background, please help?!?!

Odds are most people will ignore you. They just won’t take you seriously. Also most will assume you didn’t actually try anything and are not willing to learn, you just want answers. A better way to approach this would be:

DO THIS:

Title: Button to change Background

Question: Hey guys, I have the following code:

[paste your code here]

And what I want it to do is have the Button change the color of my background from Red to Blue. Any suggestions of what I am doing wrong?

Few things to note in the correct example, the title is a better match to the question and there is code posted. By showing the code you tried, you let whoever ends up helping you solve your specific problem and give them a frame of reference of where you got stuck. However don’t take this the wrong way and think you can post 3 pages of code and have others debug it for you. The idea is to isolate the issue and ask a specific question with a specific answer.

Next the BlackBerry support forums are set up in such a way that threads can be marked as “solved.” So when somebody answers your question, mark their response as the solution. Only the original author of the thread can mark something as the solution, so if you ask the question it is YOUR responsibility to mark the solution response. This serves a few purposes. First when others search and they come across your thread in the future, they can see the solution to the problem without reading the whole thread. Next, developers (myself included) are a bit vain and like to have their ego’s stroked. So marking the response as the solution makes us feel all warm and gushy inside. Furthermore, post “likes” stroke developer egos too. So if you are not the original author and you found somebody’s response helpful, “like” their post. Post “likes” also give developers Jamzone points that they can redeem for BlackBerry swag. So, not only are we vain but we love getting free BlackBerry swag for helping users in the forums.

Another portion of the BlackBerry forums is the Knowledge Base section. Here developers (including BlackBerry employee developers) write how-to articles on various topics.

Last thing to be aware of in the official BlackBerry forums is that there are not only platform specific subforums but a few others for things like Advertising Services, BlackBerry World, and Built for BlackBerry, so please make sure you are posting in the correct forum. Wrong forum topics often get ignored/buried (and usually not moved to the appropriate forum).

 CrackBerry Forums:

CrackBerry developer forums tend to be a bit more casual than the official forums. But the general rules/etiquette explained above still apply. Please be specific with questions, comments, ideas, requests, etc. And since the CrackBerry forum is more casual, feel free to have a bit more small talk here, just keep it developing related. One nice advantage here is that developers of all platforms check these forums so it is a good place to discuss general developing topics, whereas someone like me never really goes too far outside of the Cascades forum on the BlackBerry site.

Generic Sources:

One of the things BlackBerry prides itself with developing for BlackBerry 10 is the use of standard languages. For instance, Cascades is C++, Qt, QML, and JavaScript based. Native is C++ based. Air is ActionScript based. WebWorks is HTML5, CSS and JavaScript based. For the most part all of those languages can be easily found outside the world of BlackBerry. That means there are plenty of resources out there for each of these languages, so pick your favorite search engine and type in your language to find plenty of sites.

One great generic resource is www.stackoverflow.com. This site is a Q&A forum for all types of topics on all languages. I see plenty of BlackBerry related questions/answers posted there too. Just be sure to tag your question appropriately so you get the right audience to find/answer your question.

However, realize these generic resources won’t necessarily be geared towards BlackBerry apps. Furthermore, they may not even be geared towards mobile apps, as these languages are relevant in the desktop space too. So just be aware of this when using these resources.

As a recap I hope this post helps answer the age old question, “Where can I look to get started in developing (for BlackBerry)?” I feel like we’ve gone a step further today to not only point you in the right direction, but how to effectively use these resources. If there are any topics and/or resources I’ve missed feel free to post them up in the comments. See you guys next weekend!

Continue Reading →
May 26, 2013 Weekend Coder: Invoke the share card
23 Comments
Peek

One of the core developing principles for BlackBerry 10 apps is the ability for the app to be social. The easiest way to implement this is to use the invocation framework to call the share card. The beauty of using a share card is most of the work is done for you.

The designers of BlackBerry 10 and Cascades wanted an experience where the user never leaves an app, rather flows from one application to another and that is exactly what cards do for your apps.

So as an app developer all you need to do is call the card and pass any information you want to share. This can be illustrated with a simple example.

Continue Reading →
May 19, 2013 Weekend Coder: Cascades loves JavaScript
32 Comments
Peek

Far too often I hear Cascades and C++ in the same sentence and not enough about Cascades and JavaScript. On that same token another common statement I hear about Cascades is QML is for UI and C++ is for logic. Though that is true, what is also true is QML can be used for UI and logic.

The way logic is handled in QML is through the use of JavaScript. At this point you may be asking yourself (or yelling at me through your screen) is I thought JavaScript was only for WebWorks applications!?!?

Well I am about to show you that is not true and give you three examples of how you can implement JavaScript into your Cascades project.

Continue Reading →
0 comments

Reader comments

Weekend Coder

0 Comments