Flex Practice

Ok so on to my first Flex experiment. This project was started in my last 590R class that was specifically on Flash but for my final project I dabbled into Flex. Flex was a sweet relief from Flash which can be kind of quirky if you aren't already used to it, and for me as a programmer and not a graphic designer at all the blank canvas that flash gives you to start with is a little bit intimidating. In flex there are tons of graphical components and layouts that make the entire development process including the design a breeze.

For this project I decided to do a real estate photo gallery, a common use of flash and because my Mother is an agent and pays for my work I decided to do a photo gallery, digital & printable flier. The finished project (note: project does not mean I billed the client, I just finished learning at this point and have moved on) is located at http://www.lesliehancock.com/flash

This project involves a couple of things:

• An MXML file, the main file that compiles the flash movie from all supporting files, this is where the main graphics are composed on small apps like this
• Three actionscript objects to handle:
• - Holding all the listing data (Listing.as)
  
• - Holding a specific photo's data (Photo.as)
• - Loading the data from the php page into the listing object (DataLoader.as)

I will post the code to these objects below as well as the MXML file so you can see that Actionscript is a pretty strict full-featured language, and the MXML language is an XML based very easy to read and use language.

One difficult thing with flash is handling the printing of content. There are a bunch of different ways to do it, but for this one I used a change in state which is a pretty cool Flex feature that can change the layout of any and all components with a simple function. So when you click the print button on the second tab it reformats the page to be more ideal for printing (no scrollbars, taller than wide layout, etc.)

realPhoto.mxml

I had to post this on the server as a separate file because blogger kept wanting to embed the xml click here to see the cod: realPhoto.mxml

I could include the script block so that is right here:
import realPhoto.Photo;
import realPhoto.Listing;
import realPhoto.DataLoader;
import mx.controls.Alert;
import mx.printing.FlexPrintJob;
private var realData:DataLoader = new DataLoader();
private var listing:Listing;
private function init():void
{
htService.send();
}
private function ready():void
{
listing = realData.loadData(htService.lastResult);
captionLbl.text = listing.caption;
statusLbl.text = listing.status;
priceLbl.text = listing.price;
cityLbl.text = listing.city;
bedsLbl.text = listing.beds;
bathsLbl.text = listing.baths;
sqftLbl.text = listing.sqft;
lotLbl.text = listing.lotsize;
garageLbl.text = listing.garage;
var photos:Array = listing.photos;
mnImage.source = listing.prefix + photos[1].url;
mnLbl.text = photos[1].title;
var i:int = 0;
var a:Array = new Array();
for each (var photo:Photo in photos)
{
var img:Image = new Image();
img.source = listing.prefix + photo.url;
img.height = 80;
img.width = Math.round(img.height * photo.ratio);
if (i > 0)
{
img.x = (a[i-1].x + a[i-1].width + 5);
}
else{
img.x = 0;
}
img.addEventListener(MouseEvent.CLICK,change);
img.buttonMode = true;
img.toolTip = photo.title;
allPics.addChild(img);
a[i] = img;
i++;
}
}
private function setFlier():void
{
captionLbl0.text = listing.caption;
mlsLbl0.text = listing.mls;
statusLbl0.text = listing.status;
priceLbl0.text = listing.price;
cityLbl0.text = listing.city;
bedsLbl0.text = listing.beds;
bathsLbl0.text = listing.baths;
sqftLbl0.text = listing.sqft;
lotLbl0.text = listing.lotsize;
garageLbl0.text = listing.garage;
descriptionTxt.text = listing.description;
descriptionTxt2.text = listing.description2;
var photos:Array = listing.photos;
var i:int = 0;
var a:Array = new Array();
for each (var photo:Photo in photos)
{
var img:Image = new Image();
img.source = listing.prefix + photo.url;
img.width = 139;
img.height = Math.round(img.width / photo.ratio);
if (i > 0)
{
img.y = (a[i-1].y + a[i-1].height + 5);
}
else{
img.y = 0;
}
img.toolTip = photo.title;
flierPics.addChild(img);
a[i] = img;
i++;
}
}
private function change(evt:Event):void
{
mnImage.source = evt.currentTarget.source;
mnLbl.text = evt.currentTarget.toolTip;
}
private function printTab():void
{
var printjob:PrintJob = new PrintJob();
currentState = "print";
printjob.start();
prntBtn.visible = false;

try{
printjob.addPage(digitTab);
try{
printjob.send();
}
catch(err:Error){

}
}
catch(err:Error){

}
finally{
currentState = "";
prntBtn.visible = true;
}
}

DataLoader.as
package realPhoto
{
import mx.rpc.http.HTTPService;

public class DataLoader
{
public function DataLoader():void
{

}
public function loadData(data:Object):Listing
{
var listing:Listing = new Listing();
var photos:Array = new Array();
listing.mls = data.mls;
listing.address = data.address;
listing.area = data.area;
listing.baths = data.baths;
listing.beds = data.beds;
listing.caption = data.caption;
listing.city = data.city;
listing.description = data.description;
listing.description2 = data.description2;
listing.garage = data.garage;
listing.lotsize = data.lotsize;
listing.status = data.status;
listing.price = data.price;
listing.sqft = data.sqft;
var count:Number = data.num;
var i:int;
for (i = 1; i <= count; i++) { var photo:Photo = new Photo(); photo.url = data["img"+i]; photo.description = data["imgd"+i]; photo.title = data["imgt"+i]; photo.width = data["imgw"+i]; photo.height = data["imgh"+i]; photos[i] = photo; } listing.photos = photos; return listing; } } }

Listing.as
package realPhoto
{
public class Listing
{
public var mls:String;
public var photos:Array;
public var price:String;
public var caption:String;
public var beds:String;
public var baths:String;
public var status:String;
public var area:String;
public var address:String;
public var city:String;
public var school:String;
public var sqft:String;
public var garage:String;
public var description:String;
public var description2:String;
public var lotsize:String;
private var _prefix:String;
public function Listing():void
{

}
public function get prefix():String
{
return "http://www.lesliehancock.com/listings/" + this.mls + "/";
}
}
}

Photo.as
package realPhoto
{
public class Photo
{
public var url:String;
public var title:String;
public var description:String;
public var width:Number;
public var height:Number;
private var _ratio:Number;

public function Photo():void
{

}

public function get ratio():Number
{
return this.width / this.height;
}

}
}