CODEWITHSUNDEEP
javascriptjavahtmlgwt
user3217883
user3217883

Reputation: 1455

GWT FlowPanel not showing contents

I'm new to GWT. I want a VerticalSplitPanel on the left and a VerticalSplitPanel on the right, inside a FlowPanel. This so that the one on the right moves under the one on the left when the size changes from a desktop to a phone. But nothing shows up at all, except for a TabPanel that I've placed above the FlowPanel. Here is the relevant HTML:

<div id="tabPanel"></div>
<div id="flowPanel"></div>

Here is the java GWT:

  public void onModuleLoad() {
    //create TabPanel
    final TabPanel tabPanel = new TabPanel();
    tabPanel.add(new HTML("Add Watchlist Here"),"Watchlists");
    tabPanel.add(new HTML("Add Strategies Here"),"Strategies");
    tabPanel.add(new HTML("Add Backtests Here"),"Backtests");
    tabPanel.selectTab(0);
    RootPanel.get("tabPanel").add(tabPanel);
    
    //create FlowPanel for responsive design to work on small screens
    final FlowPanel flowPanel = new FlowPanel();
    
    //create the left VerticalSplitPanel
    final VerticalSplitPanel leftVerticalSplitPanel = new VerticalSplitPanel();
    leftVerticalSplitPanel.setSize("300px", "500px");
    leftVerticalSplitPanel.setSplitPosition("35%");
            
    //add dummy TextArea to left top VerticalSplitPanel
    TextArea leftTextAreaTop = new TextArea();
    leftTextAreaTop.setVisibleLines(5);
    leftTextAreaTop.setText("dummy text to show left top widget");
    leftVerticalSplitPanel.setTopWidget(leftTextAreaTop);

    //add notes TextArea to left bottom VerticalSplitPanel
    TextArea leftTextAreaBottom = new TextArea();
    leftTextAreaBottom.setVisibleLines(5);
    leftTextAreaBottom.setText("dummy text to show left bottom widget");
    leftVerticalSplitPanel.setBottomWidget(leftTextAreaBottom);

    //add the left VerticalSplitPanel to the FlowPanel
    flowPanel.add(leftVerticalSplitPanel);
    
    //create the right VerticalSplitPanel
    final VerticalSplitPanel rightVerticalSplitPanel = new VerticalSplitPanel();
    rightVerticalSplitPanel.setSize("300px", "500px");
    rightVerticalSplitPanel.setSplitPosition("35%");
    
    //add dummy TextArea to right top VerticalSplitPanel
    TextArea rightTextAreaTop = new TextArea();
    rightTextAreaTop.setVisibleLines(5);
    rightTextAreaTop.setText("dummy text to show right top widget");
    rightVerticalSplitPanel.setTopWidget(rightTextAreaTop);

    //add notes TextArea to right bottom VerticalSplitPanel
    TextArea rightTextAreaBottom = new TextArea();
    rightTextAreaBottom.setVisibleLines(5);
    rightTextAreaBottom.setText("dummy text to show right bottom widget");
    rightVerticalSplitPanel.setBottomWidget(rightTextAreaBottom);
      
    //add the right VerticalSplitPanel to the FlowPanel
    flowPanel.add(rightVerticalSplitPanel);
    
    //add the FlowPanel to the RootPanel
    RootPanel.get("flowPanel").add(flowPanel);
  }

Note: I throw in a couple of TextAreas in the left VerticalSplitPanel hoping that will make something show up, but no joy. Any suggestions?

EDIT: I fixed one bug and set a size to the two vertical panels. Now some of them show up but in a strange order. Left top widget is correct. Left bottom widget is missing. Right bottom widget is underneath the left top widget. right top widget is underneath that!

Upvotes: 0

Views: 114

Answers (1)

Adam
Adam

Reputation: 5589

You have quite a few issues in your code. Starting from the less important:

  1. rightVerticalSplitPanel is empty, so it will not be visible
  2. leftVerticalSplitPanel has only bottom widget because you call setBottomWidget twice (I guess that there should be setTopWidget for textAreaTop)
  3. You need to set the height of leftVerticalSplitPanel (and rightVerticalSplitPanel), for example leftVerticalSplitPanel.setHeight("100px");
  4. VerticalSplitPanel is deprecated and will only work in quirks mode, you should use SplitLayoutPanel instead

Upvotes: 1

Related Questions