Opened 9 years ago

Last modified 5 years ago

#3235 new task

[PATCH] Switching between forms with tab button

Reported by: Nikita Kunevich Owned by: Patrick Wolfert
Priority: Nice to Have Milestone: Backlog
Component: Core engine Keywords: patch
Cc: Patch:

Description

User should be able to move between forms pressing tab button, for example when logging into multiplayer lobby, one should be able to move between login and password fields.

Attachments (1)

registration-tabbing.patch (2.1 KB ) - added by Patrick Wolfert 8 years ago.

Download all attachments as: .zip

Change History (10)

comment:1 by Nikita Kunevich, 9 years ago

Milestone: BacklogAlpha 19

comment:2 by Itms, 9 years ago

Milestone: Alpha 19Backlog

Milestones must be set only when someone works on a ticket.

by Patrick Wolfert, 8 years ago

Attachment: registration-tabbing.patch added

comment:3 by Patrick Wolfert, 8 years ago

Keywords: review patch added
Milestone: BacklogAlpha 21
Summary: Switching between forms with tab button[PATCH] Switching between forms with tab button

comment:4 by Patrick Wolfert, 8 years ago

Owner: set to Patrick Wolfert

comment:5 by elexis, 8 years ago

Keywords: review removed
Milestone: Alpha 21Backlog

Thanks for getting started with our messy GUI code! :D The patch does what it claims to do, however the lobby-register form is only one of countless examples where this should be implemented.

Instead of adding this action for every element, there should be a generic approach (source/gui/):

  • add a tabindex attribute to every user-input GUIObject (automatically assign and index if not specified explicitly)
  • switching to the next object when tab is pressed
  • switching to the previous object on shift+tab
  • not switching if the tab action is specified explicitly (for example for autocompleting nicknames)
  • Highlight the currently focused object (checkbox, button) if it's not a textfield

Implementing this should make #3718 mostly obsolete.

comment:6 by Patrick Wolfert, 8 years ago

Alright, I defined HandleMessage in IGUIObject and made it print a debug line when tab was hit, and that worked. Now I need to figure out how to create the default tabindex values--and if we should even make default values or just traverse the tree and find the next one if none are specified. It would certainly be easier to just assign defaults when the objects are initialized, but I'm not even sure how we do that yet.

Is there some page object where I can run code that externally assigns tabindex values to each object in the tree as it creates them? Or should each object look back through the tree and calculate the next tabindex? I'm thinking if we auto-assign actual numerical values and then someone specifies a tab index, would that then clear out the defaults and make counting start after all the manually-specified index values? (For instance, if someone set tabindex="1" and tabindex="3", would the ones that don't have explicit values be assigned 4, 5, 6...?

comment:7 by Patrick Wolfert, 8 years ago

Just to clarify, the w3c standard (if we care about that) states that the default value is 0 for focusable elements and -1 for elements that are not focusable. So either we have it traverse the tree to find the next one on a tab event if they're all 0, or we do our own thing and just give them default sequential values.

comment:8 by elexis, 8 years ago

The XML we use is not HTML, so we are not required to use their standard. What matters most is the result to he actual user. No matter which approach is used, it should jump to the next/previous button that is expected by the user. So if the tree structure is followed, that should be orered accordingly.

Secondly the developers should have as few effort as possible changing things. Using automatic indices has the advantage that the XML doesn't have to be changed when adding new elements with the downside being that one can't deviate from that order.

Also feel free to come to IRC (http://irc.lc/quakenet/0ad/ or irc://irc.quakenet.org/0ad) to ask stuff.

comment:9 by Imarok, 5 years ago

Component: UI & SimulationCore engine

Move tickets to their correct component.

Note: See TracTickets for help on using tickets.