6 Replies Latest reply on May 16, 2010 12:26 PM by TeotiGraphix

    Flex4 equivalents for Flex3

    MageshR Level 1

      Hi - We are trying to rewrite the app in Flex3 to Flex4.  This is what we have in Flex3.

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF"
          layout="absolute"  horizontalAlign="center" verticalAlign="middle" creationComplete="onCreationComplete();">

       

      We found the equivalent in Flex4 as below.

       

      <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/mx"
                    creationComplete="onCreationComplete();" >

       

      But we are not able to do a horizontalAlign as center or VerticalAlign as middle. Pls help me on how to acheieve this.

       

      Also we have a VBox as below

      <mx:VBox  x="0" width="800" height="820" backgroundColor="#FFFFFF" verticalGap="0" borderColor="#402F5C" borderStyle="solid" cornerRadius="20">

       

      Again in Flex4 we have it as VGroup, but there is no equivalents for borderColor, borderStyle,cornerRadius and backgroundColor.  Pls help me on how to acheieve this.

        • 1. Re: Flex4 equivalents for Flex3
          SpaghettiCoder Level 3

          Use a border container

           

          with a layout of horizontal/vertical etc...

          • 2. Re: Flex4 equivalents for Flex3
            MageshR Level 1

            Can you give me a sample pls?


            Also how to achieve the 2nd part? i.e borderColor, borderStyle,cornerRadius and backgroundColor for a VGroup?
            • 3. Re: Flex4 equivalents for Flex3
              MageshR Level 1

              I tried nesting the VGroup inside a bordercontainer and that did the trick for 2nd part i.e adding borderradius etc.Thanks for that.

               

              For the 1st question, for horizontal align and vertical align for s:Application, I tried something similar below as you had sugegsted.

               

              <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/mx"
                            creationComplete="onCreationComplete();" >

               

                  <s:BorderContainer>
                      <s:layout>
                          <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"
                              paddingLeft="5" paddingRight="5"
                              paddingTop="5" paddingBottom="5"/>
                      </s:layout>

               

              but it still does not do the align. The problem here is, its not showing the full application. it gets cut off at the page height level. But when I switch to

               

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF"
                  layout="absolute" xmlns:view="com.ca.view.*"   horizontalAlign="center" verticalAlign="middle" creationComplete="onCreationComplete();">

               

              it shows the full application. Pls help me. Its urgent.

              • 4. Re: Flex4 equivalents for Flex3
                SpaghettiCoder Level 3

                If you have a screen shot of what it should look like it may be more helpful.

                 

                But from your post, I'm thinking you're trying to do something like this below?

                 

                <?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/mx" minWidth="955" minHeight="600" width="1024" height="768" preloaderChromeColor="#C46E6E" backgroundColor="#8D2E2E">

                 

                 

                 

                <s:layout>

                 

                 

                <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>

                 

                 

                </s:layout>

                 

                 

                 

                <s:BorderContainer cornerRadius="9">

                 

                 

                <s:layout>

                 

                 

                 

                <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>

                 

                 

                </s:layout>

                 

                 

                 

                <s:Button label="Button"/>

                 

                 

                <s:Button label="Button"/>

                 

                 

                <s:Button label="Button"/>

                 

                 

                 

                </s:BorderContainer>

                </s:Application>

                • 5. Re: Flex4 equivalents for Flex3
                  SpaghettiCoder Level 3

                  I indent my code, but this forum posting thing is stripping away the proper formatting *sigh*

                  • 6. Re: Flex4 equivalents for Flex3
                    TeotiGraphix Level 3

                    Hi,

                     

                    Using the absolute positioning of the Application you could use;

                     

                    <!-- 
                        this would achieve a centered container using 
                        the default BasicLayout of the Application 
                    -->
                    <s:BorderContainer 
                        backgroundColor="#FFFFFF" 
                        borderColor="#402F5C" 
                        cornerRadius="20"
                        horizontalCenter="0" verticalCenter="0"
                        width="800" height="820">
                        
                        <!-- acts like a VBox -->
                        <s:layout>
                            <!-- set any additional padding etc. -->
                            <s:VerticalLayout gap="0"/>
                        </s:layout>
                        
                        <!-- Content elements... -->
                        
                    </s:BorderContainer>

                     

                    Mike