At this point, we all should know about the importance of a UI Design and Usability in a Web 2.0 application, technology alone will never get the user acceptance and subsequent marketability without it. We have to agree that UI Design/Usability is that’s the face of the product and that’s how the user will evaluate the software, they will never know and don’t care what happen when they grabs the mouse and click that button.

We all have seen a lot of well architected projects fail because the the UI is ugly, cumbersome, is not easy to use, or gets the typical feedback from the user  “the previous app was better”, the typical reason? A bad User Interface Design. Most of the time this happens for two reasons, one is because the development team does not have a experienced modern UI/UX guy. A lot of projects do not take the UI seriously and that think that “UI Design is just picking a nice color and anybody can do that”, and do not hire somebody to do that job, letting the developers, business analysts, QA or experience users to guide the UI. The other reason is hiring the wrong UI designer. Some years ago when applications were just flat, design on HTML, PowerPoint or even just on a peace of paper was OK, but not any more, applications are a lot more interactive and applications designers need to get more technical.

To be a UI Designer you definitely need a big talent, but to be an UI Application Designer you need more than that, you need to be technical. Thanks to how technology has changed during the last few years, to be a User Interface Designer, Interaction Designer or a User Interface Architect, you need a lot more than that talent, good taste and the coolest Mac. Web applications are way more powerful that before, we have nice and powerful Javascipt libraries, Flash, Flex, Siverlight, AJAX, .NET, just to name a few, and if your designer said “Javascript? Flex? ahhh?” there is no way he can design a application exploding current technologies, making available useful features to the end user, and probably your application will look like an application from the 90’s.

I am not saying that a UI Designer needs to know every little detail about the new technologies, but  he needs to know what is possible and what is not from the technology prospective and make it part of his design, because the developer will not make that decision for him.

So, if you leading a project, please get somebody with the right UI skills, if you are a UI Designer and are/want to get into the application design, please get a little technical and help the UI Designers to get the credit than thy deserve.

Reading a book about Javascript performance I found this and I think is very interesting and clear the position of Brendan Eich, the creator of JavaScript and Mozilla’s chief technical officer:

You must be [as tall as an NBA player] to hack on threaded systems, and that means most programmers should run away crying. But they don’t. Instead, as with most other sharp tools, the temptation is to show how big one is by picking up the nearest singlethreaded code and jamming it into a multi-threaded embedding, or tempting racecondition fate otherwise. Occasionally the results are infamous, but too often, with only virtual fingers and limbs lost, no one learns.Threads violate abstractions six ways to Sunday. Mainly by creating race conditions, deadlock hazards, and pessimistic locking overhead. And still they don’t scale up to handle the megacore teraflop future.
So my default answer to questions such as, “When will you add threads to JavaScript?” is: “over your dead body!”

Given Brendan’s influence in the industry and on the future of JavaScript (which is considerable), and the broad degree to which this position is shared, it is safe to say that threads will not be coming to JavaScript anytime soon.

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.