Link to home
Start Free TrialLog in
Avatar of Jay Roy
Jay RoyFlag for United States of America

asked on

FLEX: textareas with bullet points

hi guys

I have a requirment where i have 20 text areas in my mxml screen and each text area has a height of 60.
Is there anyway in flex that i can provide 'bullet points' to user so that he can format the data (like what we have in MS-Word).
The goal is to make the data more readable in the text area by providing users bullet points option.

Does flex provide any out of the box support for such requirment?

thanks very much for any help and code.

SOLUTION
Avatar of ChristoferDutz
ChristoferDutz
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Jay Roy

ASKER

ok thanks.
Can you please post the code so that i can see how you are doing it?

thanks
Well there's no real code I could paste. It was just a suggestion to mabe have a button to append a special char at the current cursor position.
For example this:
http://www.fileformat.info/info/unicode/char/2022/index.htm

If you really want to support Lists in the same fashion as Word does (Insert List and every new Line is automatically added as List entry), you will have to do a major refactoring of the RichText Field for displaying your texts and the RichEditableText for displaying and editing your text. The Flex Text Flow Engine would support such custom Flow Elements. I have to admit that I have creating such an editor on my radar, but I think I won't have the time in the next few months.
Avatar of Jay Roy

ASKER

Yeah, I don't want major refactoring.
How about having a table  with 2columns and
multiple rows. The first column would contain
numbers like 1,2,3.. and second column would
be Textboxes to enter text. Is that easily doable in flex?

Thanks.
As I mentioned ... in Flex there are no tables in TextAreas. Refactoring a TextArea to support tables would be a really major refactoring. I have been looking for a finished component offering this functionality, but I havent found one yet ... if you do ... please give me a note ;-)
Avatar of Jay Roy

ASKER

ok so textareas are not good then, i will have to use only table with 2 columns
ASKER CERTIFIED SOLUTION
Avatar of petiex
petiex
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Think this would deffinitely be easier. Use a DataGrid for your table ... makes it even easier.
@petiex: You are absolutely right ... the good old Flex3 TextArea does support the "li" Element so this schould be the easiest way to go.

List of all Tags supported by TextArea (but set the "htmlText" property and not the "text" Property, as petiex mentioned in his code):
http://www.flexer.info/2008/05/08/html-tags-and-attributes-supported-by-flash-player/
Avatar of Jay Roy

ASKER

nice peice of work there petiex.  I am just curious when i pass the textarea data to the java backend,
save it to the database and then retrieve it back, will the data format stay?
Yeah, if you look at textarea.htmlText after adding a few lines, you see it has not only the added "LI" tags, but also some font and textformat tags thrown in by the player. So, you can strip all that out with something like:

textArea.htmlText.replace(/(<\/?[^>]+>)+/g, " ")
Avatar of Jay Roy

ASKER

ok
are you saying i should change the code like this?

private var regex:RegExp = /(<\/li>)?[^(<\/li>)]+$/g;
		private var enterPressedOnce:Boolean = false;
		
		private function translate(event:KeyboardEvent):void {
		if (event.keyCode == Keyboard.ENTER) {
		var textArea:TextArea = event.currentTarget as TextArea,
		newText:String, ind:int = 0;
		if (!enterPressedOnce) {
		enterPressedOnce = true;
		} else {
		newText = event.target.htmlText.replace(/(<\/?[^>]+>)+/g, " ");
		textArea.htmlText = newText;	
		}  
		}
		}

Open in new window

No, I'm saying that when you finally submit the value in the textarea to a java back-end, if you want to remove all the formatting, then you can strip it at that point using .replace(/(<\/?[^>]+>)+/g, " ")

If you were to do it in the translate function, that would just undo what it is intended to do.
Avatar of Jay Roy

ASKER

oh ok, got it. Thanks for the excellent peice of work!
Avatar of Jay Roy

ASKER

are there any good books or online links you would recommend for building such handy tools?

thanks.
Thanks for the question. It was fun. I'm thinking, though, that you probably want to retain the LI tags when you save it to the database, so that it looks the same when you retrieve it. That being the case, you could either just grab the textarea.htmlText with all the flash-added font and textformat tags, or save something like:

var saveString = textarea.htmlText.replace(/(<\/?[^>]+>)+/g, "</li><li>");
//remove leading </li> and tailing <li>
saveString = saveString.substring(5, saveString.length - 4);
Avatar of Jay Roy

ASKER

>>>so that it looks the same when you retrieve it
yeah that makes sense. I am not realy concerned what gets saved in the database. all that matters is what users see :)
You definitely want to bookmark the Actionscript language reference:
 http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/
Other than that google has always been my primary flex reference. Books tend to get out of date by the time I get around to reading them.
Avatar of Jay Roy

ASKER

can you guys please help me with this question if possible

https://www.experts-exchange.com/questions/26813274/pass-Object-from-flex-to-backend.html

thanks