I have a mxml flex application where I have to launch a VideoPlayer on button click event. Any idea what solutions I can use to open a new "frame" or "view" (I'm not sure what the right terminology is) with the VideoPlayer playing a media clip so that it wouldn't interfere with the original "view"?
What I would do is create a component (like a TitleWindow, Group, Panel, etc.) that has your VideoPlayer added to it and then use the PopUpManager to display it on screen when your button is clicked. Make sure you add a method to close the pop up when you're done with it.
Some links on the PopUpManager to get you started:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/PopUpManager.html
http://blog.flexexamples.com/category/popupmanager/
http://blog.flexexamples.com/2008/03/20/creating-custom-pop-up-windows-with-the-popupmanager-class-redux/
A (really) rough example:
<fx:Script>
<![CDATA[
private var myVideoPlayerComponent:VideoPlayer;
protected function btnHistory_clickHandler(event:MouseEvent):void
{
myVideoPlayerComponent = PopUpManager.createPopUp(this, VideoPlayer, false);
PopUpManager.centerPopUp(myVideoPlayerComponent);
}
]]>
</fx:Script>
<s:Button label="Play" id="myButton" click="myButton_clickHandler(event)" />
Related
I have extended the SkinnablePopUpContainer to make a popup window in mobile application. But i don't know how to pass a variable defined in the main view to this component. My code looks like the following
<fx:Declarations>
<fx:Component className="Alert">
<s:SkinnablePopUpContainer>
<s:Button label="OK" click="close()"/>
<s:SkinnablePopUpContainer>
<fx:Script>
<![CDATA[
private function setMetaDataXML(metaDataXML:XML):void{
var temp = metaDataXML;
}
]]>
</fx:Script>
</fx:Component>
</fx:Declarations>
--- main view continues
and here is how I call the component on a button click from the main view:
click="(new AlertMsg()).open(this, false)"
now i just want to call setMetaDataXML from the main view and pass the value. How can I achieve that? Thank you
I would recommend to create your component in a separate mxml file or even better in a pure AS3 based component. To do what you want to do, you could create a handler function in your Script area for that click event, and in there assign the instance of the component and then call any method before calling open, like:
click = "clickHandler()"
----- inside your script
function clickHandler : void {
var a : AlertMsg = new AlertMsg();
a.setMetaDataXML("foo");
a.open(this,false);
}
I would also recommend you to declare implicit setters and getters the AS3 way
In my application i am using a borderContainer which contains two or more panels.All these panels are resizable.
My problem is while resizing a panel if it touches the panel next to it i have to stop resizing automatically.
I used hittestObject and able to catch the hitting point but i dont know how to stop resize event.
Please help me.
I haven't tested this code but you can try. :). Basically I have to use the preventDefault method whenever I need to stop the execution of the default behavior of that specific method.
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.events.ResizeEvent;
//Your other codes here
public function panel_resizeHandler(event:ResizeEvent):void
{
var isTouched:Boolean = firstPanel.hitTestObject(secondPanel);
if(isTouched)
{
event.preventDefault();
}
}
]]>
</mx:Script>
<mx:Panel id="firstPanel" resize="panel_resizeHandler(event)>
<!-- Panel contents here-->
</mx:Panel>
<mx:Panel id="secondPanel" ">
<!--Panel Contents Here -->
</mx:Panel>
I'm trying to use one great example of using SpriteVisualElement for item renderers from here:
The issue i have is it's impossible to detect the mouse click event when click points to the area of the renderer which doesn't have any child components. For example: if I click on the textfield, then it works and i see the mouse even dispatched. If I click on an empty spot on the renderer then no mouse event is dispatched. I've tried mouseEnabled=true (which is true by default any way) with no luck. I see from the Flex doc:
the click event is inherited from InteractiveObject. So maybe this has something to do with the focus (see the tread at the and of the page). Looking for an explanation why InteractiveObject behaves that way. Thanks!
What is happening is that you do not have anything in the renderer to click on so click will fall through your renderer, by adding and image or graphic you are creating a clickable area.
The best thing to do is to tell the render that it does not have any mouseChildren which will then make it respond to any click on it.
change this method
public function TweetRenderer()
{
this.mouseChildren = false;
percentWidth = 100;
}
I think is getting a bit clear now. The mouseChildren is a property on DisplayObjectContainer. And as the following example shows DisplayObjectContainer doesn't dispatch any mouse click events, when click occur on the area which is not taken by any of it's children. This is unintuitive because DisplayObjectContainer has a click event inherited from InteractiveObject, so one (a newbe like me) would expect it to dispatch an event if i click on the container. Setting mouseChildren=false kind of flattens the DisplayObjectContainer, so the click event on any of the children will be dispatched having target as a container. But!!! This still assumes that you click on the child, not on the empty area. There is no way to dispatch it when click is done inside the area which is not taken by the child. This example shows this: If you click on either TextField or on fill, then even is dispatched with SpriteVisualElement as target. If you click elsewhere the event is not dispatched. I'm still unclear on why this is an intended behavior, taking into account the presence of click event on the DisplayObjectContainer. Maybe because containers don't meant to detect the mouse clicks at all, but rather their children are? This is a bit unintuitive to me.
<?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"
creationComplete="creationCompleteHandler(event)" >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void {
var tf:TextField = new TextField();
tf.text = "I'm inside SpriteVisualElement!";
tf.background = true;
tf.backgroundColor = 0xff0000;
tf.alpha = 0.75;
tf.selectable = false;
tf.width = 150;
tf.height = 25;
uic.addChild(tf);
uic.addEventListener(MouseEvent.CLICK, clickHandler);
uic.mouseChildren = false;
uic.mouseEnabled = true;
uic.graphics.lineStyle(1, 0xFF0000);
uic.graphics.moveTo(0,0);
uic.graphics.lineTo(uic.width,0);
uic.graphics.lineTo(uic.width,uic.height);
uic.graphics.lineTo(0,uic.height);
uic.graphics.lineTo(0,0);
uic.graphics.beginFill(0x00FF00,1);
uic.graphics.drawRect(12, 12, 178, 28);
uic.graphics.endFill();
}
protected function clickHandler(e:MouseEvent):void {
trace("click detected, target:",e.target);
}
]]>
</fx:Script>
<s:SpriteVisualElement id="uic" horizontalCenter="0" verticalCenter="0" width="200" height="50" />
</s:Application>
i am new to flex. I want to create some buttons and when v click on that button, it should open some images. how to give this functionality in flex builder 3. Thanks for ur time
Try this example if it helps.
The important thing is embedding the image before you use it.Another way of embedding is inline in the mx:Image tag.Please be careful with the path to the location of the image.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
/*in the source put the absolute path(like directory:/folder/image.gif) or the relative path (../image.gif where ../ is your project directory )to the location of your image
*/
[Embed (source="../src/assets/images/image.gif")]
[Bindable]
//this variable of type Class is used to refer to the aboveimage..
public var img:Class;
public function buttonClickHandler():void{
if(image.visible)
image.visible = false;
else
image.visible = true;
}
]]>
</mx:Script>
<mx:Image source="{img}" visible="false" id="image"/>
<mx:Button x="172" y="225" label="Button" id="button" click="buttonClickHandler()"/>
</mx:Application>
hi have a click handler for the button. in the function of click handler handle displaying of image by switching visibilities.have the image embedded in the design before itself. then play with its visibilities on button click.
try going through the examples here.explains about all kind of asset embedding,including sound
http://livedocs.adobe.com/flex/3/html/help.html?content=04_OO_Programming_09.html
I am trying to programmatically pass focus to a newly created TextField, but for some reason setSelection and setFocus do not work. For example, see my test code below:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="_init()">
<mx:Button click="{tf.setSelection(1,2)}" />
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
public var tf:TextField
private function _init():void{
tf = new TextField();
tf.text = "abcdefghijk";
tf.type = TextFieldType.INPUT;
tf.autoSize = TextFieldAutoSize.LEFT;
var ui:UIComponent = new UIComponent();
ui.addChild(tf);
addChild(ui);
tf.setSelection(0,1);
ui.setFocus();
ui.addEventListener(MouseEvent.MOUSE_DOWN, function():void{
tf.setSelection(0,3);
});
}
]]>
</mx:Script>
</mx:Application>
The only setSelection that does anything is the 0,3 one on MOUSE_DOWN. I assume this all has something to do with the text field receiving focus with the mouse click, but I cannot for the life of me figure out how to do this manually.
setFocus works on components that implement the mx.managers.IFocusManagerComponent. Textfield is not a Flex component and doesn't implement this interface, that's why it doesn't work. If I were you, I would use a TextInput instead seeing that you need an input control
On investigating other classes, motivated by Florian's suggestion, I came across UITextField which subclasses TextField. Though it does not implement the IFocusManagerComponent interface, it does have a setFocus method, which at this moment in time seems to be working.
As an added benefit, it can be added to a container directly, that is, without having to construct a UIComponent parent first.