ListViews...within a ListView

I've been trying to figure out how to put ListViews within a ListView for certain use-cases that warrant the UI to be able to swipe through multple screens, either horizontally or vertically.  While a ListView on it's own is usefuly for showing various different items in a nice layout, there are many instances where it may be benificial to incorporate another ListView within a ListView.  I personally incorporated into my BetaZone app, Kloudmix, which has a different UI for Keyboard devices and portrait devices for userpages and profiles.  The main use-case that most will probably be familiar with is the featured carousel, where a screen has a vertical listview with one item being a horizontal listview that let's the user swipe through various featured items.  Another use-case may be user profiles, allowing users to swipe through different panes or containers of information.  Long story short, I spent some time tweaking around with it and reading a support forum post to create this nice and simple tutorial and sample app for you!

Read more...

Simple Active Frames

One of the features that make Native Cascades stand out from Android ports, as well as from competitors like iOS is Active Frames.  Active Frames are a useful tool that can provide important app information to users in the active frames pane on BlakcBerry 10.  Information such as recently viewed articles in an RSS feed app, or latest tweets can provide useful information for users without having to enter the application.  Developers have the ability to pick and choose what they want to show users in active frames and aren't restricted to one definition or use-case.  I personally like to add a nice cover image to the active frame even if I'm not going to invest the time into coding some important information for my active frames.  It looks more professional and visually appealing to users to give them that all-around BlackBerry 10 experience.

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

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

Example of a First Run Tutorial in Cascades

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

Info

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

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

QML elements/components used:

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

QML Signals used:

  • onCreationCompleted:
  • onClicked:
  • onTriggered:

Other used:

  • DockLayout
  • StackLayout
  • XmlDataModel 

 How does the application work?

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

FirstRunImage 1

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

  FirstRunImage 2 

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

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

Thanks guys and happy coding!

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

osbbchannelQR

C00013E89

Back to top