Posts Tagged ‘level:beginner’
There are quite a lot of Flex RSS feed examples out there already, but the format I’m using for my examples here would have made things easier for me to grasp earlier on, so I offer this example in case anyone else out there might likewise have an easier time with this format. This example reads in and displays the RSS feed from my WordPress-based Flex blog here. Any WordPress blog could easily be replaced in this example by changing the address of the httpRSS url and any xml-based RSS feed could be as easily parsed so long as the feed’s tags are set properly.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="httpRSS.send()" viewSourceURL="srcview/index.html"> <mx:HTTPService id="httpRSS" url="http://www.dmallonee.com/flex/rss/"/> <mx:Panel layout="absolute" left="10" top="10" bottom="10" right="10" title="RSS Example"> <mx:VBox width="100%" horizontalAlign="left" creationCompleteEffect="Fade" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Repeater width="100%" id="rssItems" dataProvider="{httpRSS.lastResult.rss.channel.item}"> <mx:Label text="{rssItems.currentItem.title}" fontWeight="bold" paddingLeft="6" paddingRight="6"/> <mx:LinkButton width="100%" textAlign="left" label="{rssItems.currentItem.link}" fontWeight="normal" textDecoration="underline" click="navigateToURL(new URLRequest(event.currentTarget.label.toString()))"/> <mx:TextArea editable="false" paddingLeft="6" paddingRight="6" width="100%" height="50" borderStyle="none" htmlText="{rssItems.currentItem.description}"/> </mx:Repeater> </mx:VBox> </mx:Panel> </mx:Application>
Example: dm_simple_rss.swf
Flex Project: dm_simple_rss.zip
It wasn’t long into my Flex adventures that I’d discovered the blendMode property of UIComponents and became unspeakably delighted, as blend modes were a key feature lacking in the Juce SDK I’d previously worked with. To my dismay, it took a while before I became sufficiently accustomed with the Flex SDK that I could see the blend modes in action.
As it stands, I finally recently found a blog post on Flex blend modes by Andrew Trice, yet it’s still a bit more complicated an example than I would have felt comfortable with in my initial Flex endeavors. I think beginners might find this one a bit easier to chew on and regardless, there can never be too many examples when one is trying to learn something new.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="640" height="400" viewSourceURL="srcview/index.html"> <mx:Image width="100%" height="100%" source="dm_blendmode.jpg" mouseFocusEnabled="false" mouseEnabled="false" mouseChildren="false"/> <mx:HSlider id="alphaSelection" minimum="0" maximum="1" x="298" y="246" liveDragging="true"/> <mx:ComboBox selectedIndex="10" id="blendModeSelection" change="gradient.blendMode=blendModeSelection.selectedLabel" x="298" y="272"> <mx:ArrayCollection> <mx:String>add</mx:String> <mx:String>alpha</mx:String> <mx:String>darken</mx:String> <mx:String>difference</mx:String> <mx:String>erase</mx:String> <mx:String>hardlight</mx:String> <mx:String>invert</mx:String> <mx:String>layer</mx:String> <mx:String>lighten</mx:String> <mx:String>multiply</mx:String> <mx:String>normal</mx:String> <mx:String>overlay</mx:String> <mx:String>screen</mx:String> <mx:String>subtract</mx:String> </mx:ArrayCollection> </mx:ComboBox> <mx:TextArea width="276" height="107" x="182" y="131"> <mx:text>There is white-black gradient layer above all of these lower graphic layers. The alpha and blendMode widgets below control the respective alpha and blendMode properties of that layer and adjusting them will illustrate the effects of the blendModes.</mx:text> </mx:TextArea> <mx:Label x="254" y="250" text="alpha"/> <mx:Label x="224" y="276" text="blendMode"/> <mx:Image width="100%" height="100%" source="dm_blendmode_gradient.jpg" alpha="{alphaSelection.value}" blendMode="multiply" mouseFocusEnabled="false" mouseEnabled="false" mouseChildren="false" id="gradient"/> </mx:Application>
Example: dm_blendmode.swf
Flex Project: dm_blendmode.zip
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