I have some issue with this code :
<s:RichEditableText id="ta" width="100%" height="200" selectable="true" editable="true"/>
<fx:Script>
<![CDATA[
var str:String = "some text<tab/>with tab";
ta.textFlow = TextConverter.importToFlow(str, TextConverter.TEXT_FIELD_HTML_FORMAT);
]]>
</fx:Script>
When running the text is show without space :
"some textwith tab"
Solved
I finaly find the solution:
var config:Configuration = Configuration(ta.textFlow.configuration);
var format:TextLayoutFormat = new TextLayoutFormat();
format.whiteSpaceCollapse = WhiteSpaceCollapse.PRESERVE;
config.textFlowInitialFormat = format;
ta.textFlow = TextConverter.importToFlow(str, TextConverter.TEXT_FIELD_HTML_FORMAT,config);
Flex's "text field HTML format" only supports a subset of HTML tags:
anchor <a>
bold <b>
break <br>
font <font>
image <img>
italic <i>
list item <li>
paragraph <p>
text format <textformat>
You should get better results if you replace <tab /> with /t in your sample string.
Related
How can we copy one spark TextArea to another spark textarea while keeping the formatting. I can retrieve the text but how i can keep the format.
What I am trying achieve is I have two spark text areas , users types in 1 with styles like (bold, italic , underline). Now when user click some additional keys like Ctrl+J or some other keys I want the text in source TextArea to another textarea while keeping the formatting applied.
Thanks in advance for help on this.
Try someting like this
var tff:TextFlow = textArea1.textFlow.deepCopy() as TextFlow;
textArea2.textFlow = tff;
If your destination text area is an inline itemrenderer in a Datagrid you can use
var tff:TextFlow = textArea1.textFlow.deepCopy() as TextFlow;
var obj:Object = {};
obj.textFlow = tff;
dataGrid.dataProvider = new ArrayCollection([obj]);
<s:DataGrid id="dataGrid" x="500" width="1000" height="500">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:TextArea id="textArea2"
textFlow="{data.textFlow}"
/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGrid>
I have this control, mx:Text, and I want to assign its htmlText member w/something like:
<div class="style_header">This text will have, say, Courier as its font</div>
<div class="style_body">And this one will be, oh I dunno, cuneiform</div>
Then, in the AS I had:
var oCSSHeader:CSSStyleDeclaration = new CSSStyleDeclaration;
var oCSSBody:CSSStyleDeclaration = new CSSStyleDeclaration;
oCSSHeader.setStyle('font-size', '12');
oCSSHeader.setStyle('font-family', 'Courier');
oCSSBody.setStyle('font-size', '14');
oCSSBody.setStyle('font-family', 'Cuneiform');
StyleManager.setStyleDeclaration('.style_header', oCSSHeader, true);
StyleManager.setStyleDeclaration('.style_body', oCSSBody, true);
Whatever I set the sizes and families to, both sets of text look exactly the same. I looked at examples and realized that you probably have to set an entire control to one style name. Which means
<mx:Text id="messageText" width="100%" styleName="style_header" />
should have worked, but it didn't! So what am I doing wrong? I'm not getting any error message or anything. And is it even possible to set different style names w/in one control?
I'm running Flex 3.5
Try Text.styleSheet,
Example:
<fx:Script>
<![CDATA[
private function getHtmlTextStyle():StyleSheet
{
var style:StyleSheet = new StyleSheet();
style.setStyle(".style_header", {fontSize: "12px", fontFamily: 'Courier'});
style.setStyle(".style_body", {fontSize: "14px", fontFamily:"Cuneiform"});
return style;
}
]]>
</fx:Script>
<mx:Text id="messageText" width="100%" styleSheet="{getHtmlTextStyle()}">
<mx:htmlText>
<![CDATA[
<p class="style_header">This text will have, say, Courier as its font</p>
<p class="style_body">And this one will be, oh I dunno, cuneiform</p>
]]>
</mx:htmlText>
</mx:Text>
The Style in Flex application is not doesn't apply to htmlText.
They are actually separated and not much related but just using the same syntax.
Also,
Tags allowed in Text.htmlText are very limited. <div> tag will not work, for example. See the document for more information.
As stated, I'm trying to obtain column headers consisting of an icon and wrappable text in a flex AdvancedDataGrid.
(EDIT: I forgot to mention an important part of the context: the columns are added dynamically, in actionscript. This apparently changes the behavior.)
I've tried using a custom mxml headerRenderer, like so:
<mx:headerRenderer>
<fx:Component>
<mx:HBox width="100%"
height="100%"
verticalAlign="middle">
<mx:Image source="<image_url>"
width="10%"
height="100%"/>
<mx:Text text="{data.headerText}"
width="90%"
height="100%"/>
</mx:HBox>
</fx:Component>
</mx:headerRenderer>
but for some reason, the text here is truncated instead of wrapped (it works outside of a renderer).
I've also tried creating a subclass of AdvancedDataGridHeaderRenderer and overriding createChildren to add the icon:
override protected function createChildren():void
{
var icon:Image = new Image();
icon.source = <image_url>;
icon.width = 16;
icon.height = 16;
addChild(icon);
super.createChildren();
}
but then, the icon and the text get superimposed.
I'm out of ideas on this. Anyone else?
It worked for me when I removed the height="100%" attribute from mx:Text in your headerRenderer.
UPDATE: it only works like this when I manually stretch the AdvancedDataGrid component. I'll look into how to make it work unconditionally.
When the height of the Text component was set to 100%, it was constrained to its parent HBox's height. Therefore when a word was wrapped and moved to the next line, it wasn't visible because the height of the Text component didn't allow for it to be visible.
If you remove this constraint, Text component's height will be determined dynamically based on its contents, as will headerRenderer's. Also add minHeight to your Text so that it is visible when it's loaded.
Here's the code (I also removed scrollbars because they were showing during resize):
<mx:headerRenderer>
<fx:Component>
<mx:HBox width="100%"
height="100%"
verticalAlign="middle"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Image source="<image_url>"
width="10%"
height="100%"/>
<mx:Text text="{data.headerText}"
width="90%"
minHeight="20"/>
</mx:HBox>
</fx:Component>
</mx:headerRenderer>
In case anyone is interested in how to do this with dynamically created columns, a combination of Hunternif's code for the renderer and some added code on column creation worked for me:
The columns need to have fixed widths and need to be invalidated to inform the AdvancedDataGrid that it needs to rerender:
var cols:Array = [];
for each (...) {
var column:AdvancedDataGridColumn = new AdvancedDataGridColumn();
...
// Fix the width of created columns
column.width = 150;
cols.push(column);
}
grid.columns = cols;
// Invalidate columns so that sizes are recalculated
grid.mx_internal::columnsInvalid = true;
// Take changes into account
grid.validateNow();
I have a Box container that has a label element inside it. When the box is transformed using a Matrix the label element is not visible anymore. How do I make the elements visible?
<mx:Script>
<![CDATA[
private function onBoxClick(event:MouseEvent):void
{
var transformMatrix:Matrix = this.box.transform.matrix;
transformMatrix.c = Math.PI * 2 * -15 / 360;;
this.box.transform.matrix = transformMatrix;
}
]]>
</mx:Script>
<mx:HBox id="box"
x="100" y="100"
width="100" height="100"
backgroundColor="0x000000"
click="onBoxClick(event)">
<mx:Label id="textLabel" text="This is a test" color="#FFFFFF" visible="true"/>
</mx:HBox>
I'm guessing the TextField inside the Label component doesn't have the font embedded. If you plan to use .rotation or .alpha on a dynamic text you must embed the font.
You can easily test this with a regular TextField:
var t:TextField = new TextField();
t.defaultTextFormat = new TextFormat('Verdana',12,0x000000);
t.embedFonts = true;
t.rotation = 10;
t.text = 'rotated';
addChild(t);
That is assuming you have the Verdana font embedded in this example. If you comment out the 3rd line you will see the text disappear.
This bug is hard to describe, but easily reproduced with the bottom code. Just copy, paste, and compile+run in Flex 3 and you'll see the problem. Anyone know of a work around?
Edit: Here is a link to a running demo: http://shiinaringo.se/hosted/flex/textarea-bug/HtmlTextBug.html
In the demo, the default color of TextArea is set to red.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" applicationComplete="applicationComplete(event);">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
private function applicationComplete(event:Event):void {
var styles:String = "a:hover { color: #6666ff; text-decoration: underline; } a { color: #0000ff; }";
var ss:StyleSheet = new StyleSheet();
ss.parseCSS(styles);
textGreenStylesheet.styleSheet = ss;
}
private function enteredText(event:FlexEvent):void {
textDefault.htmlText = event.currentTarget.text;
textGreen.htmlText = event.currentTarget.text;
textGreenStylesheet.htmlText = event.currentTarget.text;
}
]]>
</mx:Script>
<mx:VBox height="100%" width="400" horizontalAlign="center">
<mx:Panel width="250" height="200" layout="absolute" title="TextArea A. Default colored text">
<mx:TextArea id="textDefault" condenseWhite="true" width="100%" height="100%" x="0" y="0">
<mx:htmlText>
<![CDATA[
This text has the default text color of the TextArea control.
]]>
</mx:htmlText>
</mx:TextArea>
</mx:Panel>
<mx:Panel width="250" height="200" layout="absolute" title="TextArea B. Green text">
<mx:TextArea id="textGreen" condenseWhite="true" width="100%" height="100%" x="0" y="0" color="green">
<mx:htmlText>
<![CDATA[
This text has the text color set to green
]]>
</mx:htmlText>
</mx:TextArea>
</mx:Panel>
<mx:Panel width="250" height="200" layout="absolute" title="TextArea C. Green text + stylesheet">
<mx:TextArea id="textGreenStylesheet" condenseWhite="true" width="100%" height="100%" x="0" y="0" color="green">
<mx:htmlText>
<![CDATA[
This text has the text color set to green, and also uses a stylesheet to make links blue and underlined when hovered.
]]>
</mx:htmlText>
</mx:TextArea>
</mx:Panel>
<mx:TextInput x="69" y="282" width="207" enter="enteredText(event);"/>
</mx:VBox>
<mx:VBox height="100%" width="200">
<mx:Text width="166" text="We have three TextArea controls. The top uses default text color, the middle one uses defined green text color, the bottom one also uses green color, but also uses a stylesheet to define some custom coloring of A tags." height="232"/>
<mx:Text width="166" text="To reproduce the problem, first try to just enter new text in the input field in the bottom, and press enter. The text in the three boxes will update. Notice that the colors and other styles don't change in any of the three boxes. But when you click once inside textarea C, then enter new text in the input field and hit enter, you'll notice that the color and font is lost in textarea C. Bug?" height="232"/>
</mx:VBox>
</mx:Application>
Basically, StyleSheet and TextFormat doesn't go together in a flash textfield.
Following is my guestimate of what might be happening:
The color="green" will become part of the defaultTextFormat of the internal TextField of the TextArea and will be applied to the text well before applicationComplete is fired. You can verify this by tracing trace(textGreenStylesheet.htmlText); in the application complete handler (before you set the stylesheet). Here is what I got:
<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="10" COLOR="#008000" LETTERSPACING="0" KERNING="0">This text has the text color set to green, and also uses a stylesheet to make links blue and underlined when hovered. </FONT></P></TEXTFORMAT>
Now when you apply the stylesheet, the color remains unchanged (green) as the stylesheet do not specify any color for the whole text.
When you click on the TextArea, I believe flex recalculates properties of it (may be click triggers an invalidation - I am not sure what's happening underneath). While doing this, compiler finds that a stylesheet has been applied and ignores the color="green" attribute. Now, these new properties are applied only when the text/htmltext property is changed (later by hitting enter). So unless you click or somehow trigger an invalidation of textarea, it retains the default color specified before applying the stylesheet.
If you add .yellow{color:#ffff00;} to the stylesheet and enclose some text in the third text area with <span class="yellow">some text</span> tags, you can see that the enclosed text retains yellow color whether you click on it or not.
Here's what I'm doing to resolve this. It's a big hack, but it does work.
import flash.events.Event;
import flash.text.TextFormat;
import mx.controls.Text;
import flash.text.StyleSheet;
import mx.core.mx_internal;
import mx.events.FlexEvent;
public class SupText extends Text
{
use namespace mx_internal;
public var linkColor:String = "#355EBF";
private var format:TextFormat;
public function SupText()
{
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, function(e:Event):void { setStyleSheet(); });
}
override public function set htmlText(value:String):void {
if (format != null) {
//glorious hack for style problem
textField.styleSheet = null;
textField.defaultTextFormat = format;
setStyleSheet();
}
super.htmlText = value;
if (textField.defaultTextFormat.font != "Times New Roman") {
format = textField.defaultTextFormat;
}
}
public function setStyleSheet():void {
var ss:StyleSheet = textField.styleSheet;
if(textField.styleSheet == null){
textField.styleSheet = new StyleSheet();
}
textField.styleSheet.setStyle("sup", { display: "inline", fontFamily: "ArialSup", fontWeight:"normal"});
textField.styleSheet.setStyle("a:link", { textDecoration: "none", color: linkColor });
textField.styleSheet.setStyle("a:hover", { textDecoration: "underline" });
textField.styleSheet.setStyle("a:active", { textDecoration: "underline" });
}
}
}
Can you assign the text directly to the .text property?
private function enteredText(event:FlexEvent):void
{
textDefault.text = event.currentTarget.text;
textGreen.text = event.currentTarget.text;
textGreenStylesheet.text = event.currentTarget.text;
}