Maximizing AIR WindowedApplication and resizing containg component - apache-flex

I am trying to create an AIR app that you can maximize, and when you maximize all the components contained in the windowedApplication are scaled with the containing windowedApplication.
At the moment when you maximize the window all the components just stay the same size. Is this even possible?
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:ATE="http://ns.adobe.com/ate/2009"
xmlns:ai="http://ns.adobe.com/ai/2009"
xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
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:lib="assets.graphics.UI.*"
xmlns:flm="http://ns.adobe.com/flame/2008"
xmlns:lib2="assets.graphics.*"
xmlns:components="components.*"
xmlns:lib3="assets.graphics.logout.*"
xmlns:lib4="assets.graphics.logo.*"
xmlns:sparkTree="com.sparkTree.*"
xmlns:testsubmitassessmentscore2="services.testsubmitassessmentscore2.*"
minWidth="800" minHeight="600" backgroundColor="#FFFFFF"
creationComplete="creationCompleteHandler()" showStatusBar="false"
currentState="{model.whichViewState}" currentStateChange="onStateChange()"
preloaderChromeColor="#FFFFFF" title="MyApplication">
<!--<fx:Style source="Main.css">-->
<!--minWidth="800" minHeight="600"-->
<fx:Style>

You can listen for the resize event dispatched by any UIComponent :
<?xml version="1.0" encoding="utf-8"?>
<s:Group
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="100%" height="100%"
resize="onResize(event)"
>
<fx:Script>
<![CDATA[
import mx.events.ResizeEvent;
private function onResize(event:ResizeEvent):void
{
// code goes here : resize your components and stuff...
}
]]>
</fx:Script>
</s:Group>
Be careful, though, because this kind of trick may cause infinite loop : you listen for a resize event, then resize a component that causes another resizeevent to be dispatched, and the loop goes back from the start...

Related

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

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.
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>

Close title window from its child component flex

I am implementing a title window, which is calling from the main appication like this
protected function sampleButton_clickHandler(event:MouseEvent):void
{
var ttlWndw:SampleTitleWindow = PopUpManager.createPopUp(FlexGlobals.topLevelApplication as DisplayObject, SampleTitleWindow, true) as SampleTitleWindow;
PopUpManager.centerPopUp(ttlWndw);
}
the title window will be this
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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:local="*"
width="288" height="230">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<local:SampleVBox id="sampleVBox" x="108" y="83"/>
</s:TitleWindow>
in the title window i had another child component called sample vbox and this component looks like this
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
protected function closeBtn_clickHandler(event:MouseEvent):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button id="closeBtn" label="Close" click="closeBtn_clickHandler(event)"/>
</mx:VBox>
My question is, I want to close the title window using the button in the sampleVBox component. please someone help me in this.
Thanks in advance!
One solution is to dispatch an event from the SampleVBox component that the parent TitleWindow will listen to. To do this, add some metadata to your SampleVBox class that indicates the class dispatches such an event:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
[Event(name="close", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
protected function closeBtn_clickHandler(event:MouseEvent):void
{
dispatchEvent(new Event(Event.CLOSE));
}
]]>
</fx:Script>
<s:Button id="closeBtn" label="Close" click="closeBtn_clickHandler(event)"/>
</mx:VBox>
Now, that the SampleVBox declares that it dispatches a "close" event, you can listen for it in the TitleWindow:
<s:TitleWindow 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:local="*"
width="288" height="230">
<fx:Script>
<![CDATA[
protected function onSampleBoxClose():void
{
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<local:SampleVBox id="sampleVBox" x="108" y="83" close="onSampleBoxClose()"/>
</s:TitleWindow>

Taking a snapshot, scaling it and repeating

I'm trying to scale text from 1 to 5, a sort of zoom in type of look. I'm using the code below:
<s:Scale target="myLabel" autoCenterTransform="true"
duration="2000"
scaleYFrom="1" scaleYTo="5" scaleXFrom="1" scaleXTo="5"
>
The text scales terribly. So my goal is to take a snapshot of the text label at a large font, add it to the display list, set the scale to a 5th and then animate the scale up to 1. After that I have to set the text again and do it all over again.
This is a Flex app and that's where my question comes in. I don't know how to take a snapshot, then what to add it to (group?) and then how to erase it and start over again? Any advice in any of this would be appreciated.
Here's a very simple approach which animates the fontSize style, instead of animating the scale properties:
Depending on what you're doing this may not perform well b/c it is setting a new style so frequently. Also, if you play this animation slowly, it looks like the individual characters "wobble" (they move or shake a teeny bit).
I'll post something on taking a snapshot and scaling that next...
<?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">
<fx:Declarations>
<s:Animate id="scaler" target="{scaledText}" >
<s:MotionPath property="fontSize">
<s:Keyframe time="0" value="12"/>
<s:Keyframe time="1500" value="48"/>
</s:MotionPath>
</s:Animate>
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function onLabelClick():void
{
scaler.play();
}
]]>
</fx:Script>
<s:Label id="scaledText" text="this is some text" click="onLabelClick()" />
</s:Application>
And here is the approach that takes a snapshot of the text. This has the same problem as your original solution, the scaled text is very jagged. But this does show how to take a snapshot of something and use the snapshot in another Flex object:
<?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">
<fx:Declarations>
<s:Scale id="scaler" target="{drawingTarget}" scaleXFrom="1" scaleXTo="5" scaleYFrom="1" scaleYTo="5"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.core.SpriteVisualElement;
protected function onLabelClick():void
{
var data:BitmapData = new BitmapData(200,200,true, 0xFFFFFF);
data.draw(scaledText);
var g:Graphics = drawingTarget.graphics;
g.beginBitmapFill(data);
g.drawRect(0,0, 200,200);
g.endFill();
}
protected function onBitmapClick(event:MouseEvent):void
{
scaler.play();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label id="scaledText" text="this is some text" click="onLabelClick()" />
<s:SpriteVisualElement id="drawingTarget" width="200" height="200" click="onBitmapClick(event)"/>
</s:Application>

Flex component - vbox vs group why does one compile, other does not?

Trying to understand why when creating a component in flex (flash builder 4) I am unable to create a component from file->new component and reference "data.", but a slightly different sample works. This component is going to be used as an advanced data grid renderer.
This one compiles fine:
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" height="100%" width="100%" >
<s:RichText text="{data.presentingProblemNotes}"/>
</mx:VBox>
This one does not compile, does not like the data.presentingProblemNotes
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="100%" height="100%">
<s:RichText text="{data.presentingProblemNotes}"/>
</s:Group>
The error is on the "data" variable - that it does not exist.
In mx components, all UIComponent had a 'data' property which was used for item renderers, but that has been removed in Spark components because not all of them needed it. They now need to extend DataRenderer for it to work. In your particular case, you could do this instead:
<s:ItemRenderer 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="100%" height="100%">
<s:RichText text="{data.presentingProblemNotes}"/>
</s:ItemRenderer>

Flex 4: DropDownList doesn't work in new window

In this code I'm creating a new window when I click the button. In the new window are TextInput and DropDownList components. When the new window opens, clicking the DropDownList does nothing - you have to click it a second time round to get it to open. However, click into the TextInput field first and then try opening the DropDownList works no problem.
Any reason why this is happening? Is this a bug or something I'm doing wrong? The issue occurs with Flex 4.1 and Flex Hero (Sept 2010 release).
Below is the code, or download the FXP file here.
// DropDownTest.mxml (application)
<?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"
width="400" height="300">
<fx:Script>
<![CDATA[
private function newWindow():void
{
this.close();
var w:MyWindow = new MyWindow();
w.open();
}
]]>
</fx:Script>
<s:Button label="New Window" click="newWindow()"/>
</s:WindowedApplication>
// MyWindow.mxml (component)
<?xml version="1.0" encoding="utf-8"?>
<s:Window 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="400" height="300">
<s:TextInput/>
<s:DropDownList y="30"/>
</s:Window>
Turns out this is a bug. Adobe suggested calling "setFocus()" after "open()" and it worked. See here for further details: http://forums.adobe.com/message/3241460#3241460

Resources