Monday, January 22, 2007

Update - Flex Text Highlighter Class

Last night I updated my demo of tl.text.Highlighter, my TextField highlighting class for Flex. You point it at a TextField object, and then use one of its methods to highlight the word or words of your choosing. Here's the demo (right-click it to view source).

In this revision, I added some performance optimizations to reduce the number of calls to TextField.getCharBoundaries, which it turns out was the most expensive call I was making. In the last version, I highlighted each character individually, regardless of whether it was part of a word or not, because it was easier to handle word wrapping that way. This meant making a separate call to TextField.getCharBoundaries for each letter in a word. The performance was pretty good, but could get a little slow when highlighting a whole paragraph. Now, I make two calls per word: one for the first character, and one for the last character and combine them into a single Rectangle object that spans the whole word (a la Keith Peters). It's a bit trickier to manage when words or phrases wrap into multiple lines, but I was able to write some logic to handle those scenarios.

Anyway, this results in much better performance when highlighting many sequential characters in a TextField. To pull this off, I created a StringBoundaries class which returns an array of Rectangles that define the boundaries of the character range. The array has a length of 1 if the character range fits on one line.

Also, I moved the search logic into a separate class called Finder, where it will be easier to work with. I intend to add some features such as Match Whole Words Only and Case Sensitive/Insensitive options.

Keep those suggestions coming!

Was this post helpful to you? If so, please consider making a small donation to keep this blog going.

46 Comments:

Blogger Igor said...

Another way to get TextArea's textField property is to use mx_internal namespace. Cleaner but not recommended by Adobe. Example of simple implementation: http://flashtexteditor.com/flexdemo/

9:28 AM  
Blogger tom said...

Thanks for the tip, Igor! It is a lot cleaner, and maybe more reliable. Is mx_internal documented anywhere, or is this something people have figured out on their own? I couldn't find any official documentation on the subject.

10:58 AM  
Anonymous udayms said...

Hi,
Is there any way to get the caret position in a text area? I am trying to build a syntax highlighter with some autocomplete features. I want to know whats the current position of the caret so that I can replace the character at that point with something else? for example, if the user types "fun" and presses space, I want to replace it with "function"... any ideas?

cheers,
uday

4:29 AM  
Blogger tom said...

Check out Selection.getCaretIndex() in the docs.

8:01 AM  
Anonymous Anonymous said...

Thanks, this was very helpful.

I noticed a bug when you search for the next or previous keyword for a 6-string-or-greater character that doesn't exist. It'll draw a box with the length of this integer starting at char 0 in the textfield.

I fixed this by added some if statements in the Highlighter class, to detect if no results were found. These functions are also return booleans now so that the main component can tell if nothing is returned.

Also added a few functions in the Highlighter class to find the first reference of a word only, and a function to that returns the number of occurrences of a word only (used in enabling/disabling feature buttons in the main component.)

10:19 AM  
Anonymous Anonymous said...

Also added another parameter on the Highlighter class for case-sensitivity.

11:41 AM  
Blogger tom said...

Sounds like useful improvements! Feel free to post a url here - I'd love to see it. Not sure what you mean by a 6-string-or-greater character... Can you elaborate on that? Thanks!

5:36 PM  
Anonymous Anonymous said...

Hi Tom,

I'm in a highly secure work environment where my internet is on a separate machine so I can't post, but I'd love to help and can elaborate:

Try typing "eeeeee" in the highlight next/previous window and hitting next to see what I mean. For some reason the highlighter only does this if the search term is only 6 characters or more and not found, I'm not sure why.

To get around this I basically added "if (i>o){do code}" inside your highlighter functions (inside the Highligher class) so that if finder.find*() returns negative vales that it doesn't bother running the rest of the highlighter code. (I also modified the finder class so that the subString it returns is not zero based to get this to work [by just adding 1, stringBoundries will also need to be adjusted because of this].

The highlighter idea I posted earlier didn't end up being ideal for adding into the highlighter class. Instead I created a global isCaseSensitive boolean inside the main component to act as a toggle. I added a second "isCaseSensitive" parameter to all highlighter functions that default to true. If isCaseSensitive is passed as false then both the searchWord (word) and the textfield (str, but in one function you have it as txt) are set to lowercase when searching for macthes. I found this way works best although I bet it could be a little more efficient.

Another good suggestion is to make your highlighter functions in your main component not completely reliant on the search textfield eg:

public function highlightNext(searchString:String=null):void{
if (!searchString){
searchString=SearchQueryInput.text;
}
..rest of code
}

That way the functions can be called by other things such as eventListeners.

I had already built my own highlight/search component halfway before I saw yours. Mine wasn't separated out into classes as nicely. Thanks for sharing it and I apologize I can't post my variation. But I can contribute in any other way. My idea was to make the highlighter similar to the one in Firefox's search.

-Mauv

8:25 AM  
Blogger Jose said...

Added a new function to Highlighter.as. It will allow you to highlight all the words based on their indexes. It only takes 1 parameters an array of objects that have a start and end values.

So if you want to highlight the words at indexes (3,10) and (14, 19) you would do something like this:

var field : TextField = getTextField( ta );
var highlighter : Highlighter = new Highlighter( field );
var a : Array = new Array();
var delim : Object = new Object();
delim.start = 3;
delim.end = 10;
a.push( delim );

highlighter.highlightWords( a );

public function highlightWords( indexes : Array ) : void
{
for(var i : int = 0; i < indexes.length; i++)
{
var bounds : StringBoundaries = new StringBoundaries( this.field, indexes[i].start, indexes[i].end, this.xOffset, this.yOffset);
this.boundariesToHighlight.push( bounds );
}
this.highlightVisibleBoundaries();
}

6:20 PM  
Blogger alen said...

Why on earth is getCharBounds not working on AIR?

7:10 AM  
Anonymous Anonymous said...

I'm trying to use your component but I keep getting a 100 var'thisChild' has no type declaration error, any suggestions? I'm using flex 2.1 by the way.

5:55 AM  
Blogger Harshal said...

Tom,
Why doesn't this code work with TextInput or Label and only works with TextArea in spite of both of the latter ones having an internal TextField object. Any ideas?

1:12 PM  
Blogger Philipp said...

Added a method to Highlighter in order to have different words highlighted with one and the same highlighter object.

public function highlightWordArrayInstances(words:Array):void{

var txt:String = this.field.text;



for each (var word:String in words){
var temp:Array = this.finder.indexesOf(word);
var len:int = word.length-1;

for(var i:int = 0; i SMALERTHAN temp.length; i++){
var bounds:StringBoundaries = new StringBoundaries(this.field,temp[i],temp[i]+len,this.xOffset,this.yOffset);
this.boundariesToHighlight.push(bounds);
}
}



this.highlightVisibleBoundaries();
}

Its probably not such a good way to do, but its a start ;-)

Are you still on this topic? I am using it in a Flex 3 Scenario but do get Bitmap errors every now and then. ideas ?

Philipp

4:03 AM  
Blogger Shally said...

I was trying my hand at the Highlighter class. Well i was thinking about selecting some text in a text area and it would be highlighted in some color.
Why can't we just highlight some text like that and not change a lots of things? Is there some API which will let me do it?

5:32 PM  
Blogger Greg said...

Hi Tom,

Thanks for the great class.

I am trying to use it in a TileList ItemRenderer displaying search results where I am highlighting matched search query strings. Each ItemRenderer has an instance of its own Highlighter that is constructed with the IR's Label (only had to modify the constructors addChild routine as the Labels TextField's child index is 0 to make it work).

However, each ItemRenderer responds to MOUSE_OVER, MOUSE_OUT events and once I introduced the Highlighter the mouse over events are being triggered in empty columns or rows.

I didn't see the Highlighter and supporting classes listen for mouse over events so not sure what caused this issue.

If you have any insight into using the Highlighter in an item renderer it would be much appreciated.

10:51 AM  
Blogger Harshal said...

Greg,

An easier implementation which I did was to use the htmltext property of the Label to show letters to be highlighted in one color and rest in a normal color. This works for me and is very performance efficient too.

10:59 AM  
Blogger googlo-2 said...

牙醫,植牙,假牙|矯正|牙周病,牙醫診所植牙,紋身,刺青,創業,批發,TATTOO,皮膚科,痘痘,雷射脈衝光除斑,洗包包|洗鞋子|清洗包包,中醫,腫瘤,腎臟病,僵直性脊椎炎,飛梭雷射,肉毒桿菌,玻尿酸,痘痘,脈衝光,醫美,毛孔粗大,醫學美容,seo,關鍵字行銷,關鍵字自然排序,網路行銷,關鍵字自然排序,關鍵字行銷seo,關鍵字廣告,網路行銷,seo,關鍵字行銷,關鍵字廣告,關鍵字,自然排序,部落格行銷,網路行銷,網路爆紅,牛舌餅,婚紗,台中婚紗

1:58 AM  
Blogger miyuki said...

ralph lauren polo shirtssport shoes
18boots
clothes sportspolos shirtgilletteclothes sportspolos shirtgillettetrade chinaHAIR STRAIGHTENERS
wedding dresses
英文推广men's jacketpoloshirtsstortKTO

1:49 AM  
Blogger miyuki said...

chaussures pumaquelle paire de chaussures pour hommes choisir?!? La réponse est toute simple:chaussures nike une paire de baskets en partie vernies. du 17ème au 5ème rang, qui lui offre une place dans un top 5 largement tn requindominé par les sites de vente de produits high-tech. Le site de réservation d'hôtels Bookings.com gagne pour sa part 47 places et atteint le 8ème rang.

1:50 AM  
Blogger miyuki said...

puma basketBlack is lubricious, can match, but young people don't want to match with brunetpuma femmes, can try even cardigan knitting coat will appear lively cap. Boys and girls, puma CATcan choose to choose self-cultivation

1:50 AM  
Blogger miyuki said...

mens clothing men's sweate, cheap columbia jackets, lacoste sweater, ralph lauren polo shirts,ski clothing. Free Shipping, PayPal Payment. Enjoy your shopping experience on mensclothingstore.Us
nike max shoes, one of the world's three major brands of Puma shoes, will build its factory in Lanshan county next year, Hunan province. Taiwan Diamond Group of Footwear production chooses its base in Lanshan county, which is one of top 500 companies in the world.

1:50 AM  
Blogger miyuki said...

Paypal payment. Free shipping. cheap ugg boots ,UGG Online Store,australian cheap ugg boots ,ugg boots australia,UGG Online Store,black ugg boots,ugg boots on sale,cheap uggs. Very Cheap!Vente en ligne de discount chaussure sport : chaussure puma, chaussure nike, chaussure tn, nike tn,nike requin, puma future cat, nike shox torch, ugg boots et plus.

1:50 AM  
Blogger miyuki said...

ralph Lauren polo shirts , Lacoste Polo Shirts, Burberry Polo Shirts.wholesale Lacoste polo shirts and polo ralph laurenwith great price. clothingol.com offers lot of 10 lacoste polo shirts and lot of 20 cheap polo shirts. clothingol.com offers classic fit polo shirts. polo clothingnike air max ltd is divided into sports life and NIKE NIKENIKE air shoes sports mark for a big hook (swoosh)NIKE life (NSW) mark is a hook NIKE swoosh (English) +Sometimes life will sell NIKE sports channel,cheap puma mens shoes , enjoy shopping!

1:50 AM  
Blogger j said...

ralph lauren poloburberry polo shirtthe north face jacketcolumbia jacketspyder jacketed hardy clothing ed hardy clothesed hardy shirts ed hardy t-shirts ed hardy sunglasses ed hardy mensed hardy womens Wholesale HandbagsCheap HandbagsWomens HandbagsCheap PursesDesigner HandbagsTennis RacquetTennis Racket
cheap tennis racquet
tennis racquet discount
cheap tennis racket
discount Tennis Rackethead junior tennis racketwilson tennis racquet
wilson tennis racket
head tennis racketbabolat tennis racket

1:58 AM  
Blogger polo shirt said...

Perfect!!You are a outstanding person!Have you ever wore chaussures puma, puma CAT,Puma shoes store gives some preview of puma speed cat,puma basket, puma speed, puma speed and other puma shoes. These puma sport items are at store recently and available for anyone.

3:13 AM  
Blogger polo shirt said...

Thank you so much!!polo shirt men'ssweate,cheap polo shirts cheap columbia jackets, lacoste sweater, ralph lauren polo shirts,ski clothing. Free Shipping, PayPal Payment. Enjoy your shopping experience on mensclothingus.com.We have mens polo shirts.

3:13 AM  
Blogger polo shirt said...

Awesome!!!Best wishes for you !!wholesale polo shirts is the father of the summer should be prepared to most commonly used item, it has both style and shape of polo clothing, and vest with a random function, so that in the short-sleeved apply to both on many occasions, the pink and black color men's polo shirts brought into effect, lightweight cotton, linen texture to demonstrate masculine temperament and sense of fashion exhaustively. polo shirts for sale

3:14 AM  
Blogger polo shirt said...

Wonderful!!You can find the father who desire fashionable, intellectual cheap polos simultaneously, you can find a psychologist to study the most harmonious of families should be pink mens clothing, so do not want to take the mature route for the father, buy cheap polos, the learn from such a walk in between the formal and casual styling, refined style to create a sense of mild authority.

3:14 AM  
Anonymous Anonymous said...

Do not mean bad.Thank you so much!I just want to show some fashion things to all of you.I like ugg boots.black ugg boots,Loose T-shirt or super-size clothing are the best partners, it allows you to exercise in relax.The classic style cheap uggs may fit someone.You should never design yourself into a monster of no golden section point because beautiful cheap ugg boots.Also,for ladies, in winter sheepskin boots are the excellent choice.ugg boots on sale

3:15 AM  
Anonymous Anonymous said...

Men's polo shirts was the shirt of choice for diverse groups of teenagers
Brightly coloured polo shirts can make you look like a Day-glo dirigible.
Wonderful!You can find the father who desire fashionable eg,uggs fashion,you can enjoy uggs online here, intellectual polo shirt simultaneously

3:15 AM  
Anonymous Anonymous said...

fantastic!God bless you!Meanwhile,you can visit my China Wholesale,we have the highest quality but the lowest price fashion products wholesale from China.Here are the most popular China Wholesale products for all of you.Also the polo clothing is a great choice for you.

3:16 AM  
Blogger polo shirt said...

God bless you!I really agree with your opinions.Also,there are some new fashion things here,gillette razor blades.gillette mach3 razor bladesfor men.As for ladies,gillette venus razor blades must the best gift for you in summer,gillette fusion blades are all the best choice for you.

3:16 AM  
Blogger sky22d said...

For the polo shirts, many people loveralphlaurenpoloshirtscheappolos but hate it. This brand is favorite, products like his style; the same is hard not to develop the Lacoste polo shirts brand has been cheap lacoste polos the Asian market. There are stores to buy wholesale polo shirts, However, ralph lauren polo shirts is too many fakes. It will be out of shape cheap ralph lauren polos.

8:40 PM  
Blogger sky22d said...

discount ralph lauren polos are one of the highest in demand cheappolos because along with protecting your skin it also enhances your looks. These polo clothingare the in-thing in today's ralph lauren polo shirts fashion world and among the youngstersdiscount polossummer polospolo shirts whosale.

8:41 PM  
Blogger sky22d said...

It was just a ed hardy clothing with a colourful design of three wolves howling at the moon. Now, it’s a viral sensation with its own ed hardy clothes, videos and an exploding following that has swamped a tiny New ed hardy shirts. Longer arms extend the yoke farther up each side of the babolat pure drive. These arms - or Side Drivers wilson k six- create a stiffer construction and distribute maximum power from the base of the yoke to the middle of the head microgel.

8:43 PM  
Anonymous flower said...

Advanced precision comes from the connection of the Side prince-o3-tour to the cheap tennis racquets at three o'clock and nine o'clock, which results in less torque (or twisting) at polo logopolo shirts in voguepolo women clothinged-hardy shirtsed-hardy sunglassesimpact.

8:45 PM  
Anonymous tea said...

This issue ed hardy t-shirts is of paramount importance as forensic experts ed hardy mens claimed to have discovered in the collar of one of ed hardy womens the fragment of an electronic timer which provided the key link ed hardy sunglasses between the bombing and Libya.They will surely love polo ralph laurenlike this. The styles are so fabulous burberry polos catching the light who would not love lacoste polo shirts like these.

8:47 PM  
Anonymous Anonymous said...

In a womens clothing boutique store, several girls were trying on fashionable new polos men poloswomen polos. In addition to flower dresspolo fashionembroodered polostennis racketsclothing poloclothingedhardyshirtedhardyclothingedhardysummer ed hardy clothingcheap shirtsed hardy brandcheap ed hardypolo shirts cheapcheap tennis racketsdiscount tennis racketsralphlaurenpoloshirtscheappolospolo fashion, flower shirt, flower jacket, even with the scarf pattern is all kinds of flowers.

8:48 PM  
Blogger sky22d said...

In a womens clothing boutique store, several girls were trying on fashionable new polos men poloswomen polos. In addition to flower dresspolo fashionembroodered polostennis racketsclothing poloclothingedhardyshirtedhardyclothingedhardysummer ed hardy clothingcheap shirtsed hardy brandcheap ed hardypolo shirts cheapcheap tennis racketsdiscount tennis racketsralphlaurenpoloshirtscheappolospolo fashion, flower shirt, flower jacket, even with the scarf pattern is all kinds of flowers.

8:54 PM  
Blogger sky22d said...

This issue ed hardy t-shirts is of paramount importance as forensic experts ed hardy mens claimed to have discovered in the collar of one of ed hardy womens the fragment of an electronic timer which provided the key link ed hardy sunglasses between the bombing and Libya.They will surely love polo ralph laurenlike this. The styles are so fabulous burberry polos catching the light who would not love lacoste polo shirts like these.

8:56 PM  
Blogger sky22d said...

Advanced precision comes from the connection of the Side prince-o3-tour to the cheap tennis racquets at three o'clock and nine o'clock, which results in less torque (or twisting) at polo logopolo shirts in voguepolo women clothinged-hardy shirtsed-hardy sunglassesimpact.

8:58 PM  
Anonymous tea said...

It was just a ed hardy clothing with a colourful design of three wolves howling at the moon. Now, it’s a viral sensation with its own ed hardy clothes, videos and an exploding following that has swamped a tiny New ed hardy shirts. Longer arms extend the yoke farther up each side of the babolat pure drive. These arms - or Side Drivers wilson k six- create a stiffer construction and distribute maximum power from the base of the yoke to the middle of the head microgel.

9:00 PM  
Blogger sky22d said...

discount ralph lauren polos are one of the highest in demand cheappolos because along with protecting your skin it also enhances your looks. These polo clothingare the in-thing in today's ralph lauren polo shirts fashion world and among the youngstersdiscount polossummer polospolo shirts whosale.

9:04 PM  
Blogger sky22d said...

For the polo shirts, many people loveralphlaurenpoloshirtscheappolos but hate it. This brand is favorite, products like his style; the same is hard not to develop the Lacoste polo shirts brand has been cheap lacoste polos the Asian market. There are stores to buy wholesale polo shirts, However, ralph lauren polo shirts is too many fakes. It will be out of shape cheap ralph lauren polos.

9:07 PM  
Blogger as said...

I like your blog. Thank you. They are really great . Ermunterung ++ .
Some new style Puma Speed is in fashion this year.
chaussure puma is Puma shoes in french . Many Franzose like seach “chaussure sport” by the internet when they need buy the Puma Shoes Or nike max shoes. The information age is really convenient .




By the way ,the nike max ltd is really good NIKE air shoes ,don’t forget buy the puma mens shoes and nike air max ltd by the internet when you need them . Do you know Nike Air Shoes is a best Air Shoes . another kinds of Nike shoes is better . For example , Nike Air Rift is good and Cheap Nike Shoes .the nike shox shoes is fitting to running.



Spring is coming, Do you think this season is not for Ugg Boots? maybe yes .but this season is best time that can buy the cheap ugg boots. Many sellers are selling discounted. Do not miss . Please view my fc2 blog and hair straighteners blog.
.thank you .


I like orange converse shoes ,I like to buy the cheap converse shoes by the internet shop . the puma shoes and the adidas shoes (or addidas shoes) are more on internet shop .i can buy the cheap nike shoes and cheap puma shoes online. It’s really convenient.
Many persons more like Puma basket shoes than nike air rift shoes . the Puma Cat shoes is a kind of Cheap Puma Shoes .
If you want to buy the Cheap Nike Air shoes ,you can buy them online. They are same as the Nike Air shoes authorized shop. Very high-caliber Air shoes and puma cat shoes . the cheap puma shoes as same as other.




polo shirts

ralph lauren polo shirts
chaussure puma

chaussure sport



chaussures puma

puma CAT

ed hardy clothing

ed hardy clothes



ed hardy womens

ed hardy sunglasses

ugg boots

cheap ugg boots

12:32 AM  
Blogger fdg said...

http://www4.atword.jp/sportshoes/
www.actiblog.com/sdfsdfsd/
d.hatena.ne.jp/iblog99/
kurumaro.com/pumashoes

7:30 AM  

Post a Comment

Links to this post:

Create a Link

<< Home