Wednesday, July 24, 2013

Re: HTML identifiers are not generated properly for some SmartGWT components

I'd say this is a bug (or weird behavior to say the least) in SmartGWT; you should ask on their forum.

On Wednesday, July 24, 2013 7:29:12 PM UTC+2, MJ C wrote:
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;">
                  &nbsp;
                  <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>
 

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

No comments:

Post a Comment