Archive for December, 2008
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
In working toward a simple, Flex-based CMS, I wanted to be able to load external html content without having to write numerous URLRequests in the main Flex project file, so I decided to just extend the TextArea component with a method for loading an external file.
Flex doesn’t handle html very well at all at this point, yet there are numerous ways to extend its capabilities and many others have already done just that. For sake of simplicity, I kept the functionality as it is and basically, whatever the Flex RichTextEditor component can output, this extendedTextArea can accept as input.
<?xml version="1.0" encoding="utf-8"?> <mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ [Inspectable(defaultValue="")] private var _url:String = ""; public function set url (requestedURL:String):void { urlLoad(requestedURL); } public function get url ():String { return _url; } private function urlLoad(requestedURL:String):void { var request:URLRequest = new URLRequest(requestedURL); var loader:URLLoader = new URLLoader(); loader.load(request); loader.addEventListener(Event.COMPLETE, onComplete); } private function onComplete(event:Event):void { var loader:URLLoader = URLLoader(event.target); //replace linefeed characters since Flex displays them otherwise this.htmlText = loader.data.toString().replace(/\r|\n/gm,""); } ]]> </mx:Script> </mx:TextArea>
And here we have an example application of the above externalTextArea which loads a simple index.html file located in the same directory as the swf.
TextArea
{
cornerRadius: 5;
}
Application
{
backgroundColor: #FFFFFF;
}Example: dm_external_TextArea.swf
Flex Project: dm_external_TextArea.zip