Problem in using tab functionality directly with IButtons without using DynamicForm

[sidharth1917]

Hi,

I am adding labels/buttons in a Layout and have given tab index to them. I wanted to move the focus to next label/button on pressing tab key based on tab index values. This is not working. When I check the page source, it is being rendered as <TR><TD> on browser with no tabindex attribute on it.
I actually don’t want to use DynamicForm or FormItem. I am exploring ways to implement it directly using IButtons.

I am using GWT 2.8.2 and SmartGWT 6.1-p20170724 power version. Could you please let me know how can I achieve it.

[Isomorphic]

Tabbing is automatically managed by the DynamicForm. There is no need to set any attributes to achieve it.

If you can show a code sample where tabbing is not behaving as expected we can look at that - or if you can explain what you are trying to achieve we can provide an approach. Right now with this very vague post there’s nothing we can do for you.

[sidharth1917]

Hi,

Actually we are not using DynamicForm. We are trying to do it directly with buttons/labels inside the layout. Please find below the code snippet :

private VLayout createLayout() {
final VLayout vLayout = new VLayout();
final FlowLayout flowLayout = new FlowLayout();

flowLayout.setPosition(Positioning.RELATIVE);
flowLayout.setWidth(ComponentStyle.PERCENT_100);
flowLayout.setHeight(ComponentStyle.INT_60);

final IButton aButton = new IButton("A");
final IButton bButton = new IButton("B");
final IButton cButton = new IButton("C");
aButton.setHeight(ComponentStyle.INT_40);
bButton.setHeight(ComponentStyle.INT_40);
cButton.setHeight(ComponentStyle.INT_40);

// Setting tab index on buttons
aButton.setTabIndex(1);
bButton.setTabIndex(2);
cButton.setTabIndex(3);
aButton.setCanFocus(true);
bButton.setCanFocus(true);
cButton.setCanFocus(true);

flowLayout.addChild(aButton);
flowLayout.addChild(bButton);
flowLayout.addChild(cButton);
vLayout.addChild(flowLayout);

return vLayout;
}

Thanks

[Isomorphic]

You still haven’t explained what you want to achieve and why, but if you simply remove your attempts to manually control tabIndices (which, as the docs explain, is very advanced and complicated), then tabbing will work as the user expects.

[sidharth1917]

I am using IButtons inside the Layout and want to achieve the tabbing among these IButtons. Please let me how to achieve the same without the need to add the DyanmicForm. I have already shared the code above.

Also I have gone through the document, but don't find any way to do it without Dyanmic form.

Thanks

[Isomorphic]

SmartGWT has logic to automatically assign tab indices to widgets in an intuitive order. So for IButtons embedded in a Layout tabIndices will be automatically assigned such that the user can tab through the buttons in the order in which they appear on the screen (top to bottom or left to right).
There are a number of ways developers may customize this behavior - assigning explicit numeric tab indices is one option, though that's typically not very practical except in extremely simple user interfaces. More commonly a developer will want to modify the tab position of a widget within its parent [for example shift one of the IButtons in a layout to the start of the tab sequence for the layout rather than having it in the position in which it's rendered]. More advanced customization is also possible, through the TabIndexManager class.

Take a look at this overview document for a picture of how tab orders work in SmartGWT:
https://www.smartclient.com/smartgwt...rOverview.html