Solved

FLEX: textareas with bullet points

Posted on 2011-02-10
19
1,667 Views
Last Modified: 2012-06-27
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.

0
Comment
Question by:royjayd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
  • 5
19 Comments
 
LVL 20

Assisted Solution

by:ChristoferDutz
ChristoferDutz earned 20 total points
ID: 34867025
Unfortunately Flex does not bring support for Lists and Tables in TextAreas. One solution I like to use is that the character-sets of my fonts usually include some cool chars that you can nicely use as bulets in lists.
0
 

Author Comment

by:royjayd
ID: 34867543
ok thanks.
Can you please post the code so that i can see how you are doing it?

thanks
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 34868779
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.
0
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 

Author Comment

by:royjayd
ID: 34870596
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.
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 34870609
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 ;-)
0
 

Author Comment

by:royjayd
ID: 34871199
ok so textareas are not good then, i will have to use only table with 2 columns
0
 
LVL 11

Accepted Solution

by:
petiex earned 480 total points
ID: 34873954
try this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
     <![CDATA[

        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(regex, "<li>$&</li>");
                    textArea.htmlText = newText;
                }
            }
        }
     ]]>
</fx:Script>
    <mx:TextArea id="testTextArea" htmlText="&lt;li>&lt;/li>" height="60" width="200" keyUp="translate(event)" condenseWhite="true"/>
</mx:Application>

Open in new window

0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 34873961
Think this would deffinitely be easier. Use a DataGrid for your table ... makes it even easier.
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 34874059
@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/
0
 

Author Comment

by:royjayd
ID: 34874551
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?
0
 
LVL 11

Expert Comment

by:petiex
ID: 34874844
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, " ")
0
 

Author Comment

by:royjayd
ID: 34875221
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

0
 
LVL 11

Expert Comment

by:petiex
ID: 34875263
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.
0
 

Author Comment

by:royjayd
ID: 34875416
oh ok, got it. Thanks for the excellent peice of work!
0
 

Author Comment

by:royjayd
ID: 34875430
are there any good books or online links you would recommend for building such handy tools?

thanks.
0
 
LVL 11

Expert Comment

by:petiex
ID: 34875532
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);
0
 

Author Comment

by:royjayd
ID: 34875556
>>>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 :)
0
 
LVL 11

Expert Comment

by:petiex
ID: 34875601
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.
0
 

Author Comment

by:royjayd
ID: 34875618
can you guys please help me with this question if possible

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_26813274.html

thanks
0

Featured Post

Office 365 Training for Admins - 7 Day Trial

Learn how to provision tenants, synchronize on-premise Active Directory, implement Single Sign-On, customize Office deployment, and protect your organization with eDiscovery and DLP policies.  Only from Platform Scholar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
AS 3 Eval 5 514
Adobe Error Message - kenlly.dll 7 681
Can't get dispatchEvent to work when parent to talk to child AS3 3 621
transparent background on a spark spinnerlist? 6 1,010
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question