How do you make some parts of spark.components.RichText bold?
In my Flash / ActionScript 3 programm I have been just using htmlText property of a TextField, and set it to 1 2 <b>3</b> - but now I'm trying to port my program to Flex 4.5.
UPDATE:
I'm trying:
myRichtText.textFlow = TextConverter.importToFlow('1 2 3 <s:span fontWeight="bold">4 5</s:span>', TextConverter.TEXT_LAYOUT_FORMAT);
but nothing is displayed. I'd prefer not to use RichEditableText or TextArea.
var str:String=rc.text.toString().substr(2,1);
var str2:String=rc.text.toString().substr(0,2);
str=str2+"<b>"+str+"</b>";
rc.textFlow = TextConverter.importToFlow(str, TextConverter.TEXT_FIELD_HTML_FORMAT);
Rich Text
<s:RichText id="rc" text="123"/>
I tried out this way.. In str you should have your html text in this case 12<b>3</b> You can try it by different methods like link provided by Mitul Golakiya..
hope this will help you...
Here is the solution for it...
You should use TextConverter.importToFlow()...
http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/
Do this :
myRichtText.textFlow = TextConverter.importToFlow('1 2 3 <b>4 5</b>', TextConverter.TEXT_FIELD_HTML_FORMAT);
You may want to use RichEditableText, which has the method setFormatOfRange().
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
I want to ask how to set CCTextField placeholder and color.
I know it is easy to create a text field on spritebuilder, but it cannot set the text color and placeholder like UITextField.
yourTextField.textField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:#"Placeholder String" attributes:#{NSForegroundColorAttributeName: [UIColor grayColor]}];
Same thing if you have to use the text too. Use the property .attributedText
When I had this problem I had to change a Cocos2d file:
cocos2d-ui/Platform/iOS/CCPlatformTextFieldIOS.m
- (id)nativeTextField
{
return _textField;
}
I would recommend just trying to use attributed string before changing cocos2d files. I'm using cocos2d v3 and xcode 6.1.1
Can I set the font size for string? I want to do text formatting for string, Is it possible in flex?
You can use TextField/UITextField to display formatted text. In both classes you have two options:
You can use setTextFormat() method to format text
You can use htmlText property to display HTML text. These classes don't support all HTML tags. Supported HTML tags are listed here.
If all you need to do is change the font, you can use the StyleableTextField class or the Label and set the . She can set the fontSize style of either class to globally change the font size.
No,
you need to set the font size of label or any text other Text control that you use to show string value.
var str:String = 'This is sample text';
//set in any method
lbl.text = str;
lbl.setStyle('fontSize', 20);
enjoy.
In the past, I used the flash.text.textField object something like this:
tf = textField();
tf.autoWrap = true
tf.autoSize = "left"
tf.width = 100;
tf.text = "Text that is too long to fit in the textfield, so it autowraps, automatically updating the height."
addChild(tf);
someNewObject = new MovieClip();
someNewObject.y = tf.height + 5;
addchild(someNewObject);
Doing this would dynamically place my someNewObject just below the textField.
I'm trying to find a TLF component that allows me to do this.
I tried using mc.core.FTETextField. It resizes great, but does not support HTML
I tried using the Spark TextArea, but apparently, the technique of setting heightByLines = NAN no longer works.
I saw someone say to use RichEditableText, because it supports auto-sizing, but I cannot figure out how.
This is for static text. Not for dynamic or input text.
I'm coding this, so if you have some suggestions, please post them in code, not MXML.
Thanks for the answers so far, but UITextfield is not a TLF component and the example for RichText does not cause the RichText height to grow with the text.
What I need is a component that I can set the width, add TLF formatted text and get the height of the component once it has rendered. Just like a TextField does when you add text.
lee
Simple enough, you just need to create your TextFlow object.
<fx:Declarations>
<s:TextFlow id="textFlow">
Hello, this <s:span fontWeight="bold"> is a test</s:span> of TextFlow
</s:TextFlow>
</fx:Declarations>
<s:RichText id="richText" textFlow="{textFlow}" />
But the textFlow uses Flex tags in there. You can always use a converter as well to transform real HTML String into a TextFlow like this:
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.ITextImporter;
import flashx.textLayout.conversion.TextConverter;
private const importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
private const htmlString:String = "Hello, this <b>is a test</b> of TextFlow";
]]>
</fx:Script>
<s:RichText textFlow="{importer.importToFlow(htmlString)}"/>
You can use mx.core.UITextField. It supports HTML. Here is the documentation: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UITextField.html
RichEditableText does the trick, however you must explicitly set width property for autowrapping. From my experience, if you set width to %100, it may cause some problems (for me it causes some), so I recommend you to explicitly set width value to ensure word wrapping. ASDoc of RichEditableText explains quite a bit.
I'm trying to calculate how WIDE to make my button, based on the text that it will contain, and when I try to google for how to calcuate something as simplistic as the WIDTH OF SOME TEXT, I go cross-eyed just trying to wade through apparently nonsensical esoteric counter-intuitive voodoo. Can anyone out there help simplify for me how I would write a function like this:
public function HowWideWouldThisTextBeIfItWereInThisButton(Text:String,Container:Button):int {
...
}
Thanks in advance.
So long as you're in a UIComponent, you can use the measureText function.
public function howWideWouldThisTextBeIfItWereInThisButton(text:String,container:Button):int {
var lineMetrics:TextLineMetrics = container.measureText(text);
return lineMetrics.width;
}
That being said, the flex button component should automatically size to the width of the text, if you don't set a width on it. That way if you need the text width, you can just call use the textWidth property.
This works any format, size, font type. Don't forget properties "autoSize" and "wordWrap"!
var tf:TextField = new TextField();
addChild(tf);
tf.autoSize = TextFieldAutoSize.LEFT;
tf.wordWrap = false;
tf.text = "Whatever here";
tf.width = tf.textWidth + 4; // add 2 pixels-gutters left & right
Your button will need to be "tf.width" wide...
Here's how you do it in Spark:
I've modified - simplified - his example a bit here:
var textMetrics:TextLineMetrics = label.measureText( label.text );
var textWidth:int = textMetrics.width;
Here's a way that works also:
var tempText:Text = new Text();
tempText.regenerateStyleCache(false);
var textWidth:int = tempText.measureText(*yourstring*).width;
as I think, textField.textWidth construction works fine... until you change the font size.
It seems it calculates width based on 12px font.
So, if you have embedded font and global styling you can try fast solution:
var realWidth = myLabel.textField.textWidth * (fontSize / 12);
I've tried this on long and short strings and the result is correct.
Joshua, it really helps to be clear. Are you talking TextField, MX Label, Spark Label, RichText, etc? Different text components use different text engines, such as FTE and TLF and may have different solutions. I certainly wish Adobe had a good set of utilities or sample code which could predict what the size of font rendered onto the controls would be, before you actually do it. But, the good news is that in certain cases - like, a good old fashioned TextField, you can predict this pretty well. You just make a TextField, set it's textFormat field, auto size method and the text. You should be able to get it's size before adding it anywhere. I don't remember what the order was, but, I remember the order you set those properties matters. If you can't figure out how to do it, I can provide a code example. Now, for the new, "improved", components such as Spark Labels - I'll be buggered if I can find a damn way... spent a number of hours on this and haven't found a way.. or someone who knows a way :P.
Following up my comment on quoo's answer, here's the code for same purpose, but just grabbing the width out of a TextField, using TextLineMetrics as well:
public function mtxtWidth(container:TextField):int {
var lineMetrics:TextLineMetrics = container.getLineMetrics(0);
return lineMetrics.width;
}
Sounds like you could use textWidth