Jump to content

Managing Tab Order in a Form


Recommended Posts

With SMS, what is the best way to manage tab order?

I have tried capturing the TAB key in the KeyDown event which does work, but when I try to use object.SetFocus, the focus will not move based on the code and still ends up in a funky spot.

Lastly, if I want a button to be use as default when a user presses enter on a TW3EditBox field, I assume I can use the KeyDown event to capture an enter and call the correct function.

Thanks for the help.

Link to post
Share on other sites

I manually set the tabIndex for the controls. And use the key down event to handle pressing ENTER to move to the next control.

I set it using the Handle property.

Example:

  FLoginHandleLabel := TW3Label.Create(FPanel);
  FLoginHandleLabel.AutoSize := True;
  FLoginHandleLabel.TextNode.style.setProperty('font-weight', 'bold');
  FLoginHandleLabel.Caption := 'Handle (or email address)';

  FLoginHandleEdit := TW3EditBox.Create(FPanel);
  FLoginHandleEdit.PlaceHolder := '...handle';
  FLoginHandleEdit.OnGotFocus := LoginHandleEditGetFocus;
  FLoginHandleEdit.OnKeyDown := LoginHandleEditKeyDown;
  FLoginHandleEdit.Handle.tabIndex := 1;

  FLoginPasswordLabel := TW3Label.Create(FPanel);
  FLoginPasswordLabel.AutoSize := True;
  FLoginPasswordLabel.TextNode.style.setProperty('font-weight', 'bold');
  FLoginPasswordLabel.Caption := 'Password';

  FLoginPasswordEdit := TW3EditBox.Create(FPanel);
  FLoginPasswordEdit.PlaceHolder := '...password';
  FLoginPasswordEdit.InputType := itPassword;
  FLoginPasswordEdit.OnGotFocus := LoginPasswordGetFocus;
  FLoginPasswordEdit.OnKeyDown := LoginPasswordEditKeyDown;
  FLoginPasswordEdit.Handle.tabIndex := 2;

I'm still using the latest real release, not the alpha. So I create my UI controls manually. It might be easier with the latest alpha.

Also, I've become very accustomed to mixing Javascript in with my Object Pascal to handle situations like this.

-David

Link to post
Share on other sites

Hey, you could tell from my short post that I was dealing with trying to make a login form more friendly.

Also, 4 STARS to SMS for allowing us to mix and match Javascript into the code so that we can always find an answer.

One question. I see you have an event handler OnGotFocus. Are you doing anything special here to support the proper TabIndex process or are you just doing something else like reading the field and doing a SelectAll on the text in the field itself? Just curious.

Thank you David for the guidance. I'll give this a try and I'm sure it is what I am looking for.

Link to post
Share on other sites
  • Administrators

I was surprised to see that TabOrder is not a property. It's easy to add and make public for components that are focusable.

tabIndex also affects if a control received keyboard events at all. Currently it is only used by the creation flags. If the creation flags include cfKeyCapture, the RTL sets tabIndex to 0 and the keyboard events do work.

While looking at this I found a few weird things. Currently tabIndex is set also on TW3Display, TW3DisplayView and TW3Label. I really can't understand why any of these should have it. If anyone has a reason why the user should be able to move with tab to them or receive keyboard events, please let me know. Otherwise I'll probably remove it.

I'm also wondering how I should handle this in the RTL and the IDE. I'll probably let the value be 0, which means that the programmer can change the order when needed. If that is not enough, it's possible to add more functionality so the number is automatically calculated.

I'd love to hear your thoughts on this.

Link to post
Share on other sites
  • Moderators

I mostly agree.

I suppose that on rare occasions one might want to do something when tw3display or displayview gets the focus, like in

  Display.OnGotFocus := procedure(sender:tobject) begin writeln('focus'); display.handle.style['background-color'] := 'white' end;

see the zen-sky demo where display is a visible element

Very rare I think, and even then the tabindex shouldn't be 1 but rather 0


 

Link to post
Share on other sites
9 hours ago, jarto said:

While looking at this I found a few weird things. Currently tabIndex is set also on TW3Display, TW3DisplayView and TW3Label. I really can't understand why any of these should have it. If anyone has a reason why the user should be able to move with tab to them or receive keyboard events, please let me know. Otherwise I'll probably remove it.

I vote for removing it.

I also vote for automatic tab stop numbering.

-David

Link to post
Share on other sites
  • Administrators

Thank you for the feedback. I've been thinking about this a while and I'd rather not do the automatic TabOrder numbering. It'd have to be done during runtime also and I feel that in most cases it'd just be an unnecessary extra performance hit. However, you'll be able to set the properties in the designer.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...