Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

FLEX: textareas with bullet points

Posted on 2011-02-10
19
Medium Priority
?
1,709 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 80 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
Enhanced Intelligibility Without Cable Clutter

Challenge: The ESA office in Brussels wanted a reliable audio conference system for video conferences. Their requirement - No participant must be left out from the conference and the audio quality must not be compromised.

 

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 1920 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

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…
We live in a world of interfaces like the one in the title picture. VBA also allows to use interfaces which offers a lot of possibilities. This article describes how to use interfaces in VBA and how to work around their bugs.
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…

722 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