2 Replies Latest reply on Dec 2, 2009 1:08 AM by lathoudero

    No focus when using Custom Application Skin: Bug?

    lathoudero Level 1

      Hi all,

       

      Just wanted to be sure if I'm doing something wrong, or if it's a bug:

      When I create a Form within a VGroup, tabbing changes focus from TextInput to TextInput just fine.

      BUT when I create a custom skin for the application, everytime I press the 'Tab' button, the form loses it's focus from the FORM it's in, to the Main application!!

       

      This is the skin I'm using (ApplicationBGSkin):

       

      <?xml version="1.0" encoding="utf-8"?>


      <!--


           ADOBE SYSTEMS INCORPORATED
           Copyright 2008 Adobe Systems Incorporated
           All Rights Reserved.


           NOTICE: Adobe permits you to use, modify, and distribute this file
           in accordance with the terms of the license agreement accompanying it.


      -->


      <!--- The default skin class for the Spark Application component.


           @langversion 3.0
           @playerversion Flash 10
           @playerversion AIR 1.5
           @productversion Flex 4
      -->
      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              alpha.disabled="0.5">


          <fx:Metadata>
              <![CDATA[
          /**
           * A strongly typed property that references the component to which this skin is applied.
           */
              [HostComponent("spark.components.Application")]
          ]]>
          </fx:Metadata>


          <s:states>
              <s:State name="normal"/>
              <s:State name="disabled"/>
              <s:State name="normalWithControlBar"/>
              <s:State name="disabledWithControlBar"/>
          </s:states>


          <!-- fill -->
          <!---
               A rectangle with a solid color fill that forms the background of the application.
               The color of the fill is set to the Application's backgroundColor property.
          -->
          <s:Rect id="backgroundRect"
                  left="0"
                  right="0"
                  top="0"
                  bottom="0">
              <s:fill>
                  <s:SolidColor color="0xFFFFFF"/>
              </s:fill>
          </s:Rect>


          <!---
               @copy spark.components.SkinnableContainer#contentGroup
          -->
          <s:Scroller top="0"
                      bottom="0"
                      width="580"
                      horizontalCenter="0"
                      horizontalScrollPolicy="off">
              <s:VGroup clipAndEnableScrolling="true"
                        width="100%"
                        height="100%">
                  <s:Graphic>
                      <s:BitmapImage source="@Embed(source='assets/images/header.png')"/>
                  </s:Graphic>
                  <s:Group id="contentGroup"
                           width="100%"
                           minWidth="0"
                           minHeight="0" hasFocusableChildren="true"/>
                  <s:BitmapImage source="@Embed(source='assets/images/footer.png')"/>
              </s:VGroup>
          </s:Scroller>

      </s:Skin>

       


      This is the Application:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"
                    
                     skinClass="ApplicationBGSkin">
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <mx:Form left="10" top="10">
              <mx:FormHeading label="Heading"/>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
          </mx:Form>
      </s:Application>

        • 1. Re: No focus when using Custom Application Skin: Bug?
          Flex harUI Adobe Employee

          Scroller might need hasFocusableChildren=true, I don't remember its current default value.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: No focus when using Custom Application Skin: Bug?
            lathoudero Level 1

            Indeed, this was the correct answer: The scroller in the skin needs[hasFocusableChildren=true]

             

                <s:Scroller top="0"
                            bottom="0"
                            width="580"
                            horizontalCenter="0"
                            horizontalScrollPolicy="off"

                            hasFocusableChildren="true">
                    <s:VGroup clipAndEnableScrolling="true"
                              width="100%"
                              height="100%">
                        <s:Graphic>
                            <s:BitmapImage source="@Embed(source='assets/images/header.png')"/>
                        </s:Graphic>
                        <s:Group id="contentGroup"
                                 width="100%"
                                 minWidth="0"
                                 minHeight="0" hasFocusableChildren="true"/>
                        <s:BitmapImage source="@Embed(source='assets/images/footer.png')"/>
                    </s:VGroup>
                </s:Scroller>

             

            Is there some logic when I should apply this? Like, which other components don't pass the focus to it's children?

            Or is using a scroller in an application-skin an unconventional way to create a fully scrollable interface?

             

            Thanks for the answer!