Sean Christmann

Sean is an Experience Architect with over 7 years work in online applications and games. Originally trained in design and media, he found reading code easier then designing web sites and now applies his knowledge of both worlds to help create compelling user experiences in the RIA space. Sean is currently leading the development of eBay’s disruptive new desktop application codenamed ‘San Dimas’ built on the AIR platform. Sean works for EffectiveUI.

Adam Flater
http://www.adamflater.net

Adam was co-creater of the Artemis project and creator of this project. Artemis was created when AIR was still in alpha and code named Apollo. He’s been a Flex coder since 2005 and a was a java developer before that. Adam works for Universal Mind.

Alex MacCaw
http://www.eribium.org

Alex is a 18yr old Rails & Flex developer. He’s been using Rails for 3 years now and has a fair number of open source projects to his name, as well as an active blog. Alex works for Reevoo, a London startup.

Louie Penaflor
http://www.restlessthinker.com/

Louie is a designer turned developer and has been designing and developing interactive applications and games utilizing Flash since 1999. Louie works for Digital Primates.

Andrew Powell
http://www.infoaccelerator.net

Andrew has been architecting and developing web applications for over 10 years using ColdFusion, Flex, AJAX, and Java. Currently, his focus is on integrating enterprise Java technologies such as Spring and Hibernate with Flex and AIR applications. Andrew works for Universal Mind.

Juan Sanchez
http://www.scalenine.com

Juan is experience designer and has a variety of design experience with branding, advertising, Flash, Flex, HTML, CSS, and print media. Juan works for EffectiveUI.

Rhazes Spell

Rhazes is currently a Lead Interactive Developer. Prior to that he was under the tutelage of Adam who learned him well in the art of making bits and bytes dance and prance. He’s been a Flex developer since 2007, Java before that, but Perl will always be his first love. Rhazes works for Roundarch.

Here’s my abstract for the talk:

Advanced Skinning and Component Development

Building components for the Flex Framework can be a tricky task. In this session we will examine some of the best practices of component development as well as look at the tools available for skinning a custom Flex control. We’ll walk through a demo of building a custom component developed using MXML and ActionScript 3.0 and skinned using the Flex plugins for Photoshop, Fireworks, Flash, and Illustrator. As there is no release date set for Thermo no promises can be made about a demo of it’s capabilities, but if it’s available we’ll look at that too.

UM Speakers :
- Doug Knudsen : Custom components in a BRIA environment’
- Doug McCune : Session: Be Lazy, Use Open Source Flex Projects
- Andrew Powell : Building Java Powered Flex Applications

The 360|Flex Pitch

This 3-day conference is the place to learn about Flex and AIR from Adobe and community speakers. Sunday before the conference we’ll be offering an all day Flex 101 session, included in the price of registration. That’s right, a pre-conference all day training session on Flex. 360|Flex is the premiere Flex and AIR conference. We were the first Flex conference and we’re still growing and getting better.
Don’t miss out, only $480 for an individual or $1500 for a 4-person team. More details can be found at http://360flex.com

David Coletta from Virtual Ubiquity (Buzzword) will be giving a talk on optimization in Flex a the Adobe MAX conference next week. He was gracious enough to include a screen cast of an application I’ve been working on in his talk. Make sure you make it to one of his sessions. I’ll be there, so say ‘hi’!

David Coletta

David Coletta’s career in software development has focused on collaborative applications as they have evolved over the last two decades — email, groupware, online services, and rich internet applications — at companies like Virtual Ubiquity, Ab Initio Software, eRoom Technology, Ziff-Davis Interactive, and Pacer Software. Since the beta 1 release of Flex 2 in January 2006, David has been digging Flex more than all other technologies combined. David holds a B.A. in Music from Amherst College.

Optimizing Flex Applications
Tuesday, October 2 4:00 pm – 5:00 pm
Wednesday, October 3 11:00 am – 12:00 pm

What I found out recently was that binding will only fire if there is both a getter and a setter. So, here’s how I tackled it.

package
{

[Bindable]
public class MyReadOnlyConfigModel
{

//----------------------------------
// copyrightText
//----------------------------------

/**
 * Legal mumbo jumbo to show for copyright stuff.
 */
public function get copyrightText() : String {
    return this._copyrightText;
}

private function set copyrightText(text : String) : void
{
    this._copyrightText = text;
}

private var _copyrightText : String = null;

//----------------------------------
// setData
//----------------------------------

/**
 * Sets the properties of MyReadOnlyConfigModel
 */
public function setData(xml : XML) : void
{
    this.copyrightText = xml.copyrightText;
}

}
}

The cool thing about this approach is that the data in the model cannot be written over, but binding will still fire and allow UI components to update automatically when the data is loaded.

If you solved this problem with another solution, I’d love to hear about it.

Props to Andy for giving me the info on this one.

Here’s a quick test app to see it in action:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:VBox>

<mx:Text text="{model.copyrightText}" />
<mx:Button label="set data" click="{model.setData(this.xml);}" />

</mx:VBox>

<mx:Script>
<![CDATA[
 [Bindable]

 private var model : MyReadOnlyConfigModel =
    new MyReadOnlyConfigModel();

 private var xml : XML =
    <xml>
       <copyrightText>this is a copyright</copyrightText>

    </xml>
]]>
</mx:Script>

</mx:Application>

My posts on team development will start from a beginners understanding of programming, working up to an advanced look at architecture and design.

First thing’s first: What’s this MVC thing?

MVC stands for Model-view-controller. MVC aims to separate, or decouple, data (model) from the user interface (view) and functional logic (controller). You can read a lot more about MVC on the Wikipedia.

How do we use MVC in an RIA (specifically a Flex app)?

Well thought out architecture and design is important at every level of the application, but an RIA is different than a web app of the past in one important way: state. In legacy (HTML script-based) web apps state is, for the most part, required to live on the server. In RIA development we are not bound by this requirement. We can build RIAs that have state at the client or the server or a hybrid of both. This one fact completely changes the complexity and importance of what once was merely the view. In RIA development the part of our application that lives at the client level is not just an HTML rendering of a view, it can be a fully functional stand alone application. The client in a RIA has many of the characteristics of a desktop application and that is why MVC applies at this level.

Why is this called a micro-architecture?

We refer to architecture and design patterns at the Flex level as a mirco-architecture frameworks because the Flex application is a piece in the larger picture of the entire application. The Flex app may talk to one or more web services, consume an RSS feed, stream video, show images from the web, and so on. All of these services fit into the larger architecture of the web app. These architectural decisions are also important but a little harder to talk about generically. So, since this is a Flex blog, when I speak of architecture I’ll really be talking about client micro-architecture.

Why do you want to use a micro-architecture?

Actually, sometimes you don’t. If you’re creating a very simple app (something like a widget or a banner ad) MVC might not be for you. However, if you’re creating something that models data retrieved from a service, allowing the user to manipulate that data, and displaying the data in interesting ways… MVC is really a good choice to make.

What you get

1. A code base that facilitates team development.
2. A skill that will make your team more agile in their development life cycles.
3. Source that has a high level of maintainability and interoperability.

Ok.. let me unpack those a bit.

1. Your code base will facilitate team development most simply because the team is now coding to a convention. MVC isn’t really the big deal here, it’s the fact that a convention was decided on. MVC does offer some nice things in regards to team development that I’ll talk about in other posts, but my point here is that convention keeps everyone on the same page.

2. Every learn how to play an instrument or a sport? Each of these skills involves mastering patterns. The more your team implements on the patterns in MVC, the better skilled they will be at it. My point here is really that MVC should also be viewed as a problem solving tool. When you get developers thinking about solving architectural problems in the same way, everyone can solve that problem faster.

3. Maintainability and interoperability… again this really goes back to convention. Your code will be more maintainable by your dev team if it’s built on convention. If you chose a convention that’s fairly mainstream, then you gain a level of developer interoperability. Meaning, training in a new team members on the way you implement requirements will be a lot easier if your using a convention and on top of that a standard convention. In Flex development, Cairngorm is a nice way to go. It’s not necessarily the best framework out there, but it seems to be the most widely adopted Flex micro-architecture.

I’ll be delving deeper into MVC and Cairngorm in my next posts.

In the past year or so I’ve been playing the role of technical lead / architect on most of the Flex projects I’ve been working on. Usually this involves a team of 3-6 developers and 1-3 designers. The focus of my blog over the next few months will be to pass on the tips and tricks that I’ve learned as a lead developer working with other developers and designers, the bosses as well; PMs, technical managers, QA managers, customers… et al.

To get started a few tips:

Use source control

At EffectiveUI we typically use SVN repositories, but choosing the right technology isn’t really as important as making the choice to use source control. Also, make sure your source control servers are redundant, or someday you might wish you had.

Create an easy designer developer workflow

In the world of RIAs the ability to stay agile within a life cycle of a project hinges on this point. If getting from design to an implementation of that design is anything less than nimble, you’ll feel some pain.

Patterns, paradigms, and frameworks… oh my

Select and use a micro-architecture that makes sense for your dev group and/or application. Cairngorm is one of the more popular micro-architectures used in Flex development, it’s what we use at EUI.

The benefit and problem with most Flex micro-architectures is: keeping the framework light weight and simple also means that (while providing flexibility) they do not provide enforceability. In some areas this is, arguably, a good thing and in others it’s not so good.

Needless to say, most of my posts will focus on Cairngorm and how we have used and tweaked it to create a good software design as well as an agile development environment.

Stay tuned for more….
-adam

So, I worked up a quick proof of concept that showed the java system properties in a DataGrid of an Apollo app.

After I showed this prototype to Brook we chatted a bit more about the implications. Brook and I both have java backgrounds and have had some experience with Swing. After gaining exposure to the tools for buidling interfaces that are available with Adobe’s Flex we both knew that going back to something like Swing would be really painful. This led us to the idea of building a framework for java developers that would give them all the benefits of building UIs in Flex and writing their core code in java. Also, to allow Flex developers to have access to the myriad of java libraries that are commercially available as well as libraries available in the open source community.

Enter Tony Hillerson : “Artemis” is born. Tony came up with the name Artemis. For those of you not hip to Greek Mythology, Artemis was the twin sister of Apollo (Wikipedia: Artemis, Apollo). After Tony and I worked out the software design for the Artemis Framework we decided that he would focus on installation / deployment / class loading issues and I would tackle the communication protocols.

Not long after Sean Christman came into the mix. Sean had the idea of making the “wow” demo of Artemis: Controlling a Flash game with a wii remote. So he did:

Sean’s presentation at Apollo Boot Camp definitely wowed audiences and brought the Artemis name to the developer community. Sean is also spear heading the community aspect of Artemis. He came up with the idea to get the developer community involved in Artemis by contributing with Artemis libraries that could be used in the framework.

The Future of Artemis

We’re furiously working on getting the framework out of Alpha and into Beta. In the meantime, very soon you’ll be able to download samples and screencasts that demonstrate what Artemis can do. I’ll be posting announcements of these releases here on my blog.If you’re a developer and would like to get in on Alpha development of Artemis libraries please contact Tony, Sean, or me (adam.flater@effectiveui.com).

Other reading about Artemis:

Ryan Stewart’s blog post on Artemis
Tony’s blog post on Artemis
Athnoy’s blog post on Artemis

The Abstract Class:

package abstractclass.exanple
{

import abstractclass.util.AbstractClassUtils;
import flash.utils.describeType;

public class ExampleAbstractClass
{

 public function ExampleAbstractClass() {
    AbstractClassUtils.enforceAbstractClass(
           this, ExampleAbstractClass,
         AbstractDefinitions);
 }

}
}

import mx.controls.Button;
import mx.core.UIComponent;

class AbstractDefinitions {

   public static var THIS_STATIC_PROPERTY:UIComponent;
   public var thisNonStaticProperty:String;

   public static function test(name:String, val:int=0) : int {return 0}

   public function nonStatic(blah:Button) : UIComponent {return null}

}

As you can see, the abstract properties and methods are defined in an inner class called AbstractDefinitions. These definitions are enforced by the call to AbstractClassUtils.enforceAbstractClass() in the constructor. Any sub classes are forced to implement these properties and methods.

How it works… The utility class uses introspection to ensure that the Objects are defined correctly. Introspection can be a fairly expensive operation, so use this method with care. You can always removed the enforceAbstractClass call when you put the code into production.

If you’d like to use this technique in your own apps, you can download my utility here: abstractclass.swc.

First off, let me give a quick example of a static code block in java:

public class StaticCodeBlockExample {
    static {
        // my static code
    }
    ...
}

The code inside the static block is run when StaticCodeBlockExample is loaded. Among other tasks, this concept is pretty handy for initializing any static properties that might depend on utility classes to setup.

The AS 3 equivalent:

package {

import mx.managers.ISystemManager;

[Mixin]
public class StaticCodeBlockExample {
    public static function init(systemManager:ISystemManager) : void {
        trace("my static code block");
    }
}
}

As long as this class is referenced somewhere in your application, the init method gets called when the application is starting up. Essentially, we have a static code block!

Here are the solutions that I came up with:

A simple solution is to surround your source code in a PRE tag. (PRE tag defined.)

PRE Tag source code:

<pre>
package com.eui.sourcecodeblog
{
 public class Foo
 {
  public function Foo() {
   super();
  }

 }
}
</pre>

This solution isn’t bad for starters. In most browers you should see the text in a mono-spaced font as well as pre-formatting with regards to spaces.

In addition to using PRE we can wrap our PRE elements in a DIV tag. Setting the width and overflow styles of the DIV will prodcue a box that’s friendly to your particular blog template.

PRE tag with DIV tag source code:

<div style="overflow: scroll; width: 350px;">
<pre>
package com.eui.sourcecodeblog
{
 public class Foo
 {
  public function Foo() {
   super();
  }

 }
}
</pre>
</div>

PRE tag with DIV tag example:

package com.eui.sourcecodeblog
{
 public class Foo
 {
  public function Foo() {
   super();
  }

 }
}

This is actually a pretty good outcome with little HTML coding. You could even move the style properties to a CSS class defined in your blog template code. This would make coding the DIV tag a bit easier. Pretty good, but still not quite as satisfing as my final solution for posting source code.

Spacing isn’t the only thing that makes source code easy to read. For me, the text colorization is essential to reading plesant looking source code. To achieve colorization there’s just one more step. I chooe to use a converter found at: http://www.riarock.com/as2html/as2html.htm.

Using the AS2HTML Color Converter:

   1. Paste your source code into the text box
   2. Select "Generate old (non-valid) HTML using font color tags"
   2. Click convert
   3. View source on the generated page
   4. Copy the genereated HTML code inside the BODY tag

It should look something like this:

package com<B><FONT COLOR="#660099">.</FONT></B>eui<B><FONT COLOR="#660099">.</FONT></B>sourcecodeblog<B><FONT COLOR="#660099">

{</FONT></B><FONT COLOR="#FF0000">
   public class</FONT> Foo<B><FONT COLOR="#660099">
   {</FONT></B><FONT COLOR="#FF0000">
      public function</FONT> Foo<B><FONT COLOR="#660099">() {</FONT></B><FONT COLOR="#0000FF">
         super</FONT><B><FONT COLOR="#660099">();
      }

   }
}</FONT></B></PRE>

The final outcome (including our div tag from the previous example wtih a few added style properties):

package com.eui.sourcecodeblog {

public class Foo {
    public function Foo() {
       super();
    }
}
}

If you’re feeling adventurous, it’s not too difficult to re-style the coloring done by AS2HTML. Just skip step 2 above and then inspect the generated HTML. You’ll need to add the CSS classes in the head of this document to your blog site’s template.