Ted Patrick > { Events & Community } > Adobe Systems

MXML is object oriented. Many do not realize that MXML generates an ActionScript 3 Class at compile-time and thus can be used seamlessly via the "new" constructor. If you want fine grained control of your UI, using MXML class instances can bring another level of fidelity to your applications.



WARNING!!! There is one mistake you can make here that will leave you frustrated. Be careful with naming your MXML components as they generate a similar named ".as" file at compile-time. These generated files are hidden unless you use the "-keep" compiler flag. The error is to use similar names for MXML and AS3 classes. This can lead to a mysterious compiler error and will leave you stuck in the mud!!! You have been warned. :)

Here is a small application that creates 3 MXML class instances using ActionScript and uses the DisplayList API (addChild/removeChild) to swap the UI elements in an out of a panel. The effect is similar to a ViewStack but allows fine grained control over everything including caching the instances at runtime.

Download these two files, compile MXMLViaNew.mxml:

File #1: MXMLViaNew.mxml
File #2: ViewTemplate.mxml

The key here are these lines:

one = new ViewTemplate();
//create an instance of ViewTemplate.MXML via 'new'

one.labelName = "Matt has eaten two Dodgy Prawns!";
//edit the labelName property!

panel.addChild( one );
//add the instance into the panel

See with containers you are really working with the DisplayList in Flash Player 9, Flex simply rides atop all this lower level logic. Once you realize that MXML generates a class and can be used with the "new" contructor, Flex gets 100X more interesting. When I learned this it was a huge breakthrough for me and allowed me to go much deeper into the components and the framework.

I also really like this line of code. It has an elegance that is hard to describe:

if( one ) if( one.parent ) one.parent.removeChild( one );

The line reads like this:

if instance "one" exists and one is attached to the displaylist (has one.parent), remove it through itself ( one.parent.removeChild(one) ).

Pure Ninja AS3 there! HEEEEEE-YAAAAAAAHHHHHH!!!


Dodgy Prawns:
Matt Voerman and I were in Singapore last year for MAX APAC. At dinner in Singapore we has some "Dodgy Prawns" and when Matt asked me for a sample today of MXML via the 'new' constructor, well I integrated the joke. Sorry for the Prawn humor.



cheers,

Ted :)

Zach Graves is one of the best developers I know. He is 19, works for Yahoo, and can code AS3 like few I have ever met. Zach wrote an ActionScript 3 version of the Yahoo! Maps tile engine in 24 hours over Memorial Day weekend.

Here are some facts about the engine:

ActionScript YMaps Engine Example

1. 15,477 bytes! It is an AS3 Project and is very small yet contains a majority of the Yahoo Maps API. At 15K it is smaller than the AJAX API.

2. Zach estimated 8 hours per day from Friday to Sunday, 3 days on this. All tile logic was written from scratch in AS3. Yes you read that correctly, 1 developer, 24 hours, and Flex Builder.

The key is that AS3 with a great developer is a deadly combination. This map engine is fast, handles dragging, zooming, map types (Map, Satellite, Hybrid), and is very small. It is great to see this type of prototyping going on with ActionScript. Better still is that there is lots of loading logic that can be implemented to make this much faster. AS3 has support for stopping and HTTP connection in flash.new.URLStream and with the ability to manipulate the bytes of images in memory, there are blitting optimizations that can be added as well. We are really only starting to see what is possible in Flash Player 9 and ActionScript 3, Zach's productive work over Memorial day weekend is proof of great things to come.

Kudos to Zach for great work! I am impressed.

Cheers,

Ted :)

Mapquest delivered an ActionScript 3 mapping engine for commercial use today. The new services provides a first class mapping engine, geocoding services, and map tile services in ActionScript 3 for use in Flex 2 and Flash CS3.

Mapquest Press Release

Mapquest ActionScript 3 API

Example - Golf Course Finder at OOBgolf

Great work in AS3 by Mapquest!

Cheers,

Ted :)

Google has added "Street View" into Google Maps using Flash Player. The feature allows you to look from any perspective at any location. This ground level view allows you to get visual details about a location. It is fantastic, kudos to the team at Google.

Adobe San Francisco

Henry's Hunan (Best Chinese food in the city!)

Sushi Ran (Best Sushi in SF Area)



This sure explains all Google the trucks driving around.

Cheers,

Ted :)

I will be underwater in Utila, Honduras all next week for those trying to get ahold of me. I will surface Monday May 28 to heaps of email, todos, and MAX planning goodness.



I strongly encourage you to become a certified diver and explore how the other 2/3 of life on this planet lives. Diving will change your perspective and recharge your batteries.

Cheers,

Ted :)

I updated the the Flex Directory and added in the filtering features. The filter has some subtle logic in it in terms of parsing values from the filter line. If you add a number into the filter, it will reduce the listing where there are more developers than the number you type. Type "20" you get all firms that have more than 20 devs. This filter also works against the location so if you type "DC" you will get Cynergy Systems and B-line Express as consulting firms. Additionally I added a binary filter for Adobe Solution Partners, I will be making selections on this UI sticky so that settings are persisted between views of the directory using Local Shared Objects in the next release.

Flex Directory 1.0.2

The filters are not perfect and if you have feedback on this please let me know. I will be showing how this works in a later post.

Also I added in some UI Skinning from ScaleNine. The scrollbars and CheckBox's are skinned using the "DarkRoom" theme. Credits to Juan Sanchez for his killer site!

More to come,

Ted :)

Web usability is very important. When a designer/developer moves key functionality around on an established webpage, users are forced to think and often they get confused. Now one might think that moving the toolbar above the search field to the upper right of Google.com is a minor change but I think it is a big mistake for Google. People do not like change, it is frustration forced into a daily routine. We are all creatures of habit and my habit is reading the news at Google news every morning and evening. When I went to click the "News" link this morning it was gone and even though it was only 4 inches away it threw me off. When that link moved this morning, I was forced to learn a new interface and think. Not that thinking is bad per say but I would rather not be forced into it.



The sad part is that I do not think the change adds much value to Google. They should have duplicated the UI elements or animated them to the new location to educate users. Feature discoverability is becoming ever more crucial in web development as often to move forward we are forced to break the habits of our users. Even though we add new wiz bang stuff the change can anger many users and might not outweigh the benefits of the change. You can brand it search unification but at the end of the day users will complain in mass that you moved my NEWS button. $50 bucks to charity that in 2 months the toolbar is back about the search bar based on user complaints.

It is a clear case of needing Google Classic!

Here are all the older versions of Google's home page if you ever want to go back.

Cheers,

Ted :)

The Flex Directory uses a new technique for delivering Flex RIA via XML/XSL. The base document in the Flex Directory is pure XML with an XSL style sheet, View Source on the directory from the browser. The style sheet located here, writes XHTML/JS to the browser which instantiates a SWF file through SWFObject. This is the next stage of FXT (soon renamed to FXSL) and I snuck it into Flex Directory given cross-browser compatibility.

I like the design because it is easy to update. Presentation and data are 100% separate and the UI can support RIA behavior without munging the data with presentation. Once the SWF file is instantiated it has instant access to the XML data. In the current design there are 2 API calls made to support the forms logic and soon some advanced features.

What is pretty cool is that any type of XML can be handled this way including RSS,ATOM and others.

More to come!

Ted :)

In 24 hours since posting the Flex Directory I have been inundated with new listings from around the globe. Here are the countries represented thus far: Japan, Spain, Canada, United Kingdom, New Zealand, Germany, Australia, Bangladesh, India, Netherlands, Brazil, Iran, Bulgaria, Ukraine, Argentina, South Africa, United States. What is interesting to me is how global Flex is and I know we have just scratched the surface.

Flex Directory

Here are some changes coming later this week in v1.0.2:

1. Real time filtering.
2. Country based sorting.
3. Partner form indicator.
4. Partner level support.

If anyone on the directory has an issue with their listing, I encourage you to email me directly at ted@adobe.com. I will address it immediately.

Regards,

Ted :)

I worked on the Flex Directory this weekend and we had a soft launch on Sunday with a few API problems. I posted a new build of the Flex Directory at directory.onflex.org this morning which addresses the problems. The site is fully functional now and is now correctly processing new listings and referrals.

Flex Directory

The directory has gone live with a trimmed feature set for the initial release. Given the interest in the directory from partners, consulting firms, and projects searching for consultants, it was best to get this out in an early form and build up the listings before adding advanced features. In many ways a simple list covers the 80% use case.

I will now be officially depricating my "Top Flex Firms" list and directing all that traffic to the Flex Directory. Once we get this sufficiently populated with consultanting companies it will graduate to Flex.org.

Regards,

Ted :)

Programming Flex 2.0 is white hot at Amazon. In the Computers & Internet > Programming Category it is in 3rd Place behind Lightroom and my favorite usability book "Don't Make me thing!". Chafic and Joey deserve a ton of credit for this book, it is awesome. Here is a screenshot.



Interesting Adobe has 3 books in the top 5. Hmmmmm....

Cheers,

ted :)

Binary Sockets are so cool, you can connect to any type of TCP/IP server, yes any even FTP! I could not find the developers name (got it! Mali!!!) but Maliboo.pl has posted source for an FTP client in Apollo and client classes in AS3.

Project Source

flash.net.Socket

Great Work Mali!

Ted :)

I sat down with Glenn Ruehle of the Flex SDK team last week and he showed me a demo of some new features in development for the Moxie release of the Flex Component Kit for Flash CS3. This is really killer stuff and the demo blew me away. Half way through Glenn's demo we decided to video tape the demo. Mike Chambers has just posted the video to video.onflex.org for viewing. Hats off the Glenn and the team for working hard to close the gap between Flex and Flash.



Cheers,

Ted :)

Anybody spot a trend? It seems like some very big players are targeting RIA and new tools are arriving by the truckload. RIA - Rich Internet Applications are commanding respect at Microsoft and now Sun with todays announcement of Java FX at Java One. I think is very good news for RIA developers and great news for Flash based technologies.



As the current de-facto standard for building RIA online, Flash and Flex are getting respect from ever larger players in the RIA space. All these new RIA tools and platforms simply validate the 5 year direction at Adobe and Macromedia before it. Anyone remember "Experience Matters" and Broadmoor? Macromedia coined the term RIA in 2002 but a few of us in the Flash world were already hard at work making RIA at the time. I remember building list controls, quicksort, and dataproviders using loadvars and frame calls in Flash 4/5. When Flash 5 hit ActionScript took off like a rocket and it would never be the same. We saw components, events, and new patterns emerge and APIS.

Todays RIA tools are light years ahead of those early days when RIA was invented. With Flex 2.0.1 and soon Flex 3, I can build an RIA in minutes and integrate API's from various servers which is viewable by 86% of the Internet, soon 98%. With Flex and AJAX I can deploy RIA application to the desktop with Apollo delivering seamlessly with a single file to WIN/LINUX/OSX. We sure have come a long way!

It is yet another great day for RIA and for Flash Player!

Go Flash Player, Go Flex! You both are changing the face of software!

So when is Apple announcing their RIA Platform built on Quicktime?

Shame that Sun chose the "FX" moniker but then again we all know who the Original FX is!

Cheers,

Ted :)

The Yahoo Web Messenger team has build an instant messaging client for Yahoo and MSN networks using Flex 2. I had the distinct pleasure of working with the team and teaching them Flex during my regular Thursdays at Yahoo.

YAHOO WEB MESSENGER







Highlights:
Yahoo IM Protocol via Binary Socket --> flash.net.Socket
Nice skinning of the Flex Component set.
Real time Localization to 4 Languages!!!
It just works seamlessly. I logged in and chatted with Abdul Qabiz this AM.

This sure would make for a great Apollo application. Shoot by delivering Web Messenger Yahoo has enabled this app to work on the desktop cross-platform on MAC/WIN/LIN. Deliver using Flex for web RIA and you get desktop application deployment for free.

Also just a quick side note to the Messenger Team:

Set this MXMLC compiler flag to change the SWF default background color to Yahoo Purple. This will avoid the quick flash of the default blue/grey:

-default-background-color #9791CE

Seeing this application go into beta is a very nice birthday present!

Kudos to the Web Messenger Team!!

Yahoo!!!!!

Ted :)

Today it is officially 1 year since I joined Adobe as a Technical Evangelist for Flex. Just 12 months ago I arrived in Newton, MA and met Christophe Coenraets, Jeff Whatcott, Phil Costa, and David Mendels in person. Since then it feels like I have been strapped to a rocket and weeks have flown by in a blur of activity.

So here is my project year in review:

• onflex.org
• FITC
• FDS Training in Newton with Hoyt, Tierney, & Flexperts
• ACDS - Adobe Component Developers Summit
• Flex.org
• Flex Launch
• Developer Week Sessions
• Blink Component for Flex
• Just MXML & AS3 - (Stopgap for Flex Cookbook)
• Flex Preloaders
• FlexComponents Discussion List
• TagTV Mashup
• Mashup University
• FlexTV Started ( overloaded server delayed til 6/07 ;) )
• FXT - Flex Templating
• Yahoo Open Hack Day - 3 Apollo apps in 24 hours (red bull?)
• TagTV Apollo
• Future of Web Apps - Adobe Apollo in 5 Minutes
• AS3 Performance Tuning - MAX
• Linux Flash Player
• Flexifier
• Flex Posters
• Flex Stickers
• Worked with the killer crew at Virtual Ubiquity! Woot!
• MAX 2006 in LAS VEGAS
• MAXUP @ MAX 2006 ( MAXUP 2007 soon!) Ebay and MySpace at MAXUP
• Flex DragRace at MAXUP
• Ted in Tokyo - The train ate my money!
• MAX Taipei
• MAX Singapore - Dodgy Prauns!
• Learned Coldfusion
• Flex Search
• Flex stole my MOJO
• Tamarin - Open Source AVM2
• Developing in Trees (I know I have one more post on that)
• Top 10 Myths of Flex
• Taught Flex 2 to IntroNetworks onsite
• Flex cookbook launched
• Flex Flickr Account
• IFBIN 2.0 development (ongoing - to resume on Apollo Road Show!)
• Countdown to Flex 2.0.1 launch
• Taught Flex 2 to GSkinner in Edmonton (Burrrrrr....)
• Flex360 sold out in 50 days
• Mashup University at MIT on Apollo
• FlexJobs
• Flex 3 supporting FP9
• Meet the Flex Team
• Flex Components @ 1000 devs
• Flex Acquisition (need to revisit this)
• Code-Behind in Flex
• Working at Yahoo on Thursdays
• FlexApps Uploader
• Tour of California
• Removed from Google ???
• Engage @ Adobe
• 360Flex Conference
• WebDU in Sydney
• Rich with Reach - Web 2.0
• Top Flex Firms Debacle --> Now Flex Directory
• Clone War starts with MSFT
• APIS of Flex/Flash/Apollo (new blog coming soon)
• Flex Goes Open Source under MPL

On the surface it looks like a boatload but beneath there are like 100 boats of email, teamwork, code, and fun. My favorite stat is that my spam filter gets over 380 emails a day.

Working at Adobe is a blast. If you are interested there are lots of cool jobs here.

Trust me when I say this, the best of Flex is yet to come!

Lead With Grenades!

Ted :)

I have been working on a Flex Directory that will replace my unofficial "Top Flex Firms" list. The directory will be an open listing of companies that can deliver Flex solutions. I wanted to show the design process I went through with Adobe XD and discuss implementing the design.

So lets start at the beginning. The goal here was to provide some basic images to help the Himgan Wibisono (Adobe XD) understand what I was trying to accomplish. These images provided the basics that I needed in the site. They are simplistic to make communication is crystal clear and to make sure we hit the essential features.

The site needed:

• Sortable list of companies
• Listing creation/update features
• Company Detail View
• Company Showcase
• Reference quotes
• Adobe Partner badge
• "Contact Me" button

WARNING - ALL DATA SHOWN IS TEST DATA FOR ALL UI! Companies will populate the directory individually during the beta period next week - See below!!!!

Here is my programmer art:




I sat down with Himgan and explained the site and what I wanted to accomplish. The very next day he provided me with a set of first round designs. Simply put they were awesome and changed my perspective on what we were building. The site really transformed from a simplistic view to a first class RIA inside of 24 hours. Here are the first draft of the site:









There were a few issues with the grey and we adjusted several other features in the design. Here are the 2nd round of designs, these were delivered just 24hrs after the first ones arrived.










At this point I was well underway with the PHP/MYSQL API for the site and working on ironing out some browser testing issues with using XML/XSL with a Flex UI for the base application. With the UI designed I opened Flex builder and started to build out the UI.

This is where it gets interesting...

Implementing a Flex design from static images is not easy. We have some importers coming in "Moxie" but they are not ready for consumption yet, read "workflow++". What is available is using the mx:Image component and design view to build out the UI. Using the JPG images that Himgan sent me, I loaded them into an mx:Image instance and positioned Flex components in design view. This made things infinitely simpler and in 30 minutes I had several working states for the application. With the prototype images as a background, I was able to create a very high definition design using dynamic layout and resizing. The workflow here is a jewel for quickly building out a UI from static images.




I then went into the Flex Style Explorer and went to work styling the base component set for Flex to match the design. The Style Explorer allowed me to quickly style the Flex app using CSS and match the design in detail. Working inward I implemented a custom ItemRender for the list and animated the TabNavigator with states. (I am not sure the animation will make the final app, it seems a bit gratuitous for me)

After about 5 hours of work in total, I had all the states complete and the data loading logic implemented against the API. Here is an early build of the Flex Directory, it is very early and not fully featured but it is working. I am now finishing up the TabNavigator of the app that provides company details. The TabNavagator content is 100% XML driven (even the tabs) and simplifies the backend logic. Here is a sample XML document that drives the TabNavigator UI, make sure to view source as all XML documents have a style sheet and a Flex UI.

The base site is XML/XSL with a Flex front end, yes you read that correctly, Flex over XML/XSL. This is the next full revision to FXT using XML/XSL and it works cross-browser great. This makes it easy to put a fancy UI atop any XML data format like MRSS/RSS/XML/Etc. View source on this URL to see the XML/XSLT or this URL in action. Since every URL on the site is XML, every page is an API for syndication and the site is search engine compatible when combined with a sitemap.xml. The XML/XSL aspect was more an experiment of mine than a base requirement, one of the evangelism advantages is to test out the new, new, new. I got to this point in about 3 days and then Open Source Flex took over my schedule. I have picked up the project now and am racing towards a beta release for next week. When I get to the next stage of this project I will highlight the XML API.

If you are interested in the Flex Directory, project RoloFlex, I created a new Google Group to help coordinate use of the directory. Project information and beta access will be provided through the discussion group.

More to come,

Ted :)