Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    DynamicForm item tab order breaks with CanvasItem

    When I have a DynamicForm with standard FormItem elements, such as 2 TextItems and a ButtonItem, the tab order works as expected: in the order in which I create or add the elements.

    When I have a DynamicForm with standard FormItem elements + a CanvasItem, such as 2 TextItems and a couple of IButtons on the CanvasItem, the tab order breaks: it seems to go first IButton, first TextItem, second IButton, second TextItem.

    The problem seems to have been introduced in SmartGWT 3.0.
    With SmartGWT 2.5 I did not see the problem.

    1. the SmartGWT or SmartClient version and browser version(s) involved;
    SmartGWT 3.0
    GWT 2.3.0
    FireFox 6.0.2
    Chrome 16.0.912.75 m

    2. for a server-side problem, the complete logs generated during processing of the request;
    n/a

    3. for a client-side problem, the contents of the Developer Console (see FAQ for usage);
    Code:
    11:07:54.089:INFO:Log:initialized
    11:07:54.097:WARN:Log:NOTE: Firebug is enabled. Firebug greatly slows the performance of applications that make heavy use of JavaScript. Isomorphic highly recommends Firebug for troubleshooting, but Firebug and other development tools should be disabled when assessing the real-world performance of SmartClient applications.
    11:07:54.434:WARN:Log:New Class ID: 'EditPane' collides with ID of existing Class object '[DataSource ID:EditPane]'.  Existing object will be replaced.
    This conflict would be avoided by disabling ISC Simple Names mode.  See documentation for further information.
    11:07:58.311:INFO:Log:isc.Page is loaded
    4. if there is a JavaScript error, the stack trace logged in the Developer Console (from Internet Explorer if possible); and
    n/a

    5. sample code.
    Code:
    import com.smartgwt.client.widgets.form.DynamicForm;
    import com.smartgwt.client.widgets.form.fields.TextItem;
    import com.smartgwt.client.widgets.form.fields.ButtonItem;
    import com.smartgwt.client.widgets.form.fields.CanvasItem;
    import com.smartgwt.client.widgets.layout.VLayout;
    import com.smartgwt.client.widgets.layout.HLayout;
    import com.smartgwt.client.widgets.IButton;
    
    import com.google.gwt.core.client.EntryPoint;
    
    public class TestFormItemTabOrder implements EntryPoint {
    
      /**
       * The EntryPoint interface
       */
      public void onModuleLoad () {
        
        // layout
        final VLayout layout = new VLayout ();
    
        // form #1
        {
          final TextItem usernameItem = new TextItem ();
          usernameItem.setTitle ("Username");
      
          final TextItem passwordItem = new TextItem ();
          passwordItem.setTitle ("Password");
          
          final ButtonItem loginButtonItem = new ButtonItem ();
          loginButtonItem.setTitle ("Login");
    
          final DynamicForm form = new DynamicForm ();
          form.setFields (usernameItem, passwordItem, loginButtonItem);
          form.setIsGroup (true);
          form.setGroupTitle ("Form #1: Tab order works: Username/Password/Login");
          
          layout.addMember (form);
        }
        
        // form #2
        {  
          final TextItem usernameItem = new TextItem ();
          usernameItem.setTitle ("Username");
      
          final TextItem passwordItem = new TextItem ();
          passwordItem.setTitle ("Password");
          
          final IButton loginButton = new IButton ();
          loginButton.setTitle ("Login");
          
          final IButton registerButton = new IButton ();
          registerButton.setTitle ("Register");
          
          final HLayout buttonLayout = new HLayout ();
          buttonLayout.setAutoHeight ();
          buttonLayout.setWidth100 ();
          buttonLayout.addMember (loginButton);
          buttonLayout.addMember (registerButton);
          final CanvasItem canvasItem = new CanvasItem ();
          canvasItem.setCanvas (buttonLayout);
          canvasItem.setTitle ("Options");
    
          final DynamicForm form = new DynamicForm ();
          form.setFields (usernameItem, passwordItem, canvasItem);
          form.setIsGroup (true);
          form.setGroupTitle ("Form #2: Tab order does not work: Login/Username/Register/Password");
          
          layout.addMember (form);
        }
        
        // layout
        layout.setWidth100 ();
        layout.setHeight100 ();
        layout.draw ();
      }
    }

    #2
    Make sure you are testing with the fully patched version (see SmartClient.com/builds).

    Comment


      #3
      Just did.

      This seems to be a problem in:
      SmartGWT SmartGWT 3.0
      3.0p from 2012-01-22

      And works in:
      SmartGWT 2.5

      Comment


        #4
        For your convenience:
        http://code.google.com/p/smartgwt/issues/detail?id=653

        Comment


          #5
          You can resolve this by explicitly marking the canvasItem as focusable
          Code:
                ...
                final CanvasItem canvasItem = new CanvasItem ();
                canvasItem.setCanvas (buttonLayout);
                canvasItem.setCanFocus(true);
                ...

          Comment


            #6
            Confirmed -- I tested with SmartGWT 3.0 and this works as you indicate.

            Follow-up question: since this worked out of the box with SmartGWT 2.5, was this a conscious change, or was this "working" as an undefined behavior?

            Comment

            Working...
            X