Weekend Coder: Mimic Cascades layouts with custom elements

By Brian Scheirer on 8 Feb 2014 04:47 pm EST

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:

  1. Tapping the tab icon will open/close the menu
  2. 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
  3. The page will have a fade effect overlayed as the tab menu is exposed
  4. 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
  5. The menu can also be “closed” by swiping from the right to the left with the page following the users finger
  6. 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”)
  7. Do not allow the user to over open or over close the menu
  8. 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.

Reader comments

Weekend Coder: Mimic Cascades layouts with custom elements


If you click on the link through a the browser or on a desktop it will work, CB10 app doesn't seem to like youtube links

Posted via CB10

Press/hold until the menu pots out Tue right, then choose open with, there you choose what ever app you have for Youtube and it opens

Posted via CB10

The Sochi app is by far and away the fastest, smoothest most efficient app i've got on my phone!!

How is it that they've managed to have such efficiency compared to other apps (especially those tagged made-for-blackberry)?!?!?

This should be used as a marketing tool and a success story!

Posted via CB10

What BlackBerry device is next to the q10? It looks like q5, but seems like a q10 keyboard was put on it.

Posted via my smooth and sexy Q10 running 10.2.1259 leak

Very nicely done! Would love for someone to create an open source CustomTabbedPane, CustomTab, and CustomPage

Whatever happened to the Cascades Photo app shown before the release of OS10? Would be cool to have pictures in Cascades.

Posted via CB10

Maybe a dumb question but, what is that phone all the way to the right in the picture? It looks like a Q10 in a boxy case but the keyboard doesn't have the silver frets. Just wondering!

I did some simple minor tweaks so that the touch also responded from the left tab container area, and so that the tab listing wont be cut off when swiping up and down.

Other than that this is a great solution to having a customized tab navigation style.
Thanks for sharing!!

Pretty sure it's HTML5 / Web works. There is no ability to style a tabbed pane or navigation pane.

Posted via CB10

I am definitely sure the Sochi app is Cascades. As you can see it is possible to mimic TabbedPane and stylize NavigationPane as I have shown in the example.

Posted via CB10

That's awesome! I definitely suggest putting an activity indicator/loading bar while the webviews load. Awesome to see this demo put to good use.

Use how ever you'd like, I know I didn't put the proper opensource labeling in the code but I promise I won't sue. I plan on adding new features and on the next github pull I'll be sure to add all the opensource stuff.