Apply effect on window in Flex, Air, AS3 - actionscript-3

I'm looking to animate a popup window using the effect.
The problem is that the effect is applied to the content of the popup window, not the popup window itself (including the title bar, minimize, maximize buttons etc)
Have a look at the result here..
My code is really simple and logically, should work if it is possible to animate a window.
<?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">
<fx:Script>
<![CDATA[
import comps.MyWin;
[Bindable]
private var _win:MyWin;
protected function openPopup():void
{
_win = new MyWin();
_win.width = 300;
_win.height = 300;
_win.open();
}
protected function animatepopup():void
{
MyEffect.play();
}
]]>
</fx:Script>
<fx:Declarations>
<s:Move id="MyEffect" xFrom="{_win.x}" xTo="{_win.x + 150}" target="{_win}"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button label="Open" click="openPopup()"/>
<s:Button label="Animate" click="animatepopup()"/>
</s:WindowedApplication>

I think you need to target the object's NativeWindow instance in order to move and resize the object.
Thus, replace _win.myProperty with _win.stage.nativeWindow.myProperty:
<s:Move id="MyEffect" xFrom="{_win.stage.nativeWindow.x}" xTo="{_win.stage.nativeWindow.x + 150}" target="{_win.stage.nativeWindow}"/>
Then, the animation will affect the NativeWindow and not the internals of the window.

Related

"null object reference" error in ActionScript 3

I used my app's resize handler to resize my component but it is throwing this error :
TypeError: Error #1009: Cannot access a property or method of a null object reference
Here is my code :
<?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"
resize="application2_resizeHandler(event)" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
private var employeeName:String = 'ravi';
protected function application2_resizeHandler(event:ResizeEvent):void
{
mainGroup.width = stage.width - 10;
mainGroup.x = 5;
}
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:VGroup id="mainGroup" >
<s:Label id="employeeNameLabel" text="{employeeName}" />
<s:Label id="departmentLabel" />
</s:VGroup>
<s:Button id="getData" />
</s:Group>
</s:Application>
You got the #1009 error because your resize event is fired before the creation of your objects. So, you should wait for that and that your app is added to the stage to be able to use the stage object.
For that, I think that the best event is the applicationComplete event, then you can add a resize event to resize your component ...
So you can do like this for example :
<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"
applicationComplete="application2_applicationCompleteHandler(event)" >
then
protected function application2_applicationCompleteHandler(event:FlexEvent):void
{
// if you want you can resize your component for the 1st time
// by calling the application2_resizeHandler() function
application2_resizeHandler(new ResizeEvent(ResizeEvent.RESIZE));
// add the resize event listener to your app
event.target.addEventListener(ResizeEvent.RESIZE, application2_resizeHandler);
}
Hope that can help.

Hide a Button in a ButtonBar

I was wondering if there is any way you hide a particular button in a ButtonBar. According to this answer (and the link provided in the second answer) Disable individual buttons in a buttonbar I need to use the getChildAt method of the ButtonBar, but when I do that I get the custom skin object and not the Button object. I was wondering how I could get access to the Button object.
Thanks!
Under the assumption that all buttons in your button bar will be rendered at the same time and you won't need scrollbars...
With a Spark ButtonBar, you can access the skin part directly to get access to a button. Conceptually something like this:
var button : Button = mySparkButtonBarInstance.dataGroup.getElementAt(SomeIndex);
button.visible = false; // or true
button.includeInLayout = false; // or true
This won't work if your ButtonBar can make use of Virtual Layouts and requires scrolling.
Edit: Here is working code demonstrating this technique:
<?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">
<fx:Script>
<![CDATA[
import mx.core.IVisualElement;
protected function button1_clickHandler(event:MouseEvent):void
{
trace(buttonBar.dataGroup.getElementAt(0));
var button :IVisualElement = buttonBar.dataGroup.getElementAt(0);
button.visible = false; // or true
button.includeInLayout = false; // or true }
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingTop="20"/>
</s:layout>
<s:ButtonBar id="buttonBar">
<mx:ArrayCollection>
<fx:String>Flash</fx:String>
<fx:String>Director</fx:String>
<fx:String>Dreamweaver</fx:String>
<fx:String>ColdFusion</fx:String>
</mx:ArrayCollection>
</s:ButtonBar>
<s:Button label="Remove" click="button1_clickHandler(event)" />
</s:WindowedApplication>

Dynamically create button in Flex

I have very basic question about Flex SDK, but I didn't find any resources for my problem and honestly don't know if it even possible to do what I want. So here is my question:
I created Flex project with Adobe Flex Builder 4.6. Then I placed the button (let's say it's id is btn1) in main MXML file. I want to create second button dynamically right from the script part of main MXML file. Specifically I want to create it from button click handler of btn1.
Here is my MXML code (it is the only file in project ):
<?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:Script>
<![CDATA[
protected function btn1_clickHandler(event:MouseEvent):void
{
var btn2:Button = new Button();
btn2.label = "Hello";
btn2.x = 50;
btn2.y = 50;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Non visual elements -->
</fx:Declarations>
<s:Button id="btn1"
x="10" y="10"
label="Кнопка"
click="btn1_clickHandler(event)"/>
</s:Application>
But when I click btn1 - nothing happens. It is possible that I don't understand something in flex programming paradigm - please point it out for me.
You have to add the button to the view using addElement().
var btn2:Button = new Button();
btn2.label = "Hello";
btn2.x = 50;
btn2.y = 50;
addElement(btn2);

Adding a border to a group in run time in flex

i am trying to make a group of spark type in flex at runtime.i am making a couple of buttons as children of this group in runtime. i want to add border to all group. however when i use border container it hides all other children and the stuff in group container and only shows the border container screen. How can i add border to group.
Note that i am adding the border container as a child of group container in run time.
best regards
You can add a s:Rect child at particular index acting as a border.
<?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">
<fx:Script>
<![CDATA[
import mx.graphics.SolidColorStroke;
import spark.primitives.Rect;
protected function addNewBorderButtonClick(event:MouseEvent):void
{
var borderRect:Rect = new Rect();
var solidStroke:SolidColorStroke = new SolidColorStroke(0, 3);
borderRect.stroke = solidStroke;
borderRect.percentWidth = borderRect.percentHeight = 100;
targetGroup.addElementAt(borderRect, 0);
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Group id="targetGroup"
width="100" height="100"
horizontalCenter="0" verticalCenter="0">
<!-- some visual elements here -->
<s:Button id="addNewBorderButton"
label="Add Border"
horizontalCenter="0" verticalCenter="0"
click="addNewBorderButtonClick(event)" />
</s:Group>
</s:Application>
Hope this helps,
Blaze

A link inside TextFlow: rollOver/rollOut bubbles, shouldn't bubble, and cannot be avoided

I'm having a weird behavior. I have an HTML link inside a TextFlow. When I set its linkHoverFormat, it starts sending rollOver/rollOut events up the chain. These events say the don't bubble but somehow they do. And I can't seem to stop them from doing so.
Here's an example:
<?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">
<fx:Declarations>
<s:TextLayoutFormat id="linkNormal" textDecoration="none" color="0x556677"/>
<s:TextLayoutFormat id="linkHover" textDecoration="underline" color="0x0000FF"/>
<s:TextFlow id="textFlow1"
linkActiveFormat="{linkHover}"
linkHoverFormat="{linkHover}"
linkNormalFormat="{linkNormal}">
<s:p> <s:a href="http://projects.nunogodinho.com">hover</s:a> </s:p>
</s:TextFlow>
</fx:Declarations>
<fx:Script>
<![CDATA[
// This pair of handlers is triggered by the panel
protected function rollOverHandler(e:MouseEvent):void {
panel.title = "over";
}
protected function rollOutHandler(e:MouseEvent):void {
panel.title = "out";
}
]]>
</fx:Script>
<s:Panel left="10" top="10" id="panel" mouseOver="rollOverHandler(event)" mouseOut="rollOutHandler(event)">
<s:RichEditableText id="ret1"
top="10"
editable="false"
textFlow="{textFlow1}" />
</s:Panel>
</s:WindowedApplication>
If you run this app and move the mouse over the link several times without moving out of the panel you'll see that it still changes the text.
So I decided to try to stop this strange event from bubbling:
<?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">
<fx:Declarations>
<s:TextLayoutFormat id="linkNormal" textDecoration="none" color="0x556677"/>
<s:TextLayoutFormat id="linkHover" textDecoration="underline" color="0x0000FF"/>
<s:TextFlow id="textFlow2"
linkActiveFormat="{linkHover}"
linkHoverFormat="{linkHover}"
linkNormalFormat="{linkNormal}">
<s:p> <s:a rollOver="linkelement2_rollOverHandler(event)" rollOut="linkelement2_rollOutHandler(event)" href="http://projects.nunogodinho.com">hover</s:a> </s:p>
</s:TextFlow>
</fx:Declarations>
<fx:Script>
<![CDATA[
import flashx.textLayout.events.FlowElementMouseEvent;
// This pair of handlers is triggered by the panel
protected function rollOverHandler(e:MouseEvent):void {
panel.title = "over";
}
protected function rollOutHandler(e:MouseEvent):void {
panel.title = "out";
}
// This pair of handlers is triggered by the <A> element inside textFlow2
// and I hoped it would stop the event from bubbling up to the panel
protected function linkelement2_rollOverHandler(e:FlowElementMouseEvent):void {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation()
}
protected function linkelement2_rollOutHandler(e:FlowElementMouseEvent):void {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation()
}
// I also tried to intercept the event in the RichEditableText but got the same weird
// behavior: the event triggers the panel's rollOver/rollOut intermittently
]]>
</fx:Script>
<s:Panel left="10" top="10" id="panel" mouseOver="rollOverHandler(event)" mouseOut="rollOutHandler(event)">
<s:RichEditableText top="10" left="55"
editable="false"
textFlow="{textFlow2}" />
</s:Panel>
</s:WindowedApplication>
I tried all combinations of preventDefault, stopImmediatePropagation and stopPropagation. It does change the event's behavior but it also ruins the hovering effect on the link.
Then I tried to intercept the event at the RichEditableText but I got the same kind of results.
Once I had a similar problem but I learned that it was because I was using mouseOver/mouseOut events instead of rollOver/rollOut. Since I switched to rollOver/rollOut it worked fine. Until now.
And now I'm clueless.
Please help.
Thanks.