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>
Related
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private function resetPrompts():void {
myTextInput.text = "";
myTextArea.text = "";
}
]]>
</fx:Script>
<s:VGroup>
<s:TextInput id="myTextInput" prompt="Enter name..." fontFamily="Marker Felt Thin" />
<s:TextArea id="myTextArea" prompt="Triệu hổ..." fontFamily="A"/>
<s:Button label="Reset" click="resetPrompts()"/>
</s:VGroup>
</s:WindowedApplication>
As my code: I use this tool to write Vietnamese character: http://unikey.vn/vietnam/
but any special char: ê, ô, í, ì... has been removed..
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>
I need the label to be indented. Setting de properties top, bottom, left don't work.
<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" top="10" bottom="10"
left="{data != null ? left = (data.niveau-1) * 20 : ''}">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
override public function prepare(willBeRecycled:Boolean):void{
if(data != null){
label = data.tekst;
styleName= 'niveau'+data.niveau;
toolTip=data.hulptekst;
}
}
]]>
</fx:Script>
</s:DefaultGridItemRenderer>
I think the best way to take control over alignment is to integrate your components into a Group.
Here is an effect you can achieve:
Here is the code:
//App
<?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;
[Bindable]private var myDP:ArrayCollection = new ArrayCollection([
{myfield:"Hello", niveau:3},
{myfield:"World", niveau:7},
{myfield:"!!!", niveau:5}
]);
]]>
</fx:Script>
<s:DataGrid id="myDG" x="20" y="20" height="120" dataProvider="{myDP}" editable="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="myfield" headerText="My Field" width="170" itemRenderer="renderers.CustomRenderer"/>
<s:GridColumn dataField="myfield" headerText="My Field" width="170"/>
</s:ArrayList>
</s:columns >
</s:DataGrid>
</s:Application>
//Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
lblData.text = data[column.dataField]
}
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:Label id="lblData" top="9" left="{data != null ? (data.niveau - 1) * 20 : 0}"/>
</s:Group>
</s:GridItemRenderer>
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>
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>