I have been experimenting around with the tabs and panels and I think I have finally found the easiest way of switching between views/panels on a form using the tabs (as described in the first part of this tutorial). The easiest way is to create as many ScrollPanel objects on your form in GUI Designer, as the number of tabs that you need. But first, you will need to create panel resource objects that you will later on link to each of your scroll panels.

The best part of designing separate panels is, that you can modify the size of the panel. For example, you can make it twice as long as the screen size. When you bind it to the scroll panel later and run the app, the user will automatically be able to scroll through the whole panel using a finger

Going back to the form design, I have created two scroll panels and placed them one above the other. By editing the “Panel ID”-property, each of them has been linked to the corresponding panel that we have produced above.

You may say that this is a dirty solution, as you cannot cleanly access those objects if they are piled up one above the other. I have to disagree there, though. In the top-right corner of the GUI Designer you will see an objects outline, where you can select and modify each scroll panel control separately.

We are done with the GUI Designer, it is time to add some code! In the header file of the form class I have created two additional members to reference both scroll panels:

Osp::Ui::Controls::ScrollPanel *ScrollPanel1_;
Osp::Ui::Controls::ScrollPanel *ScrollPanel2_;

I bind them to the corresponding objects by modifying the OnInitializing() code and adding the following lines to it:

ScrollPanel1_ = static_cast<ScrollPanel*>(this->GetControl("IDC_SCROLLPANEL1"));
 ScrollPanel2_ = static_cast<ScrollPanel*>(this->GetControl("IDC_SCROLLPANEL2"));
 ScrollPanel2_->SetShowState(false);

There we go. As you can see, we directly hide the second panel. By default, the first tab is selected when the app starts, and so we want to see the first panel only. Finally, the tab event handler has to be modified to make it hide/show panels accordingly.

void
MainForm::OnActionPerformed(const Osp::Ui::Control& source, int actionId)
{
 switch(actionId)
 {
     case ID_PANEL_1:
         ScrollPanel2_->SetShowState(false);
         ScrollPanel1_->SetShowState(true);
         this->RequestRedraw(true);
         break;
     case ID_PANEL_2:
         ScrollPanel2_->SetShowState(true);
         ScrollPanel1_->SetShowState(false);
         this->RequestRedraw(true);
         break;
     default:
         break;
 }
}

And this is it! Build the application and run it. You should be able to switch between panels easily by clicking on the corresponding tabs.

There is an additional magic to this whole setup: your panels could be several times longer than the screen size, but you would still be able to scroll through them directly without doing any additional coding. This is yet another example of the simplicity and friendliness of Bada’s UI API. Enjoy!

Related posts:

1. Tutorial: Switch views with form tabs (part 1)
2. Tabs Revised: A Better Way To Switch Views
3. bada Tutorial: displaying a transparent image on a form