The Below code is running well...
<?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" >
<fx:Declarations>
<mx:HTTPService id="httpRSS" url="http://www.petefreitag.com/rss/" resultFormat="object" />
</fx:Declarations>
<s:Panel id="reader" title="Blog Reader" width="500">
<mx:DataGrid width="485" id="entries" dataProvider="{httpRSS.lastResult.rss.channel.item}" click="{body.htmlText=httpRSS.lastResult.rss.channel.item[entries.selectedIndex].description}">
<mx:columns>
<mx:DataGridColumn dataField="title" headerText="TITLE"/>
<mx:DataGridColumn dataField="pubDate" headerText="Date"/>
</mx:columns>
</mx:DataGrid>
<mx:TextArea id="body" editable="false" width="485" x="3" y="142" height="155"/>
</s:Panel>
<s:Button label="Load" x="10" y="329" click="{httpRSS.send()}"/>
</s:Application>
But when Textarea is changed to spark Textrea like below
<s:TextArea id="body" editable="false" width="485" x="3" y="142" height="155"/>
Then htmlText doesn't support Spark Textarea. Hence produces error. How does one go about displaying HTML formatted text with spark Text Area Property.
If you're using the RichEditableText component instead, you can do it this way using the TextConverter class
var myStr:String = "I contain <b>html</b> tags!";
myRichEditableText.textFlow = TextConverter.importToFlow(myStr, TextConverter.TEXT_FIELD_HTML_FORMAT);
It can be also used in spark textArea:
var myStr:String = "I contain html tags!";
textAarea.textFlow = TextConverter.importToFlow(myStr, TextConverter.TEXT_FIELD_HTML_FORMAT);
This sometime will not work, if the HTML code is big and have some tags that can`t be rendered
TextFlowUtil.importFromString(yourHTMLString);
Check out the content property in the TextArea docs. Note the example at the end of the page.. it shows how to embed HTML.
body.textFlow = TextFlowUtil.importFromString(yourHTMLString);
I don't think you can. You should stick to using the Halo TextArea component or you should investigate the Text Layout Framework to accomplish your goals.
David Gassner's Flashbuilder 4 & Flex 4 has a section on this.
Take a look at TextFlowUtil. If you want to embed the HTML directly into the Spark TextArea (or RichText / RichEditableText), you can use the content tag as a child, then add the p or span tags thereafter - The supported HTML tags are part of the s namespace too.
Can also use :
(myTextArea.textDisplay as StyleableTextField).htmlText = text;
Related
Inside my 3.6 Flex module, I am using a List with a custom ItemRenderer:
<mx:List id="chatsList" y="0" left="2" right="6"
width="100%" height="100%" dataProvider="{chatsArrayCollection}"
horizontalScrollPolicy="off" itemRenderer="MessageRendererModerated"
styleName="dataList" variableRowHeight="true" verticalScrollPolicy="auto" >
</mx:List>
When I add items to chatsArrayCollection at position 0, I want the list to scroll down and the new item to fade in nicely.
Something similar is shown here.
However, this doesn't work for me, and I suspect because I'm using custom itemRenderer.
MessageRendererModerated is defined as a canvas with some text and a link to an image:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" minHeight="94"
creationComplete="onCreationComplete();" resize="onResize();"
scaleY="1" width="100%"
horizontalScrollPolicy="off" blendMode="layer"
borderStyle="solid" borderThickness="0"
xmlns:rtl="views.rtl.*" > ...
I have tried different ways to solve this but none helped.
Many thanks!
UPDATE:
Following the comments I got below - I did try to use the itemsChangeEffect as mentioned in the example I found. However, it didn't work as expected.
See the simple application created below. I have a RichTextEditor and a RichText component. The idea is to display whatever typed in the RichTextEditor in the RichText component. Everything else (I think) works except for Bullets! The conversion works as if bullets don't exist!
<?xml version="1.0" encoding="utf-8"?>
<s:Application width="100%"
height="100%"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:HorizontalLayout />
</s:layout>
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import mx.events.FlexEvent;
protected function convert_clickHandler(event:MouseEvent):void
{
richText.textFlow = TextConverter.importToFlow(editor.htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT);
}
]]>
</fx:Script>
<mx:RichTextEditor id="editor" />
<s:Button id="convert" click="convert_clickHandler(event)" />
<s:RichText id="richText" />
</s:Application>
Any idea on how to make Bullets work with RichText ? Am I using the correct conversion method ? TextConverter.importToFlow ?
See the image below.
List items are not a supported by TEXT_FIELD_HTML_FORMAT. You would need to create your own editor that supports the added TextFlow functionality. There is an example of one such editor in Tour de' Flex, but it was written prior to list support in TLF 2. I'm not sure if it's been updated, but if not you will need to add in that functionality yourself.
Good luck!
Am using Checkbox as ItemRenderer in tilelist. Am trying to setting
checkbox selected values through xml. I got the values perfectly.. but
checkbox could not bind the values(could not accept that). It's
automatically sets true for all checkboxes.
This is my xml
<PmhTreeAllow>
<PmhTreeAllowname id='1' label ='Allow Text' isField='false'/>
<PmhTreeAllowname id='2' label ='Document Link' isField='false'/>
<PmhTreeAllowname id='3' label ='Test Results Entry'isField='false'/>
<PmhTreeAllowname id='4' label ='Dummy' isField='false'/>
</PmhTreeAllow>
My Tilelist..
<mx:TileList id="tileList" width="160" height="100%" textAlign="left" horizontalScrollPolicy="off" verticalScrollPolicy="off" dataProvider="modelInstance.optionCollList}" columnCount="1" backgroundAlpha="0" borderStyle="none"itemRenderer="com.Frontend.views.treeStructure.myTileList" useRollOver="false" rowHeight="28" itemClick="tileItemClick(event)" columnWidth="150" selectedIndex="0" x="10" y="0">
Check box ItemRenderer..
<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" label="{data.#label}" selected="data.#isField}"/>
Thanks in Advance
Ashok
http://www.switchonthecode.com/tutorials/flex-using-item-renderers
This will help u..
For performance reasons, it is considered a bad practice to use binding inside an itemRenderer. Instead listen to the FlexEvent.DATA_CHANGE and manually modify your values. I Bet doing so will solve your issue.
Try an itemRenderer like this:
<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" label="{data.#label}" selected="data.#isField}" dataChange="onDataChange()">
<mx:Script><[[
public function onDataChange():void{
var dataAsXML = data as XML;
this.selected = data.#isField
this.label = data.#label
]]></mx:Script>
</mx:CheckBox>
I don't do a lot with XML, but I suspect that the XML properties will not bind because XML is not like an ActionScript object and therefore the "propertyChanged" Binding events do not exist on the XML object the same way they would be on an AS3 object.
I am making use of a custom cursor on itemRenderers in a List component. The custom cursor works just fine except when I mouse over the Text component which is a child of the itemRenderer at which point I get two cursors, the custom and an iBar one on top of the other.
Here's the code:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.managers.CursorManager;
import mx.managers.CursorManagerPriority;
[Embed("grab.png")]
public static const grabbing:Class;
CursorManager.setCursor(grabbing, CursorManagerPriority.LOW, -16, -16);
]]>
</mx:Script>
<mx:List>
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Array>
<mx:Object title="Stairway to Heaven" />
</mx:Array>
</mx:ArrayCollection>
</mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:Text text="{data.title}"/>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>
If anyone could help me figure out how to get rid of this iBar it would be much appreciated.
Thanks,
Chris
If you don't need to select the text, e.g. for copy-paste, you may just set the selectable attribute to false <mx:Text text="{data.title}"/ selectable="false">
I Think you probably need to extend the Text class your using in the item renderer and override something there.
FYI, anything in the <mx:Component> tag is out of scope with the rest of the file, so that Text class you're using in there doesn't even have access to the grabbing class you created.
I have a code like the one below
<mx:Button id="TestingID" width="100%" height="20">
<mx:Script>
<![CDATA[
import flexlib.containers.WindowShade;
]]>
</mx:Script-->
</mx:Button>
I am getting the error "id attribute is not allowed on the root tag of a component"
I have to give a Id to the button to refer to it. What should i do.. how do i solve this problem??
Regards
Zeeshan
if you are calling the component from within itself then you use the 'this' keyword.
<mx:Button height="20">
<mx:Script>
<![CDATA[
import flexlib.containers.WindowShade;
this.percentWidth = 100;
]]>
</mx:Script-->
</mx:Button>
And if you want to refer to the custom component from your application then you do this.
<application xmlns:local = "[Directory containing custom component]">
<local:MyCustomButton id="myButtonInstantiation" />
</application>
Make sense?
An MXML file is essentially a class. So if you want to reference the instance of that class from within it then you just use "this".
This can also happen if you are nesting a component inside another
As soon as you use the <fx:Component> tag you are in the root of an mxml-inline-document
<mx:itemEditor>
<fx:Component>
<mx:TextInput id="precioVenta"/>
</fx:Component>
</mx:itemEditor>
All you need to do is move the id attribute into the tag like this
<mx:itemEditor>
<fx:Component id="precioVenta">
<mx:TextInput />
</fx:Component>
</mx:itemEditor>
This applies to any kind of tag or nesting that causes the Flex compiler to create a new context for the inlinde declaration of a component
If you're defining this in a file as a subclass of Button then you can't set the id here. Put the id in the place you use this new component. For example, if this new component will be an AwesomeButton, you could use it like so:
<mycompnamespace:AwesomeButton id="testingId" />
Let see below code -
<s:ComboBox id="myCombo" dataProvider="{al}">
<s:itemRenderer>
<fx:Component>
<s:CheckBox **id="NOWAY**" click="clickHandler(event)"/>
</fx:Component>
</s:itemRenderer>
</s:ComboBox>
id is not allowed in these sort of scenarios, you use of 'this' keyword, because in this context CheckBox is root tag within Component.