Jeremy Duke

Jeremy Duke

Website URL: http://opensourcebb.com

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

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.

MockIt! Beta 2: Some Statistics and Release Notes

Recently, the Beta 2 version of MockIt! was released in BlackBerry BetaZone. With this release I was able to implement the most requested features and fixes and refine the UI/UX. Since its release, Beta 2 has been downloaded over 7,000 times by over 5,000 unique BlackBerry IDs. Moreover, over 14,300 testers have enrolled in the MockIt! beta program since launch, and MockIt! (all versions) has been downloaded a grand total of 28,000 times.  Keep reading for all the changes and some details regarding the roadmap.

Quick Tip: Update QML on a live device in real-time!

UI testing just got a great deal easier for Cascades developers! Developers can now make changes to their QML, and when the file is saved in the Momentics IDE, the changes are instantly seen on the currently paired test device. Want to use this? If so, follow along below.

Quick Tip: Invoking the Media Preview "Card" [updated 12-31-2013]

The Invocation framework is one of the hallmarks and great strengths of the BlackBerry 10 operating system, and can allow us developers to easily integrate with core and third-party applications. To make the process easier, in this tutorial I will show you how to implement an Invocation Manager that you can can call at will from inside your QML to invoke just about any card or app available.

As usual, we will be starting with a standard empty Cascades project and working from there, so in Momentics, start a new empty project and name it whatever you wish (I will be using 'InvokeMediaCard'), and I will be using an API level of 10.2. 

 

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.

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

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?

Collaborate on Awesome: Start an Official BlackBerry Developer Group in Your Area!

If you are a BlackBerry developer and know other developers and or designers in your area, you should definitely consider starting an official developer group. Developer groups allow developers to collaborate, network, and create mobile experiences with other developers and designers in their area. As we all know, the life of a coder can get lonely at times if you get lost in your code and forget about the outside world*, so why not reach out in your local area and find some other devs with which to share, collaborate, and create?

*50% sarcasm

Some Benefits

Official Developer groups...

1receive regular updates and information directly from BlackBerry regarding program information and developer information

2get exclusive discounts and opportunities relevant to BlackBerry mobile app developers

3gain access to regional and global developer events and conferences where developers can network and improve their craft

4receive BlackBerry 'swag' such as T-shirts and other accessories given out at the discretion of BlackBerry and/or the group managers

Get Started

For all the details regarding how to start a developer group in your area, head over to the BlackBerry website at the link below and complete the Developer Groups form.

http://developer.blackberry.com/jamcommunity/groups

Happy Coding!

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:

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

osbbchannelQR

C00013E89

Back to top