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
Related
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 make VideoDisplay playing media with FlashDevelop. Here's the source of my application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.VideoEvent;
private function pause():void
{
if (moo_player.state == VideoEvent.PLAYING)
moo_player.pause(); else
if (moo_player.state == VideoEvent.PAUSED)
moo_player.play();
}
]]>
</mx:Script>
<mx:Panel>
<mx:VideoDisplay
source="bar.flv"
width="640"
height="480"
maintainAspectRatio="true"
id="moo_player"
autoPlay="true"
doubleClick="pause();"
doubleClickEnabled="true"
/>
</mx:Panel>
</mx:Application>
The problem is when i build application and run it (unfortunately, got no idea how to run it without KMPlayer or Mozilla - Flash Player is a plugin afaik) i got no video. The movie file is in the same directory as application's "Application.flv" one. But if i reload application (within player or browser) a few times, video starts.
So, here are my questions:
what's wrong with VideoDisplay
component and how to fix this
'non-playing'?
what's the better way
to execute application than running
it within movie player or browser?
P.S.: please, do not get mad of my knowledge lacks - i began to use Flex nearly 30 minutes ago.
You should be using Spark components, not MX components. Try this:
<?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">
<s:VideoPlayer source="bar.flv" width="640" height="480" />
</s:Application>
There's some issues with video display internally in the component. One of the only flex components that's kind of poorly done in some ways. Please don't let it discourage you from exploring Flex.
Create a custom component that extends it, create a file named CustomVideoDisplay.as with this code:
package
{
import mx.controls.VideoDisplay;
public class CustomVideoDisplay extends VideoDisplay
{
[Bindable]
override public function get source():String
{
return super.source;
}
override public function set source(value:String):void
{
super.source = value;
play();
}
public function CustomVideoDisplay()
{
super();
}
}
}
Then add this into your root <application> tag :
xmlns:local="*"
And for your video component, refer to it as:
<local:CustomVideoDisplay
source="bar.flv"
width="640"
height="480"
maintainAspectRatio="true"
id="moo_player"
autoPlay="true"
doubleClick="pause();"
doubleClickEnabled="true"
/>
Let me know if this doesn't do the trick for you!
Well, i thought: my player will be ran at client-side of web project, and in FireFox that code runs successfully each of seven runs. I think this would be enough for testing and implementation.
Thanks everyone for the trouble-taking!
I'm working on a template for dynamic questionnaires in Flex. More detailed description in my previous thread HERE
To create the questionnaire, I use nested repeaters - one for the questions and one for the answers (as their amount may vary).
<mx:Repeater id="r" dataProvider="{questions}">
<mx:Label text="{r.currentItem.question}" width="200"/>
<mx:Repeater id="r2" dataProvider="{r.currentItem.answers}">
<mx:RadioButton label="{r2.currentItem.text}" width="200"
click="answerHandler(event, event.currentTarget.getRepeaterItem())"/>
</mx:Repeater>
</mx:Repeater>
To understand my data providers, it's probably best to check the answer for my previous thread - easier than if I try to explain it here.
The question here is... As you can see, I created click event handler for each radio button and my plan was to do playerScore++ every time the user chose correctly (which can be achieved by checking the Boolean property "correct" of sent RepeaterItem).
However, I see now that even if the button is selected already, I can still click on it more times, and even though it's not changing anything in the view, it increments the score every time.. I would also have to handle situation in which the user changes his mind (I could give + points for each good answer and - points for wrong, but this would mean, that if the user chose more wrong answers, my score will be negative and I don't want it).
So it would be way way easier to just have a Submit button and check the states of all my buttons and if they are correct only after the user clicks "submit". Is it possible?
I recommend you to refer to the following sample and add RadioButtonGroup to your repeater groups and listen to change events instead of click. You can listen change event right in RadioButtonGroup and check if (radioGroup.selectedValue.correct) for correctness of new selection. See corresponding documentation.
To have possibility to assign radiogroups unique name you have to extract inner repeater with answers into separate component. Breaking your application into smaller components can make your application more clear and readable. You can treat every MXML file as a class (as in OOP) but in declarative form. And to tell the true every MXML component is a class which inherited from root-node-class.
Lets look at the code.
First, our inner component which serves answers:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Metadata>
[Event(name="rightAnswerEvent", type="AnswerEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var answers:ArrayCollection;
protected function answerGroup_changeHandler(event:Event):void
{
if (answerGroup.selectedValue.correct)
dispatchEvent(new AnswerEvent(AnswerEvent.RIGHT_ANSWER_EVENT));
}
]]>
</mx:Script>
<mx:RadioButtonGroup change="answerGroup_changeHandler(event)" id="answerGroup" />
<mx:Repeater dataProvider="{answers}" id="answersRepeater">
<mx:RadioButton group="{answerGroup}" label="{answersRepeater.currentItem.text}"
value="{answersRepeater.currentItem}" />
</mx:Repeater>
</mx:VBox>
It gets answers collection as input and fires our custom event to inform some components about right answer (see Metadata tag).
Our custom event is pretty simple an looks like the following:
package
{
import flash.events.Event;
public class AnswerEvent extends Event
{
public static const RIGHT_ANSWER_EVENT:String = "rightAnswerEvent";
public function AnswerEvent(type:String)
{
super(type);
}
}
}
So now our top level component:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" xmlns:local="*"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var questions:ArrayCollection = new ArrayCollection();
[Bindable]
private var scoreCounter:int;
]]>
</mx:Script>
<mx:Label text="{'Score ' + scoreCounter}" />
<mx:Repeater dataProvider="{questions}" id="questionRepeater">
<mx:Label text="{questionRepeater.currentItem.question}" />
<local:AnswerGroup answers="{questionRepeater.currentItem.answers}" rightAnswerEvent="scoreCounter++" />
</mx:Repeater>
</mx:Application>
I omitted initialization code to populate our Question and Answer domain objects with data from XML (see previous thread).
So now we have compact modularized code where every part solves its own task.
Hope this helps!
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)" />
I'm trying componentize one of the pieces of UI in an AIR application that I'm developing in Flex. In this example, I want to display file information on a single line (which has an icon, some text/link and the size).
My code looks like this (component is called FileDisplay):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function set iconType(source:String):void {
this.ficon.source = source;
}
public function set fileName(name:String):void {
this.fname.htmlText = name;
}
public function set fileSize(size:String):void {
this.fsize.text = size;
}
]]>
</mx:Script>
<mx:Image id="ficon" />
<mx:Label id="fname" left="20" right="30" text="Filename" />
<mx:Label id="fsize" right="0" text="0 K" />
</mx:Canvas>
When I'm using this component in my main application, the actionscript looks like:
for each (var file:XML in result.files) {
var fd:FileDisplay = new FileDisplay();
fd.fileName = ''+file.name+'';
fd.iconType = getFileTypeIcon(file.name);
fd.fileSize = getFileSizeString(file.size);
this.file_list.addChild(fd);
}
However, when I do this, I get an error: Error #1009: Cannot access a property or method of a null object reference. This is because the child components of the FileDisplay are null (or at least they show up that way in the debugger).
Does anyone know if there's a way around this? Am I supposed to be waiting for events indicating the child components were created? Is there a more common pattern that solves this problem?
For now I can manually do everything in ActionScript in my main app (create a Canvas and add children to it) but I would appreciate any insight on how to separate the code more cleanly.
Bindable to the rescue:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var iconType:String;
[Bindable]
public var fileName:String = "Filename";
[Bindable]
public var fileSize:String = "0 K";
]]>
</mx:Script>
<mx:Image id="ficon" source="{iconType}"/>
<mx:Label id="fname" left="20" right="30" text="{fileName}" />
<mx:Label id="fsize" right="0" text="{fileSize}" />
</mx:Canvas>
the values will be automatically updated when the components are created.
The subcomponents haven't been loaded yet.
Read this: http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html#203434.
Then, when like me, you don't understand it (and it's not reliable), listen for the FlexEvent.CREATION_COMPLETE within FileDisplay, and apply your child component properties there.
Or better yet, create the three children programmatically in the "createChildren" function, and apply the settings there.
Both of these methods assume that you're setting filename, icontype, and filesize as local members before applying them to the children components, which you should be doing regardless.
What is the parent component that holds the FileDisplay component? If you're sure that the error is coming from the fact that the child components of FileDisplay aren't being instantiated then you might want to look at the creationPolicy attribute and make sure it's set to ContainerCreationPolicy.ALL on that parent component.
=Ryan
In addition to setting the CreationPolicy to all, you need to add the DisplayObject to the stage via addChild. The children of FileDisplay are not created until you add it is added to the stage. So do:
for each (var file:XML in result.files) {
var fd:FileDisplay = new FileDisplay();
this.file_list.addChild(fd);
fd.fileName = ''+file.name+'';
fd.iconType = getFileTypeIcon(file.name);
fd.fileSize = getFileSizeString(file.size);
}