Ted Patrick > { Events & Community } > Adobe Systems

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 :)