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