Web app in Flex 4

Question

I have a small issue related to my web App developed in Flex 4.6.

I have an app which has 800 x 600 px and in some screens, not all the content is shown and no scroll appear in the browser.

How can I setup the app to be able to show the y-scroll in the browser?

Regards.

Answer 1

You need to add an Scroller to the components that you want to scroll and make sure you have set verticalScrollPolicy to "auto". http://help.adobe.com/en_US/flex/using/WSb04c7610c3432839-13869d09121418556f1-7ffc.html

Answer 2

I had similar problem - with a card game as Flex 4 web app 700 x 525 px - played mostly by older folks and they often have fonts/webpage zoomed (for example by using CTRL and + keys in browser) - which caused the UI be offset (like PopUpWindow not centered) etc.

My solution has been to use a custom app skin.

Here some excerpts of my code:

MyApp.mxml:

<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"
    width="700" height="525" 
    initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL" 
    skinClass="MySkin">
    ...

MySkin.mxml: (even works in full screen mode)

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.Application")]
    ]]>
    </fx:Metadata> 

    <fx:Script fb:purpose="styling">
        <![CDATA[
            ....
        ]]>
    </fx:Script>

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

    <s:Group id="mainGroup" x="0" y="0" width="700" height="525">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>

        <s:Group id="contentGroup" width="700" height="100%" minWidth="0" minHeight="0" />

        <s:Group id="topGroup" minWidth="0" minHeight="0"
                    includeIn="normalWithControlBar, disabledWithControlBar" >

            <s:Rect left="1" right="1" top="1" bottom="1" >
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="#66BBEE" />
                        <s:GradientEntry color="#3399CC" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>

            <s:Rect left="2" right="2" bottom="0" height="1" alpha="0.5">
                <s:fill>
                    <s:SolidColor color="#333333" />
                </s:fill>
            </s:Rect>

            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="6" paddingRight="6" paddingTop="6" paddingBottom="6" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>

    </s:Group>
</s:Skin>