Weekend Coder: Mimic Cascades layouts with custom elements

By Brian Scheirer on 8 Feb 2014 04:47 pm EST
4
loading...
0
loading...
37
loading...

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.

41 comments

Armin Osmanovic

I love how when you open the menu from the left the words behind it move a little, so subtle but look great

Brian Scheirer

I didn't mimic that effect, I personally thought that looked bad. I suppose I could add it in.

Posted via CB10

daves_25

Agreed. The parallax never really does it for me.

Posted via CB10

dtuivs

I was just thinking the same thing as played with menu in sochi.

jojo beaconsfield

Oh,I wish I could join in on the fun!!!

Brian Scheirer

Not really worthy enough to make it in the article but here's a quick demo of the sample in action: http://www.youtube.com/watch?v=CTWsiqo4Usg

Posted via CB10

Q10Bold

Video not found

Posted via  Q10

Brian Scheirer

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

Q10Bold

Ok thanks.

Posted via  Q10

Oscar_E

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

Oscar_E

Sorry for the typos, writing while walking

Posted via CB10

jojo beaconsfield

You got nice tools to work with in the video,congrats !!! Keep up the good work!!!

LeroyP09

Video not found in fast tube nor using browser.

Posted via CB10

Bla1ze

This is so awesome. Thanks for putting it together and sharing Brian.

oddboy

Very cool, always appreciate these columns.

BRON :: a cron-like task scheduler for BlackBerry 10. http://apps.oddelement.com

OceanBerry

Thanks a lot, Bruce!

Posted via CB10

OceanBerry

(Brian, I meant!) sorry.

Posted via CB10

feemurk

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

Sean Flaherty

I'd love to try out the Sochi app, but I have a Q10. :(

Posted via CB10

dalight13

I don't know what you mean by that but I use it on my Q10....

Posted from my Q10 with only 1GB of RAM

ScottDionBrown

It's available for Q10. I have it open right now.

Posted via CB10

nottydread

Inspiring stuff. Thanks.

Posted via CB10

BlokeNamedJeffrey

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

Brian Scheirer

Dev Alpha C. Pretty much the same specs as a Q10 but in a boxy case

Posted via CB10

qbo

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

pblakeney

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

Posted via CB10

revil-0-316

Thanks Brian for sharing. Cool! I'll try this to one of my app project :-)

thatdangkidhere

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!

Jerale Hoard

Dev Alpha C

Posted via CB10

EchoesFX

Orange UI in Cascades? Yes please :)

Posted via CB10

stickyiki

Thanks for doing this Brian! Much appreciated

indoballer

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

RubberChicken76

Loving this app!

Posted via CB10

bjorn_late

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

Posted via CB10

Brian Scheirer

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

dummy

Thank You Brian, I have my 1st App for BlackBerry 10 already! - http://www.youtube.com/watch?v=Vz7VWcLriYE

Brian Scheirer

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.

EchoesFX

What are the limitations license wise on using this as a template for our own apps?

Posted via CB10

Brian Scheirer

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.

indoballer

Hey, i've finally re-spinned an app i made, to include the Custom Tab Navigation look. The idea of course was from Mr. Brian Scheirer, but ive heavily tweaked it to beahav properly and respond just like BB10's original Tab Nav. The only thing that's missing is the partial peek of the Tab Nav where only the Tab icons are visible. Anyways thanks again and check out the app!!

http://appworld.blackberry.com/webstore/content/40100941/?countrycode=US...