Weekend Coder: Setting a default tab

By Brian Scheirer on 14 Sep 2013 08:29 pm EDT
-
loading...
-
loading...
-
loading...

Earlier this week I stumbled upon a request for someone wanting to create a feature that is present in the native Calendar app and I thought it would make for a great tutorial. What they wanted to mimic was to allow the user to set a default tab when opening the app. The use case in the Calendar app is you can choose between Day, Week, or Month for your default view. Not only do I think this is a neat ability, there’s probably a few more use cases.

I’ve created a sample app available on the Weekend Coder github site and I suggest pulling that open and following along while reading through the tutorial. Now let’s take a look at the pieces that make up this app.

First create a project with a TabbedPane view. This is easily done selecting the premade template while creating a new project or check out my earlier tutorial on tabbed panes.

Next, we need a place to house our page where the user will select their default tab. So much like the Calendar app, in my sample I’ve created a page accessible from the swipe from the top bezel . My settings page is very simple, just a dropdown of the three choices; Tab 1, Tab 2, and Tab 3. This is all we need for UI.

Now, it’s time to make some magic happen. In the DropDown we need it control the activeTab attribute of the TabbedPane. The method I used to do this is to have the DropDown control a int property I have named myDefaultTab, where 1 refers to Tab 1, 2 to Tab 2, and 3 to Tab 3. Now you should see that the activeTab property have corresponding logic.

Finally, we need to have a method to save what you choose in your DropDown after you close the app because, after all, that is exactly what we want to achieve. Without having a save/load method the activeTab would be whatever we defined myDefaultTab value as. So in the applicationui.cpp and .hpp files there are two functions setup to handle the saving/loading of this data. They are saveValueFor() and getValueFor() and I expose them to the QML by setting the context property as _app.

So take a look at the sample code and load it up [on a Z, Q or simulator] to see it in action. I purposely left it very plain looking to not clutter it with fluff/junk. Hope you enjoyed this sample and explanation. Sound off in the comments with any questions or remarks.

10 comments

550WHAT

I just ran my BlackBerry stereo headset thru the washer AND the freakin dryer....AND THEY STILL WORK!!!

Posted via CB10

jason9900

Instructions were not clear enough. Got my man sausage stuck in my ceiling fan

Posted via CB10

Genghis2k3

Yeah. Sounds like you may have misinterpreted the fluff junk reference. You're gonna want to turn off the fan and start again.

Harrison Cole

Nice, thanks!

Posted via CB10

Doughtt

I was lost after the first paragraph but then again I have had a few beers....

Posted via CB10

joshua_sx1

...and yet, this is a default settings tab...

Posted via Z10

oddboy

Nice write up and sample.

Glad to see app dev tutorials on crackberry.

Now c'mon gang, write some cool apps!

(I'm working on my second. It's not that hard!)

Batmark

I see... Uhm, just one question. What?