Archive for the ‘Examples’ Category

As I was saying in my earlier example post for regex search, I would likely post a regex replace example, and here it is! It took only a few moments to make the necessary adjustments to the previous regex search example since the code is so similar.

The original textToReplace has its text replaced by the replaceText field using the pattern from replacePattern.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute" width="100%" height="100%"
	creationComplete="textReplace()" viewSourceURL="srcview/index.html">
 
	<mx:Style>
		TextArea
		{
			cornerRadius: 5;
		}
		Application
		{
			backgroundColor: #FFFFFF;
		}
	</mx:Style>
 
	<mx:Script>
		<![CDATA[
 
			public function textReplace():void
			{
				var regReplacePattern:RegExp = new RegExp(replacePattern.text);
				replaceResult.htmlText = textToReplace.text.replace(regReplacePattern, replaceText.text);
			}
 
		]]>
	</mx:Script>
 
	<mx:Form x="0" y="0" width="100%" height="100%">
		<mx:FormHeading label="Flex Regex Replace"/>
		<mx:FormItem label="Text to replace">
			<mx:TextArea id="textToReplace" text="Flip-Flop" change="textReplace()"/>
		</mx:FormItem>
		<mx:FormItem label="Regex Replace pattern">
			<mx:TextArea id="replacePattern" text="(\w+)-(\w+)" change="textReplace()"/>
		</mx:FormItem>
		<mx:FormItem label="Regex Text to replace with">
			<mx:TextArea id="replaceText" text="$2-$1" change="textReplace()"/>
		</mx:FormItem>
		<mx:FormItem label="Replace result">
			<mx:Text id="replaceResult" text="Text"/>
		</mx:FormItem>
	</mx:Form>
 
</mx:Application>

Example: dm_regex_replace.swf
Flex Project: dm_regex_replace.zip

In the process of building my own Flex-based chat application, I’m creating tidbits of code for testing purposes. In this particular case, I wanted a small app to test regex (regular expression) capabilities. There are numerous online regex search applications, yet they’re mostly written for PHP and Perl and I wasn’t quite sure if Flash handled them the same way.

This small app can be used online to test Flash’s regex search capabilities. I’ll likely post a similar article on the replace function, as it’s equally handy in my own developments.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute" width="100%" height="100%"
	creationComplete="textSearch()" viewSourceURL="srcview/index.html">
 
	<mx:Style>
		TextArea
		{
			cornerRadius: 5;
		}
		Application
		{
			backgroundColor: #FFFFFF;
		}
	</mx:Style>
 
	<mx:Script>
		<![CDATA[
 
			public function textSearch():void
			{
				searchResult.text = textToSearch.text.search(searchPattern.text).toString();
			}
 
		]]>
	</mx:Script>
 
	<mx:Form x="0" y="0" width="100%" height="100%">
		<mx:FormHeading label="Flex Regex Search"/>
		<mx:FormItem label="Text to search">
			<mx:TextArea id="textToSearch" text="Hello world!" change="textSearch()"/>
		</mx:FormItem>
		<mx:FormItem label="Search pattern">
			<mx:TextArea id="searchPattern" text="world!" change="textSearch()"/>
		</mx:FormItem>
		<mx:FormItem label="Search result">
			<mx:Text id="searchResult" text="Text"/>
		</mx:FormItem>
	</mx:Form>
 
</mx:Application>

Example: dm_regex_search.swf
Flex Project: dm_regex_search.zip

In trying to find ideas for simple Flex projects that might make learning Flex a bit easier for beginners, I came across a web site that handles word counting and thought that would be a great beginner project. It turned out to be far easier than I’d initially anticipated, though admittedly, since it uses a regular expression, it’s not the easiest for a beginner to fully grasp. However, the regular expression used will hopefully illustrate the power of regular expressions and how useful they can be in Flex projects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute" viewSourceURL="srcview/index.html">
 
	<mx:Style>
		TextArea
		{
			cornerRadius: 5;
		}
		Application
		{
			backgroundColor: #FFFFFF;
		}
	</mx:Style>
 
	<mx:Script>
		<![CDATA[
			public function wordCount():void
			{
				if (countText.text == "")
				{
					//if there is not text, we'll set the total to 0
					totalWords.text = "0";
				}
				else
				{
					//to count the words, we'll split the string
					//into an array and get the length of that array
					var array:Array = countText.text.split(/\w+/);
					var total:int = array.length - 1;
					totalWords.text = total.toString();
				}
			}
		]]>
	</mx:Script>
 
	<mx:Form width="100%" height="100%">
		<mx:FormItem label="Text to Count">
			<mx:TextArea width="400" height="200"
				change="wordCount()" id="countText"/>
		</mx:FormItem>
		<mx:FormItem label="Total Words">
			<mx:Label id="totalWords" text="0"/>
		</mx:FormItem>
	</mx:Form>
 
</mx:Application>

Example: dm_word_counter.swf
Flex Project: dm_word_counter.zip

I was looking to keep a particular file’s size at a bare minimum, yet I needed to be able to utilize alpha values on text and it was my understanding, before having read a couple of posts on some Actionscript forums, that in order to use alpha values on text, the font used for that text must be embedded in the swf.

The corresponding Actionscript forums dealt, of course, with Actionscript and not Flex. So, I wanted to see, first off, if the same method would work in Flex as in Actionscript. Second, I wanted to create a sample so that anyone could actually see it done and have the relevant mxml file to work with.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()" viewSourceURL="srcview/index.html">
 
	<mx:Style>
		TextArea
		{
			cornerRadius: 5;
		}
		Application
		{
			backgroundColor: #FFFFFF;
		}
	</mx:Style>
 
	<mx:Script>
		<![CDATA[
 
            public function init():void {
                mainPanel.blendMode = BlendMode.LAYER;
            }
 
		]]>
	</mx:Script>
 
	<mx:Panel id="mainPanel" x="10" y="10" width="363" height="310"
		layout="absolute" title="Text with alpha without embedding font">
		<mx:Label x="10" y="10"
			text="This Label has an alpha value of .25" alpha=".25"/>
		<mx:Text x="15" y="67" text="This Text field has an alpha value of .5"
			width="195" height="66" alpha=".5"/>
		<mx:TextArea x="10" y="141"
			text="This Text Area has an alpha value of .75" alpha=".75"/>
	</mx:Panel>
 
</mx:Application>

Notice the line in the init() function “mainPanel.blendMode = BlendMode.LAYER;”. This line is what enables the alpha values on the whatever text components are added as children to that mainPanel without having to embed the font. That single line is all that is required.

Example: dm_alpha_test.swf
Flex Project: dm_alpha_text.zip

Search
Categories
Archives

You are currently browsing the archives for the Examples category.