Space of Flex/AIR technologies

In this tutorial I will explain how to configure a development environment to work with PHP and Flex projects in one tool. In order to do that I will use Eclipse PDT 2.1 (PHP Eclipse plugin), Flash Builder 4 Plug-in Beta 2 and the latest Eclipse IDE for Java EE Developers package, which is eclipse-jee-galileo-SR1-macosx-carbon (of course if you are on Windows you should get the proper Windows version instead) at the moment. Additionally I will use MAMP (Mac, Apache, MySQL, PHP stack), of course there are other possible solutions like WampServer for Windows, multiplatform XAMPP, or Zend Server.

Download links:

- Eclipse IDE for Java EE Developers – http://www.eclipse.org/downloads/

- Eclipse PDT 2.1 (pdt-Update-2.1.2.zip) – http://www.eclipse.org/pdt/downloads/

- Java SE Development Kit (JDK 6 Update 17 – at the moment) – http://java.sun.com/javase/downloads/index.jsp

- Flash Builder 4 Plug-in Beta 2 – https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4 (you need to login with a free Adobe ID account)

- ZendDebugger (download latest version depending your operating system) – http://downloads.zend.com/pdt/server-debugger/

- MAMP, WAMP, XAMPP, or Zend Server
http://www.mamp.info/
http://www.wampserver.com/
http://www.apachefriends.org/en/xampp.html
http://www.zend.com/en/products/server-ce/

Installation steps:

Step 1) Start with Eclipse IDE for Java EE Developers installation, it is as simple as unpacking it to some folder on your drive. If you are on Windows make sure you have the JDK (Java Development Kit) installed on your system. Without that Eclipse will not run.

Step 2) Run Eclipse from the folder you installed it in. A clean installation will start with welcome screen; select Workbench option in the right upper corner to go directly to the development environment.

Step 3) Install PDT 2.1 as described in the following section of the PDT installation wiki: http://wiki.eclipse.org/PDT/Installation#Eclipse_3.5_.2F_Galileo_.2F_PDT_2.1

IMPORTANT DON’T INSTALL PDT 2.2 AT THE MOMENT as it has some bugs that are causing PHP scripts to crash. Go to the link  at the top and download one marked on a picture below (pdt-Update.2.1.2.zip):

As described in the wiki link above, in Eclipse go to Help > Install New Software… > Add… > Name: PDT, Location: jar:file:/path/to/pdt-Update-2.1.2.zip!/

Step 4) Install Flash Builder 4 Plug-in Beta 2 pointing to the Eclipse installation that was unpacked earlier, as shown below:

Step 5) Now you are ready to run your PHP/Flex development environment. Just remember NOT TO run it with the links provided by the Flash Builder 4 Plug-in installation. IMPORTANT: Directly start Eclipse from the folder you unpacked it into.

You can switch to the PHP or Flash perspective in upper right corner of your Eclipse Workbench by selecting it from the list in the Other option.

Step 6) Install the Apache, MySQL, PHP stack. Unpack ZendDebugger downloaded from one of the links above. Follow the instructions in README file to install it on your system.

Alternatively you can use ZendExtensionManager and configure it this way in your php.ini file:

zend_extension_manager.debug_server=/Applications/MAMP/bin/php5/zend/lib/ZendDebugger-5.2.15
zend_debugger.allow_hosts=127.0.0.1
zend_debugger.expose_remotely=always

IMPORTANT: ZendDebugger-5.2.15 is the unzipped ZendDebugger package and its subfolders need to be renamed to follow this schema: php-5.2.x. For example: 5_2_x_comp => php-5.2.x

Just remember to drop dummy.php into your website public root folder on your dev environment.

Step 7) Create your PHP project and give it a Flex Project nature by right clicking on your PHP project and selecting option Add/Change Project Type > Add Flex Project Type. This way you can have all your code in one single project. Of course you can have two separate projects for PHP and Flex but this is your decision. Do what will be more convenient for you.

And now you can Rock & Roll with PHP and Flex!

Zachęcam wszystkich do obejrzenia wywiadu ze mną poprowadzonego przez Macieja Pańkę z Uniwersytetu Mikołaja Kopernika! Dodatkowo na tej samej stronie dostępna jest transmisja wykładu w ramach Flex Challenge Academic Tour odbywającego się właśnie na UMK w Toruniu.

http://www.ucntn.umk.pl/inne,flexchallenge

ipla lite application was recently released, this is an Adobe AIR/Flex based client of video content published by Polsat group. Polsat is one of the biggest TV stations in Poland. This release is really great news for Mac and Linux users because ipla’s original version released in 2008 was only available for Windows platforms. In this case Adobe AIR brings outstanding capabilities like: video, audio and cross-platform support. At the moment this release allows watching live streaming content, prerecorded TV shows in VOD mode, do video search and navigate through video categories. I know there are other plans to extend it with features known from full Windows version like social networking. Personally I would also like to see capabilities like local video caching (for offline mode watching), Twitter integration, video deeplinking (maybe something similar as we recently introduced for the content from Adobe MAX) – time will show

Here are some screens with application UI:

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.

Recently I noticed that MVP (Model View Presenter) pattern especially using Swiz Framework is becoming very popular. That is why I decided to port one of my old examples to checkout this approach. It is a simple Flex based notes editor, really really trivial one. As an inspiration and some guides I used one of Ben Clinkinbeard blog posts and also Soenke Rohde blog post. With my approach I introduce assumption that all/most PresentationModel classes extend AbstractPresentationModel class that also extends AbstractController from Swiz package. My abstract class adds dispatcher property that returns reference to CentralDispatcher (I guess this could be also a nice addition to Swiz itself). The assumption here is that communication between different PresentationModel classes is done only through events. Of course PresentationModel has direct access to views and model as with standard MVP, additionally I threat service delegates also as part of model. I guess this could be also called MVPS pattern

Working application is here and application source code here.

I’m waiting for your comments, especially about approach to currentState switching in ApplicationPresentationModel.as and assumptions like event based communication between PresentationModel classes.

Here is just an overview diagram of the architecture, it doesn’t represent all dependencies between application components.

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.