SmartGWT tab losing GWT based contents

Question

I have written very basic GWT application where SmartGWt tabs render with label on both tabs.

Problem I am facing here is, when I put GWT based label in second tab and reload application, first tab renders SmartGWT based label but when i click on second tab to look GWT label, it doesn't appear and also I am surprised why first tab content is removed as It was appearing earlier before clicking on second tab.

Please have a look into below code.

package com.test.client;

import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class TestGWT implements EntryPoint
{
 public void onModuleLoad()
 {
  TabSet tabSet = new TabSet();
  tabSet.setWidth("400px");

  Tab tab1 = new Tab("Tab1");
  Canvas pane = new Canvas();
  pane.addChild(new com.smartgwt.client.widgets.Label("test label"));
  tab1.setPane(pane);

  Tab tab2 = new Tab("Tab2");
  Canvas pane2 = new Canvas();
  pane2.addChild(new Label("test label2")); // I need to put GWT widget in SmartGWT tab but it does not render in this tab. Also, it removes contents from first tab
  tab2.setPane(pane2);

  tabSet.addTab(tab1);
  tabSet.addTab(tab2);

  RootPanel.get("testid").add(tabSet);
 }
}

When I set second SmartGWT tab to appear first which has GWT widget then things are working fine.

I am using GWT-2.6.1

Please share your thoughts here!

Regards, Shobhit

My answer was tested with SmartGWT 2.4 and 5.0p - both versions are working fine. — mxlse, Aug 12 '16 at 13:34

carlossierra · Answer 1 · 2016-08-12T15:51:58.000

2

Although I agree on the cause of the problem being RootPanel.get("testid").add(tabSet), the solution is replacing that line with:

tabSet.show();

Keep in mind that in SmartGWT, you should add components to other components using add(). Trying to add components using their IDs is prone to errors.

Finally, keep in mind that Isomorphic discourages mixing SmartGWT's components with components from other libraries. While this is unavoidable sometimes, if you can avoid it in your application, you should, because this is a very common source for bugs. See my comments below for additional sources for these claims.

edited Aug 12 '16 at 15:51

answered Aug 12 '16 at 13:21

carlossierra

4,479
4
19
30

Sorry to disagree, but this would add the tabSet to the RootPanel and not to the `#testid`-Div, so the structure would be different and the result could look very shifted. Only if the tabSet shouldn't be added to a certain div your answer is also correct. :-) – mxlse Aug 12 '16 at 13:32
See http://imgur.com/a/p8dPF for the difference (images are missing, so ignore this - it's about the position) – mxlse Aug 12 '16 at 13:41
@mxlse I did try my solution in the OP's code and it worked correctly. You are assuming things that the OP doesn't mention, and downvoting based on that. – carlossierra Aug 12 '16 at 14:42
Well I took exactly the Code from OP and in the example he IS adding it to a certain element with the id "testid". – mxlse Aug 12 '16 at 15:24
@mxlse the point is that this element with id "testid" is something the OP is using (improperly) trying to make the code work in SmartGWT. And that is a GWT based approach, not an SmartGWT approach (which is why the code doesn't work)! In SmartGWT, it is [not recommended](https://www.smartclient.com/smartgwt/javadoc/com/smartgwt/client/docs/DomIntegration.html) approach (read second paragraph) to add components in the way you are doing it, because it can mess up a lot of different things. – carlossierra Aug 12 '16 at 15:47
@mxlse see another [opinion](http://stackoverflow.com/questions/2419008/how-to-get-html-element-id-of-smartgwt-widgets) on what I am saying. You can, but you shouldn't! – carlossierra Aug 12 '16 at 15:49

score 0 · Accepted Answer · answered Aug 12 '16 at 12:12

The problem is adding the TabSet to the RootPanel. So you receive an

A widget that has an existing parent widget may not be added to the detach list.

error.

Change RootPanel.get("testid").add(tabSet); to

tabSet.setHtmlElement((Element) Document.get().getElementById("testid"));
tabSet.draw();

and it will work fine.

SmartGWT tab losing GWT based contents

2 Answers2