Enhancing the Blog Reader Example.

In the Live docs you might have read about Retrieve and Display Data. Here I’ve enhanced the same MXML by the following

  • The LinkButton hidden until the datagrid change event is fired.
  • Enabled the Data Tips for ‘Posts’ column to show tool tips text on roll over.
  • Made it a scalable layout by using constraint-based layout.

Here is the MXML code, I’ve highlighted the changes by bold, compare it with the original, compile and see for your self

<?xml version="1.0" encoding="UTF-8"?>
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()" <strong>minHeight</strong><strong>="360"</strong> <strong>minWidth</strong><strong>="500"</strong>&gt;
 &lt;mx:HTTPService id="feedRequest" url="http://weblogs.macromedia.com/mchotin/index.xml" useProxy="false"/&gt;
 &lt;mx:Pane<strong>l left="10"</strong> <strong>top</strong><strong>="10"</strong> <strong>bottom</strong><strong>="10"</strong> <strong>right</strong><strong>="1</strong>0" layout="absolute" title="<strong>BlogReader (</strong>{feedRequest.lastResult.rss.channel.title}<strong>)</strong>"&gt;
  &lt;mx:DataGrid id="dgPosts" <strong>left</strong><strong>="20"</strong> <strong>right</strong><strong>="20"</strong> <strong>top</strong><strong>="20"</strong> <strong>bottom</strong><strong>="12</strong>5" dataProvider="{feedRequest.lastResult.rss.channel.item}<strong>"</strong> <strong>change</strong><strong>="openLinkButton.visible=tru</strong>e"&gt;
   &lt;mx:columns&gt;
    &lt;mx:DataGridColumn headerText="Posts" dataField="title<strong>"</strong> <strong>showDataTips</strong><strong>="tru</strong>e"/&gt;
    &lt;mx:DataGridColumn headerText="Date" dataField="pubDate"/&gt;
   &lt;/mx:columns&gt;
  &lt;/mx:DataGrid&gt;
  &lt;mx:TextArea left="20" right="20" bottom="46" height="75" htmlText="{dgPosts.selectedItem.description}"/&gt;
  &lt;mx:LinkButto<strong>n id="openLinkButto</strong>n" right="20" bottom="20" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));<strong>"</strong> <strong>visible</strong><strong>="fals</strong>e"/&gt;
 &lt;/mx:Panel&gt;
&lt;/mx:Application&gt;

Leave a Reply