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.
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>
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 am using a DividedBox in Flex which contains only a datagrid at first. When I click on an Item on the Datagrid, a second element with a width of 0% (Spark Group) is added to the divided box to display an image.
The thing is, when the second element is added to the DividedBox, the image is partially displayed outside the DividedBox, and I don't want to have this behavior.
Here is the interesting code :
<mx:DividedBox direction="horizontal" id="divider" borderColor="red" borderStyle="solid" borderVisible="true" right="10" left="10" top="10" bottom="10">
<s:Group width="100%" height="100%">
<!--datagrid-->
</s:Group>
</mx:DividedBox>
And here is the piece of code that adds the second child of the dividedBox (simplified code) :
private var _pdf_preview:Group = new Group();
[Bindable]
[Embed(source="assets/image/llama.jpg")]
private var imgClass:Class;
protected function itemOnClickHandler(event:MouseEvent):void
{
_pdf_preview = new Group();
var img:Image = new Image();
img.source = imgClass;
_pdf_preview.addElement(img);
_pdf_preview.percentWidth = 0;
divider.addElement(_pdf_preview);
}
And here is a screen of the problem (Btw, don't notice my skills on Gimp :) ). As a new user I can't bind images to my post : screen showing my problem the red border show the limits of the dividedBox
Thank you.
I hope there are not too much fault, english is not my native language. Sorry for any english mistakes.
PS : I couldn't add the "DividedBox" tags because it was not existing before, and I'm a "new user" so I can't create new tags.
You can use the clipContent property to cut off the image at the edge of the DividedBox:
<mx:DividedBox clipContent="true" />
When using Spark containers, clipAndEnableScrolling is the property you need to achieve the same goal.
I would also like to note that you usually don't require to dynamically add components through ActionScript. You can use 'states' instead. For example:
<s:states>
<s:State name="normal" />
<s:State name="image" />
</s:states>
<mx:DividedBox clipContent="true">
<s:DataGrid />
<s:Image includeIn="image" />
</mx:DividedBox>
Now all you need to do to show the Image, is set the currentState to image.
I am currently modifying a flex GUI to give it a new look. I am new to flex but I manage to get most of the work done. However I have a problem with comboboxes: I use a rather big font size and the bottom of some characters is truncated ("g" for example, or any character going under the baseline):
I first thought it was a problem with the component height, but even with a very large height the characters got truncated, with big empty spaces above and under the text.
I looked for a solution on the net but did not find one. Worst: I was not able to find references to my problem though it seems to be an important one. Is there a CSS property to prevent this behavior or do I have to look elsewhere?
edit: I use Flex 3 and Halo/MX components
The combobox component contains an inner TextInput. You have to extend the ComboBox class and modify the height of the textinput to what you need.
For example, lets say you put a font size of 20 and this extended class:
public class MyCb extends ComboBox
{
public function MyCb()
{
addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
}
private function onCreationComplete(e:Event):void {
this.textInput.height = 40;
}
}
Main application:
<mx:VBox width="100%" height="100%">
<mx:ComboBox fontSize="20" >
<mx:dataProvider>
<mx:Object label="goubigoulba"/>
<mx:Object label="goubigoulba"/>
</mx:dataProvider>
</mx:ComboBox>
<local:MyCb fontSize="20" >
<local:dataProvider>
<mx:Object label="goubigoulba"/>
<mx:Object label="goubigoulba"/>
</local:dataProvider>
</local:MyCb>
</mx:VBox>
You will get the following result:
I believe that this is not the Comobox itself, but its internal label. You can try setting paddingBottom, to see if the label will inherit that, but you might have better luck creating your own subClass of label and using it as the textFieldClass.
I have 2 questions about flex datagrids:
How can I scroll it automatically to the bottom when new portion of data arrived to it (e.g. I added new items)
Strange, but seems it doesn't scroll when I use scrolling wheel, is there any trick about it (especially for mac Users)
Thanks in advance
Some changes:
public function scroll():void
{
trace(chatboard.maxVerticalScrollPosition);
chatboard.verticalScrollPosition = chatboard.maxVerticalScrollPosition;
}
<mx:TextArea id="chatboard" x="10" y="10" width="310" height="181" text="{chatMessages}" editable="false" verticalScrollPolicy="on" resize="scroll()"/>
But actually it don't help. The text area is not autoscrolled :(
Seems that 1) scroll is not called after new string is added to chatMessages
I find here that the mouse wheel scrolls the text area by default. Are you looking for a different behavior?
As far as skipping to the end goes:
in your TextArea wire up to the updateComplete and it seems to work as you would like:
<mx:TextArea id="textArea1" liveScrolling="true" updateComplete="textArea1_Changed(event);" />
then
private function textArea1_Changed(event:Event):void {textArea1.verticalScrollPosition = textArea1.maxVerticalScrollPosition;}
finally, you can test with something like:
private function btnClick(e:Event):void{textArea1.text += new Date().getTime().toString() + "\n";}
1) dataGrid.verticalScrollPosition=dataGrid.maxVerticalScrollPosition