In flex application how to get the ID of specific display component using mouse event. For example if I want to get the ID of a button it should be displayed when I click the button
do it with event.currentTarget.id like 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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function niceButton_clickHandler(event:MouseEvent):void
{
Alert.show(" the button id is: "+event.currentTarget.id)
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Button id="niceButton" label="click me" click="niceButton_clickHandler(event)" />
</s:HGroup>
</s:Application>
Related
I am developing a desktop air application in flex. I have 2 mxml (one mxml is windowedapplication and another one in mxml group). I want to navigate from one mxml file (login.mxml) to another (nextpage.mxml).
How can I acheive this?
login.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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>`enter code here`
<![CDATA[
public function onLogin()
{
// What code should i use to navigate to another mxml page i.e nextpage.mxml
}
]]>
</fx:Script><s:Button id="btn" name="Login" click="onLogin()"/</s:WindowedApplication>
nextpage.mxml:
<?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="400" height="300">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label text="Login Success/></s:Group>
It would be good to implement the main application as a coordinator of the application's state.
In this case you can use the ViewStack component, which has Login and NextPage components as children. The components communicate with the application by means of events. Depending on the current event the state is changed.
//Main app
<?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" xmlns:fld01="com.fld01.*">
<mx:ViewStack id="vsMain">
<s:NavigatorContent id="ncLogin">
<fld01:Login id="grLogin" evtLogin="{vsMain.selectedChild = ncNextPage}"/>
</s:NavigatorContent>
<s:NavigatorContent id="ncNextPage">
<fld01:Nextpage id="grNextPage" evtLogout="{vsMain.selectedChild = ncLogin}"/>
</s:NavigatorContent>
</mx:ViewStack>
</s:WindowedApplication>
//Login
<?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="400" height="300">
<fx:Metadata>
[Event(name="evtLogin", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
public function onLogin():void
{
this.dispatchEvent(new Event("evtLogin"));
}
]]>
</fx:Script>
<s:Button id="btn" x="40" y="50" label="Login" click="onLogin()"/>
</s:Group>
//NextPage
<?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="400" height="300">
<fx:Metadata>
[Event(name="evtLogout", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
public function onLogout():void
{
this.dispatchEvent(new Event("evtLogout"));
}
]]>
</fx:Script>
<s:Label x="40" y="50" text="Login Success"/>
<s:Button id="btn" x="40" y="80" label="Logout" click="onLogout()"/>
</s:Group>
I'm using Flash Builder 4.6. and working for a flex project in which i want to setFocus on textInput after the intitialize is complete. I am using the code myTextInput.setFocus();
this is working fine cursor are blinking but not Highlighting the TextInput for focusing the TextInput. My All code is here:
<?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" initialize="init();">
<fx:Script>
<![CDATA[
private function init():void{
myTextInput.setFocus();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel x="54" y="23" width="250" height="200">
<s:TextInput x="98" y="42"/>
<s:TextInput id="myTextInput" x="98" y="12"/>
</s:Panel>
</s:Application>
Index-template:
function setFocus(){
window.document.getElementById("APPNAME").focus();
$('#myTextInput').focus();
$('#myTextInput').focusEnables=true;
}
</script> </div>
Application:
private function init():void{
if (ExternalInterface.available) {
ExternalInterface.call('setFocus');
}
}
I got very basic question. Why this is not working?!
<?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"
width="1000" height="550" minWidth="960" backgroundColor="#F2F0F0">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label id="test1" x="43" y="259" text="Label"/>
<fx:Script>
<![CDATA[
test1.text = "Yay! This works...!";
]]>
</fx:Script>
</s:Application>
I got this error: Access of undefined property.
Thanks!
You're setting the text before the component is created. Try putting the assignment into a method and calling the method on creationComplete:
<?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"
width="1000" height="550" minWidth="960" backgroundColor="#F2F0F0"
creationComplete="onCreationComplete()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label id="test1" x="43" y="259" text="Label"/>
<fx:Script>
<![CDATA[
public function onCreationComplete():void {
test1.text = "Yay! This works...!";
}
]]>
</fx:Script>
</s:Application>
I am applying s:Fade effect on s:ItemRenderer on mouseOver event. The fade effect ends fine, but during its execution, it is applied only on half of the ItemRenderer object, plus half of the adjacent (right) ItemRenderer.
ItemRenderer objects are inside a s:List which uses a HorizontalLayout.
Here is the code for the ItemRenderer called FilterTagRenderer:
<?xml version="1.0" encoding="utf-8"?>
<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"
autoDrawBackground="false"
mouseOver="{fadeIn.play()}"
mouseOut="{alpha = 0.6}"
alpha="0.6">
<fx:Declarations>
<s:Fade id="fadeIn" alphaTo="1" duration="500" target="{this}"/>
</fx:Declarations>
<s:Label id="lblFilterName" text="{data}" paddingBottom="5" fontWeight="bold" fontSize="14"/>
</s:ItemRenderer>
Here is the code for List:
<s:List id="filterValuesList" width="{this.width}" borderVisible="false"
itemRenderer="view.FilterTagRenderer">
<s:layout>
<s:HorizontalLayout id="flowLayout" gap="6"/>
</s:layout>
</s:List>
I am using Flex SDK 4.0.
Does anyone know if this is a bug in flex or am I doing something wrong?
Thanks
You're doing something a little bit wrong, in that with Spark components you should let the state change run th effect, rather than trying to run it yourself. However, effects under the hood are just a filter on a single DisplayObject, so I'm not sure how you can get an effect that's partially on two different objects. Your renderers are probably just not where you think they are. What happens if you use one of the layouts that came with Flex, such as TileLayout?
Seems like a bug.
Steps to reproduce: simply compile and run the following two files, and then move the mouse over to any word.
Application file (FadeBug.mxml):
<?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[
import mx.collections.ArrayCollection;
]]>
</fx:Script>
<s:List dataProvider="{new ArrayCollection('The quick brown fox jumped over the lazy dog'.split(' '))}"
itemRenderer="BuggyItemRenderer" >
<s:layout>
<s:HorizontalLayout gap="6"/>
</s:layout>
</s:List>
</s:Application>
BuggyItemRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<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"
autoDrawBackground="false"
alpha="0.4"
mouseOver="{fadeEffect.play()}"
mouseOut="itemrenderer1_mouseOutHandler(event)">
<fx:Script>
<![CDATA[
protected function itemrenderer1_mouseOutHandler(event:MouseEvent):void
{
if (fadeEffect.isPlaying) {
fadeEffect.stop();
}
this.alpha = 0.4;
}
]]>
</fx:Script>
<fx:Declarations>
<s:Fade id="fadeEffect" target="{this}" alphaFrom="0.4" alphaTo="1"/>
</fx:Declarations>
<s:Label text="{data}" fontSize="25" fontWeight="bold"/>
</s:ItemRenderer>
using flex, is it possible to make a square, drawn using s:rect , clickable?
I am trying to draw a series of coloured boxes and allow them to be clicked on to perform an action.
I wasn't able to target it directly so I wrapped it in a BorderContainer and that did the trick. Or you could just use a BorderContainer if all you want is a box you can color and target.
<?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" creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
public function init():void{
myBox.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
}
public function changeColor(e:MouseEvent):void
{
myFill.color = 0xFFFF00;
}
]]>
</fx:Script>
<s:states>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:SolidColor id="myFill" color="0xFF0000" />
<s:SolidColorStroke id="myStroke" color="0x000000" weight="2" />
</fx:Declarations>
<s:BorderContainer id="myBox" >
<s:Rect width="200" height="200" fill="{myFill}" stroke="{myStroke}" id="box1" />
</s:BorderContainer>
</s:Application>