create custom chrome adobe air desktop application using flex4 sparks controls

Question

I have googled around but the only resource for teaching me how to create an Adobe Air Desktop Application uses mx controls instead.

inside app-xml i have set transparent to true and systemChrome to none.

the following is my main mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       xmlns:dragdrop="org.robotlegs.demos.draganddrop.*"
                       xmlns:view="org.robotlegs.demos.draganddrop.view.*"
                       mouseOver="layoutCanvas.visible = true;"
                       mouseOut="layoutCanvas.visible = false;"
    >

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        s|Application {
            background-alpha:"0.7"; 
            padding: 0px;

        }
    </fx:Style>


    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <dragdrop:DragAndDropContext contextView="{this}"/>
    </fx:Declarations>

    <s:Image id="background" width="100%" height="100%"
             source="@Embed('theme/assets/MaxBackground.png')"/>

    <s:BorderContainer id="layoutCanvas" width="100%" height="100%" visible="false">
        <s:Image id="applicationClose" right="5" top="2"
                 click="stage.nativeWindow.close()"
                 source="@Embed('theme/assets/buttons/CLOSE WINDOW icon.png')"/>
        <s:Image id="applicationMaximize" right="25" top="2"
                 click="stage.nativeWindow.maximize()"
                 source="@Embed('theme/assets/buttons/EXPAND WINDOW icon.png')"/>
        <s:Image id="applicationMinimize" right="45" top="2"
                 click="stage.nativeWindow.minimize()"
                 source="@Embed('theme/assets/buttons/COLLAPSED WINDOW icon.png')"/>

    </s:BorderContainer>


</s:WindowedApplication>

I have two issues.

1) the initial application window size. How can i set this to 100% full screen? 2) there is a strange grey horizontal footer at the bottom. How do i get rid of it? See here

I do not wish to use mx controls. I want to use sparks controls as much as possible.

Thank you.

James James · Accepted Answer · 2012-03-16T09:51:07

1) the initial application window size. How can i set this to 100% full screen?

To do this you can add a CREATION_COMPLETE handler to your application and within that handler add a line similar to:

this.maximize() where this is you WindowedApplication.

2) there is a strange grey horizontal footer at the bottom

From the sounds of it, this is the status bar. Try setting the showStatusBar property on you WindowedApplication root tag to false :

showStatusBar="false"

Hope this helps.

create custom chrome adobe air desktop application using flex4 sparks controls

1 Answers