Using Regular Expressions to Validate Data (Part 1)


Regular expressions enable you to easily search through a text string without having to build complicated looping structures. Regular expressions are simply patterns that enable you to search and match other strings. They are created by using a special languagethe regular expression languagewhich you will get a taste of in this task. Flex framework has support for this language built in.

In this task, you will use regular expressions to build a custom validator to verify an image name the user has attached by dragging and dropping. You will check the file name to ensure that there is at least one character before the dot, and that the image they are attaching is a GIF file. There are lots of considerations that will make your search more complicated. For example, you will have to consider all case possibilities when searching for the GIF string: GiF, gif, and even giF are all valid. You also need to search for the string GIF only at the end of the filename, after the dot. For example, you would not want a file with the name of gift.jpg to register as valid.

1.

Open AddProduct.mxml from the views/dataEntry directory.

2.

On the first line of the doProdAdd() method, create a new RegExp object with the name of pattern, as follows:

var pattern:RegExp = new RegExp(); 


The RegExp class is used to write regular expressions that can search and replace through text strings. The object will store the pattern that you use to search through these strings. The next step will take you through the syntax of the pattern.

3.

Inside the parentheses for the RegExp() class, define the first character of the string as a period.

var pattern:RegExp = new RegExp("."); 


The constructor for the RegExp class accepts a String to define the search pattern. The first step to defining your filename search is to ensure that at least one character appears directly before the period in the filename. In regular expressions syntax, a single valid character, also referred to as a wildcard, is represented by a period.

4.

After defining the first period, define a literal search for a period using two backslashes and a period.

var pattern:RegExp = new RegExp(".\\."); 


In step 3, you learned that a period represents any character in regular expressions. To make your search for an appropriate file type work, you need to be able to literally search for a period as well. This is accomplished using an escape character, which is a double backslash in Flex. The escape character tells the regular expression that you literally mean a period, and not another wildcard character.

5.

After the defining the search for the literal period, add searches for uppercase G, lowercase g, uppercase I, lowercase i, uppercase F, or lowercase f. To express this in a regular expression, you would surround each of the upper/lowercase character combinations in square brackets.

var pattern:RegExp = new RegExp(".\\.[Gg][Ii][Ff]"); 


This will check that the string ends with any variation of the capitalization of "GIF".

6.

Immediately after defining the pattern object, surround the rest of the method with conditional logic. Within the conditional logic, use the search() method of the String class to search the string located in prodModel.imageName with the RegExp pattern you completed in the last step. If the value is not equal to -1, execute the code.

if(prodModel.imageName.search(pattern) != -1){    var prod:Product = Product.buildProduct(prodModel);    var o:ProductEvent = new ProductEvent(prod,'productAdded');    this.dispatchEvent(o); } 


The search() method of the String class will search the prodModel.imageName string for the regular expression that you defined in the pattern. It will look for a character before a period; for a period; and for the character G, I, or F in any case. If the string matching the pattern you defined is not found in the imageName, -1 will be returned. If the string is found, the search method will return the position where the pattern begins in imageName.

7.

Add an else statement that will display an Alert box if -1 one is returned. The final doProdAdd() method should look as follows:

private function doProdAdd():void{    var pattern:RegExp = new RegExp(".\\.[Gg][Ii][Ff]");    if(prodModel.imageName.search(pattern) != -1){       var prod:Product = Product.buildProduct(prodModel);       var o:ProductEvent = new ProductEvent(prod,'productAdded');       this.dispatchEvent(o);    }else{       mx.controls.Alert.show("Please attach a GIF file");    } } 


If the user has not attached a file with the extension gif, an Alert box will display, asking the user to attach a GIF file.

8.

Save this file and run the DataEntry application. Click the Add Product tab and attempt to add a new image by typing some different combinations into the image field. Then click the Add Product button.

You should see only those combinations that have at least one character in front, a period, and the extension GIF add properly.




Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net