Chunk File Upload

A while back I worked on an AIR client which had to be capable uploading very large files. In this scenario you have to upload files in little chunks. The research on how to solve this took me quite a while so I thought it would make sense to post my findings.

More or less I have taken the NirvanixBinaryUploader as a base and then extended (I should say forked) it to fit my needs.

The class UploadFile takes a file and upload URL as constructor arguments. You can also define a separate resumeUrl if it differs from the upload URL. Further you can set the flag doCalcMD5 to true which is kind of experimental. It works using the as3corelib MD5Stream class but calculating the MD5 hash for large chunks like 1MB took about 20-30 secs on my machine.

I have also implement getters for bytesLoaded and bytesTotal so I can use an instance as a data source for the Flex ProgressBar in polled mode which comes in very handy.

<mx:ProgressBar source="{uploadFile}" mode="polled" label="Uploading" />

If you want to use my code I guess you want to subclass my class because it contains example code and you probably want to override at least the createBody method. However, if you have a similar scenario like me, the code might be a good start.

Another interesting read on this topic was A long journey through chunked transfer and file uploading.

Here now the code:

Twitter AS3 OAuth Lib with Flex 4 example

I have build a little Twitter AS3 library which handles Twitter OAuth authentication and let’s you update your Twitter status. The lib basically uses the OAuth AS3 lib and should be a good example how to use the actual OAuth lib.

This is still basic functionality but since it’s open source someone may fork and extend it. To get a simple idea of the current feature-set have a look at the ITwitter interface.

Further I have build a simple Flex 4 example AIR app which shows things in action. The only thing you need to do upfront is registering a Twitter app to obtain an OAuth consumer key and secret which you have to add to the example:

BTW: You maybe have already granted access to your Twitter account for some apps which you can check here.

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

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:

Terminal — bash — 140×50
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.