Space of Flex/AIR technologies

Raiffeisen Bank Polska has just released first ever full e-Banking solution based on Adobe AIR technology. This release brings full functionality of what was always available via browser built with Flex. This is great news especially for those that have really slow or low bandwidth internet connections at home, office or are connecting with GSM modems, unfortunately this is still reality among Polish internet providers. This application lowers the required bandwidth to the actual minimum, no graphics no layout no html has to be transferred over the wire, only pure data.

This application is a great example of AIR technology itself but also possibility of deploying Flex browser code on the desktop. I’m hoping we will see more integration with desktop in upcoming releases. I can immediately imagine things like: direct desktop notifications of account transactions, stocks rates alerts, upcoming payments alerts, data caching for complex data intensive calculations and analysis (using encrypted SQLite), drag-and-drop transaction confirmations directly from AIR app to desktop or other applications in formats like PDF, XLS etc.

Here are couple of screens with running application:

Application can be downloaded and installed via badge from this location: https://www.r-bank.pl/web/en/air/ this applies only to Polish Raiffeisen Bank customers of course.

Last week I was presenting at MAX 2009 in LA where I talked about Flex and Adobe AIR in Government, it was based on e-Deklaracje Desktop application released by Polish Ministry of Finance (you can find more info about e-Deklaracje Desktop in one of my previous posts here). Important here is to note that e-Deklaracje received Honorable Mention in Adobe 2009 MAX Awards.  My presentation was focusing on requirements, challenges and solutions that Ministry of Finance faced during implementation of e-Deklaracje. Here is the link to video of my presentation online. At the end I concluded with my personal manifesto that I believe e-Government Rich Internet Applications should be guided by to achieve success! Manifesto is made of four mandatory bullets that are in totally random order but each as equal in its value:

Consistency – application should work consistently on all major operating systems, browsers or even hardware without compromises. Citizens should have freedom of using different environments and achieve same user experience.

Openness – the architecture of the application should be open and available to the public. Preferably it should use communication channels and formats based on open standards e.g. HTTP, SOAP, AMF or JASON. These commodities will make integration and extensions easier for the public.

Experience – citizens’ experience should be as straightforward as possible and that applies to anything like usage, accessibility or installation procedures. Actually experience should engage and drive the user through the application.

Security – this is the most obvious one but shouldn’t be forgotten. User data should be secure not only on server side or over communication channels but also on the client side. Encryption to storage or access should be applied where possible, giving the user confidence while using the application.

Any comments are most likely welcome. RIA is trend now that whole industry is going towards and as citizens and users of e-Government applications we should expect same from public institutions solutions.

Już jutro wybieram się na konferencję Adobe MAX! W związku z tym chciałem jeszcze przed samym wyjazdem ogłosić coś nad czym pracowałem ostatnie parę tygodni. Mianowicie będzie to cykl warsztatów poświęconych tematyce RIA w tym oczywiście Flex’owi i Adobe AIR. Założenie moje jest takie żeby objechać wszystkie główne ośrodki akademickie w Polsce i przeprowadzić otwarte wykłady i warsztaty dla wszystkich zainteresowanych. W tej chwili na mapie są: Gdańsk, Gliwice, Kraków, Lublin, Łódź, Poznań, Toruń, Warszawa i Wrocław. Jednak same wykłady i warsztaty to nie wszystko, na zakończenie odbędzie się specjalna edycja konkursu Flex Challenge dedykowana dla studentów! Będą super nagrody, myślę, że podobnie jak w roku ubiegłym uda nam się ufundować jakieś produkty firmy Adobe i Apple

Objazd po uczelniach oraz konkurs będą się kryły pod nazwą Flex Challenge Academic Tour. W najbliższym czasie wszystkie potrzebne informacje znajdziecie na stronie Flex Challenge oraz powiązaną z częścią wykładową Akademią Pana Flexa.

Wszystkich zainteresowanych wsparciem w organizowaniu wydarzenia Flex Challenge Academic Tour gorąco zachęcam do pisania pod adres wspolpraca [małpa] flexchallenge [kropka] pl. Wszelka pomoc się przyda, do tego dodam jeszcze, że lista miast, które planuję odwiedzić nie jest zamknięta!

Organizatorem tegorocznych zawodów jest polski oddział Adobe wraz wybranymi partnerami i grupami Adobe w danych lokalizacjach, natomiast sponsorami wydarzenia jest polski oddział Adobe oraz Janmedia.

Last week I was presenting at AUG Poznań and today remotely via Adobe Connect at AUG Trójmiasto, where I showed how to build applications usign AS3 API for Facebook that is available at Google Code. My goal was not only to show how to use Facebook API but also how you can build desktop and browser versions of the same app using conditional compilation in Flex. I took the approach of two Flash Builder projects one with minimum set of Flex (browser) code and AIR (desktop) project with common sources for both. Flex project actually links to AIR project src-common folder in Flash Builder. The structure of both projects looks like this:

Below you can also find example of MainView.mxml code that is common for both projects. Within that example you can see sections that will be compiled based on specified options for each project. I actually defined two compiler options CONFIG::AIR and CONFIG::FLEX. You can find more info about defining compiler options and conditional compilation here. Another very good approach especially in more complex cases is described here on Adobe Developer Connection.

Here is the link to my Demo of AS3 API on Facebook and also below is the badge with desktop version.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/halo" width="100%" 
		 height="100%" currentState="CONNECTING">
 
	<fx:Script>
		<![CDATA[
			import com.facebook.Facebook;
			import com.facebook.commands.batch.BatchRun;
			import com.facebook.commands.friends.GetFriends;
			import com.facebook.commands.users.GetInfo;
			import com.facebook.data.batch.BatchCollection;
			import com.facebook.data.batch.BatchResult;
			import com.facebook.data.friends.GetFriendsData;
			import com.facebook.data.users.FacebookUser;
			import com.facebook.data.users.GetInfoData;
			import com.facebook.data.users.GetInfoFieldValues;
			import com.facebook.events.FacebookEvent;
			import com.facebook.net.FacebookCall;
 
			import flash.net.URLRequest;
			import flash.net.navigateToURL;
 
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
 
			CONFIG::AIR
			{
				// DesktopSessionHelper import required for AIR and Facebook Connect
				import com.facebook.utils.DesktopSessionHelper;
				import com.facebook.session.DesktopSession;
 
				// Session variable when running as AIR app
				protected var session:DesktopSessionHelper;
			}
 
			CONFIG::FLEX
			{
				// FacebookSessionUtil import required for Flex (browser) app
				import com.facebook.utils.FacebookSessionUtil;
 
				// Session variable when running as Flex (browser) app
				protected var session:FacebookSessionUtil;
			}
 
			/**
			 * Facebook class used to access FB remote API's
			 */
			protected var fbook:Facebook;
 
			/**
			 * Logged-in FB user
			 */
			[Bindable]
			protected var user:FacebookUser;
 
			/**
			 * Collection of logged-in user friends
			 */
			[Bindable]
			protected var userFriends:ArrayCollection;
 
			/**
			 * AIR init function
			 */
			CONFIG::AIR
			public function init():void
			{
				// Creating session based on API key
				session = new DesktopSessionHelper("795c0879607643aa3c5a363d09ce5384");
				// Registering handler when connected
				session.addEventListener(FacebookEvent.CONNECT, onConnect);
			}				
 
			/**
			 * Flex init function
			 */
			CONFIG::FLEX
			public function init():void
			{
				// When running in iFrame API key and secret values are not necessary
				// these are passed with flashVars from GET parameters
				session = new FacebookSessionUtil(null, null, loaderInfo);
				// Registering handler when connected
				session.addEventListener(FacebookEvent.CONNECT, onConnect);
				// Setting fbook from session properties
				fbook = session.facebook;
 
				// Checking if fb_sig_session_key was set from IFrame GET params
				if(loaderInfo.parameters.fb_sig_session_key)
				{
					// Verifying FB session
					session.verifySession();
				}
				else
				{
					// This application cannot run as external FB app
					Alert.show("You cannot run this application outside Facebook!");
				}
			}
 
			protected function onConnect(event:FacebookEvent):void
			{
				var uid:String;
 
				// Checking if connection was successful
				if (event.success)
				{
					// Conditional block that sets fbook variable after connection
					CONFIG::AIR
					{
						// Creating instance of Facebook class
						fbook = new Facebook();
						// Starting new FB session with apiKey and session secret 
						// received after connection in session variable
						fbook.startSession(new DesktopSession(
							session.apiKey, session.sessionData.secret, 
							session.sessionData.session_key));
 
						uid = session.sessionData.uid;
					}
 
					CONFIG::FLEX
					{
						uid = fbook.uid;
					}
 
					// Creating batch to make two data request at one FB call
					var batchRun:BatchRun;
					var batch:BatchCollection = new BatchCollection();
 
					// Batch item GetInfo returning info about current user
					batch.addItem(new GetInfo([uid], [GetInfoFieldValues.ALL_VALUES]));
					// Batch item GetFriends returning friends list of current user
					batch.addItem(new GetFriends(null, uid));
 
					// Posting batch to FB
					batchRun = fbook.post(new BatchRun(batch)) as BatchRun;
					// Registering batch run results handler
					batchRun.addEventListener(FacebookEvent.COMPLETE, onBatchRunResult);					
				}
				else
				{
					// In case of not successful connection
					Alert.show(event.error.errorMsg);
				}
			}
 
			/**
			 * Handler for batch run results
			 */
			protected function onBatchRunResult(event:FacebookEvent):void
			{
				// Setting results variable from event object
				var batchResult:BatchResult = event.data as BatchResult;
 
				// Getting data from first batch result item
				var userInfo:GetInfoData = batchResult.results[0] as GetInfoData;
				// Setting current user object
				user = userInfo.userCollection.source[0] as FacebookUser;
 
				// Getting data from second batch result item
				var friendsInfo:GetFriendsData = batchResult.results[1] 
					as GetFriendsData;
 
				// Building array of returned friends ID's
				var friendsUids:Array = new Array();
				for each(var friend:FacebookUser in friendsInfo.friends.source)
				{
					friendsUids.push(friend.uid);
				}
 
				// Doing another call to FB to get friends detailed info
				var call:FacebookCall = fbook.post(new GetInfo(friendsUids, 
					[GetInfoFieldValues.ALL_VALUES]));
				// Registering handler
				call.addEventListener(FacebookEvent.COMPLETE, onGetFriendsInfo);
 
				// Changing state to connected
				currentState = "CONNECTED";
			}
 
			/**
			 * Friends details request handler
			 */
			protected function onGetFriendsInfo(event:FacebookEvent):void
			{
				userFriends = new ArrayCollection((event.data as GetInfoData)
					.userCollection.source);
			}
 
		]]>
	</fx:Script>
 
	<s:states>
		<s:State name="CONNECTING"/>
		<s:State name="CONNECTED" />
	</s:states>
 
	<mx:ProgressBar includeIn="CONNECTING" label="Connecting..." 
					indeterminate="true" labelPlacement="center" 
					horizontalCenter="0" verticalCenter="0"/>
 
	<s:Label text="Hello {user.first_name}!" horizontalCenter="0" 
			 verticalCenter="-100" fontSize="29" includeIn="CONNECTED"/>
 
	<mx:AdvancedDataGrid id="adgFriends" dataProvider="{userFriends}" 
						 designViewDataType="flat" horizontalCenter="0" 
						 verticalCenter="19" includeIn="CONNECTED">
		<mx:columns>
			<mx:AdvancedDataGridColumn headerText="Name" 
									   dataField="first_name"/>
			<mx:AdvancedDataGridColumn headerText="Last Name" 
									   dataField="last_name"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
 
	<mx:LinkButton label="Get AIR (desktop) version..." horizontalCenter="0" 
				   verticalCenter="150" color="#ABA5A5" fontWeight="bold" 
				   textDecoration="underline" fontSize="14"
				   click="navigateToURL(new URLRequest('http://www.riaspace.net/examples/fb-as3demo/air/'))"/>
 
</s:Group>

W dniu dzisiejszym (godz. 18:00) w ramach spotkania grupy AUG Trójmiasto poprowadzę zdalną prezentację odnośnie tworzenia aplikacji dla Facebook’a z wykorzystaniem technologii Flex i AIR. Dodatkowym tematem prezentacji będzie tworzenie aplikacji działających w przeglądarce i na desktop’ie z wykorzystaniem tego samego kodu. Do tego posłużę się metodą kompilacji warunkowej oraz odpowiednią konfiguracją projektów we Flash Builder’ze.

Wszystkich zapraszam do obejrzenia mojej prezentacji przez Adobe Connect dostępnej pod tym adresem.

Are you looking for more in depth info on how to you use Adobe AIR technology for e-Government and public sector RIA‘s? Maybe you work in a corporate enterprise environment and you would love to use Flex and AIR for your next project but you don’t know how to convince your boss that AIR is the right technical choice! Hmm, maybe you want to find out how to build PDF forms with LiveCycle Designer and integrate them with AIR application? Why UX is so important when building public facing apps? Or you just heard something about e-Deklaracje Desktop application built by Polish Ministry of Finance but you still want to learn more about best practices, used frameworks and lessons learned from that project.

If your answer is yes to any of the above questions you should definitely come to this years Adobe MAX that will be in Los Angeles from 4^th to 7^th of October and attend my session “Flex and Adobe AIR In Government: The e-Deklaracje Desktop” on Oct 7^th at 5pm.

As you can see the scope of this session is broad but I think I will satisfy technical and more business oriented audience. Hope to see you there!

You can learn more about other sessions with MAX Scheduler application.

Minor version 1.5.2 of Adobe AIR was released last Friday. It is basically a bug fix, security and some reliability issues release. You can get it from here http://get.adobe.com/air/ when installed you can update your *-app.xml namespace to use new version!

Tour de LiveCycle is a desktop application designed by the Adobe Evangelist team to serve as both an introduction to Adobe LiveCycle ES and an extensive reference tool. We have organized over 1,000 pages of content into a hierarchical tree that you can use to explore the areas most relevant to you. Whether you need to build a full application or you just plan to spend 10 minutes getting a feel for LiveCycle ES and the kinds of problems it can help you solve, Tour de LiveCycle can help.

You can find more info here: http://www.adobe.com/devnet/livecycle/tourdelivecycle/

Here is the badge that you can use to install Tour de LiveCycle:

You can also check Tour de Flex which is very powerful demo of Flex and AIR technologies:

Adobe AIR is a winner of Webware 2009!!! It was awarded in Infrastructure & Storage category biting other products like: BitTorrent, Carbonite, DropBox, Dropio, Facebook Connect, Mozy, OpenID, Windows Live SkyDrive and YouSendIt.

This is really great news and that means industry is recognizing incredible potential of Adobe AIR which brings true cross-platformability with developers productivity.

You can find more info here: http://news.cnet.com/8301-13546_109-10237765-29.html

At the beginning of April (09.04.2009) Polish Ministry of Finance released their first Adobe AIR based application e-Deklaracje Desktop. This application lets its users submit annual tax declarations electronically and monitor their status. In Polish tax legislation every citizen is obliged to settle his income for previous year with tax office by the end of April. Historically e-Deklaracje project was initiated by Ministry of Finance in 2007/2008 but with less success and wide range adoption due to electronic signature requirement. By that time it required special hardware readers for digital signatures that are not commonly adopted in Poland.

This year Ministry of Finance has prepared change in legislation that was later signed by President of Republic of Poland that allowed sending annual declarations without qualified digital signature. Still to ensure proper security level users had to provide their personal information like: first name, last name, date of birth, NIP – tax identification number, PESEL – personal identification number and declared income from previous year. In reality this set of information is more than it was required in traditional paper based declarations (that’s the case with income from last year). I guess all this information gives better identity verification than traditional way where anyone can send his declaration by post or bring it in person to tax office (where no one asks for any id).

After only three weeks of availability over 77000 citizens have sent their declarations electronically (UPDATE 18.05: latest information from MF website states that 89000 declarations were sent, I guess those that forgot to do it till the end of April are still submitting)!!! This is incredible result taking into consideration such a short time, I believe next year we can expect this number to multiply couple times when people will have it available since January.

I’m also proud to say that local Adobe team (Tadeusz Chełkowski, Tomasz Lichota, Bartek Soin and of course myself) supported this project from very beginning with our technical and RIA experties.

Why Adobe AIR?

Ministry of Finance had couple of major requirements that had to be met by that type of application:

1. Cross-platform support – solution had to work without any compromises on all major operating systems like: Windows, Mac OS X and Linux.
2. Usability – it had to be easy to install and natural to use for inexperienced users. With badge installer on MF website it just couldn’t be made easier.
3. Security – give the users confidence that application they are installing was really issued by Ministry of Finance.
4. Interoperability – integration with SOAP based backend services.
5. PDF forms support – already existing PDF forms developed in previous year could be reused with small adjustments supporting non-qualified signature.
6. Desktop integration – required desktop features:
   

• Reliable local storage for drafts and sent declarations offline persistence;
• PDF forms templates and documentation local caching;
• Notifications mechanism for asynchronous confirmations (declarations receiving and confirmations service works in asynchronous mode with response time up to 24 hours).

As you can see all of above make Adobe AIR perfect fit for that type of applications. In my opinion the most important features in case of any application issued by public sector institutions are: cross-platform support, usability and security.

We had some stories in Poland in the past of applications written only for Windows platform with closed protocol specifications that ended with Linux users taking legal actions against publishing institutions. Adobe AIR built-in cross-platform support resolves this issue, I actually observed very positive feedback especially on Linux forums after e-Deklaracje release. Some comments stated that this is first time Polish government institution has noticed that there are also other OS’s than Windows.

In terms of usability there are two important factors, first of all installation process to make it as smooth as possible, ideally with small footprint, dependent runtime, tools and libraries automatic detection and installation (badge installer was resolving most of these, except Adobe Reader installation). Another factor is availability of experienced UI designers and developers. This is Adobe’s strong field with great community of Flash and UI design experts.

From the security perspective for application that gathers and sends out user personal information is important to give users confidence that the application was distributed by trusted entity and any communication with backed services is done through secure encrypted channels. Application issuer verification is Adobe AIR built-in feature with signed install packages.

You can check it out yourself on MF website: http://www.e-deklaracje.gov.pl/index.php?page=do_pobrania

This is how the application looks:

e-Deklaracje Desktop main window

Declaration fill window

History window