Space of Flex/AIR technologies

During my journey of discovering the goodness of AIR 2.0 I wanted to try the new secure sockets functionality. AIR 2 comes with a new class, SecureSocket, which actually extends the standard Socket class. The easiest way for me to test it was to try to connect to GMail’s IMAP server. I was actually inspired by very cool example built by Christian Cantrell called MenuMail available here to download from Adobe Labs. I think the code below is self explaining; when you click Connect button you should see following trace output in the console:
onConnect [Event type="connect" bubbles=false cancelable=false eventPhase=2]
onSocketData [ProgressEvent type="socketData" bubbles=false cancelable=false eventPhase=2 bytesLoaded=66 bytesTotal=0]
* OK Gimap ready for requests from x.x.x.x n12if410166gve.29

Below is the source code:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:halo="library://ns.adobe.com/flex/halo">
 
	<fx:Script>
		<![CDATA[
			import flash.events.Event;
			import flash.events.IOErrorEvent;
			import flash.events.MouseEvent;
			import flash.events.ProgressEvent;
			import flash.events.SecurityErrorEvent;
			import flash.net.SecureSocket;
			import flash.net.Socket;
 
			protected var secureSocket:SecureSocket;
 
			protected function btnConnect_clickHandler(event:MouseEvent):void
			{
				secureSocket = new SecureSocket();
				secureSocket.addEventListener(Event.CONNECT, onConnect);
				secureSocket.addEventListener(ProgressEvent.SOCKET_DATA, onSocketData);
				secureSocket.addEventListener(IOErrorEvent.IO_ERROR, onIoError);
				secureSocket.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);
				secureSocket.connect(txtServerAdress.text, parseInt(txtServerPort.text));
			}
 
			/**
			 * Handles Event.CONNECT event when successful connection is established
			 */
			protected function onConnect(event:Event):void 
			{
				trace("onConnect", event);
			}
 
			/**
			 * Handles ProgressEvent.SOCKET_DATA when data is received through the SecureSocket
			 */
			protected function onSocketData(event:ProgressEvent):void 
			{
				trace("onSocketData", event);
 
				var socket:Socket = event.target as Socket;
				trace(socket.readUTFBytes(event.bytesLoaded));
			}
 
			/**
			 * Handles IOErrorEvent.IO_ERROR when IO error happens during the connection
			 */
			protected function onIoError(event:IOErrorEvent):void 
			{
				trace("onIoError", event);
			}
 
			/**
			 * Handles SecurityErrorEvent.SECURITY_ERROR event on any security errors
			 */
			protected function onSecurityError(event:SecurityErrorEvent):void 
			{
				trace("onSecurityError", event);
			}
 
		]]>
	</fx:Script>
 
	<halo:Form horizontalCenter="0" verticalCenter="0">
		<halo:FormHeading label="Connection info"/>
		<halo:FormItem label="Server adress:">
			<s:TextInput id="txtServerAdress" text="imap.gmail.com" />
		</halo:FormItem>
		<halo:FormItem label="Server port:">
			<s:TextInput id="txtServerPort" text="993"/>
		</halo:FormItem>
		<halo:FormItem>
			<s:Button id="btnConnect" label="Connect" click="btnConnect_clickHandler(event)" />
		</halo:FormItem>
	</halo:Form>
 
</s:WindowedApplication>

Today I published Flerry on Google Code, a Flex-Java bridge that uses NativeProcess API from Adobe AIR 2.0. Using it is very simple and similar to RemoteObject API in Flex. In fact I reused libraries from BlazeDS to do AMF de/serialization on Java side and on Flex side classes like AsyncToken, RemotingMessage, AcknowledgeMessage and ResultEvent/FaultEvent for eventing.

Here is short snippet how you can use it directly in MXML:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="300" minHeight="200" xmlns:flerry="net.riaspace.flerry.*">
    <fx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
 
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
 
            protected function nativeObject_faultHandler(event:FaultEvent):void
            {
              Alert.show(event.message.toString());
            }
 
            protected function addMethod_resultHandler(event:ResultEvent):void
            {
              txtResult.text = event.result.toString();
            }
 
            protected function btnAdd_clickHandler(event:MouseEvent):void
            {
              nativeObject.add(parseInt(txtValue1.text), parseInt(txtValue2.text));
            }
            ]]>
    </fx:Script>
    <fx:Declarations>
 
    <!-- Declaring NativeObject that points to 
            net.riaspace.flerrydemo.MyJavaObject class in ./jars/flerry-demo.jar -->
    <flerry:NativeObject id="nativeObject" binPath="./jars/flerry-demo.jar" 
            source="net.riaspace.flerrydemo.MyJavaObject"
            fault="nativeObject_faultHandler(event)">
 
      <!-- Declaring NativeMethod with custom result handler, for this example 
              actually result from NativeObject could be used -->
      <flerry:NativeMethod id="addMethod" name="add" 
            result="addMethod_resultHandler(event)" />
 
    </flerry:NativeObject> 
 
  </fx:Declarations>
 
  <s:HGroup verticalAlign="middle" textAlign="center" horizontalCenter="0" verticalCenter="0">
    <s:TextInput id="txtValue1" text="2" width="30" />
    <s:Label text="+" width="30" />
    <s:TextInput id="txtValue2" text="3" width="30" />
    <s:Button id="btnAdd" label="=" width="30" click="btnAdd_clickHandler(event)" />
    <s:TextInput id="txtResult" width="30" editable="false" />
  </s:HGroup>
 
</s:WindowedApplication>

Some NativeObject properties:

• binPath – points to jar file with your Java application
• source – points to java class that this NativeObject maps to
• singleton – sets source class object as singleton
• startupInfoProvider – custom implementation of net.riaspace.flerry.IStartupInfoProvider, by default Flerry comes with JavaStartupInfoProvider that tries to detect where Java is installed on users machine, in other case Error is thrown

In following posts I will explain in details how it all works, for now you can download flerry Flash Builder project with all the source code from here.

In my previous post I gave few hints about styling Flex 4 applications using default Spark theme. This time I extended it to additional MX containers and also wanted to explain what particular CSS properties mean.

• chrome-color (chromeColor, it was renamed from baseColor after Flex 4 Beta 2) – The main color for a component
• content-background-color (contentBackgroundColor) – Color of the fill of an item renderer
• symbol-color (symbolColor) – Color of any symbol of a component. Examples include the check mark of a CheckBox or the arrow of a scroll button
• selection-color (selectionColor) – The color of text when the component is enabled and has focus
• focus-color (focusColor) – Color of focus ring when the component is in focus
• roll-over-color (rollOverColor) – Color of the highlights when the mouse is over the component
• color – Color of the text
• text-roll-over-color (textRollOverColor) – Color of the text highlights when the mouse is over the component, used in old MX components.
• accent-color (accentColor) – Additional color used for accent. This color is used by “emphasized” buttons (default button in Alert box), and the slider track highlight.

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
 
global
{
	chrome-color: #333333;
	content-background-color: #333333;
	symbol-color: #FFFFFF;
	selection-color: #FFB129;
	focus-color: #FF7F29;
	roll-over-color: #F7DCAD;
 
	color: #D7D6D6;
	text-roll-over-color: #D7D6D6;
 
	accent-color: #FFB129;
}
 
s|Panel
{
	background-color: #333333;
}
 
mx|Alert
{
	background-color: #333333;
}
 
mx|TabNavigator
{
	background-color: #333333;
}
 
mx|ToolTip
{
	color: #000000;
}

This it the result of applying this style sheet (same as in previous post):

As you probably know, the upcoming Flex 4 (Gumbo) release was built with design in mind to let developers easily and quickly skin and style their applications. In particular, skinning can be realized with the use of a new component architecture called Spark that comes with two built-in themes, one also called Spark (the default) and the second one called Wireframe (very useful when prototyping). In addition to the skinning capabilities, new CSS properties were also introduced that make it even simpler to style existing components and quickly achieve really good looking results without needing new custom themes.

As an example I came up with a set of styles that you can apply to default Spark components to get a nice looking dark theme. Here is the example (with the source code here):

Example above uses only following CSS properties:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
 
global
{
	chrome-color: #333333;
	content-background-color: #333333;
	symbol-color: #FFFFFF;
	selection-color: #FFB129;
	focus-color: #FF7F29;
	roll-over-color: #F7DCAD;
	color: #D7D6D6;
}
 
s|Panel
{
	backgroundColor: #333333;
}

To make it even simpler to style your application theme there was a new Appearance panel introduced in Flash Builder 4. It is available in the design view for your main MXML component.

Recently I needed to format a Twitter-like input string, replacing the @UserName, #Tag and http://some.url syntax with an html a tag and adding the proper event: prefix to the href content so that it could dispatch a Flex link event (more info about link events Listening for the link event in a Flex Label control). Additionally I wanted to intelligently truncate the input string to the specified maximum length. I used RegExp for syntax parsing and also extended mx.formatters.Formatter. I guess RegExp expression might be more elegant but this way was good enough for my purposes.

Formatter code:

package net.riaspace
{
	import mx.formatters.Formatter;
 
	public class TwitterFormatter extends Formatter
	{		
 
		public var truncate:Number = NaN;
 
		protected var regExp:RegExp = /((@|#)\w+)|((ht|f)tp(s?):\/\/)(\S+)/ig;
 
		public function TwitterFormatter()
		{
			super();
		}
 
		override public function format(value:Object):String
		{
			if (value != null)
			{
				var str:String = String(value);
 
				if (!isNaN(truncate) && str.length > truncate - 3)
				{
					var index:int = lastWhiteSpaceIndex(str.substr(0, truncate - 2)); // truncate - 2 checks if after last char there is no white-space
					if (index > 0)
						str = str.substring(0, index); // truncates after last white-space
					else
						str = str.substr(0, truncate - 3); // truncates at specified truncate index -3 for ...
 
					str = str + "...";
				}
 
				return str.replace(regExp, "<u><a href='event:$&'>$&</a></u>");
			}
			return null;
		}
 
		protected function lastWhiteSpaceIndex(str:String):int
		{
			return Math.max(
				str.lastIndexOf(" "), 
				str.lastIndexOf("\n"), 
				str.lastIndexOf("\r"), 
				str.lastIndexOf("\t"));
		}
	}
}

Usage example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="1024" minHeight="768" xmlns:riaspace="net.riaspace.*">
 
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			protected function txt_linkHandler(event:TextEvent):void
			{
				Alert.show("Clicked: " + event.text);
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
 
		<riaspace:TwitterFormatter id="formatter" truncate="100" />
 
		<fx:String id="twitterString">
			#Lorem @ipsum http://dolor sit amet, consectetur adipiscing elit. In vehicula mollis velit a lobortis. Vivamus quis turpis non odio aliquet mattis. Proin vel nisi in nisi condimentum ornare eget porttitor tortor. Phasellus et nulla est, sit amet cursus nunc. Maecenas sit amet nisi augue, in euismod mauris. Nulla facilisi. Curabitur hendrerit aliquam magna, facilisis pellentesque justo semper eget. Quisque eleifend nisi non risus elementum ut feugiat urna ultricies. Morbi elementum augue non velit tempus tempus hendrerit sit amet diam. Mauris eleifend odio sit amet tellus luctus pellentesque. Curabitur nec massa dui, at imperdiet purus. 
		</fx:String>
 
	</fx:Declarations>
 
	<mx:Text id="txt" link="txt_linkHandler(event)" htmlText="{formatter.format(twitterString)}" 
			 width="100%" height="100%" />
 
</s:Application>

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.