B4J Tutorial SplitPane Tutorial

Discussion in 'B4J Tutorials' started by Erel, Dec 16, 2015.

  1. Erel

    Erel Administrator Staff Member Licensed User

    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.

    Attached Files:

  2. giannimaione

    giannimaione 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 ?
  3. Erel

    Erel Administrator Staff Member Licensed User

    Create a base layout with a pane anchored to all sides.

    Now you can load layouts to this pane and later remove all views and load a new layout.
    Mashiane, Mark Turney and ilan like this.
  4. atiaust

    atiaust 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.

  5. Erel

    Erel Administrator Staff Member Licensed User

    Please start a new thread for these questions.
  6. Mashiane

    Mashiane Expert Licensed User

    Wow, thanks I was just thinking about doing this and looking for a solution...
  7. StarinschiAndrei

    StarinschiAndrei 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.

    Attached Files:

  8. Erel

    Erel Administrator Staff Member Licensed User

    Please start a new thread for this question.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice