Improve company productivity with a Business Account.Sign Up

x
?
Solved

Filtering a Flex tilelist using RegExp

Posted on 2009-04-10
16
Medium Priority
?
817 Views
Last Modified: 2012-05-06
I'm trying to filter a Flex tilelist that's populated via XMLListCollection with a RegExp.  I created the following code for a datagrid that works.  But when applied to a tilelist, I get a "value is not a function".  I guess the problem is in the item.text() portion.  But anyone know how I could get this to work with the tileList?
private function filterFunc(item:Object):Boolean {
		var allWords:String=searchField.text;
		allWords = allWords.replace(/\s+/g,"|");					
                return item.text().match(new RegExp(allWords, "i"));
}

Open in new window

0
Comment
Question by:moglie
  • 8
  • 6
  • 2
16 Comments
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 24120665
My guess would be that you need quotes around the regex in line 3:
allWords = allWords.replace("/\s+/g","|");

Open in new window

0
 

Author Comment

by:moglie
ID: 24120714
Using the quotes didn't change anything.  Still getting that "not a function" error.  Someone on another forum mentioned that an item of type object doesn't have a method called text and that's causing the problem.  But I don't know, it works on a datagrid as expected.
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 24120730
Did you try taking the parens of of text?

I am not a flex programmer, but I'm just trying to be logical, so please forgive me if I sound retarded :)
return item.text.match(new RegExp(allWords, "i"));

Open in new window

0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 

Author Comment

by:moglie
ID: 24120763
I've tried all the small trial-and-error things like that but it's still the same error.
0
 
LVL 5

Expert Comment

by:Fuzzy_Logic_
ID: 24121521
I would pass a String in to the function, instead of an object.

Then before you call the function, you would cast the item to a string

ie.




 ...
 ..
 .    
 
 var itemText:String = item.text as String; // You could do this in the function, But this way only a Sting can be passed to the function rather than any object, which gives runtime errors rather than compile time errors.
 
 var isFiltered:Boolean = filterFunction(itemText); // call the function
 
 .
 
private function filterFunc(itemText:String):Boolean 
    {
                var allWords:String=searchField.text;
                allWords = allWords.replace(/\s+/g,"|");
     
                return itemText.match(new RegExp(allWords, "i"));
    }

Open in new window

0
 

Author Comment

by:moglie
ID: 24121585
Must be getting close here.  There's one error popping up on the line
var itemText:String = item.text as String;  "access to undefined property item"
0
 
LVL 5

Expert Comment

by:Fuzzy_Logic_
ID: 24121627
item is just a variable to hold your object. you need to assign that variable as something.

ie the object that you passed into the filterFunc(item:Object):Boolean before. I assume that it is an object in the TileList
 ...
 ..
 .   
 
 var item:Object = yourObject // this is the object that you were trying to pass to the function before 
 
 var itemText:String = item.text as String; // You could do this in the function,
                                               But this way only a String can be passed to the function rather than any object,
                                               which gives runtime errors rather than compile time errors.
 
 var isFiltered:Boolean = filterFunction(itemText); // call the function
 
 .
 
private function filterFunc(itemText:String):Boolean 
    {
                var allWords:String=searchField.text;
                allWords = allWords.replace(/\s+/g,"|");
     
                return itemText.match(new RegExp(allWords, "i"));
    }

Open in new window

0
 

Author Comment

by:moglie
ID: 24121646
My original code worked on a datagrid and I never referenced item anywhere....so maybe item  is part of   the datagrid component?  Now I'm getting really lost. haha
0
 
LVL 5

Expert Comment

by:Fuzzy_Logic_
ID: 24121663
ok, so that your code works just change your function to this, however if you pass an object without a text property it will throw an error.
private function filterFunc(item:Object):Boolean
    {
        var allWords:String=searchField.text;
        allWords = allWords.replace(/\s+/g,"|");
 
        var itemText:String = item.text as String;
        
        return itemText.match(new RegExp(allWords, "i"));
}

Open in new window

0
 

Author Comment

by:moglie
ID: 24121696
Yeah, the error that comes up is can't access a property of a null item..  It's looking like this can't be done.
0
 
LVL 5

Expert Comment

by:Fuzzy_Logic_
ID: 24121709
If you post code that calls this function, there is a way.
0
 

Author Comment

by:moglie
ID: 24121769
This is all the relevant code:

            private function filterFunc(item:Object):Boolean {
                              var allWords:String=stateName.text;
                              allWords = allWords.replace(/\s+/g,"|");                              
                      return item.text().match(new RegExp(allWords, "i"));
            }


      <mx:XML id="xml" source="gallery.xml"/>
      <mx:XMLListCollection id="xmlListColl" source="{xml.image}"  filterFunction="filterFunc"  />

      <mx:TileList id="tileList" dataProvider="{xmlListColl}"       columnCount="3" columnWidth="200"
                  rowCount="2" rowHeight="200" themeColor="haloSilver" verticalScrollPolicy="on" itemClick="tileList_itemClick(event);" >
         <mx:itemRenderer>
            <mx:Component>
               <mx:VBox paddingLeft="30" width="150" height="150" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                  <mx:Image height="50" width="50" source="{data.@thumbnailImage}" />
                  <mx:Label id="foo" text="{data.@title}" />
               </mx:VBox>
            </mx:Component>
         </mx:itemRenderer>            
      </mx:TileList>
      <mx:TextInput id="searchField" change="xmlListColl.refresh()"/>
0
 
LVL 5

Expert Comment

by:Fuzzy_Logic_
ID: 24121806
This error would have come back if the parenthesis had been removed from:
       return item.text().match(new RegExp(allWords, "i")); it should have been:

       return item.text.match(new RegExp(allWords, "i"));

Anyway item is the XML object created, so you just need the name of the node that you want to filter, which appears to be title?


private function filterFunc(item:Object):Boolean // item is an XML object
    {
        var allWords:String=searchField.text;
        allWords = allWords.replace(/\s+/g,"|");
 
        var itemText:String = item.@title as String; // here is where you want
                                                     // to put the name of the node you want to filter.
        
        return itemText.match(new RegExp(allWords, "i"));
}

Open in new window

0
 

Author Comment

by:moglie
ID: 24122029
Still getting a null object.  There's also a warning on the return line "array used where a boolean value is expected"  I've attached a test file if that would help.  Maybe the xml is causing the problem?
<gallery>
	<image title="Flex"
		thumbnailImage="assets/fx_appicon-tn.gif"
		fullImage="assets/fx_appicon.jpg"/>
	<image title="Flash n lots of stuff"
			thumbnailImage="assets/fl_appicon-tn.gif"
			fullImage="assets/fl_appicon.jpg"/> 
	<image title="Illustrator"
			thumbnailImage="assets/ai_appicon-tn.gif"
			fullImage="assets/ai_appicon.jpg"/> 
	<image title="Dreamweaver"
			thumbnailImage="assets/dw_appicon-tn.gif"
			fullImage="assets/dw_appicon.jpg"/> 
	<image title="ColdFusion"
			thumbnailImage="assets/cf_appicon-tn.gif"
			fullImage="assets/cf_appicon.jpg"/> 
	<image title="Flash Player"
			thumbnailImage="assets/fl_player_appicon-tn.gif"
			fullImage="assets/fl_player_appicon.jpg" />
</gallery>

Open in new window

0
 
LVL 5

Accepted Solution

by:
Fuzzy_Logic_ earned 2000 total points
ID: 24122839
Back from taking kids out,

This is what your filterFunc needs to be:
              private function filterFunc(item:XML):Boolean
                 {
                    var allWords:String=searchField.text;
                    allWords = allWords.replace(/\s+/g,"|");
 
                    var itemText:String = item.attribute("title").toString();
        
                    var isMatch:Boolean = false;
                    
                    if (itemText.match(new RegExp(allWords, "i")) != null)
                        {
                            isMatch = true;
                        }
                        
                        return isMatch;
                }

Open in new window

0
 

Author Closing Comment

by:moglie
ID: 31569132
Thanks!  Finally working now.
0

Featured Post

Improve Your Query Performance Tuning

In this FREE six-day email course, you'll learn from Janis Griffin, Database Performance Evangelist. She'll teach 12 steps that you can use to optimize your queries as much as possible and see measurable results in your work. Get started today!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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…
This following write-up describes a different way to copy Lotus Notes Calendar to Outlook. Along with this, we will also learn the reason behind this NSF to PST migration. Users can prefer different procedures as per their convenience.
The video will let you know the exact process to import OST/PST files to the cloud based Office 365 mailboxes. Using Kernel Import PST to Office 365 tool, one can quickly import numerous OST/PST files to Office 365. Besides this, the tool also comes…
In the video, one can understand the process of resizing images in single or bulk. Kernel Bulk Image Resizer is an easy to use tool for resizing large number of images. One can add and resize multiple images with this tool in single go. The video sh…

608 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