Sampler: Form with advanced layout - Tab order

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

just noticed this when playing with
Form with advanced layout
 sampler example.

The visible items are defined like this:

setVisibleItemProperties(Arrays.asList(new String[] { "firstName",
                    "lastName", "countryCode", "password", "birthdate",
                    "shoesize" }));

But when I use the tab key to change focus then the focus jumps from LastName to Password. The CoutryCode is focused after Birthday. Seems to be wrong…

Any chance to change this behavior by code?

Thanks, Thorsten

••••••••••
Eclipse 3.5.1 • Vaadin 6.3 • Vaadin Eclipse Integration 1.2.0 • Java 1.5
Windows XP/2000 • IE6/7 • Tomcat 5.5.28

2

You can set the tab indexes in the FieldFactory using Field.setTabIndex(int). By default the browser uses the order in which the elements appear in the DOM and the GridLayout used in the sample first renders single-cell components and then multi-cell components (country code) which causes the tab to jump between the fields in that order.

3

HI,

Will that be enough?

I changed the sampler code like this:


   private class PersonFieldFactory extends DefaultFieldFactory {
      final ComboBox countries = new ComboBox("Country");

      public PersonFieldFactory() {
         countries.setWidth("100%");
         countries.setContainerDataSource(ExampleUtil.getISO3166Container());
         countries.setItemCaptionPropertyId(ExampleUtil.iso3166_PROPERTY_NAME);
         countries.setItemIconPropertyId(ExampleUtil.iso3166_PROPERTY_FLAG);
         countries.setFilteringMode(ComboBox.FILTERINGMODE_STARTSWITH);
         countries.setTabIndex(2);
      }

      @Override
      public Field createField(Item item, Object propertyId,
                Component uiContext) {
         if ("countryCode".equals(propertyId)) {
            return countries;
         }
         Field f = super.createField(item, propertyId, uiContext);
         if ("firstName".equals(propertyId)) {
            TextField tf = (TextField) f;
            tf.setWidth(COMMON_FIELD_WIDTH);
            tf.focus();
            tf.setTabIndex(0);
         }
         else if ("lastName".equals(propertyId)) {
            TextField tf = (TextField) f;
            tf.setWidth(COMMON_FIELD_WIDTH);
            tf.setTabIndex(1);
         }
         else if ("password".equals(propertyId)) {
            TextField tf = (TextField) f;
            tf.setSecret(true);
            tf.setWidth("10em");
            tf.setTabIndex(3);
         }
         else if ("shoesize".equals(propertyId)) {
            TextField tf = (TextField) f;
            tf.setWidth("4em");
            tf.setTabIndex(4);
         }
         else if ("birthdate".equals(propertyId)) {
            PopupDateField dt = new PopupDateField("");
            dt.setResolution(PopupDateField.RESOLUTION_DAY);
            dt.setTabIndex(5);
         }
         return f;
      }
   }

The focus changed from
firstname
 directly to
birthdate
 now… Any ideas what I can do to get a correct tab order?

Thanks, Thorsten

4

You should start from tab index 1 as 0 has special meaning in HTML (the default is 0).

5

Did you ever get this to work? I’m having the exact same problem with Vaadin 6.4.6. I use attachField to place fields within a GridLayout and I call setTabIndex (1-based) on the fields just after data is bound to the form. The tab order is wrong and also I cannot get the proper field to have the initial focus. Seems to work fine in “simple” forms.

6

I don’t see it working with GridLayout either. You’d think the default for a GridLayout would left to right, top to bottom, like regular HTML. Not sure what it’s doing, but it doesn’t tab nicely through a Form as you’d expect.

In HTML, I’ve only had to set the tab index when I want it to take a different order than the page is laid out (left to right, top to bottom), such as a 2-column table in which I want to go down the first column, then down the second column.