TeaTimer and Q10

March 10, 2013 — Leave a comment

Please read at first my story ‘Behind the scenes‘.

TeaTimer should run on Touch and Keyboard devices, so I just did a first implementation and here are my experiences.

Redesign Layout Homescreen for Q10

Q10 has less space available: 720×720 instead of 768×1280. It’s worth rethinking the layout. Some screens worked out-of-the-box, but the startscreen got a redesign for Q10.

first decisions:

  • Moving the DropDown on top over the images
  • Making the ActionBar as Overlay to avoid distortion of images.

q10-layout-01

You have to reserve 96 Pixel for the DropDown UI Control.

If you expand the DropDown, it doesn’t use the complete space of the screen – only 50% were used from my experiences. Setting  the height to a higher value doesn’t work. My first idea to make the Images invisible if DropDown is expanded, doesn’t look good with only half screen occupied by the DrowDown.

My solution: move the Image 360 px down (TranslateY) and all is perfect. I also hide the ActionBar to only display the DropDown where the user has make his/her choice.

q10-layout-02

To avoid flickering I’m reusing the DropDown area to show the progress while brewing the tea and placed a ‘Stop’ button to cancel the process:

q10-layout-03

Here are the Screenshots how it looks now on BlackBerry Q10:

Homescreen with Tip-of-the-day:

tip-of-the-day

Selecting Tea (DropDown expanded):

select_tea

Animated progress of brewing:

progress

Tea is ready:

tea_thanks

That’s it !

Most Screens working out-of-the-box

All other screens are working without any changes. the secret to get this: use of

  • ScrollView
  • ListView
  • DockLayout

Here some examples:

tea_list

tea_details

Minimized Views (ActiveFrame / SceneCover)

As you know, the TeaTimer is running in the background and minimized Screens have three states: stopped, brewing, ready.

Thanks to the tips from Staffan Lincoln I already have changed the minimized views for Z10 using the ‘Header’ template, so minimized is also working out-of-the-box for me:

all_minis

Text is readable inside Header and it’s ok only to see 50% of the Images compared with Z10.

More work ?

As soon as I’m getting the DevAlpha C I will add some more comfort for the keyboard using shortcuts. But for now I’m having an App supporting both devices.

As soon as the update is approved in BlackBerry World you can update on Z10 or install on Q10 if you’re one of the lucky owners.

Have Fun !

Cascades Trainings

BTW: there will be some Cascades trainings by me in April 2013. Come and learn HowTo develop cool apps for Z10 and Q10.

No Comments

Be the first to start the conversation!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s