B4J Tutorial TabPane Example

Erel · Jan 8, 2014

The TabPane container allows the user to switch between different tab pages.

Working with TabPane is similar to working with SplitPane. Each page is made of a different layout file.
The most important point is to use anchors in the pages layouts. This way the layouts will be resized automatically when the TabPane is resized.

For example the following code adds two pages. The second parameter is the tab title.
Tab1 and Tab2 are layout files.

B4X:

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.SetFormStyle("UNIFIED")
   MainForm.RootPane.LoadLayout("Main")
   TabPane1.LoadLayout("Tab1", "Tab 1")
   TabPane1.LoadLayout("Tab2", "Tab 2")
   MainForm.Show
End Sub

TabPane.LoadLayout returns a TabPage object. You can use this object to further configure the page.

The example is attached.

Erel · Jun 14, 2015

Please start a new thread for this question.

tdocs2 · Aug 17, 2015

Greetings, all.

Thank you, Erel for this example.

I want to use the Tabs as an alpha index to a TableView.

How do I control the size of the tab and the top when the arrow is clicked (see two jpgs - All indices show outside of form - I just did an Alt-PrtScr). I also attach project.

Thank you in advance for your replies.

Sandy

Erel · Aug 18, 2015

Not sure that I understand the question. However why aren't you using a Combobox for this?

tdocs2 · Aug 18, 2015

Thank you, Erel.

I had not considered using a ComboBox as an index - seems a better solution. I will experiment with it.

Back to my question on the tab pane....

Can I control the top location of where the tab pane is displayed once it is expanded (as in the example above)?

Best regards.

Sandy

Erel · Aug 19, 2015

No. It is handled by the native control.

tdocs2 · Aug 19, 2015

Thank you, Erel.

You are always very kind.

Sandy

Cableguy · Sep 11, 2015

Hi Guys

Seems that using the Visual Designer, I cannot add a treeview to a tabPage, can I do it in code? how?

Erel · Sep 11, 2015

The simplest way is to create another layout file with the page layout and add it to the TabPane with TabPane.LoadLayout.

Phayao · Jan 3, 2016

Erel said:
You can disable all tabs except of one tab:

B4X:

Sub DisableAllTabsExceptOf(TabPane As TabPane, page As TabPage) For Each tp As TabPage In TabPane.Tabs Dim jo As JavaObject = tp jo.RunMethod("setDisable", Array(tp <> page)) Next End Sub

Use this sub to disable all tabs except of the one you want to show.

Hi, silly question: what is the RunMethod to ENABLE the tab again please ?
"setEnable" or "setEnabled" did not work for me :-(
Or is there a reference about all available methods ?

Thanks in advance,

Chris

Erel · Jan 3, 2016

Replace tp <> page with False

Phayao · Jan 4, 2016

Thanks a lot Erel, that worked !

IslandMedic · Jan 6, 2016

when using the visual designer to create a tabpane I see how it shows up in the wysiwyg display. It shows three tabs. Now how do I select each page in the pane to add form content on to it? I see the code example above but I would rather use the designer to add all my elements for each tab. I am not seeing tabpages in the tree view? Am i missing something really obvious here?

Erel · Jan 7, 2016

The tutorial was updated and is now based on the internal designer.

IslandMedic · Jan 7, 2016

Thank you very much, I was missing the layout file for each tab. makes sooooo much more sense. Again thank you.

Brad

aidymp · Jan 14, 2016

Hi I cant understand how to add something in code?

I was using 1 form, and 1 page and used this code to add a custom list view

B4X:

MainForm.RootPane.AddNode (lw,15,90,490,275)

I have now decided I need more space so have switched to the TabPane. however and obviously the above custom list is on all the tabs, (hovering over all the tabs)

How can I add it to just tab1?

Thanks

Aidy

Erel · Jan 15, 2016

Create a pane in tab1 layout and then add lw to the pane instead of RootPane.

nadhiras · Sep 5, 2016

can we use single layout for 3 - 4 tab ?.....
cause every layout for each tab is same. just tableview or listview for displaying data
the tabpane only for separate data by category...

using different layout for each tab i think wasting time.. cause all the view is same for each tab only tableview...

Erel · Sep 5, 2016

Yes. You can load the same layout file multiple times.

The global views variables will point to the last added views.

nadhiras · Sep 5, 2016

Erel said:
Yes. You can load the same layout file multiple times.

The global views variables will point to the last added views.

if I use single layout for 3 -4 tab and each tab load data from DB..
only last tab can display data.. first,2nd tab cannot load data from DB.. just displying tableview, like empty data... however the data at DB not empty

Erel · Sep 5, 2016

Please start a new thread in the questions forum and post the relevant code.

B4J Tutorial TabPane Example

Attachments

B4X founder

Well-Known Member

Attachments

B4X founder

Well-Known Member

B4X founder

Well-Known Member

Expert

B4X founder

Active Member

B4X founder

Active Member

Member

B4X founder

Member

Well-Known Member

B4X founder

Member

B4X founder

Member

B4X founder

Similar Threads

Privacy & Transparency

Privacy & Transparency