wrapping label text within horizontalgroup (LIBGDX) - libgdx

I would like to wrap a big text, which is a label embedded into a Horizontalgoup, which is embedded into a table.
To have some structure in the table and to be able to remove and add elements fast I am using HorizontalGroups in this table.
But wrapping doesn't work when Horizontalgroup is involved.
Can someone help me ?
My Code for testing:
Skin skin = new Skin(Gdx.files.internal(SkinManager.getSkin()));
Table table = new Table();
int size = 40;
HorizontalGroup horizontalGroup = new HorizontalGroup();
Label bigtext = new Label("big text big text big text big text", skin);
bigtext.setWrap(true);
bigtext.setWidth(size);
horizontalGroup.addActor(bigtext);
horizontalGroup.setWidth(size);
table.add(horizontalGroup).width(size);
table.setPosition(400,400);
table.setWidth(size);
stage.addActor(table);
* Update *
I just also tested with the HorizontalGroup alone:
Wrapping doesn't work for me with the wrap methods of the group :
Skin skin = new Skin(Gdx.files.internal(SkinManager.getSkin()));
int size = 40;
HorizontalGroup horizontalGroup = new HorizontalGroup();
Label bigtext = new Label("big text big text big text big text big text big text big text big text", skin);
bigtext.setWrap(true);
bigtext.setWidth(size);
horizontalGroup.addActor(bigtext);
horizontalGroup.setWidth(size);
horizontalGroup.setPosition(400,400);
horizontalGroup.wrap(true);
horizontalGroup.wrap();
stage.addActor(horizontalGroup);

Related

Modify TLF Text Field properties that is on stage

I have a TLF Text field on the stage. I am trying to test this out in simple flash document.
My code takes in some xml that I parse. The xml will vary and will not always change all the properties of the text field. For instance in one case I only want to change the size of the font. In another case I only want to change the alignment of the font.
I am using TLF Text fields because we will translating into Arabic and I already have gotten Right to Left text working with them.
These are some properties I will need to edit in code:
Font Size
Font
Alignment
Leading
Bold, Italic, Underline (weight)
Any coding help would be great. I have seen ideas out there for text flow and text layout but I am obviously not using it correctly because I can't get it to work.
Long ago before I give up and stop using TLF fields. I have a project that requests dynamic addind and removing tlf fileds from/to stage. This is a code from this project:
This will generate default format dynamically
var config:Configuration = new Configuration();
var defTextFormat: TextLayoutFormat = new TextLayoutFormat();
defTextFormat.textAlign = TextAlign.LEFT;
defTextFormat.fontFamily = m_strFontName;
defTextFormat.fontSize = m_nFontSize;
defTextFormat.fontWeight = FontWeight.BOLD
defTextFormat.paddingLeft = 3;
defTextFormat.paddingTop = 3;
defTextFormat.paragraphStartIndent = 3;
defTextFormat.paragraphSpaceBefore = 3;
config.defaultLinkActiveFormat = defTextFormat;
config.defaultLinkHoverFormat = defTextFormat;
config.defaultLinkNormalFormat = defTextFormat;
config.textFlowInitialFormat = ITextLayoutFormat( defTextFormat );
m_textFlow = new TextFlow( config );
member m_textFlow holds a ref to TLF field.
To add and remove elements use m_textFlow.addChild( p ); where p is paragraph element
see: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/elements/ParagraphElement.html
To change the FontSize and color an element for example :
var _p:ParagraphElement = ParagraphElement( m_textFlow.getChildAt( iChild ) );
for ( var iParChild: uint = 0; iParChild < _p.numChildren; ++iParChild )
{
_p.getChildAt( iParChild ).color = color;
_p.getChildAt( iParChild ).fontSize = nRatio;
...
Maybe this can help you.

dynamically change the color for every line in textarea and panel using flex 4 and action script 3

I have created a simple text chat application for android device using flex 4 and action script 3. in the text chat I have given a option for change font color. I have used "TextInput" for enter text message and "Textarea" for shows the chat messages. when I change the color of the text, all the lines in the "textarea" color has been changing.
textoutput.setStyle("color",textInput.getStyle("color"));
textoutput.text += userNameInput.text + ": " + msg + "\n";"
this is the code I have used. but I need to change the color for every line in the "textarea".
In the other hand, i have created the panel for display chat, and dynamically created the label for the message and dynamically I have changed the color but all the lines are merging in same line. I need to add line break for every dynamic label in the panel window.
var mylabel:Label=new Label();
mylabel.setStyle("color",textInput.getStyle("color"));
mylabel.text += userNameInput.text + ": " + msg + "\n";
panelId.addElement(mylabel);"
this is the code I have used for adding dynamic label into Panel . can any one kindly suggest me some idea for solving any one of this problem means that should be very helpful for me. thanks in advance.
Here is some info that might be helpful , from http://help.adobe.com/en_US/as3/dev/WS8d7bb3e8da6fb92f-20050207122bd5f80cb-7ff5.html
Formatting ranges of text within a text field
A useful method of the flash.text.TextField class is the setTextFormat() method. Using setTextFormat(), you can assign specific properties to the contents of a part of a text field to respond to user input, such as forms that need to remind users that certain entries are required or to change the emphasis of a subsection of a passage of text within a text field as a user selects parts of the text.
The following example uses TextField.setTextFormat() on a range of characters to change the appearance of part of the content of myTextField when the user clicks the text field:
var myTextField:TextField = new TextField();
myTextField.text = "No matter where you click on this text field the TEXT IN ALL CAPS changes format.";
myTextField.autoSize = TextFieldAutoSize.LEFT;
addChild(myTextField);
addEventListener(MouseEvent.CLICK, changeText);
var myformat:TextFormat = new TextFormat();
myformat.color = 0xFF0000;
myformat.size = 18;
myformat.underline = true;
function changeText(event:MouseEvent):void
{
myTextField.setTextFormat(myformat, 49, 65);
}

Detect number of lines required by piece of text

This one is for all the TextField wizards out there. I have a text field that displays 2 paragraphs of texts. The first one I want to be truncated to show only 3 lines of text maximum. The 2nd paragraph is to be appended to that text.
Is there a way I can show only the first 3 lines of the first paragraph? Think of it like an abstract for an article for the first paragraph.
I tried doing it with String.subStr(0, guestimate of 3 lines of chars) but it's pretty inconsistent in that some strings will take up 4 lines of the textfield.
I thought about doing 2 separate textfields but in the case of the first paragraph having only 1 line worth of chars, there will be gap of 2 lines worth of chars between the 2nd paragraph.
textField = new TextField();
textField.antiAliasType = AntiAliasType.ADVANCED;
textField.width = _boundaryWidth;
textField.autoSize = TextFieldAutoSize.NONE;
textField.multiline = true;
textField.wordWrap = true;
textField.text = _text;
textField.setTextFormat(textFormat);
while( textField.numLines > 3 )
{
var txt:String = textField.getLineText(textField.numLines - 1 );
textField.replaceText(textField.text.length - txt.length,textField.text.length, "");
var numLines:int = textField.numLines;
}
This piece of code should do what you are looking for.
All that you need to do is check for the number of lines the text is covering. Set the width initially because that helps the textfield decide how many lines it needs to spread out into. I have not created a function which encompasses all this. But I guess that should be pretty simple to do since the whole function body is here.
Have a look at TextField#getLineOffset(). It will return the character index of the first character on the specified line - you can use substr or substring to truncate the text accordingly.

textbox autoresizing in actionscript3

I need to realize textbox autoresizing in actionscript3(IDE - adobe flash pro cs3). For example my textarea is in width 100 px, user has been wrote in it something, that is bigger than 100 px, then my textbox should become increasingly. any ideas?
Also I can't realize multiline option: when the text goes beyond the textbox, it starts to scroll. In line type I've chosen 'multiline'.
thanks
try this:
textfield.autoSize = "left";
textfield.multiline = true;
textfield.wordWrap = true;
Hope it helps,
Rob
If you want to resize textfield automaticaly you can use textfield.autoSize property.
Wnen you are using multiline textfield, then setting
textfield.autoSize = TextFieldAutoSize.LEFT;
will align text to left and resize field vertically. If you use single line text field, it will resize to the right.
The TextField's .autosize property is great for sizing dynamic text fields when you already know the text string (but mind the .multiline and .wordwrap properties), but won't be helpful for input text fields.
For input text, I'd suggest listening for the Event.CHANGE event, then updating the width/height based on the number of lines, the .textWidth, or TextLineMetrics info (e.g. myTextField.getLineMetrics).
Here's a quick example:
var myField:TextField = new TextField();
myField.x = 10;
myField.y = 10;
myField.width = 100;
myField.height = 20;
myField.border = true;
myField.type = TextFieldType.INPUT;
myField.addEventListener(Event.CHANGE, textChangeHandler);
addChild(myField);
function textChangeHandler(evt:Event) {
var buffer:Number = 10;
myField.width = Math.max(100, (myField.textWidth + buffer));
myField.scrollH = 0;
}
Edit: Oh, and if you want that to work with .multiline, then just add:
myField.multiline = true;
and in the textChangeHandler function add:
myField.height = myField.textHeight + buffer;

Want to get cursor position within textInput

I am using textInput within grid using rendrer. I am populating a suggestion box just below the text input field on the basis of typed character and index of text input.Problem is that if i shrink grid column then suggestion box is not populating at the right place so I want global position of cursor in the text input field .
Something like that:
var inputTxt : TextInput = new TextInput;
var x : Number = inputTxt.cursorManager.currentCursorXOffset;
var y : Number = inputTxt.cursorManager.currentCursorYOffset;
Try using 'global coordinate'.
This might resolve your problem.