5 Replies Latest reply on Oct 19, 2009 6:13 AM by Jerry62712

    How Do I tab without a blue box

    Jerry62712 Level 1

      When I tab on a textinput field (not editable), a blue box appears around that field and all fields below it.  As I tab down the list of fields, the blue box eliminates the last field.

       

      How do I get the blue box to stay on the one and only on the one field I'm in?

        • 1. Re: How Do I tab without a blue box
          Jerry62712 Level 1

          I found focusThickness could reduce the size of the blue box if set to "1".  Setting it to "0" removed the box entirely, but I haven't found a way to focus (box) only on one field.

           

          Any ideas?

          • 2. Re: How Do I tab without a blue box
            paul.williams Level 4

            The blue box will be displayed around the currently focussed control. If you are seeing it around a group of focussable controls then that suggests those controls are inside a focussable control. Containers are not focussable by default, so what component is the parent of your TextInputs? It would be helpful if you could post some code that demonstrates your problem.

            • 3. Re: How Do I tab without a blue box
              Jerry62712 Level 1

              Here is a sample of the code.  There are about 6 that are not showing.

              <!-- across top *********************************************** -->
              <!-- ********************************************************** -->
              <mx:VBox id="topResultBox"
                  verticalScrollPolicy="off" horizontalScrollPolicy="off"
                  width="100%"
                  backgroundColor="#dedacf" >

               

                  <mx:HRule id="resultLineOverResults"
                      width="100%"
                      strokeColor="#000000" />

               

                  <mx:HBox id="resultTextBox"
                      width="100%"
                      verticalScrollPolicy="off" horizontalScrollPolicy="off">
                      <mx:Label id="resultPotentialResultsLabel"
                          text=" "
                          toolTip=" "
                          tabIndex="201" />
                      <mx:TextInput id="resultPotentialResultsData"
                          editable="false"
                          backgroundColor="#dedacf"
                          borderStyle="none"
                          focusThickness="0"
                          textAlign="right"
                          tabIndex="20" />
                  </mx:HBox>

               

                  <mx:HRule id="resultLineUnderResults"
                      y="60"
                      width="100%"
                      strokeColor="#000000" />
              </mx:VBox>

               

              <mx:HBox id="bothSides" width="100%">
                  <!-- first column ***************************************** -->
                  <!-- ****************************************************** -->
                  <mx:Canvas id="leftSideCanvas"
                      verticalScrollPolicy="off" horizontalScrollPolicy="off"
                      width="50%"
                      height="100%"
                      backgroundColor="#dedacf">
                      <mx:Label id="resultDetailTitle"
                          text=" "
                          fontStyle="pageHeading"
                          tabIndex="205" />

               

                      <mx:HBox id="resultResidenceSizeBox"
                          y="20"
                          width="100%"
                          height="100%">
                          <mx:Label id="resultResidenceSizeLabel"
                              text=" "
                              toolTip=" "
                              width="85%"
                              height="100%"
                              tabIndex="25" />
                          <mx:TextInput id="resultResidenceSizeData"
                              editable="false"
                              backgroundColor="#dedacf"
                              borderStyle="none"
                              focusThickness="0"
                              textAlign="right"
                              width="15%"
                              height="100%"
                              tabIndex="25" />
                      </mx:HBox>
              ...
              </mx:Canvas>

              • 4. Re: How Do I tab without a blue box
                paul.williams Level 4

                I wrapped the code in an Application tag with a few additional edits and the focussing works ok for me. The TextInputs are focussable in turn by pressing the tab key. I took out the focusThickness="0" property to make the focus rectangle visible.

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application
                    xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="vertical">
                   
                    <mx:VBox
                        id="topResultBox"
                        verticalScrollPolicy="off"
                        horizontalScrollPolicy="off"
                        width="100%">

                 

                        <mx:HRule
                            id="resultLineOverResults"
                            width="100%"
                            strokeColor="#000000"/>
                        
                        <mx:HBox
                            id="resultTextBox"
                            width="100%"
                            verticalScrollPolicy="off"
                            horizontalScrollPolicy="off">
                           
                            <mx:Label
                                id="resultPotentialResultsLabel"
                                text="Label 1"
                                tabIndex="201" />
                               
                            <mx:TextInput id="resultPotentialResultsData"
                                editable="false"
                                textAlign="right"
                                tabIndex="20" />
                               
                        </mx:HBox>
                   
                        <mx:HRule
                            id="resultLineUnderResults"
                            width="100%"
                            strokeColor="#000000" />
                           
                    </mx:VBox>

                 

                    <mx:HBox
                        id="bothSides"
                        width="100%">
                       
                        <!-- first column ***************************************** -->
                        <!-- ****************************************************** -->
                       
                        <mx:Canvas
                            id="leftSideCanvas"
                            verticalScrollPolicy="off"
                            horizontalScrollPolicy="off"
                            width="50%"
                            height="100%">
                           
                            <mx:Label id="resultDetailTitle"
                                text=" "
                                fontStyle="pageHeading"
                                tabIndex="205" />
                   
                            <mx:HBox id="resultResidenceSizeBox"
                                y="20"
                                width="100%"
                                height="100%">
                               
                                <mx:Label
                                    id="resultResidenceSizeLabel"
                                    text="Label 2"
                                    width="85%"
                                    height="100%"
                                    tabIndex="25" />
                                   
                                <mx:TextInput
                                    id="resultResidenceSizeData"
                                    editable="false"
                                    textAlign="right"
                                    width="15%"
                                    height="100%"
                                    tabIndex="25" />
                                   
                            </mx:HBox>
                           
                        </mx:Canvas>
                           
                    </mx:HBox>
                   
                </mx:Application>

                • 5. Re: How Do I tab without a blue box
                  Jerry62712 Level 1

                  It seems to tab through the fields correctly.  The problem I was having is the blue box was around three sides of the field, but it extended down to the last field in the column before the bottom appeared.  While I kind of liked having the box, it was not good to see it extend down below the actual field that was highlighted.

                   

                  So I decided to go with your "0" suggesting and just not have any box instead of one that was too inclusive of other fields.

                   

                  This entire thing was needed as Flex wasn't indicating it was on the second state (results) when the user clicked the calcuate button.  If you were using Jaws you didn't hear anything and I'm hoping that they will now have that knowledge.

                   

                  It would be nice if there were a way to explicitely tell someone that they have changed pages.  Any ideas?