Adam Flater - Flex Blog

Flash and the City is this week!

2010-05-10T08:58:00.016-06:00

This week, I'll be at Flash and the City (FATC) in downtown Manhattan, a conference designed to give people the opportunity to attend sessions with industry experts in Flash, Flex, ColdFusion, mobile, and UX design—all while exploring world-famous sites throughout New York City. Conference-goers and speakers will also have the opportunity to mingle at social events like a yacht cruise and Brooklyn retreat.

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.

Flash Camp Chicago - Building RIAs with Style Resources

2010-02-26T14:57:00.003-07:00

As promised, here are the links that were referenced in my talk.

Vector Graphics - http://en.wikipedia.org/wiki/Vector_graphics
Raster Graphics - http://en.wikipedia.org/wiki/Raster_graphics

F*CSS

Site - http://fcss.flashartofwar.com
Source - http://github.com/theflashbum/fcss
Quick start - http://fcss.flashartofwar.com/quick-start-guide

Jesse Freeman - @theflashbum
http://flashartofwar.com/

FlexFormatter

http://sourceforge.net/projects/flexformatter/
http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/ (Eclipse software update URL)

Thanks to Flash Camp Chicago for having me present and to Roundarch for sponsoring my talk... it continues to be a exceptionally well-run conference and one of the highlights in my presenting year.

Merapi Session from BFlex

2009-10-25T13:59:00.004-06:00

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

2009-09-13T18:20:00.009-06:00

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!

2009-05-20T01:54:00.006-06:00

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

2009-05-03T21:58:00.019-06:00

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:

Leadership that believes in the success and direction of the company.
Working with my friend Dave Meeker on Merapi
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

2009-03-07T15:52:00.007-07:00

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

2009-02-01T17:38:00.007-07:00

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

2009-01-28T10:52:00.005-07:00

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.

Cairngorm Top 5 Tips - Number 4 - The EventGenerator

2009-01-27T14:42:00.012-07:00

The last tip in this series was #5. The AnnounceFaultEvent (read more).

and now for tip #4:

The EventGenerator

The EventGenerator class provides a mechanism for defining sets of Events to be dispatched either sequentially or in parallel. The EventGenerator is defined declaratively in MXML. The generator provides an aggregated result response when the last event in the set has finished. It is still possible to attach responders to your individual events, as per normal in the UM Cairngorm world. (I'll cover the Event-Responder relationship in more detail in a later post.)

There are couple of dependencies to the EventGenerator pattern. I consider these requirements good practice anyhow, but you should keep them in mind.

1. Define your event as a subclass of UMEvent not the Cairngorm Event Class
2. Define your command as a subclass of the UM Command class instead of implementing the Cairngorm ICommand interface.
3. Invoke super.execute() in your command execute method.
4. Invoke notifyCallers() in your command class when the command has finished executing.

And now for the example...

View the Application | View the Source | View the Docs

EventGeneratorExampleApplication - Defines the generators and the handlers functions for their results.

GetConfigurationEvent and DownloadSomethingEvent are basic Event classes that map to ConfigurationCommand and DownloadCommand, respectively. Both of these commands are implemented using the pattern I described in the dependency list above. Let's take a look at the ConfigurationCommand as an example.

As you can see, ConfigurationCommand overrides the execute method and invokes the super execute method. Finally, when the delegate has returned a response notifyCaller is invoked. This is the signal the EventGenerator needs to know that the command has finished executing. If the generator is triggered as a sequential dispatcher notifyCaller() signals the generator to dispatch the next event in the series. If the generator is running in a parallel mode, notifyCaller() is used to keep a count of the event / command pairs that have finished. When all the events have signaled a finish, then the generator will dispatch the aggregated result signal.

The delegate used (EventGeneratorExampleDelegate) is fairly straight forward. It uses a URLLoader to download a couple of files from the same server that the application is deployed on.

Up next, #3 Data Translators.

Cairngorm Top 5 Tips - Number 5 - The AnnounceFaultEvent

2009-01-26T14:33:00.015-07:00

Several months ago we had a Flex Frameworks roundup at our local Adobe User Group (RMAUG). I presented on the Universal Mind Extensions to Cairngorm and have since had a few requests for more info on the extensions. In this post I will explain my top 5 favorite ways to implement Cairngorm features in a Flash Application built with Flex many including elements from the UM Extensions.

So, without further delay...

5. The AnnounceFaultEvent

Error handling can often be an overlooked item when building a Flex application. The AnnounceFaultEvent class in the UM Cairngorm Extensions provides a nice way to generically handle faults. In fact, the UM implementation of Command has built-in support for the AnnounceFaultEvent. If a FaultEvent is passed to the fault method of the Command (via the IResponder interface), an AnnounceFaultEvent is automatically dispatched through the FrontController.

In a standard Cairngorm implementation a Command instantiates a Delegate and invokes a method on that Delegate to perform the action that the Command is responsible for. Typically, the Delegate will inform the Command that either a result returned form the operation or a fault returned from the operation. Because Flex is based on asynchronous communication the Command's call to the Delegate cannot be blocking (ie wait for a response). So, we need a way to signal to the Command that the operation has finished and deliver the result (or fault) of the operation. The common way to accomplish this task is using the Responder pattern. A Responder is a class of object that has both a result and a fault method. The idea is that a caller maintains a reference to the Responder instantiation, and the callee notifies the caller via this object. In the UM Extensions, the Command class will automatically fire an AnnounceFaultEvent when a Delegate passes back a FaultEvent to the Command.

Here's the example:

View the Application | View the Source | View the Docs

AnnounceFaultEventExampleApplication dispatches a AnnounceFaultEventExampleEvent

AnnounceFaultEventExampleEvent is handled by CairngormTipsFrontController

CairngormTipsFrontController instantiates AnnounceFaultEventExampleCommand

AnnounceFaultEventExampleCommand calls exampleOperation on AnnounceFaultEventExampleDelegate

AnnounceFaultEventExampleDelegate responds with a FaultEvent

The FaultEvent is handled by FaultCommand

Tip #4: The EventGenerator ~~is coming soon...~~ It's out now

Dynamic, Persistent Skins with Degrafa

2009-01-18T23:39:00.015-07:00

Degrafa is a declarative graphics framework for Flex. This means that programatic graphic instructions like:

graphics.lineStyle( 1, 0xffffff );
graphics.moveTo( 10, 10 );
graphics.lineTo( 30, 30 );
graphics.lineTo( 10, 30 );

can be expressed in simplified and elegant MXML source code.

From this post you'll take away an intro to Degrafa, how to dynamically modify your Degrafa skins, and how to persist those dynamically modified skins.

To start with, let's take a look at a simple Flex Button skinned using Degrafa:

View Application

In this example I'm using three Degrafa classes: GraphicBorderSkin, SolidFill, and RoundedRectangle to create the skin:

ButtonSkin.mxml

Then, that skin is applied to a Flex Button in:

ButtonSkinExample.mxml

GraphicBorderSkin is one of a few classes that implement the IGraphicSkin interface. These classes are the foundation for a Degrafa skin. Extensions of IGraphicSkin classes are typically written in MXML. For this example I've extended GraphicBorderSkin to add a few bindable properties for width and height. If you're interested in that implementation, take a look at the BaseGraphicBorderSkin in the source code.

SolidFill is fairly self descriptive. As you can imagine, it fills an area with a color. SolidFill may also have an alpha quality.

Finally, the shape of our skin is implemented using the class RoundedRectangle. RoundedRectangle implements the IGeometry interface, the classes used in the tag to draw the shapes of the skin. In our example there are 3 RoundedRectangles, each with increasingly more rounded corners. Each of these three shapes map to three states of the Flex Button; upSkin, overSkin, and downSkin. These shapes are filled using their respective SolidFill instances upFill, overFill, and downFill.

With just a little extra work we can make this skin dynamically configurable. The first step is to create a model to externalize the data of the skin. Our data model includes 9 properties:

This class is called ButtonDynamicSkinData. The next step is to have our skin bind to the values set in ButtonDynamicSkinData. You can view this in the ButtonDynamicSkin class:

The final step is to create a few controls to modify the values in the model. I've added these controls to the Application class ButtonSkinDynamicExample... and voila:

View Application

The final step is to persist this data and load it at a later instantiation of the skin. There are many ways to persist data in Flex. For this example I've used the simple approach of persisting the data via url encoded variables. In the final example a button labeled "Goto New URL" is added. If you modify the settings of the skin and then click the button, a new instance of the application loads with the persistent skin that was modified.

To facilitate the persistence I've added two methods to the class ButtonDynamicPersistentSkinData. The method toUrlVariables() expresses the data model as URLVariables and the setValues() method sets each property of the model based on the values of the URLVariables method parameter.

View Application

This example shows a method for implementing a fully dynamic and persistent skinned Flex application.

The source for the examples in the post can be found here.

More links:

Degrafa Samples
Degrafa Downloads
Degrafa Docs

This post is a result of recently using Degrafa to implement similar features on a project I was working on. I was very pleased with how rapid the development process was, as well as the opportunity it gave for an elegant skinning solution. Degrafa comes highly recommended by me for any Flex project.

Merapi Update

2009-01-11T22:43:00.012-07:00

It has been far too long since I've blogged about Merapi, so I thought I would share what's up with the project. First off, the next release has been coming soon for far too long. That is my responsibility and I apologize to everyone that's been waiting on the new build. However, there is good news! The new release is now live on the site. Go to www.merapiproject.net and check it out. You can sign up for an account if you aren't already.

It's really great to see the Flex community cranking out cool examples with a technology that you've created. This is most definitely the case with the recent “Cocomo ready” Air Wiibot. These guys mashed up Cocmo, Flex, and Merapi to control a Lego Mindstorm robot with a Wiimote. So what's Cocmo for? They've used Cocomo for live video conferencing as well as the ability to control the robot remotely. So, if my friend Jordan happened to have Nathan (our Lego Mindstorm robot) at her house, I could fire up this app at my house and control Nathan remotely using a Wiimote... really cool stuff. Here's the YouTube video:

MAX Recap

For those of you that missed MAX there was a lot of Merapi action, here's a quick recap.

First off, Tour De Flex.

Tour De Flex is an application created by Adobe used to explore components in the Flex community. Adobe used Merapi to connect the Eclipse plugin portion of the application to the Tour De Flex AIR application. You can get Tour De Flex at: http://flex.org/tour and read more about the Merapi integration on Holly Schinsky's blog here: Flex/AIR to Java Communication Using Merapi.

Moving right along... There were a few new demos and a couple of Merapi announcements at the sessions we gave at 360 | MAX. One of the first demos I showed was Outlook integration. Here's the YouTube video:

The next new demo was Excel integration. If you pay attention to the video on this one you will notice one of the announcements we made at MAX, Merapi is now in the browser! In this demo you will see a Flex browser application interact with Excel:

Thanks again to Universal Mind and Adobe for supporting me at MAX.

Coming up...

FlexCamp Chicago 1/23, FlexCamp OC 1/31, and 360 Flex | Indy 5/18-20 (probably)

I'll be presenting at each of these conferences (assuming Tom and John let me in again.. they have yet to announce speakers) ;)

There will be some especially interesting announcements at FlexCamp Chicago. Make sure you turn out if possible, otherwise, watch the blogosphere for the recap.

Thanks to everyone who has been using Merapi and giving us feedback on the framework. The creativity, ingenuity, support, and patience from the community has been excellent.

Enjoy the new release!

The Brightkite Wall

2009-01-05T13:47:00.011-07:00

In late 2008 Brightkite engaged Universal Mind to develop an application called The Brightkite Wall. The Wall is a Flash Application built using Flex.

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

Adobe MAX 2008

2008-11-12T11:29:00.014-07:00

Monday, November 17th marks the official start to this year's Adobe MAX conference. I wanted to give a quick update on where I'll be and what I'll be up to at MAX. So, here it is.

First of all, at MAX you can follow me on Twitter or BrightKite my handle is "adamflater" on both. By the way, the BrightKite guys were cool enough to setup a placemark for MAX. The placemark is "max2008". That's a valid placemark for checking in and posting your notes and photos while at MAX.

Aside from my scheduled events you'll also find me at the Universal Mind booth throughout the conference. We'll be demoing all of the apps we've been hard at work on in the past year, including our GIS / Data Visualization product: SpatialKey, and the MAX Award Finalist NASDAQ Market Replay. Market Replay is an application that I had the pleasure of working on with the NASDAQ team. Please vote:

The partner booths will be located at: Moscone West, Level 1.

My Schedule:

Speaker Dinner
When: Sunday, November 16th

I'll be participating in several sessions at MAX and also attending the annual speaker dinner. I hope to see all the familiar faces as well as meet many of the other great folks in the Adobe community I have yet to become acquainted with.

Adobe AIR++
When: Monday, November 17th, 11:30 am - 12:30 pm
Where: Moscone West 2000

This is a session I'll just be attending. Andrew Trice has been doing some cool stuff with Merapi and I definitely want to check it out. I'll only be able to attend part of the session due to the Merapi session directly following this one. Andrew, we'll save you the last demo spot at 360 | MAX.

Merapi at 360 | MAX
When: Monday, November 17th, 12:30 pm - 2:00 pm
Where: Moscone West, Level 2

John and Tom, the men behind 360 | Conferences, have always been extremely gracious about letting me speak at their events. This year they are hosting an unconference at MAX. The unconference will feature advanced Flex and AIR topics.

At the last 360 Flex conference in San Jose my friend Jordan and I presented on Merapi. We showed an AIR application controlling a Lego Mindstorm Robot in real time. At both of our 360 | MAX sessions we're going to have a lot of people from the community present the Merapi applications they've been working on. You can count on seeing some pretty cool stuff from: Dave Meeker, Andrew Powell, Andrew Trice, Holly Schinsky, Joe Johnston, and me. We'll be demoing AIR apps that integrate with GPS, RFID, Eclipse, Oracle, Outlook, Growl, MacBook sensors, and of course Legos.

You won't want to miss these Merapi events and that's why we have three of them.

MAX Birds-of-a-Feather (BOFs)
When: Monday, November 17th, 8:30 pm -10:20 pm
Where: Moscone West, Level 2

I'll be participating in two BOFs on Monday night: AIR Gone Wild and the Intuit Quickbase Platform.

AIR Gone Wild is a BOF hosted by Greg Wilson from Adobe. We'll be showing more of our Merapi goodness at this BOF. If there's a question you don't have the chance to ask in a session this BOF is a great place to come and ask it.

Intuit has a new platform geared towards Flex. It's called Quickbase and it's an interesting take on cloud computing. I had the opportunity to work with the platform on one project and I highly recommend checking these guys out.

Merapi at 360 | MAX
When: Tuesday, November 18th, 12:00 pm - 2:00 pm
Where: Moscone West, Level 2

In our second Merapi session at 360 | MAX we'll cover anything we didn't have time for in the previous day as well as demo all the cool stuff from the previous sessions. Conferences tend to be a place where a lot of people crank on cool ideas they have. So, you never know, a new app might pop up between Monday and Tuesday they we'll demo during this session.

InsideRIA Outlook, 2009: What Every Developer Needs to Be Thinking About
When: Wednesday, November 19th, 11:00 am - 12:00 pm
Where: Moscone West, Room 2009

Rich Tretola, community manager of InsideRIA.com is hosting this session. This will be a panel format where each of the presenters brings their ideas on the future of RIAs. I'm pretty excited for this one, panel discussion are some of the most valuable aspects of any great conference.

Introduction to Flex Builder 3
When: Wednesday, November 19th, 2:00pm - 3:00 pm
Where: Moscone West, Room 2005

This will be a great session for those of you just getting starting or thinking about jumping into Flex development. I'll be covering all the basics of the Flex IDE as well as an overview of what Flex is as a whole. In my source code demos I'll be integrating a Flex app with BrightKite, the site I mentioned earlier in the post, to show you how easy it is to consume data in Flex. I'm looking forward to great questions at this session. It's always interesting to find out what people need to know about Flex.

All right, well I think that's enough. Looking forward to seeing everyone at MAX!

-adam

EclipseWorld Session Recap

2008-10-29T09:13:00.004-06:00

As promised in my session at EclipseWorld today, I'm posting a recap of the session. My session was titled "Building Flex/AIR UIs for Java Using Merapi". The session gave an overview of Flex, Flex Builder, and Merapi. I also provided some sample application demos using the Merapi framework. You'll find a link to download the slides from the session at the end of this post. My session was slated as a 100 level talk so I covered a lot of basic, high level concepts regarding Flex and Flex Builder. I'm interested to hear feedback on the talk as I'm typically presenting at Flex centric events and EclipseWorld focuses more on Java development. My hope is that the session was valuable to those seeking an introductory look at Flex and AIR.

Thanks to everyone that attended and for all of the great questions throughout the session.

Download links:

Session Slides

Merapi Examples:

Mac Book Pro Accelerometer
Lego Mindstorm Robotics
Live GPS Visualization*
Sending Growl Notifications*
RFID Enable AIR Applications*

* - Part of Andrew Powell's Blog infoaccelerator.net

360 Flex | San Jose - Merapi Session Survery Feedback

2008-09-19T11:11:00.007-06:00

To keep in the open tradition of 360 | Flex I'm posting my survey feedback once again. The Merapi session at 360 Flex | San Jose was really fun and was happy to share the stage with my friend Jordan Synder.

There was one very constructive comment about our examples. The examples that I showed were pretty basic and Jordan's example was somewhat complex. Showing some deeper examples with medium complexity is a great suggestion for improving this talk and a great take away for me in preparing for my next Merapi session.

Thanks to everyone that came to the session and provided feedback.

Without further delay...

How to make your AIR app blow up with Merapi

Merapi is a framework that enables a bridge between Flex on AIR and Java at the desktop layer. If you need to access a Java api in Flex or a Flex API in Java, this is the right tool for you. This session will cover the basics of using Merapi to build a Java enabled AIR application. Please bring your questions and comments about the framework as well as any applications you want to show off. This will be an interactive session, you'll be able to code along with the session and try out some Merapi samples.

Respondants: 33

What the user Expected? 90.91 %
Slides Useful: 84.85 %
Average Rating: 4.3030
Session Informative? 100.00 %

Was the speaker authoritive?

Answered questions very well and had in-depth knowledge of the subject material

Both speakers spoke well.

Oh man, they knew like everything about this stuff. EVERYTHING.

Seemed very knowledgable, and was confident in what they were presenting.

Adam was very knowledgable about the topic, seeing as he wrote the framework. He was confident in his presentation, and had very interesting content.

he is involved with the beta framework and created working apps

Both Adam and Jordan did a great job with their presentation. Jordan's usage of Bluetooth via AIR to control the LEGO MindStorm was way cool.

adam and jordan are badass

Both speakers were extremely knowledgable. Jordan; however was somewhat soft spoken and monotone, as if she was not really interested in presenting.

Adam and Jordan really know their framework, and they didn't have trouble fielding question from the audience. Unfortunately, Merapi is still in its infancey, so a lot of their answers were, "That's something we're planning on doing."

Adam and Jordan really know their framework, and they didn't have trouble fielding question from the audience. Unfortunately, Merapi is still in its infancey, so a lot of their answers were, "That's something we're planning on doing."

I did not previously know anything about Merapi

Yes

I love how you have the authors of the various projects presenting on their stuff.

he was one of the leads on the project and seemed to have a good grasp of what he wanted to present and the way to do it

He knew what he was doing, explained it well

Both speakers seemed very authoritive with the toolsets.

Was a fun preso. Jordan's robot rocks!

Loved Ms. Snyder's application!

Was the Session Informative?

I had never heard of Merapi before

Good demos

It was interesting to see what Merapi was capable of and how it worked.

I learned a whole whole lot of things.

Good examples of what can be done with the project, and a good quick intro on how to get started.

I have a sense of what merapi is and is not

The session was example-heavy, which really helps when showing off a framework.

The session was example-heavy, which really helps when showing off a framework.

very much so

Basic introduction to Merapi, though it is in private beta.

he started with just 4 slides and then jumped into code

yes, but I basically knew all that Adam said, but the lady was all new, that was great

Were the Slides Useful?

There were a few slides to give background info then many examples which really helped

Primarily code.

They were pretty good, but it was really all about teh codez.

There weren't any slides, just sample code. Which is much better than slides.

There were only a few of them before he jumped in to code examples, which was great. The examples were simple enough to easily understand everything that was happening, but still interesting enough that they kept the audience's attention.

Not that they weren't useful, just pretty much non-existant. Not a bad thing, hands on demos rock.

There weren't many slides, but lots of talk about what the code did, so that was great.

simple and sweet

Yes code snippets were concise and easy to understand

There weren't many slides because the session was driven by examples, but for what they were, the slides did provide the necessary information: what Merapi is, where to get it, and contact info for the speakers

There weren't many slides because the session was driven by examples, but for what they were, the slides did provide the necessary information: what Merapi is, where to get it, and contact info for the speakers

good overall

Yes

but it didn't matter. the code was the best way to describe merapi

cant remember the slides - i do remember the robot

Additional Comments:

The focus on hardware integration was interesting although unexpected. A demo of complex data manipulation using Java would have been a nice addition. There was some delay switching presenters' computers.

Adam is such a badass that now I'm following him on Twitter. Also, I really liked the guest appearance by Jordan. She has a neat robot and I want to be like her (knowledgeable about robots; not female).

I had never heard of merapi. I walked in thinking it yet another cairngorm clone but walked away with an appreciation of it's real domain. nice presentation. concise. And thank you for finishing when you were done rather than pull out a load of filler.

Good speakers. Great demos. Bring them back.

Very good. Would like to see solutions to deplyoyment and runtime intigration with java and air

There were no Air Apps that blew up.

Great demo from both presenters on using Merapi to bridge AIR/Java

Adam had several examples that were somewhat low-level, getting no more complicated then pushing random numbers generated in Java to Flex, and Jordan's examples were much heavier. I would like to have seen something in the middle: perhaps how to leverage Merapi to do something on the OS that you cannot do in AIR. The LEGO Mindstorm demo was fantastic. It really drove the power of the framework home.

Adam had several examples that were somewhat low-level, getting no more complicated then pushing random numbers generated in Java to Flex, and Jordan's examples were much heavier. I would like to have seen something in the middle: perhaps how to leverage Merapi to do something on the OS that you cannot do in AIR. The LEGO Mindstorm demo was fantastic. It really drove the power of the framework home.

speakers were very knowledgable

The Lego Mindstorm NXT demo was very clever.

Great example of hardware / air integration.

AIR controlled cars woot!

Dude, the Mindstorm stuff was HOT, HOT, HOT!

it would have been nice if the developers of merapi had more of the projects future planned and deployment issues decided upon but overall it was a good introduction to what merapi is and where it fits in a developer's toolkit

exciting stuff

Great examples!

as a java developer this is a solid tool to work with AIR

New Universal Mind Web Site is Live!

2008-08-31T13:07:00.009-06:00

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.]

Flex Authority is Live

2008-08-24T20:47:00.004-06:00

The first issue of Flex Authority is out! I was lucky enough to attend 360 Flex in San Jose last week and grabbed a pre-release copy there. In addition, Dave Meeker and I were lucky enough to be interviewed by Leif Wells. Leif was really great about coordinating this interview on Merapi. Thanks for your patience Leif.

So, pick up your copy or subscription at Flex-Authority.com and find out more about the Merapi Project direct from Dave and me via Leif.

Recap from 360 Flex | San Jose

2008-08-19T17:21:00.005-06:00

Coming at you from sunny San Jose, California at the eBay campus...

Yesterday at 360 Flex I presented a session on Merapi and moderated a panel discussion on open source technology. At the Merapi session we discussed the focus of the project and show a lot of sample applications. Including a few demos that showed the ease of use when developing with Merapi.

Here's some sample code that shows how to do a simple echo of a string from a Flex UI to Java and back again:

Flex Source:

Java Source:

This simple application is an example of how easy it is to communicate from AIR to Java (and vice-versa) at the desktop.

I also walked through a bit of the source involved with creating the gyroscope demo shown in the video below:

Enter one Jordan Snyder.

Jordan is a friend of mine that has a keen interest in messing with hardware, amoung other things. So, we were hanging out one night at my place and she saw that I had a Lego Mindstorm robotics kit. I proceeded to tell her bout my plans to integrate Merapi with some of the Legos APIs... long story short, she took the Mindstorm home with her and did all the work. Here's a video of the robot that Jordan presented in the same talk:

So, what's up here? The AIR application is controlling the Robot in real time using Merapi via Bluetooth. Why is that cool? This a proof of concept, but it's not smoke and mirrors by any means. This means that Merapi has a huge potential to soon be a a cross platform solution for building device enabled Flex/AIR applications.

I submitted this talk for the Adobe MAX conference when they were asking for proposals, but unfortunately it was not selected. I will be at MAX though and would be happy to talk with anyone who is interested in Merapi at the Universal Mind booth. If there's enough interested in having a birds-of-a-feather-session on Merapi, I'd be happy to accommodate that as well.

The feedback from the folks here at 360 Flex and those of you digging into Merapi has been great. Keep the comments coming and we'll keep on adding features and stability to the framework.

[ Update: More view of "Nathan" the 360 Flex Robot ]

LFFS - 12: Flex Builder Part 2 - Getting Acquainted With The Workbench

2008-06-24T14:23:00.005-06:00

The second post in our sub-series on Flex Builder is out!

Read here: LFFS - 12: Flex Builder Part 2 - Getting Acquainted With The Workbench

Also, we've registered www.learningflexfromscratch.com as a shortcut to our content on Inside RIA.

thanks for reading
-adam

Tornado Hits my Hometown

2008-05-27T07:02:00.023-06:00

I've been in touch with a lot of you about the recent storm that swept through my home town, but I wanted to take a moment to give a full update now that I finally have a minute to pause.

At about 5pm on Sunday, May 25th a devastating tornado hit my hometown of Parkersburg, IA. I was visiting some friends nearby in La Crosse, WI where I received a call from my parents that no one had heard from my 91 year old grandmother. We also heard news that a woman that lived 4 houses down from her had been a victim of the storm. After an hour or so, some of our good friends that help care for her gave us word that she was pulled from the the wreckage of her house completely unharmed and that she was safely resting in a Red Cross triage facility. She had the good sense and guidance to take shelter in the shower stall of her basement bathroom during the storm. This room ended up being the most undamaged room in the house and was the safest place she could have possibly been.

A lot of friends have been asking me if there's anything they can do to help. If you have the means, I'd suggest donating to one or both of these organizations:

1. The Red Cross.

This organization is awesome. I had always heard about the great stuff they do, in the last few days I was able to see it first hand. They cared for my grandma until we could get to her, tracked down a print out of her medications, contacted a local pharmacist to get her a 3 day supply of medication on the night of the storm, and when we rolled into town the next day they were on the scene handing out water and assisting with the cleanup efforts.

2. Lutheran Disaster Response (LDR)

This may not be a well known organization to you, but if you check out their site you'll quickly find out that when disaster strikes LDR is quickly there. We're told they'll be setting up in town tomorrow to aid in the restoration process. I volunteered to help with Katrina relief work in February this year and the LDR presence is felt strongly by the people displaced by that storm. One person I met there said, "if it wasn't for the volunteers like y'all that keep coming down here, this area would never have been rebuilt."

Both my grandma's and uncle's houses were destroyed by the Tornado. Also, my uncles vehicles and place of work were taken. Driving through town yesterday felt like witnessing the aftermath of a bomb. They are saying that 1/3 of the town has been completely destroyed, including the town's; grocery store, gas station, lumber yard, high school, and several hundred residences.

The response from friends in the town who's houses weren't damaged has been really amazing. They dug in immediately to help us sift through the rubble and recover precious items like photographs and family heirlooms. The governor was in town surveying the damage yesterday and asked the president for federal assistance. Anything you can do to encourage your representatives to support the federal efforts to help the town rebuild would also be appreciated. One phone call might not do much, but (especially in an election year) a few hundred or thousand calls might see some action.

Thanks to everyone who has been supportive to my family and me in the last few days. I'll be heading back to help cleanup as soon as I pick up my sister from the airport.

-adam

New Rocky Mountain Adobe Users Group Site

2008-05-24T10:18:00.004-06:00

The Adobe Users Group in the Denver area has a pretty sweet new site www.rmaug.com. The site and user group are maintained by the crew at RealEyes. My favorite feature so far is the blog aggregator for the local Adobe / RIA bloggers. It's cool to see how much is going on in the Denver/Boulder area in terms of new technology. Stop by and give the site a look, and if you're an RIA coder looking for a new home, I'd consider checking out Denver. Also, if you're a local technology blogger submit your feed url to rmaug and get it aggregated. (They may want you to be a user group participant though.. which would seem fair to me.)

Merapi + Physics

2008-05-21T19:28:00.006-06:00

Today at Web Maniacs I gave a fairly brief, short notice talk on Merapi. I had a few slides and presented a couple examples. The coolest example by far is something that Doug McCune helped me throw together. This example involves using a physics engine for Flex called Foam and Merapi to invoke the Java/C call SMS/Unimotion to read the Mac Book Pro's accelerometer. Rob Rusher (also a speaker at Web Manics) was nice enough to shoot a video of this example:

and here's a screen shot:

The source code needed in the Flex app is this tag:

  <gyroscope:merapigyroscope id="gyro">

The MerapiGyroscope class has a few properties (smsX, smsY, smsZ) that are bindable and automatically updated by the Java side of Merapi.

This is sneak peak of much more cool stuff to come from the framework and I can guarantee that these libraries will be available for you to play with soon.

Sean The Flex Guy and UM

2008-05-21T08:31:00.003-06:00

Another great developer started working with Universal Mind recently. I met Sean Moore via twitter and blogs and have been really impressed with his skills and background. You can check out Sean's post about it on his blog.

Glad your on a UM project Sean.. Hopefully we'll work together directly soon, then it'll really "watch out now" time.

InsideRIA Post - More on Static Code

2008-05-16T09:57:00.004-06:00

I have a new post up on InsideRIA called : More on Static Code. This is in response to the high demand that I saw in my blog analytics for a post I did sometime back on this blog called Static Code Blocks!.

I hope you find it helpful.

-adam

Web Maniacs 2008

2008-05-15T23:25:00.014-06:00

When I originally submitted two topics for Web Maniacs a few months ago I figured I might end up presenting one of them. Now I’m doing four.

In order of appearance:

9a, Wed: Advanced Skinning and Component Development

This session will actually be more about skinning and less about component development. After presenting this topic at 360 Flex | Atlanta I learned that the CS3 design extensions and general Flex skinning techniques are more than enough info to fill a session. I’ll be happy to answer any questions on component development, but the focus of the talk will be all the different ways to create skins. There are various pros and cons associated with each skinning method and we’ll talk a bit about those as well.

2p, Wed: The Merapi Project - A Framework for Bridging Java and AIR

I’ll be presenting some samples applications in this session and answering questions regarding the project. We’ll be entering a private alpha cycle during Web Maniacs, so this is an exciting time for Merapi. If you have an interest in how to push the boundaries of AIR to extend into Java at the desktop, come check out this session.

9a, Thu: Design Patterns and Architecture Frameworks

In this session I’ll be presenting several of the design patterns found in the classic Gamma, Helm, Johnson, and Vlissides text “Design Patterns: Elements of Reusable Object-Oriented Software,” with a Flex twist. Some of these patterns appear the the Flex framework, some appear in Flex application frameworks, and some are just common patterns used in the everyday life of an OO developer. This talk is focused towards the intermediate to expert level object oriented programmer.

11a, Thu: Flex Open Source Panel Discussion

This panel discussion will include founders and contributors from various open source projects in the Flex community. I’ll introduce the panel and each project that’s represented. Then, we’ll pose some general questions about open source technology and the implications on using OS projects in your Flex applications. As we wrap up, we’ll take general questions on OS as well as specific questions for the panel regarding the projects they work on. If you're interested in being on the panel, please contact me at adamflater at gmail dot com.

Whew... I think that’s about it. See you all in D.C. and watch my blog for assets from these talks.

thanks for reading

-adam

Need Opinions on LFFS

2008-05-09T14:26:00.003-06:00

As many of you know I've been co-writing a series on the O'Reilly site www.insideria.com with my friend Scott Sheridan called Learning Flex from Scratch. A big thanks to Rich Tretola for having us on as a part of Inside RIA.

When we started the series Scott had no experience as a programmer. His academic background is in Psychology and he is a music and yoga teacher. He literally began this project at a point of learning Flex from scratch. My academic background is in Computer Science and Sociology. One of the things that interested me in the very small amount of study I did in the Sociology of Eduction is the idea that students often make the best teachers. So, my role in this project was/is as mentor and technical editor as Scott chronicles his experiences learning the ins and outs of becoming a Flex developer.

The insight that I've gained on how a person learns to be a programmer has been invaluable. I hope this project has resulted in a novel resource for the novice to learn how to really use all of the powerful capabilities offered by the Flex platform.

So, we're starting to talk about planning where to go next. John Wilker and Tom Ortega were gracious enough to accept both Scott and myself as presenters at 360 Flex | San Jose. We will be presenting the LFFS series. After that we're open to what comes next and I'd love to hear some feedback on what would be most valuable to those of you out there learning Flex.

Here are some ideas to think about:

- A full length book in the LFFS style

- A series of pocket-guide books

- Continuing the series as is

- Creating a featured site for LFFS that includes addt'l writers

- A focus on LFFS sessions at Adobe community events

Don't think of this as a comprehensive list of choices or that any choices are mutually exclusive. We'd love to hear what will be the most valuable resource for you. Feel free to comment on this post or e-mail me at adamflater at gmail dot com.

thanks

-adam

LFFS - 9 - MXML Continued... And A Sample Application For You To Work With!

2008-05-02T13:42:00.002-06:00

The latest post in the Learning Flex from Scratch series is up. This post continues exploring the MXML language and leaves you with a uncompleted application to finish. The first "homework assignment" of LFFS, if you will. Check back next week for explanation of the solution Scott came up with.

thanks for reading

-adam

Merapi is churning... out comes "Hello World"

2008-04-14T10:37:00.007-06:00

I've been getting a lot of e-mails from people regarding Merapi lately. So, I thought it'd be a good idea to put together a "Hello World" screen cast. In the video below you'll see a very simple use case of the framework: An AIR application that connects to Merapi on startup and receives a String from Java that's shown in a Flex Label control.

So, what does this mean? It means..
- The framework is coming together and we'll be looking for your questions and concerns about how we're implementing it.
- A private alpha will be on it's way very soon.
- More screen casts will be coming.
- There's real code now. Merapi is now classified as active.

[ Update - Dave goes into more detail on the latest : Merapi says "Hello World" - 1.0 Framework nears completion ]

LFFS - 7: Helpful Resources For Learning Flex (part one)

2008-04-10T10:51:00.002-06:00

The latest post in the Learning Flex from Scratch series is up. It focuses on the online resources Scott has found useful while learning Flex. We'll be doing more of these posts as the series continues, but you can also check out the del.icio.us account that Scott setup for LFFS. Here you will find the URLs of the resources he finds valuable while learning Flex and writing Learning Flex from Scratch.

thanks for reading

-adam

More Inside RIA Blogging

2008-04-09T11:29:00.004-06:00

Apart from the Learning Flex From Scratch series I'll be doing some guest blogging on my own from time-to-time. My first post is on 360|Flex San Jose.

Thanks to Rich for making me a two time Inside RIA guest blogger.

LFFS - 5 & 6 are out

2008-04-04T08:27:00.002-06:00

Looks like I forgot to do a post announcing LFFS 5 and now 6 is out as well.

In LFFS 5 Scotty is taking us into the world of ActionScript loops and conditionals. Need a beginners look at a for, for in, for in each, while, or do while loop? Look no further than LFFS.

In LFFS 6 we're jumping into Arrays. This post is an introductory look at using Arrays in ActionScript. It is by no means comprehensive, and doesn't touch on collections yet, but it's a good way to jump in to the concept.

Thanks for reading
-adam

More Merapi news - Dave Meeker is on

2008-03-27T11:47:00.003-06:00

Dave is joining the team on more of the business strategy / user experience angles for Merapi. He just released a nice post today as an overview of what Merapi will be aimed at.. check it out here.

LFFS - 4: Actionscript 3.0 (Part 1)

2008-03-12T17:30:00.003-06:00

Our latest post in the Inside RIA series "Learning Flex from Scratch" is up. It's called: LFFS - 4: Actionscript 3.0. In this post Scott begins his journey into the syntax of Actionscript 3.0. This first post is a look at how to write a basic class... posts will follow with examples on writing loops, if-then conditionals and more..

stay tuned
-adam

An open call for Designers

2008-03-09T13:10:00.005-06:00

Universal Mind has growing need to offer design services to customers in conjunction with our industry leading Rich Internet Application development. If you are a designer that loves RIAs, user experience, bleeding-edge internet technology, information architecture, and Adobe's creative suite, we'd like to talk to you.

Universal Mind is an Inc. 500 company whose founders have a strong background in technology and professional services. We are a distributed company that has employees and contractors on staff across the country. Our distributed nature makes us very nimble. Each of our consultants is equally skilled at working from their home office as they are going on-site to work closely with a customer's development, design, product, or project management teams. We're also not new to the Flex/RIA game. The companies founders have ties all the way back to the days of Allaire Cold Fusion consulting. Our relationship with Adobe is strong and our customers love the experience of working with UM teams.

If you think have you what it takes to join our stellar team, please send over a resume and most importantly a portfolio. Feel free to contact me at [adamflater at gmail dot com] if you have any questions or submit your stuff directly to [jobs at universalmind dot com].

There are a few of us in the Denver metro area now and would be really excited to meet some great people locally or people who would like to relocate to Denver, but if you're settled in somewhere that suits you geographically that's not a problem.

By the way, we're pretty fun too, check out what Doug McCune has to say about being a Universal Mind employe: Doug's Blog.

360|Flex Atlanta Survey Results

2008-03-04T15:31:00.006-07:00

I thought I'd mirror Tom and John's style of being transparent about 360|Flex and share the survey results of my talk.

Thanks to everyone that gave feedback. I'll be giving a 2.0 version of this talk at Flex Maniacs in May and feedback from attendees is really helpful to know what to polish.

If you were at my talk and didn't have to time to give feedback, feel free to comment here or send me an e-mail off-line. I'd love to hear about how to make this talk more usefull.

thanks
-adam

Results for your session, enjoy.

Advanced Skinning and Component Development

Respondants: 7
What the user Expected? 71.43 %
Slides Useful: 71.43 %
Average Rating: 4.4286
Session Informative? 71.43 %

Was the speaker authoritive?

Very good presentation, had materials available for us to download

Knows his stuff. Great talk, good pace.

Was the Session Informative?

Hadn't really done skinning - very cool functionality

Useful step-by-step demos!

Were the Slides Useful?

Great reference slides.

Love the slides and the examples on how to skin in Flash. I will definately be using them in the future.

Additional Comments:

well done

LFFS - 3: Object Oriented Language

2008-02-29T09:41:00.004-07:00

Our latest post in the Inside RIA series "Learning Flex from Scratch" is up. It's called: LFFS - 3: Object Oriented Language. In this post we unpack the definition and need for an object oriented language and also define object oriented concepts that are relevant for our next post on ActionScript.

Stay tuned.. thanks for reading.

Resources for my 360|Flex Talk - Advanced Skinning and Component Development

2008-02-27T10:27:00.002-07:00

You can download the resources for my talk here.

Flex Open Source Panel at 360 Flex Tomorow

2008-02-25T20:40:00.005-07:00

If you're at 360|Flex in Atlanta this week, we'll be doing a panel discussion of a bunch of different Flex Open Source projects in the hands on room tomorrow at 10am. I'll be there talking a bit about Merapi, there'll be folks representing other projects such as, Degrafa, OpenFlux, Flex Lib, the MDI windowing project.. etc... This will be a very open panel / birds of a feather style session. So, if you want to hear about an OS project or get some questions answered, come on over for the session.

Speaking of Swag...

2008-02-22T10:05:00.011-07:00

I'll have Merapi t-shirts and stickers on hand at 360|Flex. There's a limited supply of the shirts, but if you come to my talk you'll have a better chance of vying for one.

Thanks to Andrew Powelll for receiving the shirts at his house in GA (and modeling for the photo).

Also, I need to thank the companies that sponsored these shirts...

First of all, the biggest sponsorship came from the Tom and John at 360... thanks a lot guys ... your logo is on the back ;)

The rest of the sponsors are listed in alphabetical order...

Thanks again to all the sponsors!

Sneak Peek of My 360 Talk

2008-02-22T09:53:00.005-07:00

My talk at the upcoming 360|Flex conference in Atlanta is called : Advanced Skinning and Component Development. Once I got in the thick of preparing for this talk I realized it was really two topics. So, my talk will focus more on skinning than component development, but I'm still going to try to hit both topics.

First, we'll look at the basic skinning techniques and some quick examples. Next, I'll move on to an example of using the CS3 Flex Design Extensions to build this custom skin for a ComboBox:

Finally, (time permitting) we'll wrap up with a look at the component development process for this custom horizontal list component (a recreation from Apple's site) :

Please bring any questions or comments you might have about skinning or component development.

I'll be posting all the resources for the talk on my blog just before the session.

cya in Atlanta
-adam

LFFS - 2: Flex Defined

2008-02-19T10:52:00.003-07:00

The second post in our Learning Flex from scratch series is up: Flex Defined. This post defines Flex and the important concepts around it. In our next post we'll start looking at the programming languages of Flex... Stay tuned...

Top 10 Reasons to go to Flex|360 - Atlanta

2008-02-17T10:06:00.006-07:00

10 - Swag

9 - Tons of Great Sessions

8 - Adobe's Big Announcement

7 - The new 360 API Contests

6 - Awesome Networking Opportunities

5 - Tom and John know what's up... you need to meet them if you do Flex

4 - Doug McCune.. you just never know...

3 - Ryan Stewart + Thermo.. c'mon

2 - Matt Chotin, Very nice.

(Courtesy of Louie Penaflor)

1 - Beer

LFFS - 1: Meet the Authors, Meet Flex

2008-02-12T10:54:00.001-07:00

Our first post is up on the O'Reilly Inside RIA Site.

LFFS - 1: Meet the Authors, Meet Flex

This first post is an introduction of Scott and myself and a way to set a base for what we'll be up to in the coming posts. Our next post is called Flex Defined. In Flex Defined we'll define the major topics of Flex that are important for a novice learning Flex to be aware of.

You'll also be able to find the aggregation of all our posts at: InsideRIA: Adam Flater and Scott Sheridan Archives

Blogging on O'Reilly's Inside RIA

2008-02-12T01:13:00.000-07:00

I feel very fortunate to have been asked to be a part of the new O'Reilly Inside RIA blog site. Rich Tretola asked me if I would like to be involved a short time ago. I decided to take a stab at something that isn't yet that prominent in the blogosphere: "Learning Flex from Scratch". This is the title of the series that my friend Scott Sheridan and I are writing for Inside RIA. Scott is new to Flex and we'll be covering all the stuff he'll be learning to become a Flex developer.

Here's our summary for the series:

This series of installments will chronicle the learning of a complete beginner as he attempts to become a Flex developer. The series will culminate with the production of a working application built in Flex and deployed on the web. Our hope is to create a reference that will serve as a guide to those new to programming and wishing to step into the world of Flex.

Check out our bios: Inside RIA Contributors

Merapi Desktop Bling!

2008-02-08T10:27:00.000-07:00

Here's some Merapi bling for your desktop...

Eruption:

Smoke:

Enjoy

Meet Merapi

2008-02-05T09:06:00.000-07:00

Merapi is a new project that is a framework for connecting AIR to java at the desktop. It will be built as freeware until the team is happy with the stability. We will then move it to Google Code and make the project open source. There will be more to come but for now I can tell you that Merapi will pick up where Artemis left off with the goals of making it easier to implement using the framework, providing a good mechanism of deployment, and solving some security concerns.

{ Update : Andrew's post about naming Merapi }

The contributors...

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.

New Animation Library from Mims Wright - KitchenSync

2008-02-01T14:31:00.000-07:00

Mims Wright has just released a new animation library. I haven't tried it out yet, but it looks pretty cool.

Quoting the wiki:

"KitchenSync was designed for developers who want a smart way to handle animation or other time-based functionality with code. Written from the ground up in ActionScript 3.0, KitchenSync relies on smart object-oriented architecture rather than complicated shorthand. It includes a number of features and shortcuts, such as the clone() method, that save effort for developers. KitchenSync makes extensive use of events and informative runtime errors and is quite flexible when it comes to extending the functionality."

Check out KitchenSync on GoogleCode : http://code.google.com/p/kitchensynclib/

Links from Mims' blog post:

- Getting started
- Types of synchronized actions
- Units of time, parsing time strings, and sync mode
- API Reference

360|Flex Atlanta : Advanced Skinning and Component Development

2008-01-30T13:43:00.000-07:00

I'll be speaking at the next 360|Flex conference coming up in Atlanta. If you've not been to a 360|Flex in the past, they're great conferences and you should definitely check it out. Tom and John do a great job a putting these events on. There will be a ton of great speakers, include several from Universal Mind (listed below).

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

The Battle of AIR and Light (Silver)

2008-01-29T19:54:00.000-07:00

This post is in response to the recent battle of words ignited by a post from Mike Chambers called CommandProxy : .NET / AIR Integration Proof of Concept. Soon after Scott Barnes posted a response to Mike's post called Adobe AIR + .NET Proxy - Concerns arise and a subsequent post RE: Adobe AIR + .NET Command Proxy Security concerns.

[ Update : Mike added this post that I was unaware of when I wrote mine.. also helpful to clarify what's going on ]

Disclosure

I am a Flex Developer
I use Adobe products daily
I work for an Adobe partner: Universal Mind
I am a fan of the Adobe platform
I worked on the eBay Desktop project
I was co-creator of the Artemis Project (similar to Mike's CommandProxy)
I've also worked as a java and Microsoft developer in the past.

Add all this up and I think my background gives a bit of relevance to the conversation.

I'd like do discuss some of the real issues here and do it in an attack-free manner. But first, since the previous conversations escalated to attacking some of the people I know and projects I've been close to, I'd like to give some shout outs:

Mike

I've heard Mike speak several times, had a couple conversations with him, and read his blog pretty regularly. My impression of Mike has always been that he's an extremely capable technologist who cares a lot about his product (AIR). I've had extremely brief discussions with him about competing technologies. There was never a time in the course of any of these discussions where he has bashed another product or an employe of a competing company.

Alan / eBay Desktop

I had the pleasure of working on the eBay Desktop application before the Alpha release in 2006 and for a time after that. Alan is a great guy to work with. Again, like Mike he also cares a lot about his product. As Alan stated, the eBay Desktop application is in beta (as is AIR). It's hardly fair or relevant to criticize the user acceptance of an application that is in beta. For me, eBay Desktop isn't about offline it's about a better experience, but more on that would be off topic.

Adobe's Developer Relations

I've had quite a bit of interaction with the Adobe evangelists, probably the most with Ryan Stewart, but also; Ted Patrick, Mike Chambers, Mike Downey and Kevin Hoyt. Ryan went out of his way to help me out with Artemis and other Flex related stuff even before he was an Adobe employe. All of the other guys I have listed have been more than reasonable in answering all of my questions or concerns. Quite frankly, it's their job and they're good at it.

Another place Adobe shines in developer relations is through their engineering team. I've had e-mails answered by engineers and product managers from the Flex team that have saved me a lot of time, and I know that I'm far from the exception in this case. In my opinion, this is stuff that they really don't have to do and it's very much appreciated.

None of this is meant to be an attack on Microsoft. It's been over 3 years since I did any Microsoft development, so I really don't know what they're developer relations are like. It's also not to try and get Adobe to buy me a house (although I wouldn't turn it down). It's just a chance to highlight the good things going on at Adobe in light of the criticisms raised. Now on to the real issues...

Scott brought up two points that were interesting to me. One was regarding security and the other was on the relevance (ie "what is being solved here?").

On Security

As I understand it, there are two concerns regarding security. The first is data protection. In Mike's proof of concept, as well as in the Artemis framework, the data that is exchanged between AIR and .NET/java is sent through a socket that is not encrypted. It is possible for another process to monitor this data and intercept it in the same way a sniffer process that inspects packets on an internet connection can retrieve sensitive data that is sent across the internet. This is a concern for someone building an application that might send sensitive data between AIR and .NET/java.

The second security risk is that another process might hijack the proxy process. It would be possible to build a malware AIR application that could connect to the proxy process and cause it to do very nasty things to the underlying system (like search the hard disk for credit card numbers, or just reformat it). To me, this is the bigger risk. An important question here is: Why is this different from a .NET application that might to the same nasty things? It is different because AIR is a platform that has a security model associated with it. This type of bridging gives a false impression of security to the user. The result is an AIR application to .NET or java that has taken on all of the security risks of the bridged platform as well as the risk of data protection in the transport.

So, Scott is correct, these are big risks and should not be taken lightly, however, where I disagree is that is that Mike as an Adobe employe has no right to explore these ideas publicly. The fact that he (and others at Adobe) work on projects like this make me even more interested in their platform as a developer. That's not a claim that any of their products are better than the competition, which is arguably subjective claim from either side. What I appreciate is the philosophy at Adobe that allows for and perceives the value of this work. It's work like this that showed us Quake running in the Flash Player at MAX.

If these kinds of methods were something that Adobe was interested in supporting, rest assured the security issues would be addressed.

On Relevance (What is solved here?)

When I presented Artemis at 360 Flex in August David Coletta asked a question on Artemis that went something like: "Pphilosophically is this a way to improve AIR or extend the capabilities of java?" This is really a similar question. So, why? My answer for that is one that companies selling platforms might not like, and that is: Ubiquity. As a developer I want ubiquity between APIs, frameworks, languages, OSes, and definitely platforms.

The idea for Artemis came from the desire to make the benefits of java (countless open source projects and many great language features) available to a Flex developer creating AIR applications. At the same time, providing the powerful UI capabilities of Flex to java developers. I'd rather stop thinking in terms of the dichotomy that either Flex / AIR or Silverlight / WPFE is better as a platform or for a particular project, and be able to use the great features of both technologies ubiquitously. Unfortunately, I think the days of building a Silverlight module and loading it into a Flex app (or vice versa) are far away.

To sum up...

This work is definitely not the kind of stuff you validate a platform on. It's not a solution for most (if any) enterprise or consumer applications, but it's fun, cool stuff. That's what I love about this technology. It's fun to create solutions with it and I love the challenge of pushing what it's designed to do.

Mike, thanks for working on CommandProxy. It's a great idea to get .NET devs excited about Flex and push what AIR can do. Scott, thanks for bringing your concerns, the real issues underneath all of the unnecessary comments from both sides are relevant and important.

Joe Merhl On Board at UM

2008-01-28T14:17:00.000-07:00

Joe is the man that brought us the AIR iPhone powered by Ribbit. I'm really excited to have Joe on board helping lead the UX charge at Universal Mind.

Simple Transitions To Improve User Experience

2008-01-28T12:48:00.000-07:00

One of the fairly simple applications I've been impressed with since switching to Mac OS X about a year ago is Toast. Particularly, I like the way they use a morphing effect. A similar effect is used throughout Mac OS X.

As a simple UX exercise I decided to recreate the Google Talk install process in Flex and then apply some morphing transitions. In this example I've used the recently released Yahoo! Flex Skin to approximate a desktop look and feel. Thanks to the guys at Yahoo! Flash Dev for getting this out.

In this first example you'll see a sequence dialogs very similar to the Google Talk install process.

In the second I've added a morph effect similar to the effect that Toast uses. In my opinion using a subtle effect like this drastically improves the user experience (UX).

Let me know what you think, drop a comment...

The Future of Artemis

2008-01-28T11:39:00.000-07:00

There has been a bit of buzz around Artemis lately, so I thought I'd do a quick update on what up for Artemis.

First off, my friend Louie Penaflor at ~~Tapper Nimer and Associates~~ Digital Primates has been doing some cool stuff with Artemis and scanners. Check out his recent blog on it: Going beyond the boundaries of AIR.

Secondly, Louie along with Andrew Powell and myself are starting a new project to take over where Artemis left off. There will be a new name, a new framework, and cool new libraries to play with.

Stay tuned.....

Review of Mylyn

2007-12-17T15:55:00.001-07:00

My new favorite Eclipse plugin is Mylyn: http://www.eclipse.org/mylyn. I was recently introduced to Mylyn by Darron Schall. I'm working on a project under him right now and Mylyn was a tool that he had been using for Trac integration.

Once you get your Trac permissions setup correctly, this thing is a breeze to use.

1. Set up a "Repository" (A link to the Trac, or Bugzilla site you're using)

2. Create a query. This query will produce a task list. So far, I've really only used this to get all the tasks that are assigned to me as I'm not doing any type of management on this project, but a project manager or team lead can easily create queries that let them monitor that status of a project.

3. Open your task list. (I've blurred some client related data here to protect NDAs.)

4. Open a task.

I really like how this brings the task list work flow right into the IDE. It's a great way to use Trac more efficiently.

Thanks for the tip Darron!

Joining Universal Mind

2007-12-15T23:06:00.002-07:00

After making the decision to leave my former position I had another tough decision to make; what to do next. My first plan was to contract for a while to see how I enjoyed that lifestyle as well as try out a few companies, but as I took the advice of many of my friends in the industry I knew that I would be much happier in the long term if I found a more permanent home.

I ended up talking with several organizations and had to make a tough decision between a few very competitive offers. In the end, helping to build a team of talented rich internet application technologists at Universal Mind was the best match for my goals. I'm really excited about the crew that is taking shape and the work that will be a result in the coming months and years.

I think my buddy Doug best summed it up in his latest blog post : http://tinyurl.com/33rdyu

"So what does this mean? It means Universal Mind is badass."

My first couple weeks as a contractor have been outstanding. I'm looking forward to the opportunity to continue working with all of the great people at Universal Mind.

Leaving EffectiveUI

2007-12-14T15:17:00.000-07:00

About three weeks ago I officially left EffectiveUI. This was an extremely difficult decision, one that I made in order to pursue career objectives outside of EffectiveUI. I have been contracting since, but will soon be on in a new full time position that I'm really excited about... more to come on that.

I wish all of my friends at EffectiveUI much success in the future.

[offFlex]HandBrake[/offFlex]

2007-11-12T10:32:00.000-07:00

One of the coolest video ripping / conversion tools I've ever used. This thing is freeware, cross platform, and has a GUI and command line interface. I recently purchased a Mac Mini to serve up media to my TV and HandBrake has been awesome for ripping my DVD collection. Do yourself a favor and check it out.

Download :
http://handbrake.m0k.org/?article=download

Screengrab :

david coletta's max talk

2007-09-28T15:18:00.000-06:00

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 called Web Watcher : www.webwatcherapp.com 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

facebook interview on crn

2007-09-28T14:49:00.000-06:00

I was recently part of a group interview session with Stacy Cowley from CRN. Here's a snippet of the article where I was quoted:

'...Adam Flater, an EffectiveUI software architect, sees Facebook's fluffiness as an essential part of its appeal.

"Users are adopting things for their sheer entertainment value right now. When a client wants adoption, these are the tools to do that with," Flater said.'

Stacy asked some really important, informed questions. I'll most definitely be following her articles in the future.

http://www.crn.com/it-channel/202102503?pgno=1

send me some cool stickers

2007-09-24T14:22:00.000-06:00

Looking for cool Flex related stickers to deck out my machine. If you have any such stickers, send them my way.

accordion bug

2007-08-30T11:57:00.000-06:00

Accordion is a class in the Flex 2 Framework (see it on live docs). I was skinning an Accordion for TrafficBug the other day and noticed a bug.

The bug involves using resizeToContent and verticalGap. Here's a demo app that shows the problem:

As you can see the Accordion isn't accounting for the verticalGap when height is measured. An easy fix for this is overriding the Accordion's measure function:

override protected function measure() : void {
   super.measure();
   this.measuredHeight += (this.getStyle("verticalGap") * this.numChildren);
}

I did file a bug in Adobe's Jira system. Looks like the fix might get worked into Moxie. (Thanks Deepa)

announcing traffic bug

2007-08-24T01:02:00.000-06:00

Last Monday, August 20th I presented a new application that we're working on at EffectiveUI at the Adobe On Air Bus Tour stop in D.C. The new app is called Traffic Bug. I'll be doing a screen cast of the slides and posting on my blog. I'll also be using it as a talking point to continue the thread on RIA Team Development.... but in the meantime here's a first look at Traffic Bug:

binding with getters and setting

2007-08-23T14:40:00.000-06:00

In most of the Flex apps written these days there's a need for applicattion level configuration data. It's really nice to have this data sit in an XML file on a server somewhere so that it's really easy to update. Typically I'm seeing stuff in these files like Copyright info, Terms of Service, maybe some other dynamic text for the UI, versioning and managing deprecation.. etc. All of this data is technically read only, so it's nice to put it in a model that's read only.

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>

team ria development - part 2 - mvc - part 1

2007-08-03T09:23:00.000-06:00

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.

team ria development - part 1

2007-08-01T19:34:00.001-06:00

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

eBay DevCon Slides and Source Code

2007-06-12T12:50:00.000-06:00

Thanks to everyone that attended my talk at eBay DevCon 2007. As promised, I'm releasing the slides and source code from the presentation. [Download]

If you have any questions about the eBay ActionScript SDK, Flex 2.0, or AIR (Apollo) feel free to post a comment on this blog or contact me directly at: adam.flater@effectiveui.com

Thanks again
-adam

presenting at eBay developers conference

2007-04-20T12:21:00.000-06:00

I'll be presenting at the eBay Developers Conference on June 12th in Bosoton. My topic will be on using the eBay ActionScript SDK to create eBay Widgets.

I was the lead develoepr on the eBay ActionScript SDK project. (Read more on Ryan Stewart's Blog: http://blogs.zdnet.com/Stewart/?p=302) This project leverages the Apache Axis toolkit to generate web service call objects for the eBay WSDL specification.

The conference will be a great time to bring questions about the SDK. Also, for those of you new to Flex technology stop by and see what's it's all about. My presentation will mainly conssit of walking through examples of coding widgets that use the SDK.

Hope to see you there.

dx3 conference - speaking on artemis

2007-03-26T20:13:00.000-06:00

DX3 stands for : Design, Develop, Deploy.

DX3 is a new conferences geared towards designers and developers that are developing RIAs (Rich Internet Applications) that reach beyond the browser.

I'll be co-presenting at this conference with my collegue at effectiveUI Sean Christmann on The Artemis Project.

Sean and I'll will be presenting the need and use for Artemis in deploying web applications the run on the desktop platform.

You can read more about Artemis in my previous post or check it out on the web : http://artemis.effectiveui.com

You can find out more about DX3 at : http://www.dx3conference.com
http://dx3conference.com/speakers?name=adam_flater
http://dx3conference.com/sessions?sid=85

If you're attending the conference and have a topic that you'd like us to cover feel free to let me know : adam.flater@effectiveui.com

Η ιστορία Artemis (The Story of Artemis)

2007-03-20T10:44:00.001-06:00

Artemis began as a proof of concept. One day, about 4 weeks ago I was working away in my office at effectiveUI when one of my bosses (although I'm sure he would object to that title), Brook, asked me about the feasibility of an application for a potential client. This is not an odd thing working at effectiveUI since the work we do is on RIAs and cutting edge internet apps. This particular client needed some desktop functionality that we were brainstorming about using Apollo for. That discussion got me thinking about using java to extend the functionality of Apollo .

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

abstract classes in Flex

2007-03-04T16:47:00.000-07:00

I recently found the need to implement an Abstract Class in a package I was writing for an SDK. When I searched out the methods that others had used in an attempt to "fake" an Abstract Class I felt they fell short. Most of the other solutions involve protecting the constructor of the Abstract Class so that it may only be instantiated by a child class. That's pretty close, but what those solutions left out was the ability to defined abstract properties and functions. Here's what my solution looks like:

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.

[non-flex] app launchers: QuickSilver, Colibri, Katapult

2007-03-04T16:16:00.000-07:00

A quick non-Flex related post about some great tools.

Recently, I've found myself using Mac OS, Linux, and Windows all fairly frequently. I switched to Mac OS as my development OS not long ago. QuickSilver was recommended to me not long after I made the switch. I found QuickSilver to be one of the huge benefits of Mac OS.

Back in the Windows days I was a big user [Windows Key]+R to launch apps and commands quickly. After I was introduced to QuickSilver on Mac OS I did some checking to see if equivalent applications existed for other platforms. I found Colibri for windows and Katapult for Linux (KDE).

All three of these applications are invaluable to making your life easier in finding files and applications on your systems. Give them a try and you'll quickly find out why.

Mac OS:
http://quicksilver.blacktree.com/

Windows:
http://colibri.leetspeak.org/

Linux:
http://sourceforge.net/projects/katapult/

static code blocks!

2007-03-02T12:26:00.000-07:00

If you're coming to the Flex world as a java user one thing you might miss is static code blocks. Until today I didn't think this was possible in Flex/AS 3, but after a conversation with a coworker (Jim : psalterego.com) I found out static code blocks are possible.

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!

effectiveUI eBay Project in the News!

2007-03-01T18:26:00.000-07:00

My colleage, Sean Christmann, lead developer on the eBay Desktop application I've been working on, was quoted several times in an InfoWorld article about Adobe's new Apollo framework. Check it out: http://www.infoworld.com/article/07/03/01/HNadobeapollobeta_1.html

on source code...

2007-02-13T17:05:00.000-07:00

As I was stepping into the tech blog posting arena I had a major concern: How to deal with posting source code.

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.