3 Replies Latest reply on Nov 7, 2009 8:07 AM by SrinivasAnnam

    Application to horizontally scroll in Flex 4

    nikos101 Level 2

      How do I get me Application to horizontally scroll in Flex 4?

       

      <?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" width="100%" 
                     height="100%"
                     xmlns:valueObjects="valueObjects.*" xmlns:converter_agentsservice="services.converter_agentsservice.*">
          <s:layout>
              <s:VerticalLayout/>
          </s:layout>

        • 1. Re: Application to horizontally scroll in Flex 4
          SrinivasAnnam Adobe Employee

          You could add a scroller to your application and then add the content into that OR an alternate & clean approach will be to modify the application skin to have the "contentGroup" inside Scroller object.

           

          I have attached a sample which uses the later approach of modifying Skin.

           

          Regards

          Srinivas Annam

          http://srinivasannam.wordpress.com

          • 2. Re: Application to horizontally scroll in Flex 4
            SrinivasAnnam Adobe Employee

            Looks like the attachments did not come through. So, pasting the MXML files here

             

            Application MXML

             

            <?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" width="400" height="400" backgroundColor="#7F7F7F" skinClass="ApplicationSkin1">

             

            <s:Button width="600"  x="0" y="110" label="My Big Button Label"/>
            </s:Application>

             

            Application Skin MXML - ApplicationSkin1.mxml

             

            <?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="{getStyle('backgroundColor')}" />
                    </s:fill>
                </s:Rect>
                   
                <s:Group left="0" right="0" top="0" bottom="0">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="justify" />
                    </s:layout>

                    <!---
                        Application Control Bar
                    -->
                    <s:Group id="topGroup" minWidth="0" minHeight="0"
                                includeIn="normalWithControlBar, disabledWithControlBar" >

                        <!-- layer 0: control bar highlight -->
                        <s:Rect left="0" right="0" top="0" bottom="1" >
                          <s:stroke>
                                <s:LinearGradientStroke rotation="90" weight="1">
                                    <s:GradientEntry color="0xFFFFFF" />
                                    <s:GradientEntry color="0xD8D8D8" />
                                </s:LinearGradientStroke>
                          </s:stroke>
                        </s:Rect>

                        <!-- layer 1: control bar fill -->
                        <s:Rect left="1" right="1" top="1" bottom="2" >
                          <s:fill>
                                <s:LinearGradient rotation="90">
                                    <s:GradientEntry color="0xEDEDED" />
                                    <s:GradientEntry color="0xCDCDCD" />
                                </s:LinearGradient>
                          </s:fill>
                        </s:Rect>

                        <!-- layer 2: control bar divider line -->
                        <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                            <s:fill>
                                <s:SolidColor color="0x000000" />
                            </s:fill>
                        </s:Rect>

                        <!-- layer 3: control bar -->
                        <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                            <s:layout>
                                <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                            </s:layout>
                        </s:Group>
                    </s:Group>

                    <!---
                        @copy spark.components.SkinnableContainer#contentGroup
                    -->
              <s:Scroller width="100%" height="100%">
              <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
              </s:Scroller>
                  

                </s:Group>

            </s:Skin>

            1 person found this helpful