The conference, held at the 3LD (3-Legged Dog) Art & Technology Center, will feature tracks for Technology and Inspiration, along with the City track for exploring local landmarks. The Technology track will focus on coding and wiring for application architecture while the Inspiration track will center on design and user experience. The venue, which is a gallery for new media and experimental artwork, is meant to mirror the tone of the conference in the way it joins art and technology.

As part of the Inspiration track, I’ll be giving my talk entitled “Building RIAs with Style,” which I premiered at Flash Camp Chicago in February and have continued to refine since then. The talk starts with an introduction of lower level concepts about web graphics for developers, continues with exploring how some popular RIA frameworks handle styling, and wraps up by comparing two important workflow tools—Adobe Flash Catalyst and Microsoft Expression Blend—to demonstrate how the different platforms operate.

My goal with this talk is to provide rookies with a basis for understanding graphic assets, how to apply styles in RIA development, and the importance of styling as well as provide more advanced tricks of the trade for senior developers.

Check back to hear how it went, but first, watch my interview with Elad Elrom, Flash and the City conference organizer. Elad is a technical writer and senior Flash engineer, and he will also be leading a session entitled “Flex Data Binding Pitfalls: 10 Common Misuse Mistakes.”

Flash and the City is May 14-16 in New York, New York.

For those of you unfamiliar with Brightkite, here’s a quick overview:

Brightkite is a location based, micro-blogging, social networking platform. Unless you’ve been living in a cave for the last five years, you’re probably familiar with sites like MySpace and Facebook. One of the features of these sites is something called a status. The status you set is meant to reflect something about your mood, or what you’re up to, i.e.. “Adam is writing a blog post”. This concept is similar to an away message on an instant messenger account. The first site to gain traction as a platform that specializes in status updates was Twitter.

Brightkite retains the idea of status updates and friending other Brightkite users, but adds the concept of a “check in”. When you “check in” in Brightkite you’re saying where you are, geographically speaking. So, status updates (called notes in Brightkite) are posted from a place. This means these notes often have an annotative quality about the place where the user is checked in. Brightkite users also have the option of posting photos at a Brightkite location. There are a lot more features in the Brightkite platform including: an iPhone application, a mobile site, and integration with other social networking platforms: Facebook, Twitter, Flickr, and Fire Eagle. To find out more about Brightkite sign up for your free account at: www.Brightkite.com.

The Brightkite Wall is a kiosk-style application that provides a feed form a place, a person, or for search terms in the Brightkite ecosystem. The application was built using Adobe’s Flex 3 Framework for building Flash Rich Internet Applications.

One development challenge we faced was to implement a user interface that scaled in size regardless of the resolution of the display it was running on. Because the Wall can be launched on any machine, those machines might have a display like a small laptop screen or up to a large projection display. The Wall user interface needed to scale appropriately for each use case. This means fonts, images, and skins all need to look, relatively, the same one any given display size. Although this feature isn’t extremely difficult technically, it is a bit tricky. However, Flex does offer some advantages when it comes to implementing a UI like the Wall.

Another challenge was implementing an application that would execute in a full screen mode and reliably for a long period of time. To achieve this requirement we implemented a “BoundedList” UI class that automatically disposes of unused list items, but also allows for various transition effects to be applied as new items appear in the lists.

The data source for the wall is the Brightkite RSS feed. The application is parameterized to allow for dynamic configuration (on launch), of the RSS feed, polling rate, Brightkite place, and the size of the bounded lists. The parameters are passed using Flash variables and accessed on the initialization of the application.

Although The Brightkite Wall is a fairly simple Flex application, built in just a few weeks, it is a great example of how Flex can fit into a platform. Many companies rely on Flex for their entire product line, and it is often a great choice for many products. In the case of Brightkite, they had a specific problem to solve and Flex happened to provide an excellent solution for the problem.

The Wall is still in beta and Brightkite needs your feedback on the kinds of features you’d like to see in the next version.

The Brightkite blog: http://blog.brightkite.com
Brightkite on Twitter: http://www.twitter.com/brightkite

We launched our new Universal Mind web site today. You can find the site at: www.universalmind.com.

As far as I know, we are the first major Flex centric services company to release a site using Flex technology.

This site was built to be search engine optimized even before the Flex search bots that Adobe developed for Google and Microsoft. This is achieved in two ways: one, by using a dynamic back-end that expands the same content in an HTML view for browsers that do not support the Flash Player… and.. two, the site SWFAddress for deep linking into content areas. Case in point, load the site on your iPhone or Blackberry and you’ll see the same content and look-and-feel.

The site also features extensive use of Flex Modules. The use of modules allows deferred loading of many areas of the site that users would not want to otherwise wait to load.

[Update : Thanks to Andy Powell our UM Blog blog.universalmind.com has a new look-and-feel to match the new site.]

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.

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.