From the code depot you can download a compiled SWC or a ZIP file that contains all the source and ASDoc generated files. We have posted the ADoc files on-line so that you can easily access them if you do not download them. Currently, we have 219 unit tests running and passing for the library, which are all available from the source tree if you wish to access them.

The current release of Core contains the following functionality. We have marked new and updated features that have been changed from the Vivisecting Media Library to the new Core Library:

• Task Management System new! – The Task system is a priority queuing system that enables an application to execute specific bundles of business and/or server logic in a specific order leveraging priority and the ability to override previously queued bundles. These bundles are encapsulated inside of Task objects, which can be then bundled Task Group objects. Tasks and task groups have the ability to take priority over other Tasks or Task Groups inside of the queue, as well as replace existing tasks in the queue based on a set of overrides an individual task can define.
• Command Action Delegation System (CAD) new! – Provides a pre-built solution for implementing the Command Pattern within ActionScript/Flex/AIR applications. The command / action system allows for commands to be dispatched to the ActionDelegate which then executes any assigned functionality via an Action.
• Selection Management System updated! – The Selection Management system enables any kind of object to become selectable and treated as part of a Selection group. In most cases this would be a UI Component that should behave similarly to a radio button group, where only one item can be selected at one time. This system also allows for multi-select and deselection of items that are members of a selection group.
• Local Connection Management updated! – The Local Connection manager is a helper class to quickly establish and manage local connection instances within an application. The Local Connection manager also supports the ability to maintain strong class types when the data object is passed over the local connection instance.
• Event Broker Utility – The Event Broker is a utility class that acts as a router for specified events. The Event Broker is a single point of contact that any object can broadcast to or subscribe to. This functionality is intended to be the focal point for implementing the mediator pattern within the application.
• Instance Factory Utility new! – The Instance Factory allows for the ability to make sure there is only one instance of a specified class within the instance of the factory. This is useful for using in Locators that handle generating a new instance on the first request but then making sure the original instance of the requested item is returned on subsequent requests.
• Singleton Factory Utility new! – Similar to the Instance Factory, the Singleton Factory verifies that there is only one instance of a requested item, but instead of being limited to the instance of the factory, the Singleton Factory verifies there is only one instance of the requested item in the entire application.
• Adjustable Date Utility new! – The adjustable date wraps a Flash Date object and provides a series of helper methods to adjust time and dates quickly and easily. Example uses included the ability to adjust a date by a specific number of days forward or backwards, making sure that the number of days in the month and Leap Years are respected during the adjustment.
• Queue Data Structures updated! – The Queue system allows for items to be stored in either a LIFO or FIFO based queue order or in a priority queue order and then retrieved from the data structure depending on how the items are ordered.
• Hash Table Data Structure – The Hash Table is key/value that allows any value or object to be used as a reference key to another value or object item. The Hash Table is similar to Flex’s ArrayCollection in how items can be referenced but unlike the collection, this is ActionScript independent, is not intended for data pagination and is focused on performance for larger data sets.
• Browser Location Utility new! – Utility class used to query the current url in the application. The class provides static properties for each piece of the application url.

• Design Fidelity / UI Creation
• Data / Service Management

Design Fidelity / UI creation is focused around a Flex developer that is responsible for bringing in the initial design for that application and making it a reality. This process includes layout, skinning, styling, animation and effects creation with the core goal of meeting the required design fidelity for the final product. The second entry point is for the developer that is responsible for the Data / Services management aspect of the application. This process includes creating data services, data model creation and loading management. To be clear, these two separate approaches do not mean they are handled by different developers, this is just a way at looking at how developers approach their Flex development duties.

Because there are the two main entry points for most developers, the Flex Builder team is first working on new and improved features that focus on these two areas. There is also a general initiative to work on improving general day-to-day use in Flex Builder, re-factoring management and debugging of Flex applications (they called this process “Test & Tune”). This general initiative covers both the design and the data aspect of application development.

I am going to be breaking this article into three separate posts. This first post will cover the workflow and new features added to Flex Builder for the Design Fidelity aspect of development. Post two will cover the overall day-to-day use features that are being updated/added and how the Flex Builder team is improving the “Test & Tune” workflow. The third post will look at the data services features that are being added to the Flex Builder 4 (Gumbo). One thing to note is that this session was a mini sneak-peek of Flex Builder, and there is a chance (albeit very small) that some of the features discussed in the post may not see the light of day (or change drastically). Also, all the screen caps in the posts are from the MAX Preview release, so there is always a chance that the UI and functionality shown will change. Okay, let’s get to it!

Design Fidelity Features

Theme Management The first new feature they examined is Flex Theme management and installation. Themes are not a new concept, they have been around since at least Flex 2 (I can’t recall if Flex 1/1.5 supported them, I think they did). A Theme contains style and skins assets for every Flex SDK component and is applied to your application during the compile process. The idea behind a theme is that you can apply a unified style across your application without having to go in and skin each component yourself. If you are familiar with WordPress, its the same concept as their themes; all the functionality stays the same but the look and feel can be drastically different.

The Theme market for Flex appears to be growing, but adding a theme to an app requires making compiler argument changes to make sure the theme’s assets are loaded and compiled into the generated SWF or AIR application. This means that the Flex Builder developer has to configure the project properties in the tool to make sure the Theme is applied. I have personally not used Themes in my applications due to the fact that all of the projects I have worked on have design teams and/or unique design requirements, but I have played around with themes in the past.

The Flex Builder team has seen the growing popularity of Themes and they want to make Theme installation a much easier process. Themes are packaged as SWC files that contain all the CSS and style assets. When a user downloads the SWC file to their machine they can then choose to install the theme into Flex Builder. To install a Theme, the user chooses the Import Theme… option which allows the user to point to the Theme file. The theme is then imported into Flex Builder and it can be selected from the new Theme management dialog.

You can access the theme management dialog by clicking on the “Manage Themes” link above the UI component panel in Design View. This dialog shows all the currently installed themes and a thumbnail of what the theme looks like. You then select what theme you want to apply and this updates the complier options for you and rebuilds Design view using the new theme. It also sounds like they are working on streamlining theme creation and how they are distributed to make theme use easier and more popular.

Catalyst and FXP Support

The next Design Fidelity workflow feature is the ability to handle importing and exporting of Flash Catalyst project files. Flash Catalyst is a new design/development tool by Adobe that is centered around creating and styling Flex applications. One of the most challenging processes of Flex development is applying complex custom UIs into your final application. The goal of Catalyst is to allow a designer or developer to import assorted creative asset formats, such as Photoshop files, Illustrator files and Fireworks files and then quickly build Flex UIs using the creative assets’ contents (layers, symbols, etc.). Once the layout / styling is done the Catalyst user can save their Catalyst built application as an FXP file and pass this on to a Flex developer to wire it up to data services and functionality. The FXP file created by Catalyst is a zipped version of a Flex Builder project which means that a Catalyst user can share their work with a Flex Builder developer or visa versa. This gets us into the new FXP feature and workflow being added to Flex Builder 4.

Flex Builder 4 has the ability to import an FXP file and then create a project within Flex Builder from the FXP file. This imported project has all the structure and content that was created inside Catalyst. From there the Flex Builder user can begin adding functionality to the Catalyst generated project, such as data binding and data service management. As the project moves along there will come a time where the UI will need to be modified. At this point the Flex Builder user can export the Flex Project back into the FXP file format and pass this to the Catalyst user. The Catalyst user can then open the FXP file, make the UI additions and then hand the FXP back to the Flex Builder user.

At this point, when the Flex Builder user imports the updated FXP it recognizes that the project already exists and provides the option to allow the user to merge the Catalyst changes into the existing project. When the user selects merge, the project conflicts are then highlighted in red within the project view and the user can then right click on the conflicted files to show a merge tool view that enables the user to determine what changes to bring into the project. This current workflow is in its very early stages and I assume that it will be both improved and changed as development/testing/feedback is provided.

The focus of the FXP support within Flex Builder is to help create a better streamlined workflow between the design and development aspect of Flex. My example above assumes that your Catalyst and Flex Builder user are different people, but this workflow can be used by a single person going between Flex Builder and Flash Catalyst. As both of these products move forward in development I expect to see a lot of discussions around integration, workflow and best practices for planning and structuring your Flex projects.

That’s all for now… The next post for this article will cover the new Test and Tune features that are being added to Flex Builder.

My goal was to take these two posts, summarize them and show how to get the current source and check it in. Just as I sat down to write this all up, Mike Chambers comes in and scoops me. Figures. Anyway, I yelled at Mike via IM for stealing my thoughts and then mentioned that I figured out how to bind the Flex 4 source to the SWC in Flex Builder so that you can F3 / CTRL+Click you way to the code. So, I am going to post that aspect of the process and refer back to Mike’s straightforward post on how to get the SDK compiling and running.

Check Out The Source
The first step of linking the Flex 4 source to Flex Builder, is to download the code from Adobe’s Open Source website. Adobe and the Flex team are using Subversion to manage the code base so you will need to use SVN to checkout the source. I already had Subversion installed so I was able to jump right in and checkout the code. If you don’t have Subversion, or want to learn more about how Adobe has the SVN configured, then make sure to read how to check out from Adobe’s code base. If you have Subversion installed, then here is the short and sweet version.

First, I didn’t want to download the entire SDK SVN trunk, so I found the direct path the Flex 4 Framework code using their web browser interface:

http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/flex4/src/

Next, I picked a location to keep the source. I personally chose to put it inside the flex 4 SDK folder under a new subfolder called src. You can put this folder anywhere you want, I just chose this location on a whim. To get the source, I opened up my terminal, cd‘d to the new src folder and then ran the following command to download the source:

svn checkout http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/flex4/src/ ./

You don’t technically have to cd to the new folder but I hate having to fit it all in one command line. Whatever, I can do what I want! Once you run this command, Subversion will download all the ActionScript source for the framework into your new directory. The last step is to inform Flex Builder that you have source for it.

Get Flex Builder Into The Know
To do this, right click (CMD+Click) on your project in Flex Builder and choose Properties > Flex Build Path > Library Path. Expand the Flex 4 SDK tree and then expand Flex4.SWC so that you see the Source Attachment: option. Double click Source Attachment: and then browse to the folder that holds the source you just downloaded. Choose Okay, and there you have it, source is now bound to your SDK and you can F3 to your hearts content.

One thing to note, if you only use the default namespace, then hinting will not follow through in FB3. I recommend binding the gumbo library for this to work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library:adobe/flex/halo" 
	xmlns:gumbo="library:adobe/flex/gumbo"
	layout="vertical">
 
	<gumbo:Button label="hello world" />
	<gumbo:Group>
		<gumbo:content>
			<gumbo:Ellipse width="30" height="30">
				<gumbo:fill>
					<mx:SolidColor color="#FF0000" />
				</gumbo:fill>
			</gumbo:Ellipse>
		</gumbo:content>
	</gumbo:Group>
</mx:Application>

This tells FB where to start looking for the source and enables it to open properly. If you know of a way to bind the namespace to the source, please let me know!

I read a great analysis article by Grant Skinner, talking about the different Open Source licenses and how they can affect you and your client. I originally licensed the code library under the Mozilla Public License (MPL) due to its popularity, its freedom to allow developers to build on top of the code base for any purpose (free or for charge) and only requires code modification submission if the developer changed the original code in the library. My goal with VivMedia is to help developers build great applications, and the last thing I wanted to do is limit them, yet I do want to encourage people to submit changes and updates. That is why I went with MPL at first.

The issue with MPL (as Grant points out) is that when you use MPL code there are certain steps you need to take to release your project. In most cases this is not a big deal and it very rarely impacts the project but it may cause some developers or their clients a bit of grief. In all honesty, I just want to create a library that myself and others can use without having to jump through hoops with our clients. This lead me to change all the code license to MIT, which is very permissive of all forms of development. All you need to do is keep the MIT license headers in the source. You don’t have to submit changes (all thought I would be very happy if you did) and you don’t have to jump through any other legal hoops when deploying. So, if you are using the library already, update to the new version and know that the door is now wide open and you don’t have to fret about how you or your clients release the work.

The other addition to this version is the new Queue data structure. The Queue allows you to add and remove items is in a linear fashion. You can define the Queue as either Last in First Out (LIFO) or First in First Out (FIFO). What that means is when you add() item A and item B to the Queue and then call next(), the item returned is dependent if the queue is set to LIFO or FIFO. A LIFO Queue returns item B, since it was the last item added. A FIFO Queue returns item A since it was the first item added. As always, a full tutorial will be posted soon on how to use the Queue in your code.

The Queue is a building block for a lot of new functionality that I am starting to plan out. There will probably be variations of the Queue going forward too. For example a version that is designed to help solve Asynchronous issues in a Synchronous fashion, without you having to write a lot of logic around the actions. Right now, its all about what time permits… and as I said in the last post, vacation is nearly here! So, update/download the library, check out the ASDocs in the source (I always update them for each release) and let me know what you all think.

New And Improved UI

So, what’s new? Well the first thing up is the updated application UI. The goal for the updated ui was to continue showing off the skin-ability of AIR applications and also help streamline user interactions. kuler continues to leverage the transparency effects of AIR and now has a beautiful cutout UI that highlights the kuler logo and application buttons.

Some of the other UI additions are unification of the kuler web application loading animation with the loading animation within kuler Desktop and making the Sign In / Active Internet connection light more prominent at the bottom of the tool.

Another important change is the addition of the grip bar and hand icon over the Themes. One of the coolest features in kuler Desktop is the ability for a user to grab a Theme and tear it off into its own window. This is one of the “wow” features because every time someone sees it for the first time they instantly go “WOW!”, me being one of them. This functionality is actually not a new feature, it was in the original release of kuler Desktop. Unfortunately it was not as easily discoverable as was hoped and this new UI update is intended to help people discover it quickly.

New Menu Access

The drop-down menu now has two new options for users. The first is the About menu. In the previous release the general about details were located in different locations within the info panel and this information is now consolidated into a single location. The other new menu option is shown when a user signs into their kuler account using an Adobe ID. The previous version of kuler Desktop allowed users to view the Themes they created in the kuler web application but they could not view any of the Themes that were marked as favorites. Now user can view any Themes that they have marked as a favorite on the site once they have signed into My kuler.

Paging and Caching of Themes

With kuler Desktop users can now view all the Themes in all the categories. One of the limitations of the original release was that they could only see the first 100 Themes in a category. No longer! The UI has a new feature that allows users to page through the themes a 100 at a time, or they can jump to the first or last 100 with a press of a button. kuler now also show users their current position in the Theme category so that they know exactly where they are.

In addition to exposing this feature in the UI kuler now has added the ability to cache Theme pages so that when someone navigate back and forth through Themes they only have to load a new page when they exceeded the current cache limit. This makes extended browsing much quicker for everyone.

Creative Suite Integration (CS) via SwitchBoard

The killer feature in this release is the ability for kuler Desktop to export Themes directly into Adobe Photoshop, Adobe Illustrator and Adobe InDesign with a single click. Not only can kuler Desktop directly import a Theme with a click kuler Desktop can also launch the CS application if it is not already running.

kuler can do this thanks to an awesome new application called SwitchBoard. SwitchBoard, which is now on Adobe Labs, allows AIR applications to communicate with CS applications via an ActionScript API. Using the API developers can send ExtendScript commands directly to the CS application of their choice. Thanks to the power of SwitchBoard users are now able to save the Theme ASE (Adobe Swatch Exchange) file to the appropriate CS folder location, call the CS application, tell the application where the ASE now lives and to have it open the ASE in the Swatch palette.

Auto-updating / General Fixes

On top of all that kuler now has a built in an auto-update utility leveraging AIRs update support that allows kuler to determine you when a new version is available. Adobe kuler Desktop can now call out and see if a new version is provided and if it is the application will download and auto-install the update for you. The new version also a lot of fixes for usability issues and bugs that both the QE and the kuler community have found. Overall, this is a great dot-release and I feel you all are going to love the new features!!

One of the challenges of writing an article like this is first defining your audience and then determining how to cover the topic in the alloted text. The Edge sets a word count guideline and this limits how deep I could or in this case could not go. Personally, I fully support the word count guide because this both focuses the topic and generates more digestible articles. Yet, on a topic as broad and as deep as this one I had to focus more on an introductory guide to coding standards and adoption.

The second challenge is determining your audience. My goal was to create an article that worked for both readers who have never heard of coding standards, and readers that have been using them for years. I always try to create a broad stripe across my reader base because I want to inform as many people as possible. This thought process was kind of beaten into me during my years as a Technical Support rep and team-lead at Macromedia. There is nothing like having to write Tech-notes and email support to teach you how to write to a broad audience.

The main point I wanted to get across with this article is that coding standards are actually much more then just code formating. Code formatting, or code conventions, really focus on how you name variables, methods, classes, etc. Yet, this is just the tip of the coding standards iceberg. One of the least discussed aspects of coding standards is the adoption and implementation practice of code design patterns. As developers, we need to better understand how adoption of patterns, frameworks and micro-architectures help structure our code. Not only do they provided rapid development but they also help guide us into a more structured development process.

As RIA and web application development expands we are seeing a demand for much more complex and scalable applications. Scalability is not just about user load but includes further expansion of features and performance over time. More and more developers are being asked to create applications that have a lifespan longer then just a few months. Some people may gaffe at that comment, but if you look at a lot of “rich” applications up to this point, most have been for marketing campaigns and advertising. The nature of these kinds of projects do not focus on lifespan and version updates. Their focus is on making them work in a short time to meet the marketing deadline and then get them out the door.

With the trend of Web 2.0 (which I hate as a term), the web world is quickly being pushed into the long standing Desktop Software model. This is forcing a lot of us to re-evaluate how we design and develop our online enabled applications. This is a scary yet wonderful time in our industry as we are rapidly adopting and developing new ways of web application design and construction. Due to this push I feel its time to help expose more of us to coding standards. My article is more a call to arms then a definitive guide to coding standards implementation. If you are interested, take a read and add your thoughts to the comments…

Right now there are only three “tools” in the Vivisecting Media Code Framework but this toolset will grow over the coming year. I actually have a lot more in the wings but I want to roll them out in a logical order. One of the driving forces for this code is the Photoslider application that I am working on. Unfortunately this means that some of my core code is still pretty application specific and wouldn’t make sense to release yet.

The other driving force is a long term strategy that I have been talking about with some Interactive Architects in which we want to create a more robust development platform for RIA developers. Of course this kind of thing requires a lot of up-front planning and until that kicks in I may hold back on some code until the order makes sense. Don’t want to put the cart in front of the horse.

Not only will I be releasing “framework” code but I have some other tools that I want to release under MPL. Those may come out as just SWCs and not the full source, but I haven’t decided the full release strategy for that yet.

So, what is currently in the repository? As I mentioned about there are currently three tools:

Local Connection Manager
The Local Connection Manager provides a simpler interface to the Flash Local Connection system. This class provides all the default error and event handling for establishing a connection and also enables developers to retain strong types across Flash Applications. This means that if you create a custom MyObject and send this through the LCM then the receiving Flash app will parse the sent data as a MyObject object. The LCM also handles error messaging better so that if the an error occurs such as unknown type in the callee application then it the LCM will inform the caller Flash app that an error occurred. If you have ever worked with Local Connections then you know this kind of thing can be a pain in the arse. I have some other ideas for this class so expect future changes. (Works with AS3 and Flex projects)

Event Broker
The Event Broker is based partly on the Observer pattern. If you do a lot of Flex development then you are pretty familiar with the ActionScript 3.0 event model. One of the challenges with the Event model is that to receive the objects Event you either need to know the location of the object so you can register to the event or be in the Events bubble chain. In most cases this is not an issue, but with complex layout or dynamic environments, hooking into the event chain can be a challenge. The EventBroker handles this by providing a single point of contact that any object can both subscribe and broadcast through. This enables the developer to handle event routing for those special cases. (Works with AS3 and Flex projects)

Hash Table
The HashTable is very similar to the Flex ArrayCollection (AC) but doesn’t have a lot of the overhead that the AC adds. That and you don’t need the Flex SDK to use the HashTable. The HashTable allows you to add key/value pairs using any object type as a key. You may ask, why not use a Dictionary? Well, the HashTable adds a lot helper functionality that the Dictionary doesn’t have. Such as isEmpty, getAllKeys(), getAllItems(), removeAll(), removeItem() and length. I can’t even count the number of times I have had to create a dual array to handle some of these tasks so I finally got around and wrote an official HashTable. (Works with AS3 and Flex projects)

These are just brief descriptions of what the tools do, I plan on dedicating a full post to each tool to describe the functionality in-depth, show examples and also explain some gotchas when using them (nothing is ever perfect!). I am looking forward to this code project!

Doug is very strong writer and speaker and is outspoken on the concepts of development workflows, from the creative to the programatic.  I am looking forward to reading his posts and seeing both what he and Adobe envision as the current view of workflow and how they propose to evolve it over the coming years.

Color extraction allows you to upload an image and which is processed to create a color theme.  You can then change how the image is processed by selecting different moods, such as Bright or Muted.  Not only can the system pick the color but the UI then allows you to manually select the locations of the color samples used to create the theme.  Once you create your theme you can then save it in your themes and make it public for others to use and rate.

Other new features include the ability to store an unlimited amount of favorites.  As you go through all the themes you can pick out your favorites and store them to your account.  You do need to log in with you Adobe ID to access this feature.  There has been multiple UI tweaks and also a new drop down for random themes, highest rated, newest and most popular (based on the downloads of the ASE version).  When you download a theme it comes in the ASE format (Adobe Swatch Exchange) that can then be imported into Photoshop, Illustrator, InDesign, Flash and Dreamweaver.

Kudos to the Kuler team and their newest launch!!

To support our photo aspect of our trip I have been developing a custom photo gallery Wordpress plug-in using Flex 3. I have completed version 0.1 which I am using for SXSW. The goal is to start alpha-testing version 0.2 very shortly, so if you are using Wordpress and Flickr and want to experiment with a new gallery plug-in let me know. Also, if you have any issues (which I would not be surprised since it is a 0.1 release) please report them to me: james [ at ] vivisectingmedia.com. This is my first Wordpress plug-in so that has been an adventure in itself. I will be doing a lot more talking on the plug-in process in the feature and what I see the feature set being for future releases.

Sooo… back to SXSW. I will be posting a recap of every day early in the morning before we head to bed. If you want to check out the last two years, here are the links.

SXSW 2006 Tales from SXSW (pre-flight check) Tales From SXSW – Day 1 Tales From SXSW – Day 2 Tales From SXSW – Day 3 Tales From SXSW – Day 4 (finale)

SXSW 2007 Tales from SXSW 2007: Pre-flight check SXSW 2007: Day One Recap SXSW 2007: Day Two Recap SXSW 2007: Day Three Recap SXSW 2007: Day Four Recap SXSW 2007: Top Ten Countdown… Starting Monday SXSW 2007: Top Ten Countdown #10 & #9 SXSW 2007: Top Ten Countdown #8 & #7 SXSW 2007: Top Ten Countdown #6 & #5 SXSW 2007: Top Ten Countdown #4 & #3 SXSW 2007: Top Ten Countdown #2 & #1

And finally, I was digging around and found my memory card I used for SXSW 2006. These pics have never been seen before until now! I created a new set on Flickr and of course I am using it to demo my new Photoslider gallery. Enjoy!

[ Photo gallery available in blog post. ]

update: Looks like express install is a little wonky with the new version of the Flash Player. You will need the newest player to view this (9.0.115) so if the auto installer acts odd, go to Adobe.com’s Flash Player install page to update.