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.
Though I will admit that I don’t care much for the winter games, living in Florida I don’t understand all the white stuff on the ground, but I will say it a beautiful app. So beautiful that I decided to replicate the style and navigation and share how I did it.
I would like to preface this write up with this is probably not the same way the developers of the Sochi app coded these features. This method I am going to describe behaves a bit differently and more closely resembles a “true TabbedPane and NavigationPane.”
Ok with that little disclaimer out of the way, recall a few months back I showed how to use TabbedPanes and NavigationPanes in Cascades. These handy built-ins are an easy way to create a familiar “BlackBerry 10” navigation look and feel. Their only downside is there is very little customization that can be done to the styling of the action bar, over flow actions menu, and tab overflow menu. So the obvious next step would be to write custom code that mimics the layout and gestures but add in your own styling.
Here are the design considerations made while making this sample:
- Tapping the tab icon will open/close the menu
- When tab menu is “closed” and the user swipes anywhere on the screen from left to right the page will move with their finger to “open” the tab menu
- The page will have a fade effect overlayed as the tab menu is exposed
- Selecting an item from the menu will slide back “closed.” If it was a tab other than the currently selected one, new content will be shown on the page, icon changed, and change the highlighted item in the tab menu
- The menu can also be “closed” by swiping from the right to the left with the page following the users finger
- Embed all of this in a true Navigation Pane so navigation within one of the “tabs” can push to a new page however use a custom “action bar” for the back button. (This is different from how the Sochi app handles navigation, but this is more like “true Cascades”)
- Do not allow the user to over open or over close the menu
- Most important of all… Custom art and colors to give the app a unique look!
All of this was accomplished via two main signals. The first item I used a gestureHandler, the TapHandler to translate the page either left or right in the x direction. This is only used when the tab icon in the lower left of the screen is tapped. The fancy swiping/sliding effect was done inside of an onTouched signal that is inside the root Container. The basics behind this signal is it records where the user starts their swipe and where they end it and if the translation moves from the left to right the menu will open or if it records right to left it will close.
Additionally, the onTouch signal listens for the user trying to over swipe in either direction and kills the swiping action (even if the user continues to swipe). Another special case is if the user only slightly opens the menu it will pop back closed; this is to prevent subtle left to right movements from popping open the menu all the time.
Finally, I tried my best to make this sample modular. So you’ll see in the github project below I separated out most of my code for these effects from the content that would go in each tab. I did this so if any of you fine folks would like to use the sample in your own app you don’t have to sift through my logic.
If you have any questions about the rest of the code let me know in the comments. For developers (and aspiring devs) I have posted the code on the CrackBerry github repo. And for casual users I have uploaded a signed bar that you can sideload on your device just to play with, not much to see though.
- More information / Download Custom Cascades Sample code from Github
- Download Custom Cascades Sample App
Read more
BlackBerry 10 device simulators updated to 10.3.1.2072
A little something for BlackBerry developers. If you head over to the BlackBerry developer site, you'll find a new batch of device simulators available for download. The last release shows them as running v10.3.1.2072 which should help with testing out any apps you're working on. As always, they're available for Window, Mac and Linux via VMWare images. There is no notable changes or...
BlackBerry OS 10.3.1.1949 device simulator now available
Just a little bit of a heads up for any developers (and those who just like to play around) who might not have spotted the update as of yet. You can now download the latest device simulator from the BlackBerry website, which sits at OS 10.3.1.1949. Keep in mind, if you plan on giving it a look you will need some VMWare tools in order to run it all but you can find the full details on...
Watch the application infrastructure for BES12 webcast
If you missed out on the application infrastructure for BES12 webcast on December 4th, you can now catch the replay of the event on your own time. We'll review the mobile app infrastructure built into BES 12 including how corporate systems can minimize risk when opening access to apps outside their firewall, and ensure data is secure through its journey from inside the corporate...
Application Infrastructure for BES 12 webcast
Creating apps for Enterprise customers can keep a developer busy but when doing so corporate data and systems need to be carefully managed. If you're building apps for BES12 customers, BlackBerry is hosting an application infrastructure for BES12 webcast on December 4, 2014, at 2 pm – 3 pm EST to help educate corporate app developers about best practices. We'll review the mobile...