In-App Purchases Made Simple

The process of adding in-app purchases to a Cascades app has proven daunting for many of you out there, but today I will attempt to make life easier for all of you.  About 6 months ago, when I first attempted to add in-app purchases to a Cascades app, there was a lot of head scratching and staring at the screen, but eventually it clicked well enough for me to implement.  After that, I spent a lot of time really wrapping my head around the code, and I am finally at a point where I can simplify the presentation of this code. Interested? Keep reading...

Read more...

Basic Web Browser in Cascades

So, it's been a while since I have been able to get any code together for you guys, but now that MockIt! has launched officially, I should have time to get some posts together (big post coming within a few days!).  Also, Brandon Orr (@elbranduco) will be getting some awesome tutorials together for you Cascades devs.

Today, I made a small project for a friend of mine, and thought some of you might find it helpful.  The app is a simple one page web browser built in Cascades.

Read more...

JavaScript Functions and Preserving Data

Cascades is a framework built on top of Qt, a C++ application framework. Qt allows for fantastic user interfaces with a custom language based on JavaScript called QML, or Qt Modeling Language. Not only is QML based on the structure of JavaScript, but it allows us to use JavaScript in our code.

Coming from a web design background, I have almost ZERO experience with C++. I'm not saying it's difficult to use or challenging, I'm just personally not use to it. When I learned that I can opt for JavaScript to do simple functions instead of C++ I was ecstatic, I just wasn't sure where to start.

In this tutorial I'm going to walk you through making a random number generator using some JavaScript MATH functions as well as creating our own.

Read more...

Fundamentals Brief: Calling C++ functions from QML

This tutorial is the first in a series of very brief and concise tutorials covering some basic fundamentals needed to develop BlackBerry apps using Cascades.

There comes a time when a Cascades developer may need to utilize C++ in conjunction with his or her QML. Many developers use JavaScript for app logic and sidestep using extra C++ logic entirely. Having the ability to use JavaScript  and/or C++ in conjunction with QML is one of the strenghts of Cascades development, so pick your poison. That being said, this tutorial is meant to be a brief and very basic introduction to the "how" when it comes to calling C++ functions from QML and returning the result of the function back to your QML.

Read more...

Keeping it pithy: Toasts in Cascades

What is a toast? Well according to BlackBerry...

"A SystemToast displays a small message that expires and disappears after a predefined amount of time. This message provides users with information and allows them to continue with the application after the toast expires."

You've seen toasts when you clear your browser history or delete an attachment from a BBM and in many other places throughout BlackBerry 10. When dealing with toasts and any other user prompts, developers need to be cognizant of the user experience and of the fact that users typically do not want to be interrupted (at least not too frequently).

Read more...

Simple BBM Integration in Cascades

Did I say simple? I meant very simple. In the following sample app I started with the standard empty cascades project and added a total of ~55 lines of code to the applicationui.cpp and applicationui.app files. In addition the UI is very plain as to not take away from the core purpose of a sample application which is to demonstrate how to do something, right?

Read more...

Easing into Cascades Animations

OverView

One of the many elements that makes the Cascades UI so beautiful is the widespread use of animations. Even without programming it yourself, animations are an integral part of your Cascades application. For example, when you pull in a sheet it slides in, or when you push a new pane within a NavigationPane, you see the built in animations in action.

There are many more subtle animations in Cascades that happen automatically, and I am not going to attempt to name them all because I would be here all day. We will just agree that animations are everywhere in Cascades. With that in mind, using any extra animation can easily become overwhelming to the end-user.  However, adding subtle animations in appropriate places in your app can really improve the overall UX and really give your app a premium feel.

Let's Get Started

So, with all this built in animation why would you want more? While it is true that you could easily overdo it with animation upon animation, adding subtle animations in appropriate places can really give your app a premium feel. Let's look at an example from the BlackBerry Cascades documentation.

freeform titlebar

Free-form title bar containing expandable content

The above example is shown in the official docs (http://developer.blackberry.com/cascades/reference/bb__cascades__titlebar.html) and demonstrates how to have an expanable area that drops down from the TitleBar. An example of this in action can be seen in the native BlackBerry World app when viewing any top list.  

IMG 00000147

There are some key differences between the example above and the implementation in the BlackBerry World app, and it's those differences that give the BBW implementation a more premium feel. The list is styled a bit more and uses check marks instead of radio toggle, and there is an arrow in the top right that flips based on whether the exanable area is expanded or collapsed (similiar to in a dropdown).

Let's take the code from the top example from the the official docs...

Page {
    titleBar: TitleBar {
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                layout: StackLayout { orientation: LayoutOrientation.LeftToRight }
                leftPadding: 10
                rightPadding: 10
                Label {
                    text: "Show expandable content"
                    textStyle {
                        color: Color.White
                    }
                    verticalAlignment: VerticalAlignment.Center
                    layoutProperties: StackLayoutProperties { spaceQuota: 1 }
                }
                CheckBox {
                    id: toggleExpanded
                    verticalAlignment: VerticalAlignment.Center
                }
            }
            expandableArea {
                content: RadioGroup {
                    Option { id: option1; text: "option 1"; selected: true }
                    Option { id: option2; text: "option 2" }
                    Option { id: option3; text: "option 3" }
                }
                indicatorVisibility: TitleBarExpandableAreaIndicatorVisibility.Hidden
                expanded: toggleExpanded.checked
                onExpandedChanged: {
                    toggleExpanded.checked = expanded
                }
            }
        }
    }
}

So in the above example a CheckBox is used to toggle the expansion and collapse of the expandableArea, and radio toggles are used to on the list items within the expandableArea. While this is fine, and gets the job done, why not style it a bit to make it a bit fancier? In the code below we take the example from the docs and do the following:

  • Replace the checkbox with an ImageView
  • Add RotateTransition animation to ImageView
  • Create and use a custom bool property
  • Dynamically change label to reflect the selected option

 

Page {
    titleBar: TitleBar {
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                leftPadding: 10.0
                rightPadding: 10.0
                Label {
                    text: radioGroup.selectedOption.text
                    textStyle {
                        color: Color.White
                    }
                    verticalAlignment: VerticalAlignment.Center
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1
                    }
                }
                ImageView {
                    id: toggleExpanded
                    property bool checked: false
                  
                    onTouch: {
                        if (checked == false) {
                            if (event.touchType == TouchType.Down) {
                            } else if (event.touchType == TouchType.Move) {
                            } else if (event.touchType == TouchType.Up) {
                                rt1.play()
                                checked = true
                            }
                        } else {
                            if (event.touchType == TouchType.Down) {
                            } else if (event.touchType == TouchType.Move) {
                            } else if (event.touchType == TouchType.Up) {
                                rt2.play()
                                checked = false
                            }
                        }
                    }
                    animations: [
                        RotateTransition {
                            id: rt1
                            duration: 150
                            toAngleZ: -180.0
                            fromAngleZ: 0.0
                            easingCurve: StockCurve.CubicIn
                        },
                        RotateTransition {
                            id: rt2
                            duration: 150
                            toAngleZ: 0
                            fromAngleZ: -180.0
                            easingCurve: StockCurve.CubicIn
                        }
                    ]
                    imageSource: "asset:///ic_to_bottom.png"
                    verticalAlignment: VerticalAlignment.Center
                    horizontalAlignment: HorizontalAlignment.Center
                }
            }
            expandableArea {
                content: RadioGroup {
                    id: radioGroup
                    Option {
                        id: option1
                        text: "Option 1"
                        selected: true
                    }
                    Option {
                        id: option2
                        text: "Option 2"
                    }
                    Option {
                        id: option3
                        text: "Option 3"
                    }
                    onSelectedOptionChanged: {
                        rt2.play()
                        toggleExpanded.checked = false
                    }
                }
                indicatorVisibility: TitleBarExpandableAreaIndicatorVisibility.Hidden
                expanded: toggleExpanded.checked
                onExpandedChanged: {
                    toggleExpanded.checked = expanded
                }
            }
        }
    }
}

 

So there you have it. Import the zip attached to this post into the Momentics IDE and run it on your device to see it in action.  Tinker with the code and see what you can improve and/or create.

Relevant Links:

Read more...

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.

 

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...

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...
Subscribe to this RSS feed
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top