How to make my container keep the same size as window using data binding?

Question

It is just a simplified case which isn't what I really want to achieve. I want to find a solution to deal with a problem like this.

I try two ways to do it, but the size of the container sometimes is not the same as the window. I think that it is probably because of invitation-validation pattern of Flex.

1. The flash version works normally in my chrome browser. The AIR verion doesn't work as I expected. When the program start, the container has no size. Both its width and height are 0. When I maximize the window, it remains small. When I minimize the window, its size become full screen.

<?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">

    <s:SkinnableContainer id="container" width="{width}" height="{height}"
                          backgroundColor="0x00FFFF"/>
</s:WindowedApplication>

2. The flash version works normally while the AIR version doesn't. When I maximize the window, it remains small. When I minimize the window, its size become full screen.

<?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"
               creationComplete="application1_creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            import mx.events.FlexEvent;
            import mx.utils.StringUtil;

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                setInterval(traceWidthAndHeight, 1000);

                BindingUtils.bindProperty(container, 'width', this, 'width');
                BindingUtils.bindProperty(container, 'height', this, 'height');
            }

            private function traceWidthAndHeight():void
            {
                trace(StringUtil.substitute('width: {0}, height: {1}\ncontainer.width: {2}, container.height: {3}',
                    width, height, container.width, container.height));
            }

        ]]>
    </fx:Script>

    <s:SkinnableContainer id="container"
                          backgroundColor="0x00FFFF"/>
</s:Application>

I know 100% width and height can reach my goal. However, I wonder if it can be done using data binding. Thanks in advance.

simion314 simion314 · Accepted Answer · 2014-07-22T13:00:36

A solution would be to use layout, so set a vertical(or horizontal) layout on the window, then set the container width and height to 100%

A sample 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">
    <s:layout>
        <s:VerticalLayout paddingBottom="12" paddingLeft="12" paddingRight="12" paddingTop="12"/>
    </s:layout>
<s:BorderContainer width="100%" height="100%" borderColor="blue"/>
</s:WindowedApplication>

How to make my container keep the same size as window using data binding?

1 Answers