Adobe buys Nitobi – Ajaxian.

A couple a weeks ago I attended to the Web 2.0 expo, I did it for a few reasons, one was to learn from people, its incredible what you can learn just by talking with people in this kind of events, but also a very important reason was to know what is going on with the UI technologies today, what new companies are using, is people really implementing HTML5 features, what is the feeling about Flash/Flex etc. I was not surprise to me that many people are still relying in Flash in one or another way, some people choose Flex for different reasons, Video, more interactive UI, faster development, easy deployment, real time data, etc.

Many people tend to compare them and say that HTML5 will replace Flash, many of those are people that have never done any Flex/Flash application and probably don’t have the enough knowledge about Flash technologies to make that bold statement.

Before I say anything, I have to say that I like HTML very much, but I like Flash/Flex too. One thing is clear, “free and standard” technology is most of the time better than “proprietary standard” technology, but as always, your requirements should drive the decision of picking the right technology. Sometimes when you are trying to do something that “free and standard” can’t do, you can always consider a well accepted and distributed technology that gives you much more.

HTML5
-Is much more than just a structure markup language (currently there is a debate about HTML5 is the specification name only and still want to keep the name of HTML only), most of the time implicitly includes CSS, Javascrip, jQuery, Ajax, etc.
-Its currently W3C is currently in a draft format and constantly changing (Adobe, Google, Microsoft, Apple are participating).
- The big changes are:
- , , .
-Enriched semantics.
-Offline storage, database.
- More: http://www.xibl.com/web-development/html5-features-tips-and-techniques-you-%20must-know/

Ajax
At this point Ajax is a very stable and well accepted technology implemented successfully on many libraries. Mostly used on a HTML presentation but also used on Adobe Air.

Flash
Is a complete platform, not only a technology to build applications and not directly comparable to HTML.
It uses ActionScript that is ECMA262 based dialect for declaring dynamic behavior.
Includes side channel communications like RTMP.

They both things that the other one don’t have, and they both have cons.

For example:
Flash       HTML
Anyone can provide input?                      Yes         Yes
Standard can change? (Drop API)          Yes         Yes(Web SQL)
Vendor advantage or control                   Yes          Not likely- Possible
Consistent implementations                   (+) Likely (-) Likely
Speed of Innovation                                  Faster       Slower
Current state of innovation                     Active        Active

The truth is that HTML5 and Flash should not be compared at this point, HTML5 specification does not cover all the features that Flash provides, so Flash is still going to be the preferred technology for some kind of applications, and HTML5 new features will take a few years to be adopted by all the browsers (http://html5readiness.com/). There are enough applications out there and enough different requirements that both can live together and help each other.

I like to finish with a say from John Nack:
“This isn’t about one technology (HTML, Flash) vs. another; it’s about putting customers, and the solutions to their problems, ahead of any technology.”

Some time ago I face this same problem, what if we want to store some kind of Flex UI/Layout on the server, how can we do it?… even though there might be many ways, non of them are easy, so it took me some time to figure it out.

Now I have seen that many people have been trying to do the same and I want to share the idea.

For example, assume you are doing some kind of personal dashboard where the user can update the layout anyway he wants and add portlets on it, then next time he logs in we need to render it on that way and push all the portlets on the same position. Here i am going to give you and idea.

The whole concept is to store UI components on the server, you can store it anyway you want, in a table, as String, as XML, etc… then on the client you can read it and generate the UI, for example my case, I am using Java backend and RemoteObjects to transfer the data, so I have a client and server version of the components that i need to store, I have a :

-UIComponentObject.as / UIComponentObject.java

package serverobjects
{
import mx.events.IndexChangedEvent;
import mx.utils.ObjectUtil;

[Bindable]
[RemoteClass(alias="com.boardvantage.dv.domain.clientvo.UIComponentVO")]
public dynamic class UIComponentVO
{
public var width:int;
public var height:int;
public var id:String;
public var name:String;
public var type:String;
public var x:int;
public var y:int;
public var percentHeight:int;
public var percentWidth:int;

//styles
public var borderThickness:int;
public var borderStyle:String;
public var borderColor:Object;
public var cornerRadius:int;
public var backgroundColor:Object;
public var dropShadowEnabled:Boolean;
public var valign:String;
public var halign:String;

public var padding:int;

public var customStyle:Boolean;

public var url:String;

public var childs:Array= new Array();

public function UIComponentVO()
{
}

public function addChild(uiComponentVo:UIComponentVO){

addChildAt(uiComponentVo,childs.length);

}

public function addChildAt(uiComponentVo:UIComponentVO,index:int){

this.childs[index]=uiComponentVo;

}

public function getChildren():Array{

return this.childs;
}

}
}
-UIContainerObject.as/ UIContainerObject.java

package serverobjects
{
[Bindable]
[RemoteClass(alias="com.boardvantage.dv.domain.clientvo.UIContainerVO")]
public dynamic class UIContainerVO extends UIComponentVO
{
public function UIContainerVO()
{
super();
}

public var colSpan:int;
public var direction:String;
public var backgroundImage:String;
}
}

Then on the client I convert those objects to UI objects, take a look on this example:
Video
Demo

After upgrading to the latest version of Firefox today I found that the doubleclick event is not working anymore. I start researching and found that the double click event is not been fired, I don’t know how long this problem will last, but i needed to do something right now, so I place a workaround to mimic the doubleClick event, here is my solution

First add this class to your project:

package com.myapp.utils
{
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.Timer;

import mx.core.UIComponent;

/**
* The DVTwoSingleClicksManager allows to two quick single click events on an UIComponent.
*/
public class TwoSingleClicksManager
{

// This is the max delay between successive single clicks to treat them as double click
private const TIME_OUT:int = 1000;

public var active:Boolean=true;
// Component to observe
private var component:UIComponent = null;

public function TwoSingleClicksManager(component:UIComponent)
{
super();
this.component = component;
this.component.addEventListener(MouseEvent.CLICK, singleClick, false, 0, true);
}

// This timer will be used to measure time between click and double click events.
private var timer:Timer = null;
// This var is used to store click event.
private var storedEvent:Event = null;
// This method resets timer and nullify var
private function stopTimer():Event {
var lc_storedEvent:Event = storedEvent;
storedEvent = null;
if (timer != null) {
timer.reset();
timer = null;
}
return lc_storedEvent;
}
// This method stops current timer, creates a new one and starts it.
private function startTimer(event:Event):void {
stopTimer();
storedEvent = event;
timer = new Timer(TIME_OUT, 1);
//timer.addEventListener(TimerEvent.TIMER_COMPLETE, deferredSingleClick);
timer.start();
}

// This method is called when a click event is sent
// One timer is started, event will be forwarded only if timer times out.
private function singleClick(event:MouseEvent):void {
if(active){
if(timer && timer.running) {
var storedEvent:MouseEvent = MouseEvent(stopTimer());
//the new event and old event should have same coordinates, that is clicked on same point
if(storedEvent.stageX  == event.stageX && storedEvent.stageY == event.stageY) {
//Alert.show(“dispatching single event…”);
stopTimer();
dispatchDoubleClick(event);
} else {
startTimer(event);
}
} else {
startTimer(event);
}
}
}


// This method is called when a double click event is sent
// Timer is stopped, so that click event is not sent
private function dispatchDoubleClick(event:MouseEvent):void {
stopTimer();
component.dispatchEvent(new MouseEvent(MouseEvent.DOUBLE_CLICK));
}
}

}

Here is the way to use it:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”setup()”>
<mx:Script>
<![CDATA[
importcom.myapp.utils.TwoSingleClicksManager;
import mx.controls.Alert;

var dcHandler:TwoSingleClicksManager;

private function setup():void{
dcHandler= new TwoSingleClicksManager(labelTxt);
}

private function doubleClickHandler(event:MouseEvent):void{
Alert.show("Double Click on "+event.currentTarget);
}

private function singleClickHandler(event:MouseEvent):void{
Alert.show("Single Click on "+event.currentTarget);
}
]]>
</mx:Script>
<mx:Canvas x=”46″ y=”37″ width=”179″ height=”140″ backgroundColor=”#DB1313″ doubleClick=”doubleClickHandler(event)” >
<mx:Text x=”53″ y=”36″ text=”Not Working” color=”#FBFDFD” fontSize=”12″ doubleClick=”doubleClickHandler(event)”/>
</mx:Canvas>
<mx:Canvas x=”314″ y=”37″ width=”378″ height=”140″ backgroundColor=”#0D0DF1″ doubleClick=”doubleClickHandler(event)”>
<mx:Text id=”labelTxt” x=”10″ y=”10″ text=”Working  &#xd;(only if you click the this label since the TwoSingleClickManager is only attached to the label, but you can attach any object)” color=”#FBFDFD” fontSize=”12″ doubleClick=”doubleClickHandler(event)” height=”114″ width=”333″/>
</mx:Canvas>
</mx:Application>

It was made like this, because I hope this is temporal, otherwise I would have added it to the component and find if we are trying to add a doubleClick event and activate it or something like that so it will work for every component, but for now you have to create a new object of this type for each component where you are expecting a doubleClick Event and deactivated if you don’t want to use it anymore. I think i will keep improving this if is necessary, but I guess a lot of people might be in a rush to fix this and i just wanted to share it.

Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3. These applications can be delivered to iPhone and iPod touch users through the Apple App Store.

It is going to be possible using Adobe Flash Professional CS5, this is really good news for all the Flash developers and users. Another very important and good news is that while it is possible to create iPhone content using the desktop Flex Framework, they do not recommend it…:-( because the Flex framework is currently optimized for execution in a desktop environment. The performance, UI, and interaction models have not been optimized for mobile devices, but Adobe is working on a mobile Flex Framework, which should be better suited for iPhone development. You can find the latest information on the mobile Flex Framework.

http://www.adobe.com/devnet/logged_in/abansod_iphone.html

http://labs.adobe.com/technologies/flashcs5/

A good friend and colleague sent me this article, and it describes very well the difficulties that a UI guy has to live with. I do agree with most of it, but also i have to add that not all the front-end developers have the skills to fulfill the position. Sometimes a developer become a front-end developer because that’s where the wave took him, bot because you like been a UI guy (developer, architect, engineer or designer). To be a good UI guy, you have to love it, its not just about the coding skills, but you have to have many other “talents”, the more he has the better. I see it like, you might be able to learn how to sing, but a singer was born with that talent, he love it and it comes natural he can definitely improve, but he has it,  as well as a good web designer was born with that good taste, common sense, good visual prospective that let him make everything look good for most of the people, or the same as a good developer was born with the ability to see functions, methods and classes as objects flying and connecting to each other on his mind. Now on this article Paul Carvill is talking about the hard to find developer that can do all that alone, there are really good ones out there, but they definitely not easy find. So i thing is very important what he say at the end:

“Know your value
What does this mean if you’re a front-end or client-side web developer? Know your value. What are your skills? Are you a developer, an engineer, a User Experience architect or an Interaction Designer? Advertise your value. Shout about it. Don’t be knowingly undermined or ignored. Create a User Experience team within your business. If they’ve already got one, join it! Your job is incredibly important, and your present employer needs to realize that, as they stand to benefit.”

Today started playing with Flash Catalyst and even though i do like the concept of using designer tools to build better looking apps and generate Flex code, i am afraid that the interaction between (Photoshop-Illustrator)/FC/FB is forcing us to have dev-SIGNERS to use (Photoshop/Illustrator)/FC and then hand it over to a DEV-signer that can actually write the Flex code, or hire a developer with really good designer skills that can play with all the tools at the same time, but that’s definitely is not an easy task. If you want to use it soon, i guess the best option is force real designers to learn a little programming to take it to a point where a good developer can write the rest, but I am afraid is like asking a Mac guy to use a PC or a Java guy to do some .Net, they will do it only if is absolutely necessary but with a very ugly face.

I do believe is a nice prototyping tool, but since FC is still in pampers, I really hope that FC will improve to a point that the generation can be both ways to allow a designer and a developer to interact easily instead for cloning the very few good Flex developers with designer skills.

There are many things you have to consider when you are trying to reduce the sfw file size. There are many obvious solutions like modularizing your application so your main application will load only the common code for an standard user and separating the rest in logical pieces, but you have to understand a little bit of how the compiler works, but basically understand that the compiler will pick and package only the necessary classes for that specific module or application, so is not just separate and compile,  you have to design how are you going to compile and ship your application.

But this time I want to talk about embedding images, recently on a project I am working on I stared trying to reduce the application size. I found many reasons why the application was needing this, but embeddings is the easier to find.

We know embedding images increase the size of the file, but thats not it, make sure the image is not embedded more than once. This application was using the same images across the app like am other, but the problem was that every time they wanted to show it, they were embedding it again and again. That’s a very common mistake, since many developers might thing that by having the image on the source, will add only once, but if you check the generated code you will see that the image is been serialized every time you embed it. To solve this problem there are many other solutions, but the easier one at this point of the project, the easier was to create a singleton class called, IconGetter that embed the application images once, for example:

private static var instance:IconGetter = new IconGetter();

[Embed(source="logo.gif")]
[Bindable]
public var logo:Class;

[Embed(source="broken.gif")]
[Bindable]
private var broken:Class;

public static function get instance():Singleton
{
return instance;
}

public static function getIcon(name:String):Class{

 var icon:Class;

try{
icon=instance[name]
}catch(e:Error){
icon=instance["broken"]
}
return icon;

}

I forced the variables be name with the same image name to return the right image based on the name rather than writing a “case” sentence to find it, the developer just need to know the image name. Another advantage was that this class could be generated with a java class looping through the images..;-)… plus it was going to be easier to “find and replace all” the current embeddings for the new static function call. But if you think about how much you can reduce the size of your application, is worth the effort, plus now you can move this class to a separate library and make it a RSL library to load it only once.

The RSL library depends on the application and needs to be evaluated if is beneficial for that specific case, RSL’s are not always better in some cases. We will write something about it later.

Last week attended to a training called “Flex for Enterprise Architects ” with FarataSystems and i seriously recommend it to other Architects to see all the tricks they have learned and use the ones that apply to your project. They have a lot of experience on trying to deliver “real time” data because of the type of clients they have had. Also they shared a good chunk of tips about modules and application size optimization.

One of the best parts of the training al least for me was the Flex patterns, they talked about some of the patterns that they have found in their experience, i guess there are more around, but from my point of view this is what is lacking on Flex. Thre are no patterns or guidelines, you can do the same thing in 100 different ways, but nobody is saying what is the best or the correct one.

Another thing that “again” was very obvious was the lack of a good Flex framework. Everybody or almost everybody was complaining  Cairngorm and others were looking for a good framework to use, but not even them are willing to take the risk or recommend it, actually they remove or try to remove it from their customer applications. Is understandable, you don’t have to be a rocket scientist to find they issues you will have in long term with it. They have a very good comparison of Flex frameworks, that’s the only place i got a little confused, they imply that you don’t need a framework to build an application, and i agree if you are building a very small application, but if you have a development group of 5 or more and a big application you really need something. I have been working and building frameworks for several years already, and i designed and build a Flex framework for the same reason (there isn’t a good one out there) and i have seen the difference that a good framework can do. Imaging all those applications build on struts been build without it…Actually they are building a good set of utilities to facilitate development and i think they would be very capable team of people that can finally build the most wanted Flex framework. I wish i can share my work with the framework but you know how this works, is the company code and i cant just open it to the public, but i hope i can eventually do somethingon my time and give something to the flex comunity.

But if you ever get the opportunity to go to a training, you are a strong Flex developer AND you have the option to propose or make decisions about your project, its definitely worth it.

After an introduction to channels with FarataSystems guys and their explanation about the difference between them, i came back wondering what would be the best channel communication option for my current project and i found a very good blog post that outline every channel configuration you have available on BlazeDs and LCDS. If you are working with any of these , you will really appreciate the work that Damon Cooper put on it.

You might need some additional knowledge about protocols and connections, but if you don’t know about it, then it will be even better so this blog will lead you to learn some more stuff.