DEVELOPERS BLOG

Recreating Hype Machine’s iOS User Interface Using Cascades for BlackBerry 10

CASCADES / 08.23.13 / alexkinsella1

hypem_01

This guest post was provided by  Kyle McInnes,  Director at Smoke Labs, and edited by Alex Kinsella

Smoke Labs is an Ottawa based game studio and we’ve recently been taking on client work. Recently, we have been getting a lot of requests for BlackBerry 10 development. One such request was to recreate the popular Hype Machine iOS app and bring the experience to BlackBerry 10. This was a great opportunity because not only is Hype Machine an excellent music discovery service, but BlackBerry 10 has many opportunities for new music service apps.

As any developer knows, doing client work can be a pain if you aren’t starting off with the right tools and plan. Working with Hype Machine has been an amazing experience in this sense because the company has a well-documented API as well as an iOS app that we could use as a guide. The company even provided us with the iOS source code so we could use it as a guide for certain technical hurdles.

You’ll notice that the Hype Machine iOS app has a very distinctive look and feel. In terms of User Experience and Interface, one crucial element was the title bar at the top of the screen, which contained a button that allowed you to navigate to a list of main app features, kind of like a main menu. On subsequent screens, this button acted as a back button. In Cascades, this functionality is available out of the box using a TabbedPane.

TabbedPanes give you access to a root menu where you can put main app options. These options can be hidden and opened from a root screen (or page), or displayed directly on the ActionBar (up to four options) at the bottom of the screen. When you push a screen (show a screen on top of the one you are currently on), the main menu button becomes a back button. The ActionBar can be hidden while scrolling a screen freeing up screen real estate, which is particularly useful on devices that have smaller screens. Caveat: ActionBar can only be displayed on the bottom of the screen and only supports buttons, not standalone text, so there has to be a title bar at the top of the screen and a menu at the bottom. You can hide the action bar and create your own menu behaviors but that takes away from the BlackBerry 10 look and feel, and takes more time to implement.

Hype Machine, like many apps, has a fair amount of lists to implement. In Cascades, there is an extremely useful tool called a ListView to simplify the process. ListView is built using the Model-View-Controller design pattern and, given a data source, will automatically populate a list of custom or standard list items. This made list construction easy and gave us more time to concentrate on making the list items more visually appealing. We took the model (JSON data) from the server and dumped it into the list. When the model was changed, the menu items were automatically updated and a number of callbacks (signals in Qt) were emitted that were used to make other changes in the app.

Hype Machine has the ability to share via Facebook and Twitter in the iOS version. Although BlackBerry 10 does not yet have native Facebook support, they do provide you with the BlackBerry Share framework. BlackBerry Share is a very simple call to open up the sharing interface and it gives you a wide range of ways to share what’s going on in your app. Since the platform handles this for you, it is a great way to get your app social fast.

We’re looking forward to seeing how Hype Machine can grow along with the BlackBerry 10 platform. The iOS version of Hype Machine integrates with iTunes and we see a tremendous amount of opportunity to integrate with one of the existing music services available on BlackBerry 10 or the native BlackBerry Music Store. We’re also looking forward to growing the BlackBerry 10 client with Hype Machine’s desktop service as it evolves.

We encourage all iOS developers to take the time to explore BlackBerry 10 development and if you’re interested in talking shop with us, feel free to reach out at @smokelabs or by email at kyle@smokelabs.net.

Hype Machine for BlackBerry 10 is AVAILABLE RIGHT NOW!

About alexkinsella1