Changes

This guide will start with the assumption that you are building an entirely new module. If you are adding functionality to existing BBB code, you can skip the code in "Linking in your module," although it's still good information to know.

Lastly, determine which mxml MXML file in your module is the "main" file. Continuing with the example of the Chat module, this is dev\bigbluebutton\bigbluebutton-client\src\org\bigbluebutton\modules\chat\views\ChatWindow.mxml.Import your Options class into that MXML with a standard import statement, and declare a baseIndex instance variable just as you did in your Options class, as well as an instance of your Options class, like so:<pre>[Bindable] private var baseIndex:int;[Bindable] public var chatOptions:ChatOptions;</pre> If your MXML does not already call a method on initialization, add an initialize property to the MDIWindow tag like so:<pre><MDIWindow xmlns="flexlib.mdi.containers.*" xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" ></pre>''Your MDIWindow will likely have far more properties than shown, these have been removed for clarity's sake.'' In your initialize method (in this example, init()) initialize baseIndex with the getBaseTabIndex() method from your Options class:<pre>private function init():void{ baseIndex = chatOptions.baseTabIndex;}</pre> ====Establishing internal tab order====Your module now "knows" where it should sit in the general tab order; you now have to give each Flash component within your module a tabIndex property. This is based on the baseIndex variable in the MXML, so if the file you're working in does not have one, either re-read "Linking in your module" above or find a way to pass the baseIndex from the "main" MXML into the file you're working with. =====Adding the main controls=====If the MDIWindow you are working in doesn't have a creationComplete method, add one:<pre><MDIWindow xmlns="flexlib.mdi.containers.*" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onCreationComplete()" ></pre>''Your MDIWindow will likely have far more properties than shown, these have been removed for clarity's sake.'' Each MDIWindow has a titlebar overlay, also known as the "main bar" of the window, showing the window's title. Generally, there is also a minimize button, maximize button, and close button. These items will come first in the internal tab order of the module, so in the creationComplete method, give each of them a tabIndex property:<pre>private function onCreationComplete():void { titleBarOverlay.tabIndex = baseIndex; minimizeBtn.tabIndex = baseIndex+1; maximizeRestoreBtn.tabIndex = baseIndex+2; closeBtn.tabIndex = baseIndex+3;}</pre>You'll also want to add the accessibilityDescriptions to each item here, but ignore that for now. =====All other Flash elements=====Now that you have put the titlebar and control buttons into the tab order, continue through each element in the module and continue assigning tabIndex properties based on the baseIndex. The tab order within the module is up to your discretion, as long as the order is as sensible to a user who cannot see the screen as it is to a fully-sighted user. You have already seen how to assign a tabIndex dynamically above. To assign a static tabIndex within the Flash component itself, write the property like so:<pre>tabIndex="{baseIndex}"</pre>