Solved

FLEX: textareas with bullet points

Posted on 2011-02-10
19
1,608 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
  • 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
 

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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

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…
In this article, I will show you HOW TO: Suppress Configuration Issues and Warnings Alert displayed in Summary status for ESXi 6.5 after enabling SSH or ESXi Shell.
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

759 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now