Macromedia XUL In Action: A Simple Blog Reader In 50 Lines of Code

Hi,

  Christophe Coenraets (Macromedia's Chief XUL
Evangelist) has posted a blog story titled "A simple
blog reader in Flex" that shows of Macromedia XUL (aka
Flex/MXML) in action.

  Christophe writes:

  I had recently been playing with various blog
readers and it gave me the idea to build one using
Flex. So here it is. Of course, it's simple, and only
provides basic features, but it works, it reads RSS
and RDF feeds, the user interface is clean, and it's
only 50 lines of code... It uses the built-in
HTTPService to read the feeds, and a classic
three-pane user interface featuring the standard Tree,
DataGrid, and TextArea components.

   Here is the complete source code:

<?xml version="1.0" encoding="iso-8859-1"?>

<mx:Application width="900" height="600"
xmlns:mx="http://www.macromedia.com/2003/mxml">

    <mx:Style src="main.css"/>

    <mx:Script>
        var selectedBlog;
        var selectedEntry;

        function treeItemSelected(evt) {
            // When a new blog is selected in the
tree, use the HTTPService to get the feed
            var
url=evt.target.selectedItem.attributes.url;
            if (url!=null) {
                selectedBlog=url;
                feed.send();
            }
        }
    </mx:Script>

    <!-- an XML document containing the list of blogs
I read -->
    <mx:XML id="treeModel" src="tree.xml"/>

    <!-- The HTTP Service used to get the feeds  -->
    <mx:HTTPService id="feed" url="{selectedBlog}"/>

    <mx:HBox>
        <!-- The tree displaying blogs organized by
categories -->
        <mx:Tree width="250" heightFlex="1"
change="treeItemSelected(event);">
            {treeModel}
        </mx:Tree>

        <mx:VBox>
            <!-- The blog header -->
            <mx:VBox verticalGap="0"
backgroundColor="#EEF5EE" borderStyle="outset"
widthFlex="1">
                <mx:Label styleName="title">
                   
{feed.result.rss==null?feed.result.RDF.channel.title:feed.result.rss.channel.title}
                </mx:Label>
                <mx:Label>
                   
{feed.result.rss==null?feed.result.RDF.channel.date:feed.result.rss.channel.lastBuildDate}
                </mx:Label>
                <mx:Link
click="getUrl('mailto:'+event.target.label)">
                   
{feed.result.rss==null?feed.result.RDF.channel.link:feed.result.rss.channel.link}
                </mx:Link>
            </mx:VBox>

            <!-- A datagrid displaying the post titles
for the selected blog -->
            <mx:DataGrid widthFlex="1" height="220"
change="selectedEntry=event.target.selectedItem"
               
dataProvider="{feed.result.rss==null?feed.result.RDF.item:feed.result.rss.channel.item}"
               
columnNames="{feed.result.rss==null?['title','date']:['title','pubDate']}"/>

            <!-- The post excerpt -->
            <mx:TextArea id="description"
widthFlex="1" heightFlex="1" html="true"
wordWrap="true" editable="false">
                {selectedEntry.description}
            </mx:TextArea>

            <!-- A link to the article in the original
blog -->
            <mx:Link id="itemLink"
click="getUrl(event.target.label, '_blank')">
                {selectedEntry.link}
            </mx:Link>

        </mx:VBox>

    </mx:HBox>

</mx:Application>


   Full story and screenshot @
http://www.markme.com/cc/archives/003901.cfm

   - Gerald


-------------------------------------------------------
This SF.net email is sponsored by: SF.net Giveback Program.
Does SourceForge.net help you be more productive?  Does it
help you create better code?  SHARE THE LOVE, and help us help
YOU!  Click Here: http://sourceforge.net/donate/