Adobe BrowserLab

Adobe has just launched a new Flash application that allows you to test your webpage in multiple browser emulations, I´m sure designers will be very happy about this.

Check it out here!

Morgan Stanley - Matrix

I am now allowed to talk about Matrix, the largest project I have ever worked on. The client, Morgan Stanley, one of the biggest investment Banks in the world, and the application, Matrix, a trading platform, but furthermore, a whole world for sharing ideas and opportunities in real time while you trade with all the media you might need attached to them (videos, charts, links, etc.. ).

Its the biggest Flex application I´ve made so far, I worked with some of the most talented Flex developers of the moment and never stopped learning.

The team has created a microsite to expain what the application is about, and I am sure it will create a tremendous explossion in the market once its launched.

Enjoy the intro: http://www.morganstanley.com/matrixinfo/

Closing the "Add watch expression" dialog on Eclipse

YESSSSSS!!!! I just read this blog entry on Mike Morearty´s blog about closing the "Add watch expression in Flex Builder.

This has been anoying me for a looooong time.. I think I will very quickly get used to hit "SHIFT + RETURN" on my keyboard to close the dialog :)

Thanks Mike!

I hope it helps ;)

Using mock4as for testing

We have reciently introduced mock4as in our project, I found it very easy to use and very helpfull when mocking for tests.

I don´t pretend to write a full especification on how to use it, you can find that in deep detail on their site, so I´m just going to post a tiny example so you can have a quick idea of how it works, lets test a serer call on a delegate:

First of all we need to create a Mock delegate for out tests (a nice approach to do this is just to implement the same interface both on your delegate and on your mock delegate). This mock delegate neds to have a PUBLIC variable of the type "Mock" (from the mock4as framework:

MyMockDelegate.as:

public var mock : Mock = new Mock();

So from our Test class we are going to tell the mock variable which call we spect Flex to do, then we will trigger the action that is supposed to do that call and add the assertion to see if the call was eventually done or not:

MyTest.as

public function testSomething () : void
{
       myMockDelegate.mock.expects("getSomething");
       somePM.trigger();
       assertTrue( myMockDelegate.mock.errorMessage(), myMockDelegate.mock.success() );
}

And now, the only bit left is to register the call on the mock delegte:

MyMockDelegate.as

override public function getSomething( resultHandler : Function ) : void
{
       mock.record( "getSomething" );
}

And thats it! So, summarizing, the execution of the test would be as follows:

1 - We tell the test what we spect to be called
2 - We call the trigger function, this will cause the app to call the mockDelegate "getSomething()" function, which will register the call into the "mock" variable.
3 - The assertions will verify that the call we where expecting was done

Piece of cake, isn´t it?

I hope it helps ;)

Working remotely - First impressions

I have recently joined a team of great developers in a medium-sized project. When I accepted the role I was told that I was sometimes going to work remotely from home and I had never really done that before. What I didn´t spect at first is that I was actually going to kick-off on the project remotely, and I was a little nervious about it.. how was I going to know how they work? How long would it take me to catch up with the guys that had been working there for months? What would I do if I got stucked?

Well, I have now finished my first week on the project, and yes, from Spain and updating my changes to Denmark. The experience has been really good, although it is true that there are some things you need to do face to face, I think the solution comes through finding a balance on the time remoting and time in the office (maybe 80% - 20%???).

SHARING INFORMATION: We have plenty of tools now-a-days to help us on communication. The one we have found the best so far is the well known Skype, we keep a "developers chat" window open with all the developers in the project on it, this makes it really quick to ask/notify your collegues about anythig going on the project, and it also keeps "the human touch" when developers share jokes on it. It is important to see that the final use of the chat is not actually "chatting", but sharing info related to the project, so jokes are good, but just every now and then ;)

CODING: This is the bit that changes the less. You just connect to your remote SVN/CVS repository and then work just as if you where in the office. I have actually had more problems with repositories in a box next to me that hundreds of miles away...

AGILE DEVELOPMENT - STAND UP MEETINGS: What we currently do is just to dial into a meeting room on the main offices building, people onsite just get into the room and people remoting just join the conference call. I have to say that starting on the project remotely straight away made it a bit hard to follow this meetings at first as I don´t know who is talking and I can´t "put faces" to the voices, but I guess this will get better tomorrow when I phisically meet my workmates :) I think that in the future when we all have better Internet connections at home this will be done in a conference call with webcams (maybe it could be done today without problems), and this will help newys catching up quicker.

DEVELOPERS DAY-A-DAY LIFE: you wake up at 8:30, you look out the window and its raining really heavily, you take a warm shower, go to the kitchen and turn on the TV to see the news, they show all the main roads in the city collapsed by millions of cars with people dressed up with suits and stressed out, you can´t help smiling a little bit.... you have your breakfast and.. and thats it! you can start working!! no 45 minutes on the tube, no conmutes, no gloves, scarf, coat, double pair of soxes, etc... lovely. Furthermore, I personally find it much better in terms of concentration when coding as you don´t have all the office noise (all that people talking, printers, etc..), in fact I have noticed that I take less breaks when remoting, and once you´re finished, you are already home :)
Don´t missunderstand, I think face to face is necessary, in fact I consider miself a very social animal, but using the appropiate tools this time can be brought down without being harmfull to the project.

Summarizing, I think the future in terms of app development is mre remoting, less offices. If you think about it, if you have people onsite, the company will need a bigger office, which translates into more expensive rental, there might be some things hat take "a bit" longer when remoting, but in long term your developers are going to be much more productive (and happier!)

What is your experience working remotely?

Hope it helps ;)

Merry Christmas!

I wish you all a merry Christmas and a happy 2009!

Regular Expressions in Flex

Quick link to Grant Skinner's regular expression explorer. EXTREMELY useful for testing your own regExp.

http://gskinner.com/RegExr/

Hope it helps ;)

My TDD process with FlexUnit

Some people have asked me how my TDD (Test Driven Development) flow is working with FlexUnit, so I decided to write an entry about it and explaining how´s and why´s.

First of all we have to know what to test, this is, the logic of the application, and we need to have a design that allows us to isolate this part of the application from the rest (the classic MVC). Cairngorm microarchitecture suits this pretty well, specially if we combine it with the presentation model pattern. For this purpose, I am not going to include Cairngorm for the good of simplicity.

We are going to create an application that gets 3 numbers and adds them (the simpliest the better).

The first thing you have to do when using TDD is write the tests for the logic you need; it might sound a bit weird the first time you do it, as you might ask yourself "how am I going to test something that doesn´t exist?". You don´t actually have to "test it", but if you know what you need to do then you can write the tests to verify that whatever you need works fine.

STEP ONE - Create the FlexUnit Project

This is extremely simple, yo just download and add to your Flex project the FlexUnit library and then create a new Application including the TestUnitBase component, just like this (TestRunner):

TestRunner.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flexui="flexunit.flexui.*"
layout="absolute"
creationComplete="onCreationComplete()"
>

<mx:Script>
<![CDATA[

private function onCreationComplete() : void
{
}
]]>
</mx:Script>

<flexui:TestRunnerBase
id="testRunner"
width="100%"
height="100%"
/>
</mx:Application>

STEP TWO - Write the tests class and add it to the new TestRunner application

We will need a class with a method that gets 3 numbers and returns the result of adding them, we will call this class NumberAdder, so we need to create a NumberAdderTest class to test all the public methods on it.

NumberAdderTest.as

package test.pascualin.testexample.number
{
   import flexunit.framework.TestCase;

   import pascualin.testexample.number.INumberAdder;
   import pascualin.testexample.number.NumberAdder;

   public class NumberAdderTest extends TestCase
   {
           private var model : INumberAdder;

           public function NumberAdderTest( methodName : String = null )
           {
                   super( methodName );
           }

           override public function setUp():void
           {
                   model = new NumberAdder();
           }

           override public function tearDown():void
           {
                   model = null;
           }

           public function testAddThreeNumbers() : void
           {
                   assertEquals( "The adder failed", 4, model.addThreeNumbers( 1, 1, 2) );
                   assertEquals( "The adder failed", 5, model.addThreeNumbers( 1, 2, 2) );
                   assertEquals( "The adder failed", 6, model.addThreeNumbers( 2, 2, 2) );
                   assertEquals( "The adder failed", 7, model.addThreeNumbers( 3, 2, 2) );
                   assertEquals( "The adder failed", 8, model.addThreeNumbers( 3, 3, 2) );
                   assertEquals( "The adder failed", 9, model.addThreeNumbers( 3, 3, 3) );
           }
   }
}

A note on this file: I normally create an interface (INumberAdder) to represent he Model class (NumberAdder), this helps me in two different aspects, the first one is adding a new isolation layer on the project architecture, and the second one is a better design when adding new methods and properties on my NumberAdder class, as I will only make public those that really need to be accessed from outside (the ones that need to be tested), and all the other methods and properties I need to create when building the logic will be private.

Add the test class we have created to the full list of tests that will be added to the TestRunner.

AllTests.as

package test
{
import flexunit.framework.TestSuite;

import test.pascualin.testexample.number.NumberAdderTest;

public class AllTests extends TestSuite
{
        public static function suite() : TestSuite
        {
                var testSuite : TestSuite = new TestSuite();

                testSuite.addTestSuite( NumberAdderTest );

                return testSuite;

        }
}
}

Add the tests to the TestRunner on the creationComplete event handler:

TestRunner.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flexui="flexunit.flexui.*"
layout="absolute"
creationComplete="onCreationComplete()"
>

<mx:Script>
<![CDATA[
import test.AllTests;

private function onCreationComplete() : void
{
   testRunner.test = AllTests.suite();
   testRunner.startTest();
}
]]>
</mx:Script>

<flexui:TestRunnerBase
id="testRunner"
width="100%"
height="100%"
/>
</mx:Application>

STEP THREE - Create the Logic

NumberAdder.as

package pascualin.testexample.number
{
   public class NumberAdder implements INumberAdder
   {
           public function NumberAdder()
           {
           }

           public function addThreeNumbers( numOne : int, numTwo : int, numThree : int ) : Number
           {
                   return numOne + numTwo;
           }
   }
}

Note: I have included an error on this logic so we can see out test failing here.

STEP FOUR - Correct your logic (not always needed :-P)

Change the NumberAdder to do what it´s really supposed to do:

NumberAdder.as

package pascualin.testexample.number
{
   public class NumberAdder implements INumberAdder
   {
           public function NumberAdder()
           {
           }

           public function addThreeNumbers( numOne : int, numTwo : int, numThree : int ) : Number
           {
                   return numOne + numTwo + numThree;
           }
   }
}

And see the test passing here.

STEP FIVE - Build the view and link it to the logic

Once we have verified that our logic works as spected, we can just build the view we want and link it to the logic, in this example I will use NumericSteppers to send the numbers to the NumberAdder class

TDDExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:comp="pascualin.testexample.comp.*"
creationComplete="onCreationComplete()"
>
<mx:Script>
<![CDATA[
import pascualin.testexample.number.NumberAdder;

private function onCreationComplete() : void
{
   numberAdderView.model = new NumberAdder();
}
]]>
</mx:Script>

<comp:NumberAdderView
id="numberAdderView"
width="700"
/>
</mx:Application>

NumberAdderView.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
>

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import pascualin.testexample.number.INumberAdder;

[Bindable]
private var result : String;

public var model : INumberAdder;

private function onAddNumbers() : void
{
   txtResult.text = model.addThreeNumbers( num1.value, num2.value, num3.value ).toString();
}
]]>
</mx:Script>
<mx:NumericStepper
id="num1"
/>
<mx:NumericStepper
id="num2"
/>
<mx:NumericStepper
id="num3"
/>
<mx:Button
label="Add them!"
click="onAddNumbers()"
/>
<mx:Label
text="result:"
/>
<mx:Text
id="txtResult"
text="{ result }"
/>
</mx:HBox>

And we know that if we have any problem it´s probably going to be view-related, this will make it much easier to find and solve :)

Application Running:



I hope it helps ;)

Detect internet connectivity on AIR

Hi all, today I´m going to show one way of detecting internet connectivity from an AIR application.

The only thig you have to do is to use a "URLMonitor" object to start monitoring a URLRequest and listen to the StatusEvent.STATUS event, then you have to check the code in the event and this wil tell you if you have internet access at the moment or not.

I have prepared a very tiny application to show hao it works, code following this lines:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
import air.net.URLMonitor;
import mx.controls.Alert;

private function onStatusChange(evt : StatusEvent) : void
{
      var internetAvailable : Boolean = false;
      // If the service is offline
      if (evt.code == "Service.unavailable") {
              internetAvailable = false; // Set status variable
      }
      // Service is online
      else
      {
              internetAvailable = true; // Set status variable
      }
      Alert.show("Internet access --> " + internetAvailable.toString() );
}

private function initApp() : void
{
      var urlRequest : URLRequest = new URLRequest("http://www.google.com");
      var urlMonitor : URLMonitor = new URLMonitor(urlRequest);
      urlMonitor.addEventListener( StatusEvent.STATUS, onStatusChange );
      urlMonitor.start();
}
]]>
</mx:Script>
</mx:WindowedApplication>

I hope it helps :)

BlazeDS Vs LCDS

Many people think that BlazeDS and LCDS (Live Cycle Data Services) are the same thing, they are wrong. BlazeDS is just a part of LCDS. Sujit Reddy G has created a great table in wich we can see the differences between both services:

Features	BlazeDS	LCDS
Data management Services
Client-Server synchronization
Conflict resolution
Data paging
SQL adapter
Hibernate adapter
Document Services
LiveCycle remoting
RIA-to-PDF conversion
Enterprise-Class Flex application services
Data access/remoting
Proxy service
Automated testing support
Software clustering
Web tier compiler
Enterprise Integration
WSRP generation
Ajax data services
Flex-Ajax bridge
Runtime configuration
Open adapter architecture
JMS adapter
Server-side component framework integration
ColdFusion integration
Offline Application Support
Offline data cache
Local message queuing
Real - Time Data
Publish and Subscribe messaging
Real -time data quality of service
RTMP tunneling

For anyone thinking about using BlazeDS or LCDS I would recommend to read this Sujit entry about both options performance.

Hope it helps :)