The Last Two Months of Flex, A Wrap Up

I have been very satisfied with my experiences using Flex. There were some quirks and intricacies that were difficult and time consuming to overcome but I have yet to learn a language or program that has not presented some surprises. As a freelance web developer I can already see my billing rate climb as I add Flex development to my offerings to clients. This more graphically rich style of application is better suited for the small to medium sized applications I will be developing for a broad array of companies and organizations that all have different needs, but share the desire to keep their professional image. Silverlight will take some of Flash and Flex's market share but that will only encourage the developers at Adobe to create a more full-featured competitive product for the market.

Adobe Flex, an Introduction

Adobe is a big player in the web-based technologies that have experienced rapid change and use over the last few years. As the number of internet users has increased along with the demand of more information and services to be delivered online the traditional or Web 1.0 version of the internet is having a hard time keeping up. The speeds of the average user's connection is increasing and Web 2.0 or Rich Internet Applications have been developed to fill the need of delivering lots of content to internet users in a highly interactive fashion. Adobe Flex is Adobe's answer to the demands of Web 2.0 applications.

A Flex application runs in the already ubiquitous Adobe (formally Macromedia) Flash Player. Adobe has made plenty of improvements on their flash player to handle RIAs while still supporting the movie trailer, and other graphically intense and involved traditional flash sites and applications. Some of these enhancements include a history manager to allow the back/forward buttons to integrate natively into the browser, as well as many web services, xml, and other tools for communicating with remote machines.

The Flex framework and code has all been released completely to the open source community although Adobe does sell an Eclipse based IDE to make developing Flex applications a breeze. Also because Flex is a more data-driven application as opposed to Flash's roots as a Graphic Designers tool Adobe has developed a markup language MXML to handle the layout and functionality of the components.

Altogether Flex is a great language for a novice or experienced web developer to develop graphically rich, and highly interactive applications for web users. It is a simple language to learn but it has amazing abilities for those that can spend a little time in exploiting all the potential of this new language.

FlexBook brings forgotten book to life

In 2002 my Uncle Mike Hancock (yes we have the same name) made a cute little book for Mamma's Hands describing the program and featuring the most public figure of the organization the famous Mamma's Hands bus. Unfortunately this little book has not been seen by more than five or ten people because in its do-it-yourself print form it is limited to being seen by one person at a time and was not of sufficient quality to be used very much. When I first came across the book I thought we needed to distribute the book somehow but after dealing with printers a couple of times I did not want to venture into the publishing realm again and attempt to reproduce this physically. So after letting this book sit in my folder for a little over a year I came across the concept of a flash flexbook and the future of the book became alive again.

The flexbook is a pretty popular implementation of flash's 3d potential that can be data-driven and implemented quite easily with flex. What I had to do was scan all of the pages including the front and back cover, trim each page to be the identically sized so that the proportions are preserved, then make and xml document that contained the urls of all the images and then I was ready to insert the flexbook component. The component has a lot of adjustable parameters mostly dealing with style, colors, 3d effects and how much of the page to be sensitive to page flips etc. The implemented copy of this project can be found at http://mh.realwebstrategy.com/flash/third.html Please flip through it and see the sweet story brought to life thanks to the internet and Adobe Flex.

Using 3D display shelf

As mentioned in an earlier post the author of quietlyscheming.com has some pretty cool projects that really highlight the capability of flex that involves 3d elements and multimedia resources. So I implemented the displayshelf that quietlyscheming had posted as an open-source project under the MIT license that I think lets me do whatever I want with it.

So here is the finished part of the project http://mh.realwebstrategy.com/flash/second.html There are a couple of things that need to be worked out but the main features of the project work great. All I needed to do for this to work was create a directory or package called qs (standing for quietly scheming) copy the code for the two required objects, DisplayShelf.as and TiltingPane.as then insert this one line of code into my application.

<ns2:displayshelf borderthickness="10" bordercolor="#2B5482" dataprovider="{mhphotos}" horizontalcenter="0" verticalcenter="0">

The other thing I had to do was create the dataprovider object which was simply an array of image references, I used a static list for now but as I get more into xml I will make the array of references dynamic and thus the entire photo gallery will be dynamic. Another great part of this gallery is that it has implemented a keystroke listener that as you hit the forward and backwards key on your keyboard you will scroll with the photo gallery.

The tweeks that I plan on performing on this project will be to keep the photo gallery inside the content area of the page, I will also add a description of the photo and display it in a cool fashion that maybe pans in with the image or fades in as the image is brought into focus.

Custom Components

Flex like Flash and any other object-oriented language lets you extend objects to create your own custom objects. Flex is a little different than most in that many of the available objects are display objects so your creation can not only be used but it can be seen and interacted with.

On the old Mamma's Hands website the links on the left while they looked like <ul> list items with their fancy bullets they were really just text links with a bullet image placed before them. With Flash you are somewhat confined to a set number of components to use on your site, these components are a lot more full-featured than anything available to the html developer but you have to be a little bit more methodical in your development. In order to make the links the same as they were on the old site I decided to create a custom component that just took the name of the page listed and handled the rest of the formatting for me.

So I initially created an mxml object but then discovered this is really best used for static objects, or predefined components that you will throw in when needed, not components needing a lot of flexibility. So an actionscript 3 class that extended the hbox container was the basis for my little experiement. First I imported the other objects I would be using namely the LinkButton component and the Image component only to find out that flex will add that for you automatically as I added those kinds of objects to the class. Then I added the bullet image, by creating the image component and then setting the source of the image and adding the image as the first item of the hbox. Then to add the actual link I created a LinkButton object, set the label equal to the label I ask for as the class is created, set a couple of style attributes and then add it to the hbox. To wrap up I add some additional style directives to the hbox, I could instead set the styleName to something in particular and set the style properties in a css file. After adding the components and setting the style the object is finished and ready to be added. The code of the class is below, and below that is the code showing how to add this custom component onto my application.

NavLink.as
package mh
{
import mx.containers.HBox;
import mx.controls.LinkButton;
import mx.controls.Image;

public class NavLink extends HBox
{
public function NavLink(label:String):void{
var i:Image = new Image();
i.source = 'old/images/bullet.gif';
this.addChild(i);
var b:LinkButton = new LinkButton();
b.height = 18;
b.width = 172;
b.label = label;
this.addChild(b);
this.setStyle("verticalAlign","middle");
this.setStyle("horizontalGap","0");
this.height = 18;
this.width = 210;
}
}
}

Code to use NavLink in application
import mh.NavLink;
private function init():void{
this.linkBox.addChildAt(new NavLink("Our Begingings"),1);
this.linkBox.addChildAt(new NavLink("Our Board"),2);
this.linkBox.addChildAt(new NavLink("House of Hope"),4);
this.linkBox.addChildAt(new NavLink("Phone Home Program"),5);
this.linkBox.addChildAt(new NavLink("Read Stories"),7);
this.linkBox.addChildAt(new NavLink("Submit a Story"),8);
this.linkBox.addChildAt(new NavLink("Volunteer"),10);
this.linkBox.addChildAt(new NavLink("Contribute"),11);
this.linkBox.addChildAt(new NavLink("Photo Gallery"),13);
this.linkBox.addChildAt(new NavLink("Audio/Video Clips"),14);
this.linkBox.addChildAt(new NavLink("Our Newsletter"),16);
this.linkBox.addChildAt(new NavLink("Upcoming Events"),17);
}

Constraint Based Layouts THE TEST!

Ok, I just started yesterday to layout the template or backbones of the Mamma's Hands website. The current site and design can be found here http://mh.realwebstrategy.com and because I am no graphic designer I kept the graphics in tact mostly. I added a background image and kept everything else intact, even the stretch to fit your screen layout that I prefer for sites that tend to have a lot of content.

Here are the stats:
Old HTML/CSS style

• HTML index page: 75 lines of code, some very long lines
• Supporting css file: 91 lines of code, difficult to manage
• Compatibility: Most new browsers support the styles, some problems and tweaks for ie
• Time in creating code: 10+ hours counting all the revisions for compatibility issues

New Flex style

• Flex MXML file: 46 lines of code, very short lines and easy to read, I did most editing in WYSIWYG mode that made the process very quick and painless
• Custom ActionScript Component 30 lines of code (I will cover this next post)
• Compatibility: Once the user downloads FlashPlayer 9 100% compatibility for 9 and all future versions of flashplayer (even Apollo)
• Time in creating code: 3-4 hours very low considering this is the first flex application I have crated and actually cared about the look.

Obviously I was really impressed by the ease of laying components out on the page, Flex Builder 2 includes lots of useful containers such as vboxes and hboxes (for very-much improved html table layouts). These containers as well as the wealth of styles available for each component and container made this project quick, easy and rewarding.

Here is the completed layout if you want to take a look:
http://mh.realwebstrategy.com/flash/first.html
Here is the original
http://mh.realwebstrategy.com

Drag & Drop

1Drag & Drop functionality is one of the coolest innovations in the Web 2.0 world. Google allows you to customize the layout of your homepage or analytics reports with drag & drop, some advanced ASP.NET ajax projects show similar functionality but I've never seen the code behind and how easy it could be if a language sets out to support it so well as Adobe has done with Flex.

Here's the idea with flex, because all data is contained in some kind of container (a datagrid, tilelist, etc.) the data that is in one container can be easily transported to another with the click and slide of the mouse. All a developer needs to do is set the container to drag enabled and/or drop enabled and all of the sudden you can move around objects from one container to another. These objects could be a picture in one container, a simple name in another, or a detailed list as can be found in a datagrid row. Flex even allows you to write custom event functions to customize the display of the objects in the different containers as well as record the move. For larger projects Flex also allows a dragMultiple variable to be set to true to allow quick organizing or moving of data from one container to another.

While I know Drag & Drop should be used in a limited fashion because it is a little bit heavy on the user interaction required, but in those few uses that added functionality can be a real bonus. I see drag & drop best used in these kinds of scenarios:

• Organizing pictures, or other small data items
• Organizing the order of display of pictures and any other data or display object
• Providing an extremely simple way for people to trash items or mark completed (like a visual to-do list of post it notes)
• Moving items from a stores inventory into shopping carts or wish lists
• Itemizing the separate billing of products and services when someone is splitting the bill
• Adding components onto cars, bikes, or any other custom assembled product
• Dragging clothes onto a digital model to see color/style coordination

I plan on using Drag & Drop functionality in a couple of projects soon, I want people to see that this kind of visual functionality and interaction can be found on more than just desktop apps and operating systems.


A great couple of examples of cool Drag and Drop proof of concept applications can be found on the quietlyscheming.com blog, here they are

Image Sorting Test
Dodgeball Team Roster Organizer
Alphabet Tile Game

Flex 2 Training From the Source

After being left very satisfied with the content and format of the Getting Started with Flex 2 book that came with Flex Builder I was also left wanting for a little more in-depth instruction. So I did a bit of research and because Flex is a young language not many books have been published yet on the topic, but one book that promised to be in a similar format to the first guide was "Adobe Flex 2: Training from the Source"

This book which was normal computer book length of 600 pages walks through the creation of a flex-based online grocery store. The book has tons of great tutorials and real examples and like all my favorite programming books it includes a cd full of all the source used in the examples, as well as start files and complete files for each chapter. While all the chapters were relevant and had to be read to understand completely the final project.

Some of the most interesting chapters for me included:
Ch5 Handling Events & Data structures
Ch6 Using remote XML Data with Controls
Ch8 Using Controls and Repeaters with Data Sets
Ch10 Creating Custom Components with ActionScript 3.0
Ch11 Using DataGrids and ItemRenderers
Ch12 Using Drag and Drop
Ch14 Using Formatters and Validators
Ch15 Using the History Manager
Ch16 Customizing the Look and Feel of a Flex Application
Ch18 Charting Data
Ch20 Pusing Data with Adobe Flex Data Services
Ch22 Creating Transitions and Behaviors
Ch23 Printing From Flex
Ch24 Using Shared Objects (Flash's version of cookies)

I'm almost finished with the book and have practiced every chapter that I thought was super interesting using their code and sometimes adding my own. When I have this project totally finished I will post a link to it on the blog so you can see it in action.

Great Flex Resources

Thanks to the great open-source communities of Flash and other Adobe projects as well as the open-source roots of the Flex Builder IDE there are tons of great resources available for a flex developer in any level of expertise. When I was first getting into Flex I heard about flex charting and wanted to see what all the fuss was about, a simple google search brought me to my favorite flex resource site that I've found so far, quietlyscheming.com

QuietlyScheming.com is a blog that has some pretty impressive examples of the cool things you can do with flex. Some of my favorite examples have included the following:

• Flex charting drilldown example
• Dragtile example
• Flexbook
• Interactive Calendar
• Displayshelf component
  

And thanks to the author releasing all of his source as well as permission to use the code I plan on using a couple of his components in my Flex projects. The cool thing is these examples aren't that difficult to create when you look at his code, Flex and Flash player 9 have amazing libraries especially visual and 3d components that allow you to make some pretty impressive and useful effects. How easy would it be to ask a user instead of labeling their pictures according to categories using the dragtile component and having them visually drag and drop their photos into different categories, this concept is similar to the concept of user interaction that Microsoft is planning with its new product Microsoft Surface.

The other great resources that are available to flex developers include flex.org aka flexcoders.com which is a huge directory of real examples from Harley Davidson, Yahoo, and other large companies as well as a listing of tons of open-source projects and sites for reference such as the flex cookbook which has again open-source solutions to challenging but impressive obstacles.

Overall I have been quite satisfied with the amount of resources available to me online for such a young language, and because the language is so new most everything is actively being developed and updated and written in modern language and usually with good coding conventions.

Flex Getting Started Guide

When I order software I typically try and find a download, inventory at a local store, or some other super quick way of ending up with the software. Unfortunately when I try and get software at the education rate sometimes I have to jump through hoops to prove my eligibility and usually the option of downloading software is not available. So in typical education fashion I ordered Flex Builder 2 after my trial had run out from an online education retailer, I had to wait a couple days but the book Getting Started with Flex 2 was well worth the wait.

I don't like reading books or reference material on my screen so even though Adobe has published some great content for Flex developers I don't see myself using any of it until I get my hands on a printed copy. This little Getting Started guide was much more than installation instructions and license agreement that I usually get with boxed software and actually proved to have tons of great information and workable examples.

Of course the book could not be comprehensive but being just 245 pages as opposed to the typical 600+ pages of the typical computer book I read it in just a few days and felt much better prepared to develop flex applications and pick some good projects and features that I wanted to work on. This book covered 20 topics fairly well and the following topics proved to be the most interesting and useful for me.

Ch4 Buildinga Flex Data Services Application
Ch5 Using Flex Charting Components
Ch9 Retrieve and Display Data
Ch10 Create a Constraint-based layout
Ch11 Use List-based Form Controls
Ch12 Use an Event Listener
Ch13 Use View States and Transitions
Ch17 Debugging an application
Ch18 Use Web Services

This book was very well written and because of its small size it was very quick to get to the point of each topic discussed. I would highly recommend to anyone looking at starting Flex Builder Development to buy the boxed version of the software so that you will have this great introductory and tutorial of a book.

AMFPHP vs WebServices vs FlashVars

1Coming from a PHP background I am used to connecting my applications to databases or other sources to make for a dynamic user experience. Flash has never supported native connections to databases for supposed security reasons, many thought that with the development of Flex adobe would drop this policy and allow this more data-driven language to talk with databases, but these people were all wrong. This is a major disadvantage for Flash and in turn Flex because it adds another step in the process of developing any truly dynamic website.

The workarounds that Flash ahas offered involve its HTTPService object and also some Web Services connectivity options. Using web services is definately more standards compliant, cross-browser and language compatible but it is much more difficult than a simple sql call to an open database connection. A quirky but simple workaround also involves the flashvars way of importing data, a very flash-specific way of doing things it does work as a solution to quickly get remote data into a flash application, actually this is the method that I used to get the listing and picture information onto my example at http://lesliehancock.com/flash35 The data for this project came from http://www.lesliehancock.com/data/listingdata.php?listing_id=123 Which you can see is formatted much like a normal get url string.

When I first was trying to add server-side data into my flex application I did plenty of googleing and found something called AMFPHP, this is a process for accessing remote php objects through flash. The trouble is that AMFPHP hasn't been worked on for 8 or 9 months and that is a long time for an open-source project that is still in beta. Also the AMFPHP model requires you to have identical objects in Actionscript and PHP and to use AMFPHP to handle the interaction, this is obviously a little redundant and after experimenting with this project of lofty ambition I decided to stick with XML and Web Services

The best way to handle the lack of built-in support for database access is to become very handy with web services, or at least creating xml files to some sort of standard. This way the data can be used with a wide variety of applications and can be produced from a wide variety of server-side languages.

Flex Builder 2

A big part of learning any new language is getting familiar with a new IDE or at least customizing an existing IDE to fit your new language needs. Flex is no different, being a brand new language and quite different from anything Adobe had made in the past (somewhat like adding coldfusion and flash together) the IDE for flex had to be new and support functions and features that were brand new also.

Flex Builder 2, is a great language specific IDE, it isn't as universal as Visual Studio or some of the other commercial apps but being built off of the Eclipse platform it is really feature packed and has tons of great flex-specific functionality. Having only used Eclipse with Java a couple of years ago I never really had any good memories, in fact every memory associated with Java is a pretty bad one but now that I see Eclipse put to use in a productive, yet easy to use language I have grown to like it.

As with many IDEs Flex Builder comes in two view modes, Design and Code. The design view also known as WYSIWYG is actually pretty powerful and doesn't create the mess of code that I am used to seeing from frontpage, dreamweaver wysiwyg editors. Because components need to be placed and ordered into layout containers the organization of the different parts of the website is easy to make look good.

One of the best ways that Flex Builder has made the wysiwyg to produce good looking code is the constraint based layout principle that they use. Every item, container and component alike is constrained by a parent of some sort. The largest items are constrained by the root file and then other items are constrained by it, etc. There are a bunch of options to the types of constraints, you can use absolute positioning within the parent, or mimic the proportions of the parent with specific borders and margins defined. The constraint based layout has made the development of decent looking flex applications fairly easy, and any future addition or modification is easier to handle because a change in one part of the application doesn't ever effect a different part of the application, something that can't be said with inferior wysiwyg editors.

Flex builder because it was built on eclipse has built in debugging that allows you to debug your applications at runtime and see the changes in variables and results of functions. All in all the Flex Builder IDE has helped me get good running, good looking applications ready faster than any other IDE I have used in the past.

Below are some screenshots of Flex Builder 2 in the design or WYSIWYG mode:

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;
}

}
}

Flex vs Silverlight

The debate between Flex & Silverlight is getting pretty hot on the web, Silverlight is an entirely new platform for any developer to write to, but it is backed by one of the most experienced and resourceful software companies in the world. Flash, the root of flex has been around for a long time and already has great market penetration of the flash player. I will highlight below some of the main points in the debate that stand out as relevant to me.

Pros for Silverlight:

• Brand New, Doesn't need to support legacy code like the flash player (more lightweight browser plugin)
• Brand New, Any example, book, tutorial, or implementation is written in the current language
• Brand New, Microsoft will help in the marketing hype of silverlight applications
• Microsoft Backed, Will continue to be supported as long as Microsoft is around (forever in software time)
• Built-in data connectivity and relationship to a powerful web language (ASP.NET)

Cons for Silverlight

• Still in Beta, not much as far as examples, resources, books, experts, communities
• More to download/purchase to start developing (SDK, Visual Studio, Expression Studio)
• Almost no user has the plugin already installed or would recognize it (The Microsoft name will help here though)
• Personally I have no experience with the language (Not silverlight's fault :) )
• No publicized plans to do an apollo like implementation (Adobe's desktop version of flash)
• Not an open-source mentality among developers
  

Pros for Flex

• Flash Player is already all over the web
• Easy to use flash components in flex apps
• Great language specific IDE (Flex Builder 2)
• Easy to understand language
• Huge community of impressive open-source tutorials, examples, and apps
• Responsive community of experts
• Adobe is a huge player in the web-based graphics arena
• Apollo base that will allow a flash web app to run like a client side app
  

Cons for Flex

• No built-in server side language support
• Adobe is not as recognized for business applications when compared to Microsoft
• It is a brand new language, not a lot of precedence for business apps running on the flash player

As a note these are criteria that I thought were important to for myself, my work, and my clients and after considering these tradeoffs I went with Flex. I have been very happy with but still plan to tinker with silverlight once it becomes a bit more established.

What I've learned this semester in 532

While hopefully I have learned a lot, from many different areas this semester in this broad topic of a class, one all-encompasing lesson I have learned is that Enterprise Systems are much larger than I had once anticipated, but they are within our reach of understanding. While the specific topics covered were sometimes scattered and seemingly unrelated they all did relate in that large corporations and organizations need complex solutions like we talked about to serve their own and their customer's needs.

One of the best culmination points in class was after we had learned about some of the technologies that large companies used to see the groups that presented on "The architecture of Wikipedia", or of Google where we saw these scaling principles in use by today's technological giants. Because my group was assigned the topic of scaling a PostgreSQL server I was forced to think outside my typical LAMP environment and see the benefits of other products that were built on a different foundation but for similar reasons as the products that I was already using. This research helped me to expand both my knowledge and the selection of services that I could offer to potential clients.

Thanks to Dr Liddle's PHD work and his continued involvement with MDA we did spend considerable time on this concept that I had never been exposed to before. The idea of generating complex platform specific applications from detailed platform independent models sounds like a lofty goal, but compared to other innovations in efficiency today it sounds like a natural step of progress. After learning from both class and independent research about the concepts and actual implementations of MDA the idea does not seem too "pie in the sky" and I have considered building such an application to aid my own professional development.

As I work towards graduation and start my job with Ernst & Young's Business Risk Services group specifically performing internal and external audits on large companies in the Seattle area I'm sure I'll see many of these technologies in use. Coming from the Seattle area and more specifically Bellevue and Redmond where Microsoft has their global headquarters I was indoctrinated with the MS way of doing things, thanks to classes like Enterprise Architecture and others I have developed more of an open mind about the possibilities of technologies and languages. Microsoft will always have a place in the IT infrastructure of corporate America, but their presence is evolving and even shrinking in many companies so a foundation on just Microsoft technologies will not get you as far today as it could ten years ago.

All in all the experience as well as the knowledge gained in this class will better prepare me for both my professional career with Ernst & Young as well as my freelance career as a custom web developer. With people changing careers an average of five or six times before they retire I'm sure I'll have the opportunity to experience, and maybe even develop/design many different information architectures in many different industries. The foundation that I've learned not only in ISYS 532 but in the entire MISM program has prepared me to take those challenges and overcome them successfully.

Amazon Web Services

The services that Amazon is offering to anyone and everyone are pretty incredible. To imagine with a few bucks I could fire up a group of servers on another continent to do processing that I specifically ask it to do when I want it to do the work. Unfortunately I think that Amazon is a bit ahead of its time and that the turkish robot and web services are beyond the scope of most large businesses, but it does give businesses of today the ability to plan around services like this being available in the future.

I could see myself using these services to run batch processes and calculations that are run on an infrequent schedule, that way I don't have to maintain the servers in house or maintain a contract with a provider for a service that I only use occasionally and temporarily.

As far as making money on the site I don't see myself doing little tasks for two to twenty cents apiece and feeling like I had really accomplished anything. These repetitive tasks that appear on the list should be figured out with game based processing or some other kind of way of receiving input as opposed to paying random stratified people for really just wasting their time.

Logging & Messaging

These class periods that covered logging and messaging were very helpful because I have been having a hard time figuring out how to better manage my server logs and handle errors in my applications. It seems the logging on my campus servers aren't working correctly and if I ever want to track down an error I have to enable the displaying of errors temporarily. Displaying errors is not a good thing to do on a production site, but when logging doesn't work it is the only way to figure out what is up.

The only time that I actually used messaging in error logging is when on an application for campus employees where there was the ability for users to guess a specific code and possibly change some nonpersonal reporting information of someone else. When a user alerted me of his malicious discovery I implemented a system that emailed me of the modifying user's information and the details of the attempted modification as well as an email to them telling them that they ought not change that information. This was a little interesting because I was actually catching people in the act and kind of accusing users of inappropriate use of the site which I had never before done.

Ajax

I think we talked about ajax, anyways I love ajax and think that all data intensive interactive websites should be using ajax by now. Anytime I can convince a client to use ajax, or I have the budget for it I do implement ajax and the clients are always satisfied. One example of ajax that I did recently was for a non-profit's auction registration form http://mh.realwebstrategy.com/mammashands.org/index.php?action=register

Of course there are some problems with ajax, most commonly when the user clicks the back arrow to reverse one step but instead finds out they have erased all progress made within the ajax application. This is a frustrating issue and has encouraged me to develop some standards of easy to use inner-application breadcrumbs, as well as saving during the application and breaking the app into non-ajax parts so that the back/forward buttons do work occasionaly. I have read many posts and articles about how to resolve these problems but none have been straight forward enough for someone of my somewhat limited javascript background to handle.

My newest craze in web development comes from the flash class that I took this semester. I was having a hard time grasping the concepts of all of the graphical items and movie clip controls until finally we started coding in actionscript and used classes etc. But the best thing I learned in that class is how to use flex, adobe's new framework for building data rich applications in flash using a markup language MXML similar to Microsoft's XAML. An example of one of my creations is here at http://www.lesliehancock.com/flash it shows a photo gallery and digital/printable flier of real estate properties.

I will continue to develop in flex which is really ajax by nature. This way I can deliver more value to my clients quicker and have the final product not only work flawlessly but look professional and trendy!

Web Services

This assignment was tons of fun, but tons of work. I got out to what I thought was a fast pace and hooked to Dr Liddle's service and returned the content back to another page in about an hour, the difficulty came when I attempted that process in wsdl mode. I helped a classmember out and ended up helping myself in the process. WSDL caching, different versions of PHP SOAP and other issues kept my service from working correctly till almost the deadline. Anyways I finished it up and actually enjoyed the process, and now that I'm moving a lot of my professional development to flash and more particularly flex and I still need to access my data through php web services will be a good technique to accomplish that task



In case I was supposed to blog my assignment instead of email as I did on 2/19 here are the contents of my assignment submission.

Dr. Liddle,

I finally finished my web services assignment. Here is a link to the wsdl http://dev.realwebstrategy.com/532/finalservice.php?wsdl

I also set up a thin client to do what your test client did and accept a cityzip get parameter http://dev.realwebstrategy.com/532/finalclient.php
getWeather($cityzip);
print "

";
print_r($return);
print "

";
?>

Thanks,
Michael Hancock

MDA Part 3

The specific product that I think is most interesting in the MDA arena is Microsoft's software factories. While the Microsoft product is not specifically and MDA tool and actually Microsoft has publicly said that UML and MDA as defined by the Object Management Group are too general their software factories that are based on DSLs or Domain specific languages are very much a portion of the MDA framework. OMG is very ambitious to think that every problem can be produced on any platform with a handful of different modeling languages, that is why Microsoft, one of the if not the largest and most resourceful software development company in the world is backing an initiative that it feels is realistic and will be profitable to us developers. Below are some images describing how Microsoft Plans to implement these software factories using domain specific languages.




One thing to note about microsoft right now is that they have not released any software factories, so even though they are not as ambitious as OMG in their MDA aspirations they are still working on a working implementation of their specific tools. Because of this there is no pricing information available, or even a good idea of when these software factories will be available.

MDA Part 2

I currently run a very small web development business and pick up jobs when I have time and clients, unfortunately I tend to get all my clients at once and end up refusing work that I needed just a few months earlier. I think Model Driven Architecture might be a way that I could work faster, in a more documented fashion, and involve other developers in my work easier. Lately when I have tried to include other developers I have to give them a totally independent piece or I tend to rewrite their code, I would rather be able to give them the specifications and have them create a model that would generate the architecture in the manner that I have configured my MDA tools.

I would not attempt to implement MDA in small odd jobs that I don't anticipate adding to, or getting any additional help on. These sort of jobs I can hammer out in a week or so and usually do not have the lifetime requirements to justify a completely solid, documented foundation. Whenever I do involve multiple people or perceive that my work will be part of a much bigger project I would like the benefits of a well-documented platform independent model like MDA. This way I can easily scale a project, retool a project by modifying just the model and reexecuting the conversion tools to produce the finished project.

This may sound like I'm asking for more trouble than I would be saving but for my purposes I think I would create my own interpreter to take the model and produce the code in the language platform that I am most familiar with. This method would allow me to keep well maintained the product and debug and optimize the application if there are any problems or ever room for improvement. I have already created an code generation engine where I tell a system the specifics about my object and its relation to others and this produces a Business Object Class, a Data Object Class, an admin page to administer the objects in the database as well as a function to be used when this object is referenced as a foreign key. The url to this page is http://wellness.byu.edu/includes/codegen.php (there is a password to keep unauthorized people from writing content) . I have thought about building a tool that uses ajax to tie many objects together and then produce the backend code that is all interrelated and will do this if I continue to receive requests to build larger object-oriented systems.

MDA Part 1

MDA is trademark and sponsored by the Object Management Group and its consortium. OGM also trademarked many other model driven terms so that they could apply their strict standards to anyone adopting any part of their model. As far as I can understand Model Driven Architecture is code generation, (architecture generation) from a model built in one of the many available modeling languages. These models should be platform independent and by using MDA tools can be converted into any number of platform specific models which in turn with another mda tool will produce the actual application architecture defined in the model.

MDA is seen as a solution for many of the problems dealing with constantly changing development languages, platforms for applications to run on, and organizations tied to proprietary products because the learning curve is too high. Now a high level platform independent model is designed which is then translated into any number of platform specific models and then into the application, this enables the application designers to work free from the constraints and specifics of any particular language or platform.

In class we have learned plenty from the OlivaNova Model Execution suite, but there are many other vendors that produce tools, or packages of tools to be used in an MDA environment. Microsoft obviously cannot claim to be platform independent as they consistently refuse to develop on any platform than their own but they do provide tools called software factories that produce software based on a .NET DSL (domain specific language) produced from a platform independent model.

DB Opt

There are two ways to go about query optimization. The first way is to write more efficient queries by avoiding too many joins, not asking for columns or any other data that you don't need and keeping the number of tables down to a minimum. The second way to optimize a query is to help your database to be ready to handle specific often used queries in as fast a manner as possible. During this assignment I will explore both methods of query optimization and hopefully bring some performance gains to this database and the often used queries.

To be able to investigate in depth how to improve the queries used on this database I will select a limited number of queries, a few short and a few complex in order to produced a detailed guide to optimizing those queries. Before any optimization takes place I will benchmark each of my queries so I know exactly how long each query takes to execute and also record the initial states of each query before I make any changes in an attempt to improve query performance. I will also disable the query cache so I know my results are not skewed by MySQL's attempts to speed the query process.

Now that I have taken my few queries, benchmarked their current performance and their initial text I will look for issues that could be keeping those queries from performing like they could. One thing about this particular database is that the only indexes right now are on the primary keys. This is an obvious area for improvement and some of my fixes will involve adding a few indexes on short fields that are referenced in these queries. Simply adding an index onto every field will nullify the optimizing by choosing indexes because the index table will be just as large and slow as the unindexed tables.

One area that causes a lot of problems on poorly built MySQL queries has to do with subqueries. Subqueries actually perform multiple queries inside of a single query which steals processor power and memory space. The best alternative for subqueries is to use a standard join whenever possible, also the MySQL optimization engine can accurately tell what kind of join will best speed the process up so there is no reason to explicitly tell it to do a straight join, or any other kind of join. This database is fairly optimized in this regard, most complicated queries involve joins instead of subqueries but there is a little room for improvement that regard.

Focussing on schema design there are a couple things that should be avoided, bad index choices including multiple indexes take up room and sometimes do more bad than good. Also oftentimes we don't think about the column size when we make it an index, and when we make an index on a char(200) or bigint field we are requiring every entry in the index to be of that size. We should break apart large chunks of data into smaller more manageable, more searchable portions that will optimize our database performance.

The last way that we should optimize a database performance deals with actual server parameter changes and hardware upgrades. Most of these changes will only make a minimal impact on the performance of poorly written queries but these will help give you that extra edge on reducing query times and processor, memory usage.