SmartGWT upgrade to 12.1 destroys ToolStripMenuButton display. It shows double buttons one overlaid by the other.

[sarvesh71]

SmartClient Version: v12.0p_2018-11-18/LGPL Development Only (built 2018-11-18)

Browser versions tried :
Google Chrome Version 72.0.3626.121 (Official Build) (32-bit)
Internet Explorer 11.0.9600.19296


The attached is s screenshot of the error page. All theme and css is turned off.
This is a ToolStrip having buttons and a form.(Don't mind the not found images). The problem i'm facing is that the ToolStripButtons(test_btn1 & 2 ) appear fine but the ToolStripMenuButton (test_btn3) is distorted because actually it is appearing twice in the generated javascript, one overlaid over the other. Can anyone please help with this issue?

Code:

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class TestToolStripGWT implements EntryPoint {
/**
* The message displayed to the user when the server cannot be reached or
* returns an error.
*/
private static final String SERVER_ERROR = "An error occurred while "
+ "attempting to contact the server. Please check your network " + "connection and try again.";

/**
* Create a remote service proxy to talk to the server-side Greeting service.
*/
private final GreetingServiceAsync greetingService = GWT.create(GreetingService.class);

/**
* This is the entry point method.
*/
public void onModuleLoad() {
/////////////////////////////////////
RootPanel.get().add(getViewPanel());
}

public Canvas getViewPanel() {
ToolStrip toolStrip = new ToolStrip();
toolStrip.setWidth(1800);
toolStrip.setHeight(40);

final ToolStripButton tlbtn1 = new ToolStripButton("test_btn1");
final ToolStripButton tlbtn2 = new ToolStripButton("test_btn2");
final ToolStripMenuButton tlbtn3 = new ToolStripMenuButton("test_btn3");
toolStrip.addMember(tlbtn1);
toolStrip.addMember(tlbtn2);
toolStrip.addMember(tlbtn3);

// ImgButton boldButton = new ImgButton();
// boldButton.setSize(24);
// boldButton.setShowRollOver(false);
// boldButton.setSrc("icons/24/text_bold.png");
// boldButton.setActionType(SelectionType.CHECKBOX);
// toolStrip.addMember(boldButton);

// ImgButton italicsButton = new ImgButton();
// italicsButton.setSize(24);
// italicsButton.setShowRollOver(false);
// italicsButton.setSrc("icons/24/text_italics.png");
// italicsButton.setActionType(SelectionType.CHECKBOX);
// toolStrip.addMember(italicsButton);

// ImgButton underlineButton = new ImgButton();
// underlineButton.setSize(24);
// underlineButton.setShowRollOver(false);
// underlineButton.setSrc("icons/24/text_underlined.png");
// underlineButton.setActionType(SelectionType.CHECKBOX);
// toolStrip.addMember(underlineButton);

ToolStripSeparator stripSeparator = new ToolStripSeparator();
stripSeparator.setHeight(8);

toolStrip.addMember(stripSeparator);

ImgButton alignLeftButton = new ImgButton();
alignLeftButton.setSize(24);
alignLeftButton.setShowRollOver(false);
alignLeftButton.setSrc("icons/24/text_align_left.png");
alignLeftButton.setActionType(SelectionType.RADIO);
alignLeftButton.setRadioGroup("textAlign");
toolStrip.addMember(alignLeftButton);

ImgButton alignRightButton = new ImgButton();
alignRightButton.setSize(24);
alignRightButton.setShowRollOver(false);
alignRightButton.setSrc("icons/24/text_align_right.png");
alignRightButton.setActionType(SelectionType.RADIO);
alignRightButton.setRadioGroup("textAlign");
toolStrip.addMember(alignRightButton);

ImgButton alignCenterButton = new ImgButton();
alignCenterButton.setSize(24);
alignCenterButton.setShowRollOver(false);
alignCenterButton.setSrc("icons/24/text_align_center.png");
alignCenterButton.setActionType(SelectionType.RADIO);
alignCenterButton.setRadioGroup("textAlign");
toolStrip.addMember(alignCenterButton);

toolStrip.addMember(stripSeparator);

DynamicForm fontForm = new DynamicForm();
fontForm.setShowResizeBar(true);
fontForm.setWidth("*");
fontForm.setMinWidth(50);
fontForm.setNumCols(1);

SelectItem fontItem = new SelectItem();
fontItem.setShowTitle(false);
fontItem.setWidth("*");

LinkedHashMap<String, String> valueMap = new LinkedHashMap<String, String>();
valueMap.put("courier", "<span style='font-family:courier'>Courier</span>");
valueMap.put("verdana", "<span style='font-family:verdana'>Verdana</span>");
valueMap.put("times", "<span style='font-family:times'>Times</span>");
fontItem.setValueMap(valueMap);
fontForm.setItems(fontItem);
fontItem.setDefaultValue("courier");
toolStrip.addMember(fontForm);

//toolStrip.addMember(new ToolStripResizer());

DynamicForm zoomForm = new DynamicForm();
zoomForm.setWidth("*");
zoomForm.setMinWidth(50);
zoomForm.setNumCols(1);

SelectItem zoomItems = new SelectItem();
zoomItems.setName("selectName");
zoomItems.setShowTitle(false);
zoomItems.setWidth("*");
zoomItems.setValueMap("50%", "75%", "100%", "200%", "Fit");
zoomItems.setDefaultValue("100%");
zoomForm.setItems(zoomItems);

toolStrip.addMember(zoomForm);


return toolStrip;
}
}
----------------------------------------------------------------------------------------------
*.gwt.xml file ::
<?xml version="1.0" encoding="UTF-8"?>
<!--
When updating your version of GWT, you should also update this DTD reference,
so that your app can take advantage of the latest GWT module capabilities.
-->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.1//EN"
"http://gwtproject.org/doctype/2.8.1/gwt-module.dtd">
<module rename-to='testtoolstripgwt'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>

<!-- Inherit the default GWT style sheet. You can change -->
<!-- the theme of your GWT application by uncommenting -->
<!-- any one of the following lines. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->

<!-- Other module inherits -->
<!-- inherits smart gwt -->
<inherits name="com.smartgwt.SmartGwtNoScript"/>
<inherits name="com.smartgwt.tools.SmartGwtTools"/>

<!-- Specify the app entry point class. -->
<entry-point class='com.testing.toolStrip.client.TestToolStripGWT'/>

<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>

<!-- allow Super Dev Mode -->
<add-linker name="xsiframe"/>
</module>
----------------------------------------------------------------------------------------------
.html file::
<!doctype html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported. -->


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script> var isomorphicDir = "testtoolstripgwt/sc/"; </script>
<script> var currentSkin = isc.Browser.defaultSkin; </script>
<script src=testtoolstripgwt/sc/modules/ISC_Core.js></script>
<script src=testtoolstripgwt/sc/modules/ISC_Foundation.js></script>
<script src=testtoolstripgwt/sc/modules/ISC_Containers.js></script>
<script src=testtoolstripgwt/sc/modules/ISC_Grids.js></script>
<script src=testtoolstripgwt/sc/modules/ISC_Forms.js></script>
<script src=testtoolstripgwt/sc/modules/ISC_RichTextEditor.js></script>
<script src=testtoolstripgwt/sc/modules/ISC_Calendar.js></script>
<script src=testtoolstripgwt/sc/modules/ISC_DataBinding.js></script>

<script type="text/javascript">
document.write("<" + "script src=testtoolstripgwt/sc/skins/Tahoe/load_skin.js><"+"/script>");
if (currentSkin == "Tahoe")
document
.write("<link rel="stylesheet" href="Showcase_tahoe.css">");

</script>


<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="TestToolStripGWT.css">

<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</title>

<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="testtoolstripgwt/testtoolstripgwt.nocache.js"></script>
</head>

<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>

<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>

<h1>Web Application Starter Project</h1>

<table align="center">
<tr>
<td colspan="2" style="font-weight:bold;">Please enter your name:</td>
</tr>
<tr>
<td id="nameFieldContainer"></td>
<td id="sendButtonContainer"></td>
</tr>
<tr>
<td colspan="2" style="color:red;" id="errorLabelContainer"></td>
</tr>
</table>
</body>
</html>




Thanks
Sarvesh Chandoliya.

[Isomorphic]

This has been fixed for builds dated April 10 and later.

[sarvesh71]

This has been fixed for builds dated April 10 and later.

Thanks for the response,
But the problem is still not solved. I tried using the SmartGWT 12.0p LGPL build shown under 'latest' as on April 10, 09:30 GMT [Link used for download: https://www.smartclient.com/builds/S...p/LGPL/latest]

It still shows overlapping ToolStripMenuButtons. Please help.

Thanks,
Sarvesh Chandoliya

[Isomorphic]

The April 10 builds haven't yet hit the builds site - the latest build there is from, and is labelled, April 9.

Please retest with the April 10 build when it arrives, later today,

In the meantime, you can just set showTitle: false on your ToolStripMenuButtons - if you were loading any of the skins, you would not see this effect.