Twitter Client

It’s been almost 2 years ago when Apollo (currently known as Adobe Air) was in alpha version and Adobe organized the 1st ever Apollo Camp in Macromedia’s headquarters in Townsend St in San Francisco. Danny Dura built an amazing Air app back then called Apollo Camp and he put it on a huge monitor for the people there to enjoy tweets from the community. This is when I first felt the need to learn more about this Twitter think.

Here you can see the app and his creator from a photo of Mike Downey:
Danny Dura admires his Twitter app built with Apollo

Since then my addiction to twitter is so HUGE that the 1st thing I do every morning is read my tweets. If there is a lot of work to do and I have to skip the tweets of friends for a few hours (of course this is not the case for DM and @replies) the whole day is bad. You have to accept the fact that I LOVE TWITTER!

From that time I used a lot of twitter clients -as I remember all of them where/is Air apps- to get access to this new hot addiction. Someday TweetDeck came out and I’ve finally found the one and only desktop app that will serve my needs. TweetDeck is the best twitter client out there and if I had to use another one, the only decent client is called DestroyTweeter (yes yes by the guy that DestroyFlickr too!). The reason that Im not using this as my desktop client is because I love the way TweetDeck organizes my tweets because I cannot pay attention to it all the time so with TweetDeck I make sure I don’t lose any important DM or @reply.

Then the iPhone came in to my life and since the day one I was in search of a good twitter client. I used Twitteriffic for locating immediately any replies or DM tweets but then I switched to Safari to read all my friends’ tweets and open possible links.

But thanks to Mike Downey I’ve finally found the perfect Twitter client for the iPhone too. The name of the app is Tweetie. The price of the apps is 2,39 euros but I wouldn’t mind pay more for such an app.

The UI of this app is really slick and simple. The main buttons that you get when you authorize your twitter account are: Tweets, Replies, Messages (this is for Private msgs that you SENT and you GOT), Favorites and More where you can get information about Your Profile, about another user, Tweets posted near you (!), Trends and YES you can also search on Twitter too!

In Tweets section your tweets are colored green and the RTs blue. The tweets are presented in a nice iChat/SMS way that makes it so easy to read and not get lost in case your hand moves (while you are on a train for example).

Another interesting feature is that  you can click on each tweet and read it separately because it animates and clears the screen. From that point you can read of course the tweet it self, learn the client that the user used to tweet, date and info about the user that post it.

The app is so awesome that from that point you can RT what you are reading or even create an email to this specific tweet! You can also favorite it or delete it in order to not be presented in your main tweets.

If you click on the user you get a full list of options related to this user and the connection he/she has with you. For example you can STOP FOLLOWING him, sent him a public or direct tweet, read his latest tweets, see his/her following list or his/her followers.

What else can you ask for, right?

Well I was really happy with this app but the real reason that made me blog about it is this:

As for the last 3 Apple events-announcements, today my ISP decided to not give me access to the net so I read the tweets that my friends post since last night from Tweetie and I notice something amazing.

When you first fire up Tweetie the app loads the last 20 tweets available to your account and it gives you a button in the end with a label “Load more…”

While you keep hitting the load more button you get more and more tweets in the app. The amazing think thought is that while the app loads older tweets it doesn’t refresh the above tweets (that you have already read) so you don’t lose focus on the latest tweet. So there might be new tweets for you to read but they don’t load until you refresh it. THIS IS SO FANTASTIC!

This is the only reason that every morning I read all my last night tweets from the browser and then I switch to TweetDeck (while on the mac). I really wish TweetDeck could implement something like that. It is very annoying to read many many tweets and suddenly to lose focus because a new tweet just arrived on the app.

If there is one more think to ask from Tweetie is to save the text that I just typed but I didnt managed to Send because someone just called me on the iPhone. But even with this all I can say to Atebits (sorry but I cant find the name of the guy that wrote this diamond) is a huge THANK YOU!

The app just ROCKS!

Air Windows..

In this post I will try to describe the window types that we can create on Adobe Air by using Flex Builder and the Flex framework. This is a reference for me so if you think I miss some points please feel free to comment above. Air 1.5 Cookbook by O’reilly will be next to me as I go through this post. *

The First Window is automatically created by AIR.
The properties of this window can be set on the application descriptor file under the initialWindow node(The app descriptor file is named after the project name -”project name”.xml and is located on the src folder of the project).
Those properties are title, systemChrome, transparent, visible, minimizable, maximizable, resizable, width, height, x, y, minSize, maxSize and some others. Many of these properties have a default value which is the most useful for most of the cases so you don’t have to bother. The only required attribute for the initialWindow node is the content (the path to the swf/html file) but if you are using Flex Builder, Flash IDE or DreamWeaver they manage to do the job for you!

Other Windows:

NativeWindow: creates a native operating system window.
We instantiate the NativeWindow class and pass the constructor a NativeWindowInitOptions object.
That object contains the properties of the look and feel of the window.
These properties are: maximizable, minimizable, resizable, systemChrome, transparent, type(normal, utility, lightweight).

Here is a simple example:

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”createAnotherWindow()” title=”Core Window>
<mx:Script>
<![CDATA[
private function createAnotherWindow():void
{
//properties fot the new window
var options:NativeWindowInitOptions = new NativeWindowInitOptions();
options.maximizable = 
true;
options.minimizable = 
true;
options.resizable = 
true;
options.systemChrome = NativeWindowSystemChrome.STANDARD;
options.transparent = 
false;
options.type = NativeWindowType.NORMAL;
//the new window
var window:NativeWindow = new NativeWindow(options);
window.title = 
“Second Window”;
window.width = 200;
window.height = 
this.nativeWindow.height;
window.x = 
this.nativeWindow.x + this.nativeWindow.width;
window.y = 
this.nativeWindow.y;
//show it
window.activate();
}
]]>
</mx:Script>
</mx:WindowedApplication>


There are 3 types of windows in AIR and they are defined on theNativeWindowInitOptions type property.

Normal: Appears on the Windows taskbar or the Mac window menu. Chrome from the operating system is used and it looks like that:

Utility: Does not appear on the Windows taskbar or the Mac window menu. Chrome from the operating system is used but in a lighter version (there are no minimize/maximize btns etc).

Lightweight**: Does not appear on the Windows taskbar nor on the Mac window menu, it doesn’t use the system chrome and it “looks” like that:

**Remember that in order to have a Lightweight window we have to set the systemChrome to false.

Notice that the core window doesn’t have focus and that is because I clicked on the Lightweight window which is completely transparent but it exists and it stands on the right side of the core window!

All examples above have being created with the exact same code as the example provided, the only difference between the 3 of them is the type property and in the case of the Lightweight window I also had to change the NativeWindowSystemChrome from STANDARD to NONE.

From now on we can add whatever we like on each stage of each window just by referring to it like that:

window.stage.addChild(”something to add”);

The Flex Framework offers 2 classes for windows, the WindowedApplication and the Window.

As in our example the WindowedApplication acts as the application container for our Flex-based Air app. So the content of that container is actually the content of our initial window. We can use the Window component as a container for additional windows that we might need and we should keep in mind that this component CANNOT be nested inside anyting else because it is a top-level layout container!

Both of these classes have an underline NativeWindow object that they use for creating and controlling the native OS windows. We gain access on that NativeWindow object by using the stage.nativeWindow property of any display object.

As a best practice as I can think and as the Air CookBook suggests is that we should create the extra windows as a separate components based on the <mx:Window> tag and activate them when we need them via MXML or AS.

At first I create an mxml component in a folder called components under the src folder which looks like that:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Window xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” width=”800” height=”600” title=”BrowserWindow>
<mx:Script>
<![CDATA[
private var url:String;
public function set theUrl(url:String):void
{
this.url = url;
browser.location = url;
}
public function get theUrl():String
{
return(this.url);
}
]]>
</mx:Script>
<mx:Label text=”MY BROWSERWINDOW” fontWeight=”bold” fontSize=”17” textAlign=”center” width=”100%” height=”50/>
<mx:HTML id=”browser” width=”100%” height=”100%/>
</mx:Window>

Then I use that component via Actionscript:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init()”>
<mx:Script>
<![CDATA[
import components.BrowserWindow;
private function init():void
{
var browser:BrowserWindow = new BrowserWindow();
browser.open(true);
browser.theUrl = “http://www.macromedia.com”;
}
]]>
</mx:Script>
</mx:WindowedApplication>

..or via MXML like that:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:browser=”components.*”>
<mx:Script>
<![CDATA[
private function init():void
{
browserWindow.open(true);
browserWindow.theUrl = “http://www.macromedia.com”;
}
]]>
</mx:Script>
<browser:BrowserWindow id=”browserWindow” creationComplete=”init();”/>
</mx:WindowedApplication>

* This post was meant to be a lot bigger but since its in my drafts for over 2 weeks I thought I should release it and when I’ll find some time to extend it more I’ll do it. From the start of writing this post I upgrade WordPress to 2.7 (awesome guys), moved to (mt) (love them so far), traveled 400 kms away from my base in Athens and it took me only 45 minutes since I used a plane for the 1st time for this trip and I spend MANY hours to find a decent WordPress plugin that can format nicely MXML + AS3 in order for you to be able to just copy and paste the code but I finally decided to not use any of them simply because they dont do the job I want.

Thanks for reading, cheers to a happy, flashy, flexy and sexy 2009 full of love, piece and Flash baby Player goodness. 

Be proud and thankful for the best piece of software out there.. the one and only 

Macromedia – Adobe Flash Player!

Savvas