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.

Read more