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>
Related
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>
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())
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>
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.