There is a new tutorial on The Tech Labs that deals with runtime skinning of Adobe AIR applications and performance considerations. I wrote the tutorial to expose some general best practices of using runtime skinning and also to detail performance considerations. I hinted at the idea of native application skinning, but i wanted to dedicate a blog post to that topics, which follows below. The basic idea behind native application skinning is going beyond service based applications to truly integrated desktop applications that leverages OS specific user experience expectations. When we look at the applications we use day to day, we develop expectations on how it looks, functions, and interacts with us. It becomes easy to tell the difference between a widget and a desktop application. Main factors for integration are color and style, integration of user interaction paradigms per OS, and visual controls and implicit hot keys. Lets look at a couple of chat application to give a visual description of what I mean.

Above we see three applications - Tweetie (Mac client), TweetDeck(AIR client), and Twitterrific(Mac client). When visually describing the application we want to concentrate on how the application provides similar experiences and expectations to other applications we use on our desktop.  Tweetie is a fully integrated native application that keeps with Mac UI and UX. The Tweetie application leverages a large header to add user controls such as search, and navigation. Tweetie has a preferences menu and multiple hot keys that can be accessed from the toolbar. Application controls and configuration preferences are basic expectations from the user of an application. When we look at TweetDeck, we see a SWF wrapped in a standard chrome window from AIR. These native window are OS specific, but you loose the ability to leverage the header for user controls and advanced application name management.  When using the application, the first time user has to hover over icons to get descriptions, and the hot key are not available on the toolbar. When examining Twitterrific, we have tons of hot keys that are unknown unless you read the documentation. There is no preferences integration and it really can be defined as more of a widget then a desktop application. So we see that the platform on which the application is build does not define how the application meets native integration. We as AIR developer can do anything and are really unlimited in our experiences that we create with our applications. This idea of unlimited design is good and bad, the good is that we can create truly brilliant applications, the bad is that it takes more time and development just to get to the level of integrated native style and expectations.

The idea is that Adobe AIR developers should be creating application like Tweetie that really leverage the native UI and compliment user workflow. It is upon us as developer to leverage the work that Microsoft and Apple have already done in creating user expectation and workflow, and leverage those to create a truly integrated user experience. I can say that the current way we use the computer is not the best, but at the same point it is what we use and unless you are creating something revolutionary, you should create your applications on user expected experiences. The New York Times desktop reader application highlights how an AIR application can be integrated successfully on the desktop:

Adobe did an excellent job in leveraging the header to manage user controls and really create a sweet application name style. The user notification on updating of articles is awesome, the only thing i would like to see change is the window controls which always seem disabled. This shows an enterprise application that meets my expectations as a user. I would like to see hot key support in the toolbar, but this is a great step and example.

I want to see more and more AIR application that are not just widgets, dashboard apps, or SWFs wrapped in native chrome, but instead are an extension of the native OS that is a fully functional and integrated kick ass application. I have been working on a skin library to support OSX, XP, and Vista in Flash. Each has its own challenges, but i am looking so see if what i am talking about above makes sense, or if i am just a crack pot. If you are interested, drop me a line or create a rebuttal that tells me i do not  know what i am talking about - I look forward to the challenge.

So this is the problem - you have a Datagrid and multiple buttons that call getTeamMembers - getTeamAdmins - and getBoth. If you call getTeamMembers and then getBoth followed by getTeamAdmins in a quick succession. In some cases you would disable each button until a result is received, but in this example we donot want to micro-mange the user. You would expect the results to come back in the same manner - especially if bundled. But lets say the getBoth query takes longer than the rest, you will actually receive getTeamMembers followed by getTeamAdmins and then getBoth. You user is expecting to see only the team admins, not all team members. How to fix? Add an id to every call that is made and increment it when a call returns that was called in succession of the last call. So on the token of the messageBroker ( when you add the id to a call), you can see the call id and use this as a comparison. Persist the original call number on the model and compare the model’s call id to the token’s id+1 - if this is a newer call, you add one to the model, else do not display update the datasource for the datagrid.

“So what are you doing” is the basic definition of Twitter interaction. It allows people to communicate information that is in-between emails, blogs, and phone calls. Its that spree of the moment “I need to tell you something”. These information posts are shared to those who have chosen to take interest, known as followers, who are interested in the information in-between. So lets step back and look objectively at this: Twitter provides the ability for users to make miniature information posts about issues pertaining to location, likes and dislikes, experiences, wants / needs, movement, and any other possible detail concerning the posters life or thoughts on it. In most cases this can seem rather trivial and unimportant compared to mainstream news or fully qualified blog posts with comments. But what is really not understood is the complexity of Twitter and what value it holds for the business community in general. I am going to go through some basic of Twitter and then explorer its exploited value, or at least give some good ideas.

Twitter not only allows for people to communicate, but make smart communication. Twitter uses Hashtags to embedded additional context and metadata in tweets. The hashtags provide a way of grouping posts to a main subject that is searchable. An example of a subject would be #Microsoft. Go to http://search.twitter.com and do a search for #Microsoft and then Microsoft. Your results will differ in the actual content and the information from this is truly valuable. Understanding that those using Microsoft as a subject are more oriented to using it as an everyday term, compared to those using it as a word to describe a current situation or irritation. Try using #free to find people giving away furniture, tickets, or just about anything. For more information on hashtags and how to use them. Twitter also allows users to do direct remarks to other users through the user of @twittername instantiation. This is similar to the ability to comment on Blogs, witch allows for discussion or what we will talk about in later with business interactions with Twitter.

So we have seen some of the basic features of Twitter that allow for more derived information collection from the metadata of a post, but we also need to understand the value of a post. Think of a Twitter user as a mainstream news source on TV. TV news media value is based on Nielsen viewer ratings for how many house holds watch a certain program. This allows the news media to charge higher rates for advertisement time. The same can be said for Twitter followers. Followers are users who have specified that they find a person’s post intrinsically valuable. So for today the most followed is CNN and Britney Spears. With Britney having a total of 873,333 followers, that is not much less than her total Blackout album sales as of January 2009 (942,000 copies in the United States). These followers are people who want to be updated on the newest CNN stories by phone, computer, and other Twitter communication clients. The system of following is no different than consuming an RSS feed, receiving weekly group emails, or blog alerts / searches. Twitter truly allows a single person or entity create a fast and simple communication medium to interact with those interested - you though setting up a blog was easy, try signing up for a Twitter account - WOW!.

Now lets get into the heart of this post - business value. In business you learn that the customer is the most valued resource and is truly the one you must answer too. How better to communicate and interact with the customer than by really knowing and understanding the customer. Use Twitter as a way to find what the customer is interested in, what is going on in their life, and who they follow or who follows them. People are more open to posting personal information on Twitter than in any phone survey or interview / group discussion. Just the basics of finding out if the customer is married, has children, and location without asking are some of the most valuable sets of data will allow customer integration and acceptance. Use search.twitter to search your company name or product for feedback and usage information. Use an aggregator like Filtrbox.com to help you manage multiple searches and analyze the results of posts. You can aggregate who liked / disliked the product and perform a follow up in Twitter by sending them a direct message on how you can better serve them or even give a quick thanks if they provided positive feedback about the business or product, this always helps. Use hybrid application like Brightkite.com to not only discover posts, but the location the post took place in. Posts like: “I was at Target the other day and they where out of Crest Whitening toothpaste, damn”. You can know discern from the location which store this post was written about and actually check to see if the JIT inventory system is working or if there are other issues with the store - is this the only person complaining about the store or the stocking of the store?

Twitter gives a business the ability to micromanage a customers needs and wants by managing how they interact passively or directly with a customer. Reiterate, i am using customer compared to consumer for the specific reason of the ability to hone in on a person, not a group people. Want people to take a survey, just post a #free ipod when you take this survey in Twitter. Want to target a certain group of people, just look at who is commenting on a specific subject like #baseball - you now have a list of people who are interacting in discussion about your topic of choice. You now have a viral feature that you company can leverage - stack this up with Facebook integration and you have a new market and marketing / sales integration points that are instantly global. With over 1 million users, it would be wrong for you business to not out reach. I know that there are a lot more business cases and examples than this, but these should be rather simple integration idea that your business can active and expect results from.

Future of the Tweet. Be ware, this is a total opinion - Twitter and Brightkite are just simple stepping stones to the future of a new medium for communication and interaction. Twitter is no different from a txt message that is received by a group of people, but what i do see is the advanced ability to leverage metadata and interact at a public level that you could not do before unless you had a blog or were a journalist. I hope to see a hybrid in educational institutions that use it for discussions and information gathering - why read an article when you can ask the CEO and write your own (overly stated example).

Now what not to do if you are a Business. The problem with integrating business and Twitter is the actual loss of value to a business and to Twitter users as they become more integrated. In most cases, when people post objections to a business or create their own product reviews, they are creating posts from personal opinions. Some unnamed business have decided to use people with lots of followers to write pleasing product reviews for a price. This is truly advertising in social networks and really inhibits the environment of objectivity in my personal opinion. Another thing to stay away from if you really are a socially understanding company is using Tweets as a news source or a documented product reviews. Remember, Tweets are personal opinions that are shared global, but not with intent to be published as a valid review that a company should use to endorse products. When a user endorses your product, follow the user and interact with them learning more and then gain a endorsement that is concentrated and well received across multiple audiences. For example, an Angelina Jolie tweet of “I love season 7 of Friends”  would not really be a great endorsement  for Jennifer Aniston and Friends. So please remember that even thought social networks are rather new - they are really another implementation of any other content source and should be treated as such - please don’t bombard Twitter with advertisement, i actually like using it.

So being a developer and a designer I have recently come to the conclusion that chances are some one has done it before and some one has used it before. What this means is that many of us know the websites we like, the tools we use, and the interactions we expect. The developer community has built thousands of paradigms that encapsulate user needs and provide distinct user patterns. We have compiled a knowledge base on our users over the years in order to develop better, stronger, faster applications. But for some reason with the wide spread practice of now driving UX and UI there has developed a divide between the two. Some companies have a UX team and a UI team - treating each as a separate entity. By todays definition, the UX is based on the UI and the experience that the UI provides to the user. When i think of this i wonder - does the user not already have an expectation of their experience before they even begin? Are these expectations not in line with other user’s expectations and how users may experience other applications? I understand that RIA is a new way to experience web applications, but is it not just the ability for the user to expect interactions in the browser to be similar to those they would use on their desktop?

Due to these questions i am trying to discern a new development strategy that incorporates what we already know about the UX and build the UI off of that, not vice versa. It seems like a term for now and really is a simple hybrid, but i would like to develop a framework off of this that implements the strategy of using predefined interactions and expected movement / results as the prime motivation for how an application is designed and developed - the interactions are there, now lets build the logic. I se Flash Catalyst as a first step, but i think this also has to do with company and developer mindsets and development practices. When designing in UXI (YOU_Z), we understand that we are providing an application where the user expects 1,2,3,4 and when executing 1,2,3,4 they expect a,b,c,d. So when the user initiates a, they are expect to be presented with e,f,g. This is the ability of defining the design from expectation that follow discernible patterns.

When creating a search application the user expects to input box and a button. When the button is clicked the user expects the input box and button to still be present and the results to load below it. There is no expectation on how the results load (movement of adding or effects), but they expect the results to load rather fast and for the first result to be the most important (key). The results are paginated and there is a total on how many articles or pages are available for the search. These are the expectations of the user and for a good user experience they must be met. We do not develop an experience that is off centered from basic paradigms, nor do we develop interactions that will cause a new experience that is not a current paradigm if the application is not of a predefined sort, without educating the user to the advantages and efficiencies. The education of the user to a new experience is key to creating a new expectation that the user can expect from the interface, not the user creating an expectation from using the interface. by following this pattern you can develop a core structure that can be built upon to promote advanced user interactions.  This does go against the idea of user trial and error - but for things such as the touch screen integration, the user expects that they use their finger instead of a cursor or keyboard - but they must be educated through advertising, friends, or documentation on how they should expect any other interaction to work - pinch and rotate. This states that a company must develop from predefined expectations unless they are willing to educate and the products needed expectations differ from current paradigms. This does not state that all paradigms are correct, most really are not, but they have come to be expectations to user and should be treated as such.

At Filtrbox we have a basic trend analysis graph that shows the amount of mentions on a specific topic for a  selected number of days. We will be adding more charting features as time passes, but for now i want to look at trend analysis and really envelop what it means. A good description of a trend is a developing direction, whether up or down, that is ever changing. A trend allows us to really analyze a large data set to be able to make inference to what the future may be like. Below is  a quick trend of McCain (Brownish), Obama (Blue), and the Olympics (Red).

As we can see, it has been back and forth with Obama and McCain. The Olympics have also followed a similar trend. These trends can inform us that bloggers don’t like to post on Sundays, hype for the Olympics is falling as it moves to opening day - witch it might shoot back up again, and there may be a correlation between Olympics and the presidential elect. Clicking on a point will also allow us to get a better idea for what may have spurred the peak or the valleys. So if we look at August 1 when Obama has a total of 359 mentions, we can communicate that these are mostly responses to McCain’s attack ad and defending Obama’s persona.

This now leads to the title of the post, Filtrbox Fights. A Filtrbox Fight is a basic trend analysis game, that who ever has the most mentions in the day is the winner (This is not supported by Filtrbox and is something i thought would be of interest). I am hoping to keep track of the presidential candidates and see if there is a correlation between who wins and who had the most internet traffic. This does not mean that if Obama had  the highest internet traffic and is the next president, that there is a definitive correlation, but we can infer that the internet would be a good place to campaign in, and also which interent sources provided the information - Twitter and other social networks are changing how people interact and react to information. Thanks for reading and hope you try a Filtrbox Fight of your own - very rewarding

Recently when working on the Filtrbox Olympic AIR widget, I ran into some trouble in reading and writing preference in AIR as XML. There was not very much information concerning the topics so i felt i would give some quick insight. I am sure there are better answers, but this worked for me. This write- up assumes that you already know how to create, and read XML data from AIR, but you are having hard time with tubular data. This app is designed around RSS consumption, so we will create a Value Object called FeedVO that looks like this (Using the Cairngorm Micro Architecture):

package com.filtrbox.widget.vo{
import com.adobe.cairngorm.vo.IValueObject;

[Bindable]
public class FeedVO implements IValueObject{
public var feed:String;
public var name:String;
public var type:String;
}
}

Alright, with the VO setup, its time to read in preferences. First, lets set up a reference to the XML object we will be using, called “applicationSettings”.

[Bindable] public var applicationSettings:XML;

Now lets create the XML scheme that we will use to add data to and create the default structure. This same structure that is also used to process the data.

public function createXMLSchema():Void{
applicationSettings = <preferences/>;
var beijing:XML = <beijing/>;
for each(var feed:FeedVO in model.allFeeds){
beijing.@name = feed.name;
beijing.@feed = feed.feed;
beijing.@type = feed.type;
applicationSettings.appendChild(beijing);
beijing = <beijing/>;
}
writeXMLData()
}

Lets now look over what we have done. We have created two nodes - preferences and beijing. Since we are using E4X, we can use node values like “feed” and “type”. In the model, an Array Collection has been created that will contain all feed information and thus is called “allFeeds”. So for each value object in the “allFeeds” array, we will recurs and append the result to a new beijing node. After the last result has been added, we will want to write the data to the XML file.

private function writeXMLData():void
{
var outputString:String = '\n';
outputString += applicationSettings.toXMLString();
outputString = outputString.replace(/\n/g, File.lineEnding);
stream = new FileStream();
stream.open(applicationFile, FileMode.WRITE);
stream.writeUTFBytes(outputString);
stream.close();
}

When reading the preferences, we will follow the same structure:

private function processXMLData():void
{
applicationSettings = XML(stream.readUTFBytes(stream.bytesAvailable));
stream.close();
for each(var beijing in applicationSettings.beijing){
var feed:FeedVO = new FeedVO;
feed.name = beijing.@name;
feed.feed = beijing.@feed;
feed.type = beijing.@type;
model.allFeeds.addItem(feed);
}
if(model.allFeeds.length<=0 || model.allFeeds == null){
var defaultFeed:FeedVO = new FeedVO;
defaultFeed.name = 'Olympics 2008';
defaultFeed.type = 'event';
defaultFeed.feed = 'lEpq5xVyDq5UtjtNOboOyQ==';
model.allFeeds.addItem(defaultFeed);
}
}

When reading the preferences, we will recurs the biejing node and separate each value to add as an object. Once we have created the object, we will add it to our “allFeeds” array in the model. We also want to handle a first time use case where there are no preferences and load a default feed, which is handled by the second “if” statement. So I quickly showed you how to recurs tubular data in order to read or write to and XML file. When you are using the AIR environment, you may also want to use SQLite, which will follow a similar format in how you handle the objects.

Want to have power over your own news content? Well then welcome to the Filtrbox RSS feed. As a Filtrbox member (its a FREE account), you have the ability to create your own RSS feeds and manage how the content is filtered. What does this mean for developers? This will give you the ability to set up a feed for say “Adobe AIR”, and use Filtrbox to manage the content. Managing the content allows you to choose how many articles are displayed, amount of history in days, and the quality ranking of the article. Once  you have setup a feed, it then becomes as easy as consuming it. Most mashups consist of maps, graphing or basic interactions between multiple components that share relevancy with one another. With the ability to manage your own content sources, you become in control of your application and will not have to rely on restriction based upon the source. Dealing with restriction like the integration of Yahoo maps before the AS3 api, was troublesome and limited in its context.

When using the Filtrbox RSS, you have two options, either consume the RSS as is, or if you are passing the feed through flash embed variables, you will have to base 64 Decode the content. Using the feed in Flex is as easy as an HTTPService request. Here is an example of a Base 64 decoder to use:

import mx.utils.Base64Decoder;
var decoder:Base64Decoder = new Base64Decoder();
// this is decoding the embed variables that are passed in
decoder.decode(Application.application.parameters.source);
var byteArray:ByteArray = decoder.flush();
var src:String = byteArray.readUTFBytes(byteArray.length);
mw.source = 'http://www.filtrbox.com/rss/'+src;

So lately I have been interested in the Tour de France and wanted to create a quick app centered around that. The requirement of the app was to display the most up to date quality news about the Tour de France on my desktop as a widget. With the power of Filtrbox, I can add exclusions like steroids or other thing that i really dont want to deal with.  If you just want to add the feed to your personal blog, you can embed code for the Filtrbox widget from the Filtrbox dashboard, that is built in Flex and is constantly developing and expanding into new semantic search territory.

Today was the official launch of Filtrbox.com and its rich dashboard application. The idea behind Filtrbox is to provide a cure for information overload in a new and cost effective manner. Get this: “Built using Flex, the Filtrbox UI uses drag and drop, asynchronous and background updates, sophisticated graphing, user input validation, and dynamic screen layout to provide a smooth, low-drag user experience. This UI demonstrates that no matter how good your AJAX UI might be Flex will run rings around it.” -Mark Gibbs , Network World.

Now thats some sweet press. We really enjoyed building the UI and have really incorporated great features and components from Flex and the Flex community. It is great to have the new UI out and functional and highlighting the great features that Filtrbox has to offer. Stuff like Importing of Google analytics, the ability to search through archived news, seamlessly create, add, group filtrs( a Filtrbox search term), and analysis. Just to clarify, we do allow Google Alerts imports, and that is one of my favs. So now you can imports your alerts, and Filtrbox will consume them, in a easy to use interface that allow for sorting and filtering of archived data - hell ya.

We still have some awesome features up our sleeves, and you may possibly see a Filtrbox icon on your desktop (its and Adobe thing) soon. Many have wondered what presence Flex would play in Web 3.0 and what it means for a truly rich internet experience, but i hope at least some of these questions have been answered by Filtrbox and their commitment to an awesome user experience. This blog will become a place that highlights new features, thoughts, code examples, and over all news on what Filtrbox is doing and what it means to the Flex community.

Just a quick history if you dont want to read it at Filtrbox.com : Filtrbox was conceived by Ari Newman(The man with a plan) and Tom Chikoore( Mr. T - “I pity the fool”) and built by their main code monkey, Bruce Deen (Drinker of the Zima). I came on recently and redesigned the present UI that we launched with today. The new UI was completed in less than a month, thank you Mountain Dew for your support, and i hope that it can be considered a positive step forward for the integration of semantic search and RIA UIs. The application was conceived to bring about a new cost effective way to manage semantic news by giving you the ability to control your information and presentation.   Being a small company, most of us have been awake for almost 48 hours, testing and deploying the application for you. I look forward to comments and feedback from user experiences and am just happy bring a new niche for Flex to the market.

Take some time out of your monday and check out Filtrbox.com