Friday 25 December 2009

Lolcat viewer

Hi Readers,

What a peaceful Christmas day, isn't it? In the morning I wrote a small AIR application brings lolcats into your desktop. Basically it's a dummy RSS reader for ICanHasCheezburger shows the latest kittens. Here you are:

Let's take a look at the code:

I used Flex with Flex SDK 3.0.
First we need a couple of display objects:
  • Image container: the main lolcat image
  • Secondary image container: the same lolcat image with delay. It makes transitions seamless.
  • Indicator: an external SWF animation indicates network loading
  • Control bar: previous / next / refresh buttons

 <mx:Image id="image_backup"/>
<mx:Image id="image" updateComplete="imageUpdateComplete(event);" click="nextImage();"/>

<mx:SWFLoader source="{indicator}" width="40" height="40" id="indicator_swf" alpha="0.6"/>

<mx:Canvas backgroundColor="0x000000" backgroundAlpha="0.5" bottom="0" left="0" right="0" height="40"
mouseOver="control_bar.alpha = 1"
mouseOut="control_bar.alpha = 0.3"
alpha="0.3"
id="control_bar">
<mx:LinkButton label="Previous" bottom="10" left="10" color="#CCCCCC" click="{previousImage()}"/>
<mx:LinkButton bottom="10" right="10" label="Next" color="#CCCCCC" click="{nextImage()}"/>
<mx:LinkButton label="Refresh" horizontalCenter="0" bottom="10" color="#CCCCCC" click="{refreshLolcatXML()}"/>
</mx:Canvas>


For the SWF animation it's highly suggested to embed the SWF movie itself:
   [Bindable]
[Embed(source="indicator.swf")]
public var indicator:Class;


Loading RSS feed is stupid simple. The feed's address:
   public static const LOLCAT_RSS:String = 'http://feeds.feedburner.com/ICanHasCheezburger';

And the upadating function for getting the feed itself:
   public function refreshLolcatXML():void {
var ur:URLRequest = new URLRequest(LOLCAT_RSS);
var ul:URLLoader = new URLLoader(ur);
ul.addEventListener(Event.COMPLETE, rssReady);
ul.addEventListener(IOErrorEvent.IO_ERROR, networkError);
ul.load(ur);
}

Let's see what we have got when the request comes back (this is the event I registered for Event.COMPLETE):
   public function rssReady(event:Event):void {
var xml:XML = new XML(event.target.data);
var items:XMLList = xml.*..item;
imageList.removeAll();
currentImageNum = 0;
for each (var item:XML in xml.*..item) {
if (item..MEDIA_NS::content[1]) {
imageList.addItem(item..MEDIA_NS::content[1].@url);
}
}
nextImage();
}

I really like the ActionScript 3 XML layer. XML is already a native ActionScript 3 item, and the XML and XMLList classes make processing XMLs so easy. Quickly the response string is converted to XML and traversed for the important lolcat URLs. On every RSS reload I save results in the imageList ArrayCollection variable. I used one defined namespace, because the URLs can be found under that namespace:
   public static const MEDIA_NS:Namespace = new Namespace('http://search.yahoo.com/mrss/');

Right after getting the response the first image is displayed. These are the stepping functions:
   public function nextImage():void {
if (image.source != imageList[currentImageNum]) {
indicator_swf.visible = true;
}
image.source = imageList[currentImageNum];
currentImageNum = (currentImageNum + 1) % imageList.length;
}

public function previousImage():void {
currentImageNum = (currentImageNum - 2 + imageList.length) % imageList.length;
nextImage();
}

One last small trick. When the image container triggers an updateComplete event, the whole resized for the appropriate image's size:
   public function networkError(event:IOErrorEvent):void {trace('Network error: ' + event);}

public function imageUpdateComplete(event:FlexEvent):void {
trace('Image update. W: ' + image.measuredWidth + ' H: ' + image.measuredHeight);
if (image.measuredWidth > 0) {
var tw:Tween = new Tween(this, Application.application.width, image.measuredWidth, 400, -1, onResizeWidthUpdate, onResizeWidthEnd);
var th:Tween = new Tween(this, Application.application.height, image.measuredHeight + 18, 400, -1, onResizeHeightUpdate, onResizeHeightEnd);
image_backup.source = image.source;
indicator_swf.visible = false;
}
}

With the Tween class it's also easy. This is the full Flex source, if you are interested in:
Download Lolcat's source.

And one other cool thing. I've seen a lot that awesome AIR installer object on many sites. So, made a bit research and found this tool you can make your own AIR installer:
Adobe AIR intaller badge This is what you see above.

Happy holidays,
Peter

Thursday 24 December 2009

Design Patterns

Hi Readers,

It was high time to publish this post. A long time ago I decided to implement all the design patterns are in the famous GOF book: Design Patterns: Elements of Reusable Object-Oriented Software
Why? Because doing it by yourself the most efficient learning method. At least, for me. When I read this book first, I thought, know everything. All patterns made sense. But after time I realized using those patterns in practice are _REALLY_ hard. If you don't see what are the scopes, what object has access to what other objects, etc ... means you won't use it efficiently. Although, I'm still not confident with a lot of pattern. And by the way, I think it's not the best book for introducing these patterns. I found Wiki pages more useful in a lot of cases.

Here you are the downloadable JAVA sources:

[Disclaimer: these are my interpretations. Don't take it for sure. My understanding sometimes like a 1 month old pig's ass.]

Download ChainOfResponsibility pattern (BehavioralPatterns)

Download Command pattern (BehavioralPatterns)

Download Interpreter pattern (BehavioralPatterns)

Download Iterator pattern (BehavioralPatterns)

Download Mediator pattern (BehavioralPatterns)

Download Memento pattern (BehavioralPatterns)

Download Observer pattern (BehavioralPatterns)

Download State pattern (BehavioralPatterns)

Download Strategy pattern (BehavioralPatterns)

Download Template pattern (BehavioralPatterns)

Download Visitor pattern (BehavioralPatterns)

Download Adapter pattern (StructuralPatterns)

Download Bridge pattern (StructuralPatterns)

Download Composite pattern (StructuralPatterns)

Download Decorator pattern (StructuralPatterns)

Download Facade pattern (StructuralPatterns)

Download Flyweight pattern (StructuralPatterns)

Download Proxy pattern (StructuralPatterns)

Download AbstractFactory pattern (CreationalPatterns)

Download Builder pattern (CreationalPatterns)

Download FactoryMethod pattern (CreationalPatterns)

Download Prototype pattern (CreationalPatterns)

Download Singleton pattern (CreationalPatterns)

If you find any mistake, please let me know. I want to fix them. Thanks.

Happy Holidays,
Peter

Ps.: And this is the small shell script I packed the source folders:
for dir in BehavioralPatterns StructuralPatterns CreationalPatterns
do
for pattern in `ls $dir`
do
tar -czf $pattern.tar.gz ./$dir/$pattern
echo "Download $pattern pattern ($dir)
"
done
done

Saturday 19 December 2009

6th Hungarian Drupal Podcast

Hi Readers,

Our 6th podcast was about Drupal module development. We spoke about the first steps to make a project on http://drupal.org, about maintaining, clean code, sustainability and a lot of other useful stuffs. Check this out:

Magyar Drupal Podcast - 6. rész from Peter Arato on Vimeo.


(Sadly this episode is very silent.)

Regards,
Peter

5th Hungarian Drupal Podcast

Hi Readers,

With a bit late let me announce our 5th podcast. It was about Drupal myths. A lot of people who don't know Drupal has bad feelings around it. We wanted to break these walls and collected all the most famous myths. Here we are:

Magyar Drupal Podcast - 5. rész from Peter Arato on Vimeo.



Regards,
Peter