We are trying to implement Test Automation and one key point is to ensure each HTML element has a unique ID (that we can always rely upon in our Test Automation scripts for element identification).
We have found an issue ... when we have two Smart GTW components, one wrapping another, and we assign a debugId to the inner one, the nested component doesn't get the Id and an extra div is created by the end of the page instead (See 1).
However, it works fine when not wrapped (case 2).
There is something about the way it is wrapped that makes us think this is not an error but the way someone decided to implement it: notice that the wrapper where the id is assigned seems not to exist when the component is nested inside another SmartGWT component (compare 2 and 3 with 1).
We have tested behaviour with both: Smart GWT 2.4 and 3.1 (latests) with similar results.
Is there anybody that can help us on this?
Thanks in advance for any help you can provide.
Stefano
Case 1
Panel panel = RootPanel.get("placeholder");
VLayout layout = new VLayout();
layout.ensureDebugId("LayoutDebugId");
IButton nestedButton = new IButton("NestedButton");
nestedButton.ensureDebugId("NestedButtonDebugId");
layout.addChild(nestedButton);
panel.add(layout);
<html>
<head></head>
<body>
<h1>Element ID test.</h1>
The IDs for the GWT and Smart GWT elements below are defined.
<div id="placeholder">
<div id="gwt-debug-LayoutDebugId">
<div id="isc_0" eventproxy="isc_VLayout_0" class="normal" … >
<div id="isc_1" eventproxy="isc_VLayout_0" style="position: relative; visibility: inherit; z-index: 200018; cursor: default;">
<div id="isc_2" eventproxy="isc_IButton_0" onfocus="isc.EH.focusInCanvas(isc_IButton_0,true);" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0,true);" tabindex="1152" ….>
<div id="isc_3" eventproxy="isc_IButton_0" style="position: relative; visibility: inherit; z-index: 200036; cursor: pointer;">
<table cellspacing="0" cellpadding="0" width="100" height="22" style="table-layout:fixed;overflow:hidden;">
<tbody>
<tr>
<td nowrap="true" class="buttonRounded" style="padding-top:0px;padding-bottom:0px;" align="center" valign="center" tabindex="-1" onfocus="isc_IButton_0.$47()">NestedButton</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="gwt-debug-NestedButtonDebugId"></div>
</body>
</html>
Case 2
However, If I don't wrap it:
Panel panel = RootPanel.get("placeholder");
IButton nestedButton = new IButton("NestedButton");
nestedButton.ensureDebugId("NestedButtonDebugId");
panel.add(nestedButton);
<html>
<head>
</head>
<body>
<h1>Element ID test.</h1>
The IDs for the GWT and Smart GWT elements below are defined.
<div id="placeholder">
<div id="gwt-debug-NestedButtonDebugId">
<div id="isc_0" eventproxy="isc_IButton_0" onfocus="isc.EH.focusInCanvas(isc_IButton_0,true);" … >
<div id="isc_1" eventproxy="isc_IButton_0" style="position: relative; visibility: inherit; z-index: 200018; cursor: pointer;">
<table cellspacing="0" cellpadding="0" width="100" height="22" style="table-layout:fixed;overflow:hidden;">
<tbody>
<tr>
<td nowrap="true" class="buttonRounded" style="padding-top:0px;padding-bottom:0px;" align="center" valign="center" tabindex="-1" onfocus="isc_IButton_0.$47()">NestedButton</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Case 3
And if you don't assign the debug id:
Panel panel = RootPanel.get("placeholder");
IButton nestedButton = new IButton("NestedButton");
panel.add(nestedButton);
<html>
<head>
</head>
<body>
<h1>Element ID test.</h1>
The IDs for the GWT and Smart GWT elements below are defined.
<div id="placeholder">
<div id="isc_IButton_0_wrapper">
<div id="isc_0" eventproxy="isc_IButton_0" onfocus="isc.EH.focusInCanvas(isc_IButton_0,true);" … >
<div id="isc_1" eventproxy="isc_IButton_0" style="position: relative; visibility: inherit; z-index: 200018; cursor: pointer;">
<table cellspacing="0" cellpadding="0" width="100" height="22" style="table-layout:fixed;overflow:hidden;">
<tbody>
<tr>
<td nowrap="true" class="buttonRounded" style="padding-top:0px;padding-bottom:0px;" align="center" valign="center" tabindex="-1" onfocus="isc_IButton_0.$47()">NestedButton</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
We have found an issue ... when we have two Smart GTW components, one wrapping another, and we assign a debugId to the inner one, the nested component doesn't get the Id and an extra div is created by the end of the page instead (See 1).
However, it works fine when not wrapped (case 2).
There is something about the way it is wrapped that makes us think this is not an error but the way someone decided to implement it: notice that the wrapper where the id is assigned seems not to exist when the component is nested inside another SmartGWT component (compare 2 and 3 with 1).
We have tested behaviour with both: Smart GWT 2.4 and 3.1 (latests) with similar results.
Is there anybody that can help us on this?
Thanks in advance for any help you can provide.
Stefano
Case 1
Panel panel = RootPanel.get("placeholder");
VLayout layout = new VLayout();
layout.ensureDebugId("LayoutDebugId");
IButton nestedButton = new IButton("NestedButton");
nestedButton.ensureDebugId("NestedButtonDebugId");
layout.addChild(nestedButton);
panel.add(layout);
<html>
<head></head>
<body>
<h1>Element ID test.</h1>
The IDs for the GWT and Smart GWT elements below are defined.
<div id="placeholder">
<div id="gwt-debug-LayoutDebugId">
<div id="isc_0" eventproxy="isc_VLayout_0" class="normal" … >
<div id="isc_1" eventproxy="isc_VLayout_0" style="position: relative; visibility: inherit; z-index: 200018; cursor: default;">
<div id="isc_2" eventproxy="isc_IButton_0" onfocus="isc.EH.focusInCanvas(isc_IButton_0,true);" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0,true);" tabindex="1152" ….>
<div id="isc_3" eventproxy="isc_IButton_0" style="position: relative; visibility: inherit; z-index: 200036; cursor: pointer;">
<table cellspacing="0" cellpadding="0" width="100" height="22" style="table-layout:fixed;overflow:hidden;">
<tbody>
<tr>
<td nowrap="true" class="buttonRounded" style="padding-top:0px;padding-bottom:0px;" align="center" valign="center" tabindex="-1" onfocus="isc_IButton_0.$47()">NestedButton</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="gwt-debug-NestedButtonDebugId"></div>
</body>
</html>
Case 2
However, If I don't wrap it:
Panel panel = RootPanel.get("placeholder");
IButton nestedButton = new IButton("NestedButton");
nestedButton.ensureDebugId("NestedButtonDebugId");
panel.add(nestedButton);
<html>
<head>
</head>
<body>
<h1>Element ID test.</h1>
The IDs for the GWT and Smart GWT elements below are defined.
<div id="placeholder">
<div id="gwt-debug-NestedButtonDebugId">
<div id="isc_0" eventproxy="isc_IButton_0" onfocus="isc.EH.focusInCanvas(isc_IButton_0,true);" … >
<div id="isc_1" eventproxy="isc_IButton_0" style="position: relative; visibility: inherit; z-index: 200018; cursor: pointer;">
<table cellspacing="0" cellpadding="0" width="100" height="22" style="table-layout:fixed;overflow:hidden;">
<tbody>
<tr>
<td nowrap="true" class="buttonRounded" style="padding-top:0px;padding-bottom:0px;" align="center" valign="center" tabindex="-1" onfocus="isc_IButton_0.$47()">NestedButton</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Case 3
And if you don't assign the debug id:
Panel panel = RootPanel.get("placeholder");
IButton nestedButton = new IButton("NestedButton");
panel.add(nestedButton);
<html>
<head>
</head>
<body>
<h1>Element ID test.</h1>
The IDs for the GWT and Smart GWT elements below are defined.
<div id="placeholder">
<div id="isc_IButton_0_wrapper">
<div id="isc_0" eventproxy="isc_IButton_0" onfocus="isc.EH.focusInCanvas(isc_IButton_0,true);" … >
<div id="isc_1" eventproxy="isc_IButton_0" style="position: relative; visibility: inherit; z-index: 200018; cursor: pointer;">
<table cellspacing="0" cellpadding="0" width="100" height="22" style="table-layout:fixed;overflow:hidden;">
<tbody>
<tr>
<td nowrap="true" class="buttonRounded" style="padding-top:0px;padding-bottom:0px;" align="center" valign="center" tabindex="-1" onfocus="isc_IButton_0.$47()">NestedButton</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Comment