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

APP REVIEW - Periodic Table for BlackBerry 10

Periodic Table is a Native Built for BlackBerry Certified Application for the Z10. In order to maintain a BFB status, you must have your app compatible with all BB10 compatible devices within a certain amount of time, so Q10/Q5 users, stay tuned - it's coming. This app fulfills a very niche market, but it does it quite well. We were all very impressed at the amount of work that was put into this application, check out the video to see what we mean!

Read more...

Introducing the Official OSBB App for BlackBerry 10

Earlier today, the official OSBB App for BlackBerry was approved and appeared in the BlackBerry World storefront. We are excited to have an app available that is native, beautiful, and developed soley by us here at OSBB. Version 1.0 of the app is available for both the full touch and QWERTY BlackBerry 10 devices running BlackBerry 10.1 or higher and is, of course, free.  

osbbapp1

Feeds

When designing the OSBB app, we wanted to show our respect to the BlackBerry UI guidelines, but we also wanted to be a little different, so in the news feeds we added a brief description of each article that can be show or hidden with a single tap of the button located just to the right of the title. If the brief description grabs your interest, the full article can be viewed by tapping the list item.

 


 

osbbapp2

Search Feature

When building the search feature into the app, we wanted to mimic the native search present in native BB10 apps such as the File Manager, and we believe we nailed it.  The search feature will allow you to quickly locate whatever it is that you are looking for.

 


 

osbbapp3

Category Filtering

Hiding just above each topic specfic list, is a dropdown menu that will allow you to get more specific results, and allow you to dive a bit deeper. The dropdown is available in the Reviews section, Resources section, and The Rest section.

While we are definitely excited to have the official OSBB app available, we are even more excited to improve it and further develop it, so let us know what features you would like to see in the app, and as always, happy coding!

Download the Official OSBB App today!

getitatbbw

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

Developers Corner - Jason Carter

Jason Carter is a very accomplished developer on the BlackBerry 10 platform and has one of the most popular games available in BlackBerry World -- Words Plus.

Jason is a native of Canada and he and his brother Quincy are the guys behind TwoCasualCoders.com.  These two have brought us the great Cascades BBM integration open source code ‘HelloBBM’ that many Cascades developers use for BBM integration.

Jason is a great guy who is very humble and down to earth. I wanted to talk with Jason for quite some time, and I was glad that he took the time to do this interview.

How many apps have you done? Are you currently working on one now?

I have 2 games in BlackBerry World, WordsPlus and Sequent. Currently, I’m concentrating on bug fixes and enhancing the feature of WordsPlus but I have a few ideas of games I’d like to work on or games I think would be just fun to work on.

Is BlackBerry the only platformfor which you develop? Do you also build for iOS and/or Android? If yes, how does developing for BlackBerry compare to the others?

My first entry into mobile development was for Windows Phone, I created a game similar to Sequent during the summer of 2012. Currently, I plan to make BlackBerry my main/only platform I develop for.
And when it comes to platform comparison, I have a number of years coding with the .NET framework and honestly I find Microsoft’s development tools to be amazing. Developing WordsPlus on the new BB10 platform and tools is fun but frustrating in comparison to Visual Studios. However, VS is a very mature tool set and I’m sure BlackBerry’s tool will improve over time.

What was your motivation for starting app development? Is there another developer that influenced you?

My brother, Quincy Carter, is a huge BlackBerry fan and once BB10 beta 1 came out with Cascades he was on it and coding up his very first app, Launch Codes. He’s the one that really convinced me to make something for the new platform. I was hesitant at first, but figured they’ll be a lot of great opportunities on a new platform. And honestly, being Canadian and BlackBerry being a great Canadian technology company, I have a soft spot for them and wanted to be a part of their come back story?

What is your preferred programming language? Would you be interested in learning another language? (i.e. from HTML --> Cascades)

I’ve spent most of my career working with C#, which is also my preferred language. Cascades is great but I’d consider it more of a markup language like XAML, but more interesting because you can mix in javascript. When it comes to learning new languages, I was forced to pick up C++, which I actually hate! But then I discovered Qt, which is very similar to C# (or perhaps it’s the other way around) so I did a lot of business logic for WordsPlus in Qt. So this one experience allowed me to touch 3 languages in total (C++, Cascades, Qt).

Are any of your apps Built for BlackBerry™(BFB) certified? If so, do you have any tips for new developers on being BFB certified?

I have 2 games (3 technically), Sequent, WordsPlus and WordsPlus: Free Edition. Out of those, both WordsPlus games are BFB.
Tips. Hmm, I could say just follow the guidelines but that would just qualify you to be considered. For me, I went with the attitude of building the best game I can make. I wanted a game that looked clean and was intuitive to use by the end user. Also, I wanted something that looked and felt like it could have been a game actually built by BlackBerry as a pre-installed app.And what I mean by that is I wanted to use sheets, peek and flow, pull down application menu and all of the other BlackBerry 10 specific features and functionality available to me. And not just throwing those features in but integrating them in a way that made sense.
I honestly believe WordsPlus was awarded BFB certification not only because it’s a nice game but also because it show cases BlackBerry 10 features, functionality and UI in a great package. WordsPlus was designed specifically for BB10 and just by that alone it will never be on another platform.

Did you have formal schooling for developing or are self taught? Did you attend any BlackBerry Jam sessions for additional education?

Yes, I have a Software Engineering degree. I haven’t attended any of the BB Jam sessions; all of my BlackBerry development skills is from my technical background and BlackBerry’s online documentation. And also the forums, there are some great and helpful developers in the forums.

What are pointers or advice you could give to new developers? Where could they look to get a good start?

I recommend new developers to start small. It’s not that interesting but the fundamentals will get you very far. Jumping into something complicated might get you somewhere fast but if you don’t understand how you got there, you’ll never learn how to make enhancements to your app and even worse, the next app you do you’ll end up starting from scratch instead building on top of your previous knowledge.
For me, BlackBerry’s online documentation and developer forum were the best places to start.

How do you advertise your applications? Do you have a dedicated website or do you utilize social networking (i.e. Facebook, or Facebook page, Twitter)?

I do everything and anything possible. I have landing page (TwoCasualCoders.com), a Facebook page (facebook.com/wordsplusgame), tell my Facebook friends, a Twitter page (@jasonicarter), and I write guest blog posts and try to get reviews. Any visibility is good visibility.

Which BlackBerry do you use as your main device?

I use my white Z10.

Are you a full time developer? How long have you been doing this for?

My career is in IT as a software developer and analyst. I’ve developed mostly .NET desktop, ASP.NET and PHP websites for since 2004. I started doing mobile development in the summer of 2012.

Check out Jason's Apps in BlackBerry World.

 

Read more...

Developers Corner

I wanted to take a minute and thank you all for visiting the re-designed OpenSourceBB.com (OSBB). We have a lot of awesomeness planned, and we are happy ecstatic to refocus our attention on indie developers.

Not only do we want to focus on helping new and veteran developers, but we also want to amplify current independent developers and their apps. Moreover, we want to give the readers useful information about the actual developer behind the app.

When we decided to refocus and refine our mission around developers, one of the things I personally wanted to do was focus on the developer themselves--not just the apps. So, the plan is to do a weekly interview with a currently active independent developer.

In this weekly series I will be interviewing some of our favorite indie devs and getting to know them a little bit better. Our vision for this is to not only showcase some of the best apps that are out there, but also some of the best developers. I have a couple developers lined up and I hope you will enjoy this series.

Many of the developers that I will be featuring have apps in BlackBerry World now, but we will also be chatting with a few up and coming new developers also.

Please, leave your comments and support these developers, because they are the heart and soul of the BlackBerry developer community.

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

osbbchannelQR

C00013E89

Back to top