B4J Tutorial SplitPane Tutorial

B4J v4.00 adds support for SplitPane container. SplitPane is a container made of two or more sections divided with movable dividers.

The SplitPane orientation is either horizontal or vertical.

You can combine multiple SplitPanes to achieve more complicated layouts.

Each section of the SplitPane is made of a layout file. This means that the layout will be split to multiple smaller layout files.
You should use anchors to allow the layouts to be resized when their section is resized.

Example project:


This layout is made of the following layout files:
- Main: Horizontal SplitPane with three sections and menu bar.
- LeftSide: The left ListView with the title.
- Center: The WebView with the TextField and Button.
- RightSide: Vertical SplitPane
- RightHistory / RightFavorites: The two lists.

You can limit the minimum and maximum sizes of each section by calling SplitPane.SetSizeLimits.

You can also get or sets the dividers positions with SplitPane.DividerPositions. It returns an array of doubles. Each value represent the position of a divider. The values are between 0 to 1.

The important point is to use anchors set to BOTH and designer script if necessary to create flexible layouts.


  • SplitPane.zip
    8.5 KB · Views: 1,147


Well-Known Member
Licensed User
how to replace/remove Layout into SplitPane ?
SplitPane.LoadLayout ("Layout1")
'here, i want remove "Layout1" first to load another Layout
SplitPane.LoadLayout ("Layout2")
i see two layout

perhaps with Pane/Panel ?


Active Member
Licensed User
Hi All,

I have created a base layout as suggested by Erel with a large pane anchored to all sides.
I load two vertical layouts one on the left and one on the right both occupying 1/2 the screen each.
The left layout is pretty much static but the right layout is either blank or has a different layout depending on selections on the left.

My questions are:
1) How do you remove the layout on the right to leave it blank or do you load a blank layout to replace it and how do you specify where to load on the right of the screen?
2) Does loading a layout replace the existing layout or does it load it on top?

Hope this is some what clear.



Active Member
Licensed User
Hi all,
I try to create an app based on SplitPane, each side are created dynamically. I would like to send a value from one side to other (with the bottons from left side i would like to change the label value in right sige). Attached a test project.


  • testApp.zip
    3.2 KB · Views: 503

Similar Threads