Set text in a label - apache-flex

This should be super simple but I can't for the life of me seem to get it to just set the text of a label at run time. It throws "1120: Access of undefined property lbl_param"
<?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="398" height="85" minWidth="398" minHeight="85">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label id="lbl_param" x="19" y="10" width="105" height="29" text="Paramaters: "/>
<fx:Script>
<![CDATA[
lbl_param.text = "test113";
]]>
</fx:Script>
</s:Application>

Your code to set the lbl_param.text should be in a method: The only code in a script block you can run outside of a method is a class import or a variable definition. This sample puts the code in a initialize event hander:
<?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="398" height="85" minWidth="398" minHeight="85" initialize="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label id="lbl_param" x="19" y="10" width="105" height="29" text="Paramaters: "/>
<fx:Script>
<![CDATA[
public function init():void{
lbl_param.text = "test113";
}
]]>
</fx:Script></s:Application>
Disclaimer: I wrote this code in the browser and it may not be "compiler" perfect.

Related

Close title window from its child component flex

I am implementing a title window, which is calling from the main appication like this
protected function sampleButton_clickHandler(event:MouseEvent):void
{
var ttlWndw:SampleTitleWindow = PopUpManager.createPopUp(FlexGlobals.topLevelApplication as DisplayObject, SampleTitleWindow, true) as SampleTitleWindow;
PopUpManager.centerPopUp(ttlWndw);
}
the title window will be this
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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:local="*"
width="288" height="230">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<local:SampleVBox id="sampleVBox" x="108" y="83"/>
</s:TitleWindow>
in the title window i had another child component called sample vbox and this component looks like this
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 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[
protected function closeBtn_clickHandler(event:MouseEvent):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button id="closeBtn" label="Close" click="closeBtn_clickHandler(event)"/>
</mx:VBox>
My question is, I want to close the title window using the button in the sampleVBox component. please someone help me in this.
Thanks in advance!
One solution is to dispatch an event from the SampleVBox component that the parent TitleWindow will listen to. To do this, add some metadata to your SampleVBox class that indicates the class dispatches such an event:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 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:Metadata>
[Event(name="close", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
protected function closeBtn_clickHandler(event:MouseEvent):void
{
dispatchEvent(new Event(Event.CLOSE));
}
]]>
</fx:Script>
<s:Button id="closeBtn" label="Close" click="closeBtn_clickHandler(event)"/>
</mx:VBox>
Now, that the SampleVBox declares that it dispatches a "close" event, you can listen for it in the TitleWindow:
<s:TitleWindow 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:local="*"
width="288" height="230">
<fx:Script>
<![CDATA[
protected function onSampleBoxClose():void
{
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<local:SampleVBox id="sampleVBox" x="108" y="83" close="onSampleBoxClose()"/>
</s:TitleWindow>

how to print a value in a next mxml page where the given input is from prev page?

<?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="1501" height="960" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function c_clickHandler(event:MouseEvent):void
{
viewstack1.selectedIndex = 2;
}
]]>
</fx:Script>
<fx:DesignLayer>
</fx:DesignLayer>
<mx:ViewStack id="viewstack1" x="357" y="256" width="624" height="200">
<s:NavigatorContent width="100%" height="100%" label="configuration"
backgroundColor="#F7C2C2">
<s:Button x="261" y="72" id="c" click="c_clickHandler(event)" label="new config"/>
<s:TextInput x="240" y="25"/>
</s:NavigatorContent>
<s:NavigatorContent width="100%" height="100%" label="system" backgroundColor="#F45F5F">
<s:TextArea x="218" y="39" height="35"/>
</s:NavigatorContent>
</mx:ViewStack>
<s:ButtonBar x="531" y="224" dataProvider="{viewstack1}"/>
</s:Application>
i have a text inputbox in a config tab. when a user gives a input and click the "set new config" button it will go to a syatem where there will be a textbox.In thet textbox the prev input will be shown.
how to do this?
can u provide me some codes?
Thanks
use binding
Text input in your config tab
`<s:TextInput x="240" y="25" id="_txt"/>
and set text in another tab change to
<s:TextArea text="{_txt.text}"/>
`

Moving TitleWindow application in Air

I have problem. I'd like to make dragable am Air TitleWindow application only by titlebar/header. I have this code, but its dragable everywhere. Could you help in this?
<?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.events.CloseEvent;
private function mainWindow_closeHandler(event:CloseEvent):void
{
stage.nativeWindow.close();
}
protected function OnDrag(event:MouseEvent):void
{
stage.nativeWindow.startMove();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:TitleWindow id="mainWindow" width="100%" height="100%"
title="Title Window Header"
mouseDown="OnDrag(event)"
close="mainWindow_closeHandler(event)">
</s:TitleWindow>
</s:WindowedApplication>
In the appliacation xml the settings are:
<systemChrome>none</systemChrome>
<transparent>false</transparent>
This is a kind of solution:
<?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>
<s:TitleBar height="24" width="100%" x="0" y="0" title="Title"/>
</s:WindowedApplication>

Set dataprovider of buttonbar component

I am trying to add a navigation component with a button bar in it that controls the view stack of the main application. Here is what I have so far for the main application's 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"
xmlns:comps="comps.*" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var myViewStack:ViewStack;;
]]>
</fx:Script>
<fx:Binding source="lgViewStack" destination="myViewStack"/>
<comps:viewControl id="myControl" width="935" horizontalCenter="0" top="5" height="134"/>
<mx:ViewStack id="lgViewStack" width="935" height="474" left="10" verticalCenter="66">
<s:NavigatorContent label="View 1" width="100%" height="100%" id="view1">
<s:Panel id="firstPanel" title="First Panel" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
</s:Panel>
</s:NavigatorContent>
<s:NavigatorContent label="View 2" width="100%" height="100%" id="view2">
<s:Panel id="secondView" title="Second View" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
</s:Panel>
</s:NavigatorContent>
</mx:ViewStack>
</s:Application>
And the component code:
<?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:ButtonBar x="170" y="10" width="58" dataProvider="{myViewStack}"/>
</s:Group>
I receive a compile error from the component: Access of undefined property myViewStack. Am I referencing the variable myViewStack incorrectly? I am still trying to understand how bindings work.
ViewControl
<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">
<fx:Script>
<![CDATA[
public function set dataProvider(value:ViewStack):void
{
bar.dataProvider = value;
}
public function get dataProvider():ViewStack
{
return bar.dataProvider;
}
]]>
</fx:Script>
<s:ButtonBar id="bar"/>
</s:Group>
Main
<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"
xmlns:comps="comps.*">
<comps:ViewControl dataProvider="{viewstack}"/>
<mx:ViewStack id="viewstack" />
</s:Application>
Should also be noted that you could always just extend ButtonBar in your custom component instead depending what you're trying to accomplish by creating that component.
You should move public var myViewstack:ViewStack field declaration into your component. Think about MXML components as ordinary classes according with OOP conceptions. So for your 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"
xmlns:comps="comps.*" minWidth="955" minHeight="600">
<comps:viewControl id="myControl" width="935" horizontalCenter="0" top="5" height="134" myViewstack="{lgViewStack}" />
<mx:ViewStack id="lgViewStack" width="935" height="474" left="10" verticalCenter="66">
<s:NavigatorContent label="View 1" width="100%" height="100%" id="view1">
<s:Panel id="firstPanel" title="First Panel" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
<s:Label id="testSource" text="Text to copy" />
</s:Panel>
</s:NavigatorContent>
<s:NavigatorContent label="View 2" width="100%" height="100%" id="view2">
<s:Panel id="secondView" title="Second View" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
</s:Panel>
</s:NavigatorContent>
</mx:ViewStack>
</s:Application>
and
<?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:Script>
<![CDATA[
[Bindable]
public var myViewstack:ViewStack;
]]>
</fx:Script>
<s:ButtonBar x="170" y="10" width="58" dataProvider="{myViewStack}"/>
</s:Group>

flex4: how can i add a GlowFilter to a mx:DataGridColumn?

I'm building an application using flex 4.
Using <mx:DataGrid> to display a table.
I would like to add a <s:GlowFilter> to a DataGridColumn.
how can I do so?
thanks!
You need to create an item renderer with the GlowFilter built in. Here's an example:
My application:
<?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:Declarations>
<s:ArrayCollection id="dataProvider">
<fx:Object name="Red" color="0xFF0000" />
<fx:Object name="Green" color="0x00FF00" />
<fx:Object name="Blue" color="0x0000FF" />
</s:ArrayCollection>
</fx:Declarations>
<mx:DataGrid itemRenderer="GlowingRenderer" dataProvider="{dataProvider}" />
</s:Application>
...and here's GlowingRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" creationComplete="trace(this.data)">
<fx:Script>
<![CDATA[
import spark.filters.GlowFilter;
]]>
</fx:Script>
<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" filters="{[new GlowFilter(this.data.color)]}" />
</s:MXDataGridItemRenderer>
Doesn't look too pretty, but does the job :)
simon

Resources