Been Crazy Busy… A Few Updates

Sorry for not posting more recently… I’ve been buried!

I spent the last few days in Colorado, it was beautiful! I was the best man in a wedding there (in Estes Park), you can see some photos from the trip here. CO is a nice place with fantastic scenery and super tasty microbrews. Highly recommended.

While I was there, I got to meet Juan Sanchez, designer at Effective UI, and one of the main contributors to DeGrafa. He mentioned that Scalenine’s skin contest had completed. What a great pile of entries! I can’t wait to see the library grow and serve as the premier resource for Flex Designers on the web. How cool. Even cooler, was the fact that my Coworker, Heather Ford, was one of the winners with her DiscoType Theme! Awesome.

Beyond that, my students are begnining to build some mashups and make some progress learning Flex… Some recent ones they’ve made… GeekVahalla (a tech focused RSS Reader), TweetTally (a Twitter Tag cloud search). Dropped Passes (a sports focused RSS Reader). I hope to continue to post more as they pile up.

Finally, at The Iona Group, we are hard at work on our eLearning development platform, Doctum. We’re gearing up to launch and start talking to people/demoing it at DevLearn08. If you’d like to be made aware when we launch, head on over to DoctumLearning.com to get on our list of contacts. We have a full site launching soon with features, videos etc explanining what makes it different, but for now it’s kind of in a hush hush mode. Needless to say lots of work is going on and the system is shaping up to be pretty amazing, if I do say so myself.

10 Web Design Tools I Can’t Live Without

Everyone has their favorite methods, tricks and tools for completing their work. As a Mac Webdesigner/developer, I thought I’d share my list of indispensable software and resources that I use on virtually every project. I wouldn’t call this list exhaustive as I have left out a couple things like an FTP client (though I do like Transmit) and an SSH client (I simply use OSX’s terminal), but it should give a little insight into how I get things done. I primarily use Firefox as my browser of choice, so some of the tools here are actually add-ons for the browser.

1. A decent text editor. I use BBEdit, though I sometimes use Eclipse/Aptana as well. Say what you want about WYSIWYG editors, they’re easier, they’re getting better, they have a lot more features, etc… I really just haven’t ever liked them. Sure Dreamweaver is much better than it used to be, Coda isn’t bad and Espresso looks pretty promising, but they still seem to get between you and the real markup IMHO. They all seem to let you down with their previews eventually anyway, so what’s the appeal? I haven’t been able to pin that down, and so until then, I edit in a text editor and preview with a browser. Honestly, I have a version of BBEdit that is a little old, so I may eventually shift away from the slightly overpriced standby, but old habits die hard.
2. Omnigraffle is tops in my book for wireframing and process documents. Sitemaps, data design, UI prototypes, etc pretty much always start here for me. I use it for sketches and for client delvierables alike. It’s easy, fast and extensible. I love it.  To enhance the already great app, head to Graffletopia.
3. Photoshop is most likely in your toolbox, too. That or Fireworks. I use the save for web for all my images feature now that Imageready is no more.
4. Kuler/ColourLovers. I seem to switch back and forth between the two color palette creation sites. Each has their pros and cons. I like Kuler’s flash tool interface a tad better, but ColourLover’s community is just awesome. When I feel creatively stagnated, I often pop over to one of them just to work up some palettes and get inspired.
5. The Web Developer Toolbar. If you don’t have this installed on your Firefox installation you are simply wasting too much time debugging and validating your markup and CSS. With the built in guides, grid and rulers, the toolbar in many ways seems to obsolete the tools in many of the WYSIWYG editors out there. I could probably write a post on just this tool alone, because each top level menu in the bar is loaded with useful utilities and features.
6. Firebug is a great combo/tag team tool to use with the Developer toolbar. The DOM inspector, HTTP request logger and header inspector along with the great inline CSS and HTML editing tools just make this another have to have editor tool for your browser.
7. Colorzilla is another handy little add-on that puts a eyedropper tool in your browser’s status bar. Sample the color of any pixel in your viewport, use the zoom to get nice and precise and then copy the hex color to your clipboard to use in an editor or your image editing program. Saves a lot of back and forth between Photoshop and the editor for me.
8. VMWare Fusion/Windows. Yes, we live in a windows dominated world. So, for my cross platform testing, I have to have a Windows partition with IE6, 7 and Firefox installed. I use IE Developer toolbars over there and also have used IE Watch in the past to track HTTP requests in the browser that everyone detests. I’m hoping we can drop support for IE6 soon, but I’m not holding my breath.
9. Pngbehavior/Pngfix. I can’t wait to not need this. But, until IE6 is no longer in my list of browsers to test against, I am going to need to be able to use one of these methods to get PNGs to render as transparent images in this aged browser. I was thinking about not including this in my list, but again, I don’t think I have produced a site in the last several years that didn’t need this.
10. My Delicious bookmarks. With nearly 800 web design focused bookmarks and no filler, this resource is one I use to solve quirky rendering problems and find inspiration or tips first. It’s like a mini Google of web design tricks, but all tagged by yours truly. Now, I can’t guarantee the answer to everything web is in there, but more than likely there is something I have saved in my account that you can use.

So, there you have it. My must haves. What have I missed? What can’t you live without in the W3C sea? I’m interested in learning more, so as always, let me know what you are using to create your work.

Wish I had been there: Flash on the Beach ‘08.

For those of my friends and colleagues who may not follow the Flash design/development topic area as much as I do, Flash on the Beach was last week. A well put together conference in Brighton, this one always seems to shine as a highlight in the conference schedule for a lot of designers. I have not made it to one yet. Alas. This year’s schedule had many of the very best and brightest designers on the speaker list, with a lot of them publishing their notes and slides on their respective sites. Some great content there for those of us who couldn’t make the trip.

Erik Natzke, Peter Elst, Aral Balkan, Keith Peters, Grant Skinner, the list goes on and on. Reading the recaps, including a statement by the conference’s organizer, John Davey, it seems as though one presentation stands out in it’s audacity, poignancy and message enough to really raise some hackles, eyebrows and maybe even a shaking fist or two. Jonathan Harris, designer of We Feel Fine as well as a few other online art pieces, had the last session of the show. Sounds like it was a doozy. Take a look at this shot:

In short, it seems as though Jonathan characterized the bulk of the work in digital art as being “tinkering” or “experiments”. It did not make many of the attendees happy, understandably so. Here is a bit of an outsider, crashing the party with some disheartening words to close a great conference attended by some of the most talented Flash using designers around. I would agree that many of the things I see out there are just that, too… however, the notion that something has to be heavy on message or ideology in order to be important or able to be fully enjoyed seems a bit pretentious to me. Much has been written on the topic, with an excellent post at Peter Elst’s blog featuring comments written by many of the aforementioned Flash talent as well as Jonathan himself. I’ll mention that you really should go check that out, as much of it is very thought provoking.

I have had conversations with a few people in the last several years that result in the same sort of conclusion for me when discussing heady topics like this. Why overanalyze what makes you happy with the work you produce? Sure, self progress and pushing a medium or message are certainly good things to aspire to, but they are not the only things that determine success in your work. We Feel Fine is cool, but is it any better than Joshua Davis’ fine compositions and now equally amazing textile work? How about Natzke’s brilliant stuff? Robert Hodgin’s amazing Processing sketches? A particularly well done Flash game or interactive museum installation? Will any of it have lasting appeal in 25 years+? Well, I think that if anyone asked that before they produced the work, would they even start it?

Probably not nearly as often, and that would be a shame. So with that, please continue your tinkering. I know I am.

A little tip… making a centered experience site. Noscale FTW!

Ah, those pesky placement parameters and CSS attributes that make the perfect publish for a Flash movie an elusive thing. You know the deal. You want an experience site look and feel. Lots of Flash, centered on screen. You don’t want the art to get distorted. You don’t want the art scaling up and filling the window looking childish or crappy. You want the art to stay centered on screen, vertically and horizontally. This isn’t quite as easy as it sounds.

We at the Iona Group recently put up a simple splash page/stealth screen/signup form at doctumlearning.com. Go check it out, and if you are interested in eLearning development, sign up, or contact me… Anyway… It’s a simple Flash movie. Smallish dimensions, and we wanted it to stay that way. So how do we put it in a webpage so it can appear to stretch and span the screen? Here you go…

Placed it on stage with a NOSCALE value for the scale parameter. Beyond that… We set the height and width to a percentage rather than an absolute pixel value. Now, set the “salign” paramter to “lt” to anchor the movie to the left and top of the browser window. After the HTML is ready, it’s time to get the CSS ready…

Here it is:

html, body{
   height:100%;
}

We set the html and body to 100%. That’s it. HTML and CSS in place, then it’s time to get the Flash ready. It may vary a little depending on the look you are going for, but here are the basics… Create your art. Animation, etc. Put all of it in one container movieclip. Mine is called “art”… Here is what the Actionscript looks like to keep it centered on the stage.

//import the needed classses
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
 
// double check and set the align paramters. just being overly safe.
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
 
//turn off the arts visibility
art.visible = false;
 
//add the listeners for the activitation and resize of the stage.
stage.addEventListener(Event.ACTIVATE, activateHandler);
stage.addEventListener(Event.RESIZE, resizeHandler);
 
// on activate, turn on the art's visiblity and set the position in the center of the stage size.
function activateHandler(event:Event):void {
  art.x = stage.stageWidth/2;
  art.y = stage.stageHeight/2;
  art.visible = true;
}
 
// on resize, turn on the art's visiblity and set the position in the center of the stage size.
function resizeHandler(event:Event):void {
   art.x = stage.stageWidth/2;
   art.y = stage.stageHeight/2;
}

That’s it. Hope this helps you. Know any other cool tips on how to position or scale Flash content in the browser? Let me know.

From Digg: Jack Cafferty Tells Us How He Really Feels About Sarah Palin

Jack Cafferty on CNN, September 26, 2008. Discussing Gov. Palin’s qualification or lack thereof of becoming VP. Holy Wow. Just wow. Wow.

read more | digg story

How To: Build a Simple RSS Reader with JQuery

This one’s from my Mashups class. The first project, was to build an RSS Reader. I’ve already posted a quick tutorial on how to build an RSS reader with Adobe Flex. Here’s a simple one that uses JQuery to get the feeds and then loop through them to output them to the browser window. Piece of cake for many of you, yes, but if you have never used anything but the DOM and plain ol’ JavaScript, you may be scared by the whole AJAX fad on teh intarwebs these days. JQuery makes it super easy to look like a Javascript rockstar. I teach a lot of students that haven’t ever touched a library of code like JQuery before, so tutorials like this are pretty valuable to some readers..

First, create an XHTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
</head>
<body>
</body>
</html>

Then, download my favorite JavaScript API, JQuery.

Link the JS file in by adding this tag in the head:

<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>

Once we have JQuery linked in, it’s time to write some HTML… I created a couple <div> elements to act as wrappers/containers for the page’s content. I used an <img> to put a nice graphic header in the page, then added some semantic XHTML elements, an <h1> for the text header, a <form> tag to hold a <select> menu populated with a few of my favorite Flash blogs as the <option> elements setting their URLs as the value attributes for those, and of course a <label> to let everyone know they should “Select a Feed” via that menu. After the tags are closed, I put one more div after the form to contain the feed results after they are retrieved. I add id attributes liberally throughout the tags, as I may need to style them or use them in my JQuery reader soon, *hint* *hint*.

If you’re following along, your code probably looks something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>RSS Reader</title>
	<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>
</head>
<body>
<div id="container">
<a href="visualrinse.com"><img src="http://visualrinse.com/wp-content/themes/smooth-dirt-10/header_08v2.jpg" alt="Visualrinse" title="Visualrinse.com" /></a>
<div id="ui">
<h1>Flash Feed Reader</h1>
<form id="selectParser" action="">
<label>Select a feed:</label>
<select id="diffFeeds">
	<option value="">Select</option>
	<option value="http://feeds.feedburner.com/aralbalkan">Aral Balkan</option>
	<option value="http://www.bit-101.com/blog/?feed=rss2">Bit-101</option>
	<option value="http://feeds.feedburner.com/peterelst/">Peter Elst</option>
	<option value="http://www.gskinner.com/blog/index.xml">Grant Skinner</option>
	<option value="http://blog.andre-michelle.com/feed/">Andre Michelle</option>
	<option value="http://feeds.feedburner.com/flashmagazine/rss2">Flash Magazine</option>
	<option value="http://casario.blogs.com/mmworld/rss.xml">Marco Casario</option>
	<option value="http://www.sephiroth.it/weblog/index.xml">Sephiroth</option>
	<option value="http://www.quasimondo.com/index.xml">Quasimondo</option>
	<option value="http://feeds.feedburner.com/sebleedelisle">Seb Lee-Delisle</option>
	<option value="http://osflash.org/feed.php">OS Flash</option>
</select>
</form>
</div>
<div id="feedContent">
	&nbsp;
</div>
</div>
</body>
</html>

Cool… So, time to add the interactivity. We’re going to add a script tag to the head area and begin writing a Javascript function. I called mine “get_rss_feeds()”. The basic idea behind the function is to use the JQuery api’s “get()” function to grab the URL of the selected item from feedList (the name of our select menu, remember?), then run through each item in the RSS feed, putting those tasty XML elements from the feed like title, pubdate and description into HTML and popping them on the page. Between runs, we’ll need a way to clear out the div containing the content, so each time a new feed loads, the old content is removed.

So to do this, let’s put the following code in the Javascript block:

function get_rss_feed() {
	//clear the content in the div for the next feed.
	$("#feedContent").empty();
 
	//use the JQuery get to grab the URL from the selected item, put the results in to an argument for parsing in the inline function called when the feed retrieval is complete
	$.get($('#diffFeeds').val(), function(d) {
 
		//find each 'item' in the file and parse it
		$(d).find('item').each(function() {
 
			//name the current found item this for this particular loop run
			var $item = $(this);
			// grab the post title
			var title = $item.find('title').text();
			// grab the post's URL
			var link = $item.find('link').text();
			// next, the description
			var description = $item.find('description').text();
			//don't forget the pubdate
			var pubDate = $item.find('pubDate').text();
 
			// now create a var 'html' to store the markup we're using to output the feed to the browser window
			var html = "<div class=\"entry\"><h2 class=\"postTitle\">" + title + "<\/h2>";
			html += "<em class=\"date\">" + pubDate + "</em>";
			html += "<p class=\"description\">" + description + "</p>";
			html += "<a href=\"" + link + "\" target=\"_blank\">Read More >><\/a><\/div>";
 
			//put that feed content on the screen!
			$('#feedContent').append($(html));
		});
	});
 
};

Now, besure to add the get_rss_feed function call to the feedList’s onchange event and you are good to go. With a catch, of course. This will only work when accessed locally via the “file://” protocol. IN order to use this online, you’ll need to circumvent the browser security sandbox and use a middleware proxy to grab the XML and make it local. Here’s the PHP:

<?php
	// PHP Proxy
	// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
	// Author: Paulo Fierro
	// January 29, 2006
	// usage: proxy.php?url=http://mysite.com/myxml.xml
 
	$session = curl_init($_GET['url']); 	               // Open the Curl session
	curl_setopt($session, CURLOPT_HEADER, false); 	       // Don't return HTTP headers
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
	$xml = curl_exec($session); 	                       // Make the call
	header("Content-Type: text/xml"); 	               // Set the content type appropriately
	echo $xml; 	      // Spit out the xml
	curl_close($session); // And close the session
?>

Slick, eh? To use it, simply prepend the proxy’s URL used in the $.get call, like this:

$.get('proxy.php?url='+$('#diffFeeds').val(), function(d) {

So, there you go. Add some CSS in there and it’s all stylish. You can the feed reader in effect here.

Hope you enjoyed this.

Bailout, My 2¢ – Out of 0 Billion

Looks like America might be the newest big startup out there… Check this out:

Now with twice as many bailouts and 100x as many global economic repercussions. Seriously, hearing this clause sends shivers up my spine:

Decisions by the Secretary pursuant to the authority of this Act are non-reviewable and committed to agency discretion, and may not be reviewed by any court of law or any administrative agency.

Are you freaking kidding me? Really? Really? No oversight? No review? No obligation to inform anyone? I’m not sure about you, but this makes me think being in Guantanamo might be preferable to being a taxpayer.

I promise this will be my only post on this subject. Please, if this frightens and angers you as much as it does me, contact your congressmen immediately. I have.

Social Media and Presentation RIA Updated: Presentation Viewer 2.0

About a year ago The Iona Group created a presentation viewer tool for the International Mission Board. I wrote a post on the tool and explained some of the key features in it. We were contacted by the client several months after the launch and asked to make some UI updates and some feature additions to the tool. We gladly obliged as the client was great to work with, the work was rewarding and the application is just really really cool. In it’s simplicity, it excels at providing a seamless well put together presentation and has some nice social/sharing features that allow the end users to really stretch the tool.the new codebase is live. Check it out here: http://commissionstories.org/

We owe alot of the success of the tool and the revision process to Flex. Honestly, the maintenance and the agile changes required to make it work would have been unnmanageable if developed without the Flex framework. We also use Degrafa in the app, too, so it really does have some nice things running under the hood, too.

It handles pictures, video, audio, SWFs, and the now defunct Flash Paper. It does Ken Burns effects, smooth dissolves and other types of transitions, too. It can go fullscreen, be embbedded in other peoples siites via the share code and can even be downloaded as an EXE or and Adobe Air app. All in all, a very cool ap and one we are proud to be part of.

How To: Make a Simple RSS Reader with Adobe Flex

A little over a year ago, I converted my then dormant domain, Mediadinosaur.com, into a gossip focused news aggregator (previously, it was a media/celeb focused community and blog). It now captures feeds from a number of high profile celebrity rags (Egostastic, TMZ, E!, WWTD, etc) and lets you get your fan fix in one centralized place. I built it in Flex to highlight the ease of use of the Framework and the power that the HTTPService and E4X gives you in getting and parsing XML. I’m using the site as an exercise for my Mashups and RIAs class as an introduction to developing with Flex and a easing into the concept of reading and using XML feeds and services for students that may have never used either of them. So let’s take a look at how this all comes together.

Here is the site today:

In this post, we’ll look at the site and find out what makes it tick. Here’s a quick overview: The interface is simple, it consists of only a ComboBox, a DataGrid, a TextArea, a couple Labels/Text components and a LinkButton. All of these Controls are placed in an assortment of Layout controls to assist with the overall look and feel. I then create a HTTPService and a couple quick AS3 functions to populate the ComboBox and handle feed results. The initial feedlist comes from a list of RSS feeds in a custom written XML file (which I’ll share in this post, as well), this could also come from an online service like a custom Yahoo pipe or an OPML file if you really wanted to get fancy.

After the basic app is functioning, I import one of Scalenine’s beautiful and easy to use skins, and voilà. A feed reader for local filesystem use is ready. This could be run as a SWF or compiled as an AIR app for desktop use. However, if you want to put it online, you’ll need to use a middleware script to serve as a crossdomain proxy loader (this example is going to use PHP). This is needed to get around Flash player’s security sandbox which prevents you from loading XML files from other domains that lack a crossdomain.xml file.

Let’s examine the basic MXML markup before adding any AS3 or style calls:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" />
	<mx:HTTPService id="mdFeed" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" labelField="name" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

So, in the markup above, we create the visual components mentioned in the paragraph that preceded the source code, and add two HTTPServices, one for the list of all the feeds we are aggregating, and the other for the actual RSS feed data that we will retrieve once the user chooses a feed they want to review.

Here is a glance of the interface in Flex’s IDE:

In order to add the interactivity, we’ll need to supply a list of feeds for the reader to parse, right? Here is the list of sites and the URLs for their RSS feeds in XML:

1
2
3
4
5
6
7
8
9
10
11
12
13

<sites>
	<site name="egotastic.com"	data="http://egotastic.com/feeds/index.xml" />
	<site name="wwtdd.com"	data="http://www.wwtdd.com/?mode=atom" />
	<site name="defamer"	data="http://www.defamer.com/excerpts.xml" />
	<site name="superficial"	data="http://www.thesuperficial.com/index.xml" />
	<site name="idontlikeyouinthatway"	data="http://feeds.feedburner.com/Idontlikeyouinthatwaycom" />
	<site name="people.com"	data="http://www.people.com/people/web/rss" />
	<site name="eonline.com"	data="http://www.eonline.com/everywhere/rss/index.jsp" />
	<site name="tmz.com"	data="http://www.tmz.com/rss.xml" />
	<site name="usweekly.com" data="http://64.90.166.18/atom/feed" />
	<site name="CelebSlam" data="http://www.celebslam.com/feed/" />
	<site name="I Can Haz" data="http://feeds.feedburner.com/ICanHasCheezburger?format=xml" />
</sites>

Now that we have the XML ready, we need to add the MXML to get the feed to the application tag (creationComplete=feedList.send());):

2

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">

Once we have the feedList retreived, we need to do something with it, right? Well, let’s add it to the comboBox, “siteCombo”. Here’s the AS to do it:

[Bindable]
private var sites:ArrayCollection = new ArrayCollection();
 
private function siteListHandler(event:ResultEvent):void{
	sites = event.result.sites.site;
	var siteObj:Object = new Object();
	siteObj.name = "Select"
	siteObj.url = "";
	sites.addItemAt(siteObj,0);
	siteCombo.selectedIndex = 0;
	//trace(event.result);
 }

In that snippet, we created an arrayCollection to store the result. We then add the initial null “Select” option to the comboBox. We also need to add the databinding to the “sites” comboBox, so that it can be populated with the list of sites. Let’s do that now:

8

<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" />

With the sites ComboBox binded (bound?) to the feedList, we need to add the function to handle the change event, so when the user selects a feed, the RSS feed is loaded. Here it is:

public function chooseSiteFeed(url:String, name:String):void{
myURL = url;
mdFeed.send();
}

Now that the mdFeed is triggered, what do we do? Well, it would be a good idea to bind the mdFeed results to the datagrid, right? Then we can see all the posts in the feed:

13

<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">

Now that the datagrid is getting fed with the tasty RSS results, we need to let the user read the description and then click a link to see the full post, right?

19
20
21
22

<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>

That should work… If not, don’t worry, I’m supplying the full MXML source. But first, let’s make sure we can use this little RSS reader on your site. In order to do this, we need to leverage some serverside scripting in order to load the RSS feed via a proxy script. This will let your SWF file make a call to the script, then script handles the external URL call, returning the result as a local XML file for your flash file. Here is what the PHP looks like:

<?php
	// PHP Proxy
	// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
	// Author: Paulo Fierro
	// January 29, 2006
	// usage: proxy.php?url=http://mysite.com/myxml.xml
 
	$session = curl_init($_GET['url']); 	               // Open the Curl session
	curl_setopt($session, CURLOPT_HEADER, false); 	       // Don't return HTTP headers
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
	$xml = curl_exec($session); 	                       // Make the call
	header("Content-Type: text/xml"); 	               // Set the content type appropriately
	echo $xml; 	      // Spit out the xml
	curl_close($session); // And close the session
?>

So, make yourself a proxyURL.php file with that content in it and save it. If you go back and modifiy the mdFeed function to use the proxy script, everything should be in order… Here, in totality, is the app:

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
48
49
50

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:Script>
		import mx.collections.ArrayCollection;
		import mx.rpc.events.ResultEvent;
		import mx.effects.Resize;
 
		[Bindable]
		private var sites:ArrayCollection = new ArrayCollection();
		[Bindable]
		public var myURL:String;
 
		private function siteListHandler(event:ResultEvent):void{
			sites = event.result.sites.site;
			var siteObj:Object = new Object();
			siteObj.name = "Select"
			siteObj.url = "";
			sites.addItemAt(siteObj,0);
			siteCombo.selectedIndex = 0;
		 	//trace(event.result);
		 }
 
		 public function chooseSiteFeed(url:String, name:String):void{
		 	myURL = "proxyURL.php?url=" + url;
       		mdFeed.send();
		 }
 
	</mx:Script>
	<mx:Style source="css/OSX.css" />
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" result="siteListHandler(event)"/>
	<mx:HTTPService id="mdFeed" url="{myURL}" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" change="chooseSiteFeed(ComboBox(event.target).selectedItem.data, ComboBox(event.target).selectedItem.name)" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea htmlText="{mdGrid.selectedItem.description}" right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" click="navigateToURL(new URLRequest(mdGrid.selectedItem.link));" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

IN the code I also loaded the OSX skin from Scalenine. So there you have it. Pretty easy, really, though I understand I may not have explained it all as well as possible. It’s just easier when you are actually going through things in front of a lab or class. If you have questions on how it all works, feel free to drop me a line. You can download the source, here.

Design Resources for RIA Developers

In my presentation last week at CD2, I mentioned I would provide a list of the resources I recommend using as reference in designing application interfaces. I thought I might get a chance to blog that list this past weekend, but I was a tad busy, designing interfaces for an RIA, naturally. We at Iona have a great app coming soon that uses CakePHP, AJAX, Flex and a whole lot of experience developing superior elearning solutions in order to create a fantastic RIA. That’s pretty much occupying my time right now, but I needed to get this list together.

That said, when I need to sit down in front of my diagramming tool of choice, OmniGraffle, I like to have some references to tap in order to ensure I am making the right choices. I might not use all of these every time, but I certainly do refer to them once and again. I hope you can find a couple of these useful in your work, too.

1. Designing Interfaces – Jennifer Tidwell: A newer book and one that many may not have in their library yet. This book is currently in use in my Mashups and RIAs class, and I can’t recommend it strongly enough. It is a virtual library of great UI analysis. Pretty much every modern UI pattern in play today is dissected and explained when and why it works. A must have.
2. The Visual Display of Quantitative Information -  Edward Tufte: Not really UI focused, but a necessary academic resource for all UI designers to have read. It’s no nonsense approach to data display and intolerance for bad design will not steer you wrong. A bit heady at times, this beautifully printed book is one you can open and read a little bit at a time and keep for years. The information in here is not going out of style anytime soon. I really got a lot out of reading each of the Tufte books, but this is his hallmark title, IMHO.
3. Information Dashboard Design: The Effective Visual Communication of Data – Stephen Few: Lots of pictures and a short book. This title is all about explaining quick and easy data display. Charts, graphs, widgets, etc. Not heavy on interactions, but a good resource for effective infographics.
4. Design of Everday Things – Donald Norman: This book should have you appreciating the nuances in the design of products you use all of the time. Hopefully some of that thought process will rub off on you when create the GUI you’re about to slave on.
5. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition -Stephen Krug: I’m sure most of you have read this. It’s a very common sense approach to basic ideas behind web usability and may be one of the best known books on the subject. For those of you who haven’t picked it up yet, please do so. It may seem sort of obivious to many advanced designers out there, so if you are very experienced with topics like user testing, etc, you can probably skip this one.
6. The Art and Science of CSS -by Jonathan Snook, Steve Smith, Jina Bolton, Cameron Adams, David Johnson : A simple book, no doubt, but this one has some real nuggets of CSS genius in it in regards to styling tables and form widgets. Some nice subtle effects get pulled off in here, so this one is shared with my students very often. Dates, lists, calendars, all kinds of things that can be really really boring screen elements get a bit of polish here. Nice touches all around.
7. Getting Real – 37 Signals: Not really about graphical user interface design at all, but it should definitely help you make some hard choices in your application’s functional design. Think simple, release early, release often. Build half a product, not a half ass product. On and on. Indespensable.
8. GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers (Interactive Technologies) – Jeff Johnson: This is a tome. Well over 500 pages. This teaches by illustrating major gaffes in UI design. It’s not an overly entertaining book, it’s not meant to be a graphic novel but rather a text book. Many of the apps detailed in here are showing there age, but I believe there is now an updated “2.0″ of this book. I haven’t reviewed that version, though.
9. Human Interface Guidelines – Various: Be it Apple, Sun, IBM, Microsoft or Adobe… all of your favorite dev/design centers have great topics for making informed UI design choices for your audiences. Don’t overlook them just because they are obvious. They get updated often and are pretty much always worth spinning through when starting a new project.
10. Creating Visual Experiences with Flex 3.0 (Developer’s Library) – Juan Sanchez & Andy McIntosh: Not technically available in stores yet, but a great great resource for understanding the powerful design tools in Adobe Flex. I was granted an early copy for review and it was a very satisfying read. RIA design with Flex is as much an art as it is a science, so dig in here. This book is really well laid out and has tons of great images.

So, there you have… some guides I find useful… Of course, I am always looking for new books and sites to add to my collection, so, let me know, what books are you using to help you with app UI design?