Apache Pivot: Swapping pane visibility

Question

I'm having a problem hiding one pane and showing another in my Apache Pivot app. In my BXML file I have two BoxPanes in a window. Pane 1 starts visible and pane 2 starts hidden:

<BoxPane bxml:id="pane1" orientation="vertical" styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
  <Label text="Pane 1"/>
  <PushButton bxml:id="startButton" buttonData="Start"/>
</BoxPane>

<BoxPane bxml:id="pane2" orientation="vertical" visible="false" styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
  <Label text="Pane 2"/>
</BoxPane>

And I have a listener added to the button that should make pane 1 hidden and pane 2 visible:

@BXML private PushButton startButton = null;
@BXML private BoxPane pane1 = null;
@BXML private BoxPane pane2 = null;

@Override
public void initialize(Map<String, Object> namespace, URL location, Resources resources)
{
  startButton.getButtonPressListeners().add(new ButtonPressListener()
  {
    @Override
    public void buttonPressed(Button button)
    {
      start();
    }
  });

}

private void start()
{
  pane1.setVisible(false);
  pane2.setVisible(true);
}

When I click the button though, pane 1 is hidden and pane 2 never shows up. Same thing happens when I reverse the order of the statements in start().

Interestingly enough, when I comment out pane1.setVisible(false), then pane 2 does show up when I click the button.

This is my first Pivot app, so maybe there's some fancy container that does what I want to do in a better way, but I'd still like to know what is going on here. What I'm trying to do seems pretty simple, and I'm sort of baffled why it doesn't work.

rwhitcomb · Answer 1 · 2014-12-09T18:47:54.617

1

You might want to try using a CardPane to switch between your two views. The tutorial on that is here: http://pivot.apache.org/tutorials/card-panes.html The basic idea is to have the CardPane "host" your two BoxPanes, something like this:

<CardPane bxml:id="cardPane">
    <BoxPane bxml:id="pane1" ...>
        <Label text="Pane 1"/>
        ...
    </BoxPane>
    <BoxPane bxml:id="pane2" ...>
        <Label text="Pane 2"/>
    </BoxPane>
</CardPane>

Make both BoxPanes visible. Then when you want to change between them, use cardPane.setSelectedIndex(...);

edited Dec 09 '14 at 18:47

answered Dec 09 '14 at 18:05

rwhitcomb

106
2

You might want to post some details from that link here – John Dec 09 '14 at 18:33
Is this idiomatic Pivot code? I definitely appreciate the answer, but I'm probably even more interested in understanding why my code didn't work in the first place. I have a bit of background creating UIs with HTML and Adobe Flex, so I sort of expected that I could take the most basic container element (equivalent of a
or a Group) and be able to hide and show them independently. If there's something about Pivot where that doesn't work or make sense, that's fine, but I couldn't really find anything to say that it shouldn't.
– Wesley Petrowski Dec 10 '14 at 19:54
My guess would be that hiding the component where your PushButton is located somehow blocks the complete sequence from happening. Therefore, I would guess if you pulled the PushButton outside of pane1 that everything would work. – rwhitcomb Dec 11 '14 at 22:00
So, idiomatically, either your approach or the CardPane solution should work for what you're trying to do. – rwhitcomb Dec 11 '14 at 22:09

Apache Pivot: Swapping pane visibility

1 Answers1