Solved

FLEX: textareas with bullet points

Posted on 2011-02-10
19
1,688 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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 

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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

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…
First of all let me say that the only language that I speak is English, but in answering questions here I often come across people whose English skills are not the best and I’d like to be able to communicate better with them, and the following descr…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Suggested Courses

615 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