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.