Sönke Rohde

Swiz Desktop for AIR support

When you develop AIR applications you see repeating tasks which you have in all projects. You need to take care about the update process and online status. I am developing all my applications with the Swiz framework so I tried to come up with some re-usable code which fits nicely into Swiz.

Source and Download

Get source from GitHub
Download Flex 4 SWC from GitHub
API Documentation
Swiz Desktop includes côdeazur AIR Remote Updater

Define the SwizUpdateBean in your Swiz BeanLoader:

<desktop:SwizUpdateBean xmlns:desktop="com.soenkerohde.desktop.*"
	id="swizUpdateBean"
	updateUrl="http://yourdomain.com/YourApp.air"
	autoCheckUpdate="true" autoStartUpdate="true" />

We have set the update URL and the flag to automatically check for an update and automatically download and invoke the update when a newer version is online.
However you may only want to use this in a very early stage of your development to simply ensure that the user always get’s the latest version. The user experience is a bit odd though since the user get’s no visual feedback at all and might be upset when the app closes, updates and restarts itself.

Control Update
A controller can add event listeners to the SwizUpdateBean to get notified when the update phase change so you get a point to interact. You can autowire the bean also against a setter which gives you the possibility to add event listeners:

package com.soenkerohde.example {
 
	import com.soenkerohde.example.UpdateWindow;
	import com.soenkerohde.desktop.ISwizUpdateBean;
	import com.soenkerohde.desktop.event.OnlineEvent;
	import com.soenkerohde.desktop.event.UpdateEvent;
 
	import org.swizframework.Swiz;
 
	import spark.components.Window;
 
	public class UpdateController {
 
		[Autowire]
		public function set updateBean( bean : ISwizUpdateBean ) : void {
			bean.addEventListener( UpdateEvent.VERSION_INFO, versionInfoHandler, false, 0, true );
			bean.addEventListener( UpdateEvent.UPDATE, updateHandler, false, 0, true );
			bean.addEventListener( OnlineEvent.CHANGE, onlineHandler, false, 0, true );
		}
 
		protected function versionInfoHandler( event : UpdateEvent ) : void {
			// when locale and remote version are different show update window
			if ( event.updateInfo.localVersion != event.updateInfo.remoteVersion ) {
				var updateWindow:Window = new UpdateWindow();
				Swiz.registerWindow( updateWindow );
				updateWindow.open();
				updateWindow.move( 50, 50 );
			}
		}
 
		protected function updateHandler( event : UpdateEvent ) : void {
			// prevent automatic update and wait for user to invoke
			event.preventDefault();
		}
 
		protected function onlineHandler( event : OnlineEvent ) : void {
			var online:Boolean = event.online;
			// TODO handle online status
		}
 
	}
}

Visual Feedback
Since the SwizUpdateBean is loaded in the BeanLoader we can autowire it into any view. The SwizUpdateBean implements the ISwizUpdateBean so we can autowire the interface by type without caring about the id. The ISwizUpdateBean has a getter for updateInfo which is a bindable getter for detailed update status information. In the example below we autowire it by property. We could also access it from the swizUpdateBean.updateInfo but I like it more as an extra member variable.

UpdateInfo gives you access to:

localVersion
remoteVersion
percent
bytesLoaded
bytesTotal
kiloBytePerSecond (we calculate the connection speed of the user)
timeRemaing (the time in seconds we have calculated remains to download the update)
updateFilePath (the path to the downloaded update file)

<s:Window width="240" height="210"
		  xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
		  xmlns:mx="library://ns.adobe.com/flex/halo" title="Update" alwaysInFront="true" resizable="false" showStatusBar="false">
 
	<s:layout>
		<s:BasicLayout />
	</s:layout>
 
	<fx:Script>
		<![CDATA[
			import flash.events.MouseEvent;
			import com.soenkerohde.desktop.ISwizUpdateBean;
			import com.soenkerohde.desktop.info.IUpdateInfo;
 
			[Bindable]
			[Autowire(bean="swizUpdateBean", property="updateInfo")]
			public var updateInfo:IUpdateInfo;
 
			[Bindable]
			[Autowire]
			public var swizUpdateBean:ISwizUpdateBean;
 
			protected function clickHandler( event : MouseEvent ) : void {
				swizUpdateBean.executeUpdate( false )
			}
		]]>
	</fx:Script>
 
	<s:VGroup horizontalCenter="0">
		<mx:Form verticalGap="0">
			<mx:FormItem label="Your Version:">
				<s:Label text="{updateInfo.localVersion}" />
			</mx:FormItem>
			<mx:FormItem label="New Version:">
				<s:Label text="{updateInfo.remoteVersion}" />
			</mx:FormItem>
		</mx:Form>
 
		<s:Label text="Progress: {updateInfo.bytesLoaded}/{updateInfo.bytesTotal} Bytes" />
		<mx:ProgressBar indeterminate="false" label="Remaining: {updateInfo.timeRemaining} sec with {updateInfo.kiloBytePerSecond} KB/s" mode="polled"
						source="{updateInfo}" />
 
	</s:VGroup>
 
	<s:Button bottom="10"
			  horizontalCenter="0" label="Update and Restart" enabled="{updateInfo.complete}" click="clickHandler(event)" />
 
</s:Window>

You see how easy it is to implement the ProgressBar. Because the updateInfo object has a getter for bytesLoaded and bytesTotal we only have to set the mode to “polled” and can set the object itself as the source of the ProgressBar.

Feedback appreciated or just fork the project on GitHub if you want to extend it.

FGATracker for Google Analytics tracking

FGATracker is an AS3 library which wraps gaforflash for Google Analytics and can be easily used in combination with the Swiz framework.

Source and Download

Usage

Add FGATracker to your BeanLoader:

<ga:FGATracker id="fgaTracker"
	   account="GOOGLE ANALYTICS ID" xmlns:ga="com.soenkerohde.ga.*" />

Dispatch TrackPageEvent or TrackActionEvent:

From a view class (set bubbles=true):

dispatchEvent( new TrackPageEvent( TrackPageEvent.PAGE, "/pagename", true ) );
dispatchEvent( new TrackActionEvent( TrackActionEvent.ACTION "category", "action", "label", NaN, true ) );

From a non-view class:

_dispatcher.dispatchEvent( new TrackPageEvent( TrackPageEvent.PAGE, "/pagename" ) );

You can get a reference if your class implements the IDispatcherBean interface:

private var _dispatcher:IEventDispatcher;
public function set dispatcher(dispatcher:IEventDispatcher):void
{
	_dispatcher  = dispatcher;
}

FlairLoc Public Beta

FlairLoc is an Adobe® AIR™ application to localize Adobe® Flex® applications.

Today I am happy to announce that the public beta of FlairLoc is available.

Features

Change resources in a user interface with search capability
Extract resource keys from source code and synchronizes it with all locale sets
Automatic translation into 42 languages with the Google Translate API
Add new automatic translated languages in only 4 CLICKS
Generation of locale compile statement and Ant parameters

For more information, screenvideo and screenshots and to install the application please visit the product page.

GIT Tips and Tools

If you don’t know GIT yet it is a software version control system like Subversion, CVS or Perforce. It was primary developed by Linus Torvalds for Linux kernel development. I have started using GIT in the beginning of 2009 and I must say that after a not so small learning curve I really like it and see all the benefits especially when it comes to collaboration.

There are alternatives but GitHub is currently the best service to use GIT. You can host open source projects for free and the pricing for private projects is not too expensive. Check out my GitHub profile with my open source projects here.

To get started you should first install GIT on your machine and read the docs.

The tooling support around GIT is perhaps not as extensive like for other VCS yet, so if you are afraid of using the console GIT might not be right for you. However, there are already great tools around but for many things I am still using the Terminal.

Custom Bash Prompt

I am using a custom bash prompt which indicates on which branch you are and further color highlighting helps to keep track:

Uploaded with plasq‘s Skitch!

Eclipse Plugin

My main IDE is Eclipse with Flash Builder or FDT so the Eclipse EGIT plugin is really a must have:

Flash - Eclipse - /Users/soenkerohde/Documents/workspace_gumbo

Uploaded with plasq‘s Skitch!

Merge Tool

Merging is an important task when working in a team. GIT is really flexible and you can configure it to use 3rd party apps for merging. I am not a big Perforce fan but the free p4merge tool is really great. Check out the blog post by Andy McIntosh for a detailed explanation how to set it up.

GitX

GitX is maybe the best tool to visualize the branch history but I must say that I don’t use it in my daily work. It can also be used to create commits and revert changes etc.

Links

Commands

If you are new to GIT it is hard to remember all the different commands. Here a list of commands which I use very often also as a reference for me

Create a local repository:

# clone an existing repository
git clone [GITHUB_CLONE_URL]
 
# or do it the long way:
mkdir [PROJECT_DIR]
cd [PROJECT_DIR]
git init
touch README
git add README
git commit -m 'first commit'
git remote add origin [GITHUB_CLONE_URL]
git push origin master

Changes and Commits:

# To see which files are changed and maybe not added yet to the repository use
git status
# Add a file to the repository
git add [FILE]
# or to add all untracked files
git add .
 
# revert a change
git checkout -- [FILE]
 
# when you are ready with a change
git commit -am "[CHANGE_DESCRIPTION]"
# a commit is only local so when you want to push it to the server
git push origin [REMOTE_BRANCH_NAME]

Branches:

# Create remote branch
git push origin master:[REMOTE_BRANCH_NAME]
# Checkout and track remote branch
git checkout --track -b [LOCAL_BRANCH_NAME] origin/[REMOTE_BRANCH_NAME]
 
# local branch list
git branch -l
# remote branch list
git branch -r

Tags: Every time you make a release or reach a milestone creating a tag is a good idea.

# Create tag
git tag -a [TAG_NAME] -m "[TAG_DESCRIPTION]"
# Push tag
git push --tags origin master

Merge: You should work on a branch when implementing a new feature or story. If you are done you should merge this into the main branch.

# Switch to feature/story branch
git checkout [STORY_BRANCH]
# make changes and when done
git commit -am "[DESCRIPTION]"
# switch to master
git checkout master
# get all changes from master
git pull
# switch to story branch
git checkout [STORY_BRANCH]
# rebase story branch with master changes
git rebase master
# maybe solve conflicts
git mergetool
# switch back to master
git checkout master
# finally we can merge it in and there should be no conflict
git merge [STORY_BRANCH]
git push

Stash: When you have changes in your working directory and want to switch to another branch you can stash your changes.

# Create stash
git stash
# Apply
git stash apply

When you migrate a project from SVN to GIT this comes in handy:

find . -name .svn -print0 | xargs -0 rm -rf

btw: GIT has only one .git directory and not one for every directory like SVN

If you have some commands which are important on a daily base please drop a comment so I can extend this post.

YouTube AS3 example

Today YouTube finally released an ActionScript 3 API. Maybe this was accelerated by the move of Vimeo because they came up with an AS3 API last week.

I have build a little AIR client as an example application. Check my YouTubeAS3 project on github for the source code. The example of course uses the Swiz framework.

The meat is the Player class and the IPlayer interface which wraps the YouTube proxy object. The Player extends UIComponent and implements IVisualElement so it works decent with Flex 4. The original SWFProxy object extends Sprite which is fine for Flash but not for Flex.

If you are to lazy to study the API docs like me this screenshot might help:

Flash Debug - Eclipse - /Users/soenkerohde/Documents/workspace_gumbo

Uploaded with plasq‘s Skitch!

The example is still pretty small but I’ll try to extend it when I find some time in the future.

Presentation Model Interface with Swiz

Lately I have started to use the presentation model approach and I like it a lot. Swiz fellow Ben Clinkinbeard has a wonderful example posted on his blog.

However I disliked that I have to dispatch custom events to make getters bindable. This would normally look like this in an interface:

[Bindable(event="customDataChanged")]
function get someData():Array;

The problem with it is that I have to dispatch an event typed “customDataChanged” from the presentation model implementation when I want the binding to be updated.
So my implementation would look like this:

private var _someData:Array;
public function get someData():Array{
    return _someData;
}
 
public function setSomeData(a:Array):void{
    _someData = a;
    dispatchEvent(new Event("customDataChanged"));
}

But what I wanted to use is the Swiz autowire-by-property style which would look like this:

[Bindable]
[Autowire(bean="appModel", property="someData")]
public var someData:Array

So for the examle above I have a bean with id appModel defined in my IoC Container (BeanLoader) which contains the someData variable. Swiz wires the property into the presentation model implementation but how do I get my interface getter bindable?
The solution is quite easy. Just have a look at the generated actionscript with the compiler args -keep-generated-actionscript and you see that by default a PropertyChangeEvent is dispatched for bindable variables when they are changed. The type value of the event is “propertyChange” so the only thing I have to change in my interface is the event type:

[Bindable(event="propertyChange")]
function get someData():Array;

So my view gets the presentation model interface autowired-by-type:

[Bindable]
[Autowire]
public var model:IMyPresentationModel;
<s:List dataProvider="{model.someData}"/>

Now when the application model someData property changes, Swiz updates the autowired property which fires a PropertyChangeEvent and forces the binding to be updated in the view.

Swiz Desktop for AIR support

FGATracker for Google Analytics tracking

FlairLoc Public Beta

GIT Tips and Tools

YouTube AS3 example

Presentation Model Interface with Swiz

About

Pages

Categories

Recent Comments

Twitter

Misc

Archive