I'm testing out using fx:Models, serializing it to JSON is not working as expected however. In the example below I do not get the model's data in the JSON, all I get is the uuid. How can I serialize models to JSON cleanly?
<?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="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
mod1.part = "Initial value";
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Model id="mod1">
<data>
<part>{ti.text}</part>
</data>
</fx:Model>
</fx:Declarations>
<s:TextInput id="ti" x="98" y="155" text="{mod1.part}">
</s:TextInput>
<s:Button x="120" y="193" label="Read from model" click="Alert.show(mod1.part, 'Model Data')"/>
<s:Button x="120" y="220" label="Model as JSON" click="Alert.show(JSON.stringify(mod1), 'Model as JSON')"/>
I was able to serialize the data as JSON by changing your stringify call to...
JSON.stringify(mod1.valueOf())
Related
I'm trying to work with GDS Tide framework. My basic code is this one :
<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"
preinitialize="Tide.getInstance().initApplication()">
<fx:Script>
<![CDATA[
import controllers.TestController;
import events.TestEvent;
import models.TestModel;
import models.interfaces.ITestModel;
import mx.events.FlexEvent;
import org.granite.tide.Tide;
[Bindable][Inject]
public var testModel:ITestModel;
Tide.getInstance().addComponents([TestController, TestModel]);
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Label text="{testModel.ab}" />
<s:Button click="dispatchEvent(new TestEvent());" label="test !" />
I can compile and run my code but when I'm launching my application, I see blank windows, my button or my label don't appear. No errors are fired.
When I change my code to this one :
<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"
preinitialize="Tide.getInstance().initApplication()" creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import controllers.TestController;
import events.TestEvent;
import models.TestModel;
import models.interfaces.ITestModel;
import mx.events.FlexEvent;
import org.granite.tide.Tide;
[Bindable][Inject]
public var testModel:ITestModel;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
Tide.getInstance().addComponents([TestController, TestModel]);
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Label text="{testModel.ab}" />
<s:Button click="dispatchEvent(new TestEvent());" label="test !" />
it works I see label and button but my label isn't initialized properly because my controller and model are added on mx.events.FlexEvent.CREATION_COMPLETE event.
What am I doing wrong please with the first (and recommanded) method ?
I am trying bind an Object property value to a text field. (Well I have taken this as an example ... I have no.of form fields and to be bound by other values)
But when change its value on button click the text field is not getting updated?
Below is the example code,
<?xml version="1.0" encoding="utf-8"?>
<s:Application
minHeight="600"
minWidth="955"
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>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
var currentFormItem:Object = new Object();
public function changeName():void
{
currentFormItem.name = "hello";
}
]]>
</fx:Script>
<s:HGroup>
<s:TextInput id="test"
text="{currentFormItem.name}"/>
<s:Button click="changeName()"/>
</s:HGroup>
Thanks
I got the solution for this. I can just wrap this object in ObjectProxy.
I am trying to access a variable defined in an mxml component from a TitleWindow but I cannot get it. I also declared a variable in my titleWindow which references to the component. And I also tried using parentDocument to access the variable but in vain.
Any precious help on this. Thanks.
See my codes below:
This is my component (Comp.xml) where I have declared the variable testVar.
<?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="100%" height="100%">
<fx:Script>
<![CDATA[
public var testVar:String = "Testing";
]]>
</fx:Script>
</s:Group>
This is my titleWindow code:
<?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" left="10"
creationComplete="titlewindow1_initializeHandler(event)"
width="100%" height="100%"
>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import com.Comp;
public var varComp:Comp;
public function titlewindow1_initializeHandler(event:FlexEvent):void
{
//Alert.show(new String(Application));
Alert.show(new String(varComp.testVar));
}
]]>
</fx:Script>
</s:TitleWindow>
How can HTML entities be made to work with TextFlow (specifically TEXT_LAYOUT_FORMAT)?
Example: ' is not converted into a single quote.
Any help would be appreciated.
Do you mean 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 flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;
private const text:String = "< > " '";
]]>
</fx:Script>
<s:RichEditableText editable="false"
selectable="true"
textFlow="{TextConverter.importToFlow(text, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
buttonMode="true"
width="100%"
height="100%" />
</s:Application>
I have a simple Itemrenderer with the following code:
<?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="true" width="90" height="90">
<s:VGroup horizontalAlign="center">
<mx:Image source="{data.photo}" toolTip="{data.name}" />
</s:VGroup>
</s:ItemRenderer>
I would like to manipulate the data object before that it's binded to the image attributes (source and tooltip). To do this, I modified the code in this way:
<?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="true" width="90" height="90"
initialize="itemrenderer1_initializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function itemrenderer1_initializeHandler(event:FlexEvent):void
{
var obj:Object = this.data;
//here the manipulation
}
]]>
</fx:Script>
<s:VGroup horizontalAlign="center">
<mx:Image source="{data.photo}" toolTip="{data.name}" />
</s:VGroup>
</s:ItemRenderer>
When I try to access to the this.data object, it's always empty! Is there a way to manipulate the data object before binding? Probably i don't have to use this.data, but i cannot find any other object to edit
Another solution would be to override the set data function, like this:
<?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="true" width="90" height="90"
creationComplete="itemrenderer1_creationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import valueObjects.Product;
[Bindable]
private var prd:Product;
override public function set data(value:Object):void
{
super.data = value;
//here i can access to the this.data object!
this.prd = this.data as Product;
}
]]>
</fx:Script>
<s:VGroup horizontalAlign="center">
<mx:Image source="{prd.photo}" toolTip="{prd.name}" width="70" />
<mx:Label text="{prd.name}"/>
</s:VGroup>
I found it! I can access to the this.data object only when the creation of the ItemRenderer is completed! to this I have to manipulate the object after the creationComplete event!
Here the code:
<?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="true" width="90" height="90"
creationComplete="itemrenderer1_creationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import valueObjects.Product;
[Bindable]
private var prd:Product;
protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
{
//here i can access to the this.data object!
this.prd = this.data as Product;
}
]]>
</fx:Script>
<s:VGroup horizontalAlign="center">
<mx:Image source="{prd.photo}" toolTip="{prd.name}" width="70" />
<mx:Label text="{prd.name}"/>
</s:VGroup>
</s:ItemRenderer>
Although not a new thread, do NOT go with CreationComplete. The event is invoked only once. The data will be set whenever the hosting component decides that the itemRenderer should be re-used. E.g. useVirtualLayout=true for a list.