Space of Flex/AIR technologies

Yesterday Amethyst Beta 5 was released. Amethyst is a Flex development environment for Visual Studio. With every release it becomes more and more feature complete. I think in the future it has a big chance of becoming the Flex IDE of many VS/.NET developers.

This release bring feature like:

Refactoring

• Rename variables, classes and methods
• Encapsulate field (add getters and setters and update references)
• Preview and edit (check or uncheck items) before renaming
• Rename from ‘smart tags’

Organize imports

• Auto-add class to import list
• Sort imports
• Remove unused imports
• Sort and remove imports in a single operation

Configuration-dependent property pages

• Seven pages of categorized project properties
• Save properties as named configurations for easy re-use
• Option to select alternative Flex SDKs
• Options to define symbols for conditional compilation

Find all References

• Highlight an ID such as a class, method or variable to navigate to all references in project

Run and debug on server

• Option to run or debug applications using a web server
• Supports WebDev, Apache, IIS

Mateusz Małczak one of our Polish Flash Platform gurus (an author of an awards winning Komixo http://komixo.com/ comics editor) has released an asynchronous JPEG encoder that is based on libjpeg and compiled into AS code with Alchemy. More info about his work you can find here: http://segfaultlabs.com/blog/post/asynchronous-jpeg-encoding

Here is also a preview where you can compare it with optimized JPEGEncoder. It not only is faster but it also produces smaller jpegs:

Yesterday new version of Swiz 0.6 was released. It brings couple of new features and some performance improvements:

• Support for mediating bubbled event
• Added view attribute in Mediate tag
• Autowire views with view attribute in Autowire tag
• Ignoring view classes with underscore for performance optimization
• Added viewPackages for performance optimization
• Added eventPackages for shorter notation in strict mode
• SwizConfig for Swiz MXML declaration
• Generic fault handler for executeServiceCall
• Autowire bean properties with new property attribute
• Prototype supports class reference and constructor arguments

Sonke Rohde published great post explaining all the new features: http://soenkerohde.com/2009/05/swiz-06-released/

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

Amethyst Beta 3 was released today! For those of you that don’t know it, it’s a Visual Studio Flex plugin. If you are looking for some other alternative you can check one of my previous posts http://www.riaspace.net/2009/01/flex-developer-tools-ides where I listed all the tools in the market available to Flex developers. This is really great news as it brings debugger with my favorite VS feature of Drilldown Debugging. To learn more go to: http://www.sapphiresteel.com/Amethyst-Beta-3-Flex-IDE-Released

These are the principle new additions in beta 3…

Integrated Debugger with:

• Breakpoints
• Step Into
• Step Over
• Step Out
• Continue
• Restart

Debug Windows

• Watch windows
• Autos
• Locals
• Call Stack
• Quick Watch

• Parameter Completion: when you call a method, its arguments are shown in a tooltip with the current argument in bold…

• In MXML you may omit ‘mx:’ in order to get code completion in tags – e..g. enter: <b to view a completion list starting mx:BaseListData
• MXML completion is case insensitive – e.g. enter bu and press Tab to add the tag: <mx:Button

Last night on a way back from Katowice (spodek20.pl – barcamp event) I found some time to put my ZendAmfDs project together into distributable package. I created a zendamfds project  on Google Code to host source files. Okay now couple of words what’s it all about…

ZendAmfDs is an extension to Zend_Amf (it actually extends Zend_Amf_Server class). It allows developers to configure and execute on the server side database queries against model classes that extend Zend_Db_Table_Abstract  (SELECT, INSERT statements are supported with this release, I’m also planning to add in the future UPDATE statements – I encourage anyone from the community to help me on this ). As part of this project I also created very simple AS3 helper library that makes it very simple to use it from Flex side. With just a single line of code it is possible to execute queries plus register result and fault handlers, look further for more explanation.

To start playing with quickstart package you need to do couple of necessary steps:

1. Download ZendAmfDsQuickstart package from here: http://code.google.com/p/zendamfds/downloads/list
2. Download Zend Framework (Minimal is enough) from here: http://framework.zend.com/download/latest
3. Unzip both archives and copy Zend library to ZendAmfDsQuickstart\library folder.
4. Register your quickstart application in httpd.conf – Apache configuration file (there are probably couple of other ways to do that but that is something that works for me and I found it useful when working on multiple projects on the same Apache instance). My httpd.conf configuration looks like this:
   
   

   Alias /quickstart /Users/pwalczys/Workspaces/Zend_Amf_Ds/ZendAmfDsQuickstart/public
   <Directory "/Users/pwalczys/Workspaces/Zend_Amf_Ds/ZendAmfDsQuickstart/public">
       AllowOverride all
       Options None FollowSymLinks
       Order allow,deny
       Allow from all
   </Directory>

   What it does it points requests from http://localhost/quickstart to web root folder that is in my case placed in /Users/pwalczys/Workspaces/Zend_Amf_Ds/ZendAmfDsQuickstart/public. Make sure you modify this according to your folders structure!!! Also important to note here is that under public folder there is a hidden .htaccess file that assumes that your application will have quickstart as web root folder. If you want to run it directly under http://localhost/ make sure you change /quickstart/index.php => /index.php at the bottom of .htaccess file. Make sure you restart Apache server after changes made in httpd.conf.

5. Next step is to create database, this example assumes that you will be using MySQL with ZEND_AMF_DS database and and FOOS_TABLE in it. There is a schema.mysql.sql file under scripts folder that will help you creating proper table structure with some sample data. Another important thing is to configure database access. In order to do that go to application/config/app.ini file and set property values for host, user and password. You may also want to change adapter if using different database engine.

   // application/config/app.ini

   [production]
   database.adapter       		=	"PDO_MYSQL"
   database.params.dbname		=	"ZEND_AMF_DS"
   database.params.host		=	"127.0.0.1"
   database.params.username	=	"USERNAME"
   database.params.password    = 	"PASSWORD"
   ...
   

6. Finally we are ready to run it, simply go to http://localhost/quickstart/ and you should see something like this:

   

   You can play with this by using form that adds new records into FOOS_TABLE that are displayed in the DataGrid above.

If you had any problems with steps above you may want to refer to one of my previous posts where I explained how to configure Zend_Amf with full Zend Framework.

Okay now lets have a look how it works. Whole ZendAmfDsQuickstart package is a PHP/PDT project with Flex nature so if you are using Flex Builder or Eclipse with Flex Builder plugin you can download PDT from eclipse.org site to have also PHP editor in place.

1. On PHP side it all starts with MessageBrokerController class (its in application/controllers/MessageBrokerController.php file). Major difference here is that I’m using ZendAmfDs class to instantiate AMF service that is located in library/ZendAmDs/ZendAmfDs.php. This class actually extends Zend_Amf_Server so you can use functions like addDirectory, setClassMap as you would do with Zend_Amf_Server itself. ZendAmfDs class constructor requires parameter with path to data-services.xml file that contains all SELECT, INSERT statements definitions.

   <?php
   class MessageBrokerController extends Zend_Controller_Action 
   { 
   	public function init()
   	{
   		$this->_helper->viewRenderer->setNoRender(true);
   	}
    
   	public function amfAction()
   	{
   		require_once 'ZendAmfDs/ZendAmfDs.php';
   		$server = new ZendAmfDs(APPLICATION_PATH . '/config/data-services.xml');
   		$server->addDirectory(APPLICATION_PATH . '/services/');		
   		echo($server->handle());
   	}
   }

2. Configuration file data-services.xml (its in application/config/data-services.xml) contains information about SELECT, INSERT statements and also where model classes are placed. In case of quickstart project there is only one model class called Foo that maps to FOOS_TABLE. There is one more thing to point here is that underscore notation (_) can be used when naming table columns and ZendAmfDs will convert these to camelCase property names on ActionScript class side (columnNameCamelSeparator element defines what is default separator in your column names, in case this is omitted it will map one-to-one column names to property names).

   <?xml version="1.0" encoding="utf-8"?>
   <service>
    
   	<destination id="ZendAmfDs">
   		<properties>
    
   			<defaults>
   				<columnNameCamelSeparator>_</columnNameCamelSeparator>
   				<modelsPath>models</modelsPath>
   			</defaults>
    
   			<select id="findFooById">
   				<asClass>Foo</asClass>
   				<modelClass>Foo</modelClass>
   				<where>ID = 1</where>
   			</select>
    
   			<select id="findAllFoos">
   				<asClass>Foo</asClass>
   				<modelClass>Foo</modelClass>
   				<order>NAME</order>
   			</select>
    
   			<insert id="insertFoo">
   				<asClass>Foo</asClass>
   				<modelClass>Foo</modelClass>
   			</insert>
    
   		</properties>
   	</destination>
    
   </service>

3. Now if you take a look into Flex code there are two things to note here. I’m using ZendAmfDs.swc library that brings single helper class that is instantiated in MXML with following line: <zendAmfDs:Service id="zendAmfDs" remoteObject="{remoteObject}" /> and later on it is used by calling query method like this: zendAmfDs.query("findAllFoos", null, allFoosResultHandler);. This way it is possible to execute findAllFoos query on the server side without any parameters with allFoosResultHandler method as a result handler. If query requires any parameters null value should be exchanged with an array of objects that will be passed to PHP and used in WHERE part of the query statement. Additionally it is possible to register fault handler that can be specified after result handler, in this particular case I’m using default fault handler registered during RemoteObject initialization.

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
   	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" xmlns:models="quickstart.models.*"
   	xmlns:zendAmfDs="net.riaspace.zendAmfDs.*" initialize="findAllFoos()">
    
   	<mx:Script>
   		<![CDATA[
   			import mx.collections.ArrayCollection;
   			import mx.rpc.events.ResultEvent;
   			import mx.controls.Alert;
    
   			[Bindable]
   			private var allFoos:ArrayCollection;
    
   			private function findAllFoos():void
   			{
   				zendAmfDs.query("findAllFoos", null, allFoosResultHandler);
   			}
    
   			private function allFoosResultHandler(event:ResultEvent):void
   			{
   				allFoos = new ArrayCollection(event.result as Array);
   			}
    
   			private function insertFoo():void
   			{
   				zendAmfDs.query("insertFoo", [foo], insertFooResultHandler);
   			}
    
   			private function insertFooResultHandler(event:ResultEvent):void
   			{
   				findAllFoos();
   			}
    
   		]]>
   	</mx:Script>
    
   	<mx:RemoteObject id="remoteObject" endpoint="http://localhost/quickstart/MessageBroker/amf" 
   		destination="zend" fault="Alert.show(event.message.toString())"/>
    
   	<zendAmfDs:Service id="zendAmfDs" remoteObject="{remoteObject}" />
    
   	<mx:DataGrid dataProvider="{allFoos}">
   		<mx:columns>
   			<mx:DataGridColumn headerText="ID" dataField="id"/>
   			<mx:DataGridColumn headerText="NAME" dataField="name"/>
   			<mx:DataGridColumn headerText="FOO_NUMBER" dataField="fooNumber"/>
   		</mx:columns>
   	</mx:DataGrid>
    
   	<models:Foo id="foo" 
   		name="{txtName.text}" 
   		fooNumber="{Number(txtFooNumber.text)}" />
    
   	<mx:Form>
   		<mx:FormItem label="NAME">
   			<mx:TextInput id="txtName"/>
   		</mx:FormItem>
    
   		<mx:FormItem label="FOO_NUMBER">
   			<mx:TextInput id="txtFooNumber"/>
   		</mx:FormItem>
    
   		<mx:FormItem>
   			<mx:Button label="Insert" click="insertFoo()" />
   		</mx:FormItem>
   	</mx:Form>
    
   </mx:Application>

This just couldn’t be simpler!!! Of course I’m waiting for the feedback and if anyone feels like adding UPDATE support please let me know…

Last week SapphireSteel released Amethyst Beta 2. It’s a Flex Visual Studio plugin, new release brings couple of improvements but probably the most important feature is IntelliSense support. I believe this is great news for Flex community! In one of my previous blog posts I listed number of different IDE tools of course Amethyst was there. As you can see now you can develop Flex apps with almost any major IDE like: Eclipse, NetBeans, IntelliJ, Visual Studio and FlashDevelop.

I know there are very ambitious plans for Amethyst including WYSIWYG editor, I’m really looking forward to this but as for know you can go and check latest Beta here: http://www.sapphiresteel.com/Adobe-Flex-IDE-Amethyst-Beta-2

Another important thing is that you can use Amethyst without full Visual Studio, it can be used with VS Shell, as described here: http://www.sapphiresteel.com/Flex-IDE-For-Free-and-Ruby-too

Aptana has just released beta version of its ActiveRecord.js which is an ORM JavaScript library that implements ActiveRecord pattern. It also works with AIR and in couple of other environments:

• Google Gears (client-side persistence)
• In Memory (if no SQL server is available on the client)
• Adobe AIR (client-side persistence)
• SQLite and MySQL (via Aptana Jaxer, the open source Ajax server)
• additional environments (like HTML5) expected to come through working with the community on the project

And here is the example:

var User = ActiveRecord.define('users',{
    username: '',
    email: ''
});
User.hasMany('articles');
 
var ryan = User.create({
    username: 'ryan',
    email: 'rjohnson@aptana.com'
});
 
var Article = ActiveRecord.define('articles',{
    name: '',
    body: '',
    user_id: 0
});
Article.belongsTo('user');
 
var a = Article.create({
    name: 'Announcing ActiveRecord.js',
    user_id: ryan.id
});
a.set('name','Announcing ActiveRecord.js!!!');
a.save();
 
a.getUser() == ryan;
ryan.getArticleList()[0] == a;

You can find more info here: http://www.aptana.com/blog/rjohnson/activerecord_js_released_as_beta

New version of Swiz Framework was just released, it brings couple of new features and bug fixes. I’m looking forward to give it a try in next couple of days. I used previous version in some of my projects and I really loved it, it reminds of my favorite Seam Framework from my Java days

Changes / Fixes for Swiz 0.0.5:

- DynamicChannelSet now contains an ‘endPointName’ property that can be set to ‘flex2gateway’ for ColdFusion
- Multiple calls to autowire for an object or view will only create mediators once
- handleAutowireEvent ignores flash.* and mx.* classes
- DynamicMediators allow event properties to be null
- Primitive objects can be added to BeanLoaders
- Autowire now supports by type (with [Autowire] instead of [Autowire(bean="foo")])
- DynamicResponder supports passing an array of values to be passed back into the result handler
* for example to have the original saved object passed in to a save result function
- Refactored all bean factory specific functionality out of Swiz and into BeanFactory
- Added Strict flag and MediatorUtils for event type checking
- Added ExpressionUtils, also or event type checking
- Added Prototype object, for non-singleton bean definitions

You can read more about this release on Chris Scott blog – http://cdscott.blogspot.com/2009/01/new-swiz-005-for-new-year.html

I just uploaded refactored version of flinks you can download it from here. It now can be instantiated with-in any component that supports states, that also includes externally loaded modules. I also changed some property names and default setting of auto deep linking. To use it you just need to put this in your component mxml that can handle states (Application, Module…):

<riaspace:EnableDeepLinking />

Major architectural change is that component responsible for mapping between states and url fragments is a singleton and EnableDeepLinking tag can be used any time for any component in your application. What it does it loads states configuration for owning component into a singleton registry…