Merapi Session from BFlex

Today was the Flex portion of the BFusion/BFlex here in Bloomington, IN. I presented on integration native code in Flex with Merapi here at Indiana University. The main example we worked through involved automating Excel in Flex using Merapi .NET. The code for the example is checked into our Merapi Example repository. I thought a short screen cast might be helpful as well.

This example was developed using Flex 4 and Merapi .NET in C#. You'll need the Flash Builder 4 beta to build the Flex code and Visual Studio 2008 to play with the C# code. However, if you'd like to skip that part, you can download the binary for the C# portion from here and just run it from the command line.

Additional resources:

HTML view of the Flex code
HTML view of the C# code
The Google Code repo

Thanks to Bob and everyone involved with BFlex for having me speak and putting on a great event.

New to flexlib: CSSPropertyInjector

As my first contribution to flexlib I've been developing a utility class called "CSSPropertyInjector". The CSSPropertyInjector class is used to apply styles from CSS to an Object that has properties that are not stylable or on Objects that are generally not stylable. Another nice feature of CSSPropertyInjector is the ability to specify multiple styleNames. This util will also allow multiple style selectors. The basic idea is that you bind a target object to the injector and set a styleName value. Given those two properties are set, the injector will automatically set styles or properties on the target object. Granted, it is possible to do a lot of stuff with this util that are questionable in terms of best practices, but it does give the option to apply styles to objects that never had the option in the past. So, without delay, on to examples.

Flex 3 with multiple selectors:

View the Application | View the Source

This example shows how powerful CSS can be with the ability to apply multiple selectors to each component. Each style is used generically and applied to a component regardless of the component's type. So, we're able to share a "redBorder" selector between button1, innerBox, and button2 without adding unique styles about the button's text colors, padding, etc to the "redBorder" selector.

Degrafa skin with styled elements:

View the Application | View the Source

This example shows a simple Degrafa circle with it's style properties (color, angle, alpha) abstracted into CSS. From a skinning perspective the lack of styles in Degrafa has always been just a little annoying for me. On large, enterprise applications it is essential to create conventional approaches to tasks performed throughout the app. Skinning is one of these tasks. Without the support of CSS, styling a Degrafa skin is much different than styling a halo skin, but now with the CSSPropertyInjector util a similar styling approach can be taken with both skins types.

Flex Chart with styled elements:

View the Application | View the Source

Another painful set of elements to style is the Flex Charting Framework. In this example you'll see that the color and weight of stroke of the LineSeries is styled using CSS.

Flex 4 FXG with styled elements:

View the Application | View the Source

FXG is similar to Degrafa and easily styled using CSSPropertyInjector.

So, this is a start for CSSPropertyInjector. It's checked into flexlib and ready for you to play with. I look forward to your feedback on making this a complete addition to flexlib. Please feel free to leave a comment on this post, e-mail me directly, or comment in the flexlib Google Code project.

Merapi is Open!

I was proud to announce with Andrew Powell today at 360 Flex | Indy, that Merapi is now officially open source.

We've released the first public beta on Google Code as well as opened a Google Group. There is also a repo for Merapi examples.

Here are the important links:

http://merapi.googlecode.com/
http://merapi-examples.googlecode.com/
http://groups.google.com/group/merapi-project

To find out more, keep an eye on our blogs. We'll be releasing more tutorials and answering questions as they appear.

Joining Roundarch / Merapi Positioning

On March 9th I began a new position in the role of Technical Architect and Evangelist at Roundarch. As I stated in my previous post, this was a difficult decision to make.

Now that I've had a couple months of settling in, I'm happy to say I'm enjoying my new role and the team at Roundarch very much.

Roundarch is not just an RIA or technology shop. We are specialized in Information Architecture, Graphic Design, User Experience, Technology and SEO. Our work is in serving clients, and our process provides unique advantages to the fortune 100/500 enterprises we engage with.

Now that I've had some time to get to know many of the 175 people that make up Roundarch, I've learned to appreciate Roundarch's holistic approach towards solving problems. Although we do have experts that work within a discipline, we do not develop solutions in a vacuum. There is a belief at Roundarch that all disciplines (IA, UX, Design, Business, and Technology) should inform each other. This adds up to a group professionals who's combined background includes graduate and post graduate level training in; HCI, Computer Science, Design/Art, Business Administration, etc... all working together as a team to create solutions for our clients. That process is exciting to be a part of.

There were many incentives that influenced my decision to join Roundarch. A few highlighted reasons are:

1. Leadership that believes in the success and direction of the company.
2. Working with my friend Dave Meeker on Merapi
3. Working with my new friend and mentor Gary Schwartzbard in the Roundarch RIA practice.

1. The Leadership

Roundarch's history comes from years of working under the Deloitte and WPP flags. Our owners saw a distinct value in the people that became the founding members of Roundarch and purchased the practice from Deloitte. It is a testimony to the leadership that many of the founding employees are currently managers, directors, and VPs even today. This is a leadership the has a clear vision of serving it's clients and valuing it's employes.

2. Dave and Merapi

Another part of my on-boarding to Roundarch was working with my friend Dave Meeker to develop Roundarch's capability's to offer unique services leveraging Merapi. Most recently we've done this by assisting Tesla Motors in the release of their new Model S electric car. You can read more about our involvement with Tesla on the Roundarch blog and in this press release.

Shortly after the release hit the web, there was a bit of a surprise in the Merapi community about our positioning around Merapi. Pieces of the text were (validly) interpreted by some to read that Roundarch now owned / had purchased Merapi. This is not the message that Dave or I intended to publish. Roundarch has and will invest time and money in promoting and developing the Merapi technology, however, we view the open source effort as a key part in the success of Merapi.

Last week my friend Andrew Powell raised some concerns over the future of Merapi, and the position of the open source project. For those of you in the RIA community, you've probably seen Andrew give talks about Merapi over the last year. He's been instrumental in helping develop the concepts of Merapi and has helped promote the technology in a great way. Moving forward, Andrew will sit with me as co-chair of the open source project and help to ensure that a community focused version of Merapi's Flex/Java connectivity thrives.

This week Andy, Dave and I spoke about what might be the clearest, mutually beneficial way to position Merapi for the community and companies like Roundarch that want to invest in developing commercial solutions with it. Here's what we came up with...

The open source / community effort will be known as:

Merapi or The Merapi Project

The Roundarch commercial effort will be known as:

The Roundarch Merapi Platform

The open source effort will target developing a solid core for Flex/AIR and Java. Andy and I will be handling how to approve members of the community who would like to contribute on the project. We'll likely be asking for individuals or corporate entities to contribute first by submitting patches and then elevate their status to full commitor rights. This effort will begin this summer.

3. Gary and the RIA practice

At Roundarch we don't follow the typical manager / employee hierarchy. Instead, each employee has their own career counselor. I consider it a privilege to have Gary as a counselor and mentor. It's been my pleasure to get to know and work with him on a few projects already. Even in the current economy, we're in need of additional resources for this team and others. Contact me at adamflater [at] gmail [dot] com if you're interested in finding out more about Roundarch.

So.. that's a rather lengthy source-code-less post for me.

thanks for reading the update.. more to come on RIA development soon
-adam

Farewell to Universal Mind

After much deliberation, earlier this week I chose to step down from my position at Universal Mind. This was a difficult decision for me as UM has a unique collection of highly talented individuals that I've thoroughly enjoyed working with. I will truly miss counting all the great people at UM as colleagues. I leave my best wishes to the success of Universal Mind and all of it's employees as individuals. I am certain that we will continue to see amazing work from the UM team in the RIA space in both development and design.

It was great to work with all of you and I hope to cross paths with each of you again soon.

-adam

Cairngorm Top 5 Tips - Number 3 - The Data Translator Pattern

Number 3 on my list of Cairngorm tips is the Data Translator pattern. I'd like to preface my explanation of the pattern with a discussion about web application domains.

As Flex developers we're often inclined to use server-side technologies like Blaze DS, LiveCycle DS, ColdFusion, amfPHP, RubyAMF because of the native object transfer layers that these technologies have available. The magic in these solutions is a binary format called AMF (Action Messaging Format). AMF allows disparate languages to communicate with native objects. For example, in a Blaze DS Java server project if I define a class that has the same public properties as a class definition in ActionScript, Java and ActionScript can transport data of this type and deal with the data as a native object instance in each layer. The benefits gained from native object data transfer are: compile time type checking, speed, and elegance. However, this post is not about AMF, but about the pattern of translating other data formats (like XML, CSV, JSON) into the Flex application domain.

An important distinction when implementing a Flex application is the separation of domains. In a typical web application there are several domains to think about, but for the sake of this example let's look at two: the service layer domain and the UI domain. The distinction between these domains is important to ensure high standards of maintainability and modularity. It is essential to avoid a situation where a change in the service layer has major impacts on the implementation of the UI layer, and vice versa. The Data Translator pattern is a simple pattern, but an important concept for keeping these concerns separated.

In this example I will be using XML translated to ActionScript VOs (value objects). XML is a common format in the world of web services, and especially in Flex development, however this pattern can be used with nearly any data format that a service might expose. That's enough setup, now let's dig in to the Data Translator.

A Data Translator is a class with static methods for parsing data generated by the service domain into a format that is specific to the UI domain. Data Translators are typically invoked by Delegate classes. In my opinion, the Delegate layer is the appropriate place to handle data translation. If your Command class is dealing with data that is part of the service domain, you may need to rethink your architecture. Like nearly everything in any field of engineering, there are exceptions to this rule. If you are implementing an application that's function is to display read-only data, XML can be a great format for that application. However, if your application involves modifying data that was retrieved from a service, value objects are usually the best solution.

So, let's check out the example application:

View the Application | View the Source | View the Docs

DataTranslatorExampleApplication - Defines a button that dispatches the GetItemsEvent, a console to show Cairngorm actions, and a DataGrid to show the result of the operation.

ItemsCommand - Invokes the getItems operation on the delegate class and by standard Cairngorm convention, updates the global model with the items returned by the delegate.

DataTranslatorExampleDelegate - This delegate is responsible for calling the service that responds with a collection of items. The items are returned in an XML format and then parsed by the ExampleDataTranslator class.

ExampleDataTranslator - Translates the XML payload into a set of objects of type Item.

Item - A value object that models the data of an "Item"

This pattern is a favorite of mine for dealing with the translation of data into a format for the UI application domain.

Up next, tip #2 Aggregated Commands.

Typinator and Flex

My colleague Doug McCune sent out a link last week to a product called Typinator.

Typinator is a tool for Mac OS that auto replaces character strings that are typed anywhere in Mac OS. In the videos below you will see a few ways that Typinator can be used in a Flex development environment.

Class Templates: If you're tired of formatting your classes to read a certain way, why not setup a template with Typinator?

In this example you'll see "-pc" expanded to a full class template.

Infrequently Used Syntax: If you're like me, there are a few syntactical parts of ActionScript that you use infrequently. I generally have to look these things up in past source code or LiveDocs. Typinator is a great way to create a shortcut for those items.

In this example you'll see "-ra" expanded into the remote alias meta data tag.

In this example you'll see "-emd" expanded to the event meta data syntax.

I've been using Typinator for a while now and it's become a useful development tool for me, even actions as simple as correcting functino to function (a common misspelling for me).

[UPDATE]

I shared my post with Ergonis Software and their CEO and Frounder Christoph Reichenberger replied with a very helpfult tip. Typinator allows you to specify an alternative cursor position after it has replaced the phrase you type.

If you look up at my remote alias example, you'll notice that I used the left arrow key to backup to the appropriate spot to type the classname. In the revised example below you'll see that after typing "-ra" the cursor is automatically positioned where I'd like to start typing the name of the alias.

Thanks for the tip Christoph, much appreciated.