How to create a “Domain WHO IS” Air application using the Flash Builder 4 beta

The following post contains information on how to create a “Domain who is” Air application with Flash Builder 4 beta using a web service.
You can download the Flash Builder 4 beta from Adobe Labs.
More information about the Flex 4.0 SDK can be found here.
The requirements are:
– Flash Builder 4 Beta 2 with Flex SDK 4.0

I choose a free web service from www.ecocoma.com
As you can see on this page I use the “Whois Webservices” (seen at the bottom of the page). The service url is “http://service.ecocoma.com/domain/whois.asmx?wsdl”

Be aware that you will need a
KeyID : DOM-T90971404J

The guys from the ecocoma mention the KeyID will be changing every week so you’d better have a look on the URL above to get the latest one.
KeyID will be needed for the call to the web service.

Ok, let’s get cracking!

As in my previous post you will need to create a new flex project for this as well. I call it “whois”, just to remind you to select Flex SDK 4.0 and Desktop under Application type.

First we need to create the application layout. Drag and drop a panel layout component and set width, height and label text. I used width 250, height 120 and set the label to “Search for a domain name”. After that, I draged and dropped a Form layout component, a textinput and a button component from the design view. I set labels and IDs and here you go:

 

The code so far should more or less look like this:

I will now use the Flash Builder to call the web service. From the Data/Services View, select ‘Connect to Data/Service’ and choose Web Service (the last one on the right hand side) and click next. Now add the web service path as I mentioned above ‘http://service.ecocoma.com/domain/whois.asmx?wsdl’, set the service name as “whois” so the service package will be “service.whois” and the data type package “valueObjects”.

Now in the Data/Services View you can see the web service method and the three required arguments. The first one is the KeyID the second is the DomainId (you can leave this blank as it’s not a required argument) and the last one is the domain name we need to search in (actually this will be the value of our textinput):

 

Once we connect the web service with our application the Flash Builder 4 beta will create a couple of files for us. It first introspects the web service and then creates two folders and some ActionScript files. Putting the drag and drop functionality from the design view behind us, lets start coding some mxml and actioscript stuff.
The code inside the mxml file should look like the one before, no changes needed at all.
First we need to call the service “whois”. It’s really easy, start typing inside the “fx:Declarations” tag whois and you will get this:

 

Continue by giving it an id (I use the “whois_service” and set the “showBusyCursor” to true as I want the cursor to be different when the form submission pops up). I also need to set up a general fault function so write “fault” and choose “Generate Fault Handler” from the hint pop up. Flash Builder 4 beta will generate a function handler for you that will look like this:

protected function whois_service_faultHandler(event:FaultEvent):void
{
  // TODO Auto-generated method stub
}

You need to change the code a bit so it gives you an error if anything bad happens:
protected function whois_service_faultHandler(event:FaultEvent):void
{
  Alert.show(e.currentTarget.toString());
}

you also need to add these on the top of the “fx:script” tag
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;

Now that the general whois service fault method is ready lets really get into this excersise. I need to create a Call responder by using the who is service. Inside the “fx:Declarations” tag use the spark component CallResponder by writing “<s:CallResponder” set a unique ID and give it a result handler, for the example I used the id “GetDomainInformation” and the “GetDomainInformation_resultHandler(event)” as result handler.

Leave the result handler blank at the moment and don’t forget to import the ResultEvent class:

//class for the result event
import mx.rpc.events.ResultEvent;
//Result event handler
protected function GetDomainInformation_resultHandler(e:ResultEvent):void
{

}

Ok! Now that you have the result event you need the form submission by using the call responder service that we just set up. Write down another function (I call it “Submit_Btn_clickHandler”) to handle the form submission. The code for the function is:

//submit button handler
protected function Submit_Btn_clickHandler():void
{
GetDomainInformation.token = whois_service.GetWhois('DOM-T90971404J','',DomainName.text);
}

Let’s explain the code a bit: I use the “GetDomainInformation” call responder that I just created and the “whois_service” service. I call the “GetWhois” method that is available from the web service since, as I mentioned at the begining of the post, we need to pass three parameters. The first is the KeyID (use the one that found on the ecocoa website) the second is the DomainID (leave it blank) and the third is the textinput value.

More information on spark component s:CallResponder and the new service operations can be found in Adobe’s Flex 4.0 SDK documentation
Accessing Data with Flex : Building data-centric applications with Flash Builder

That’s it! We now have the submission form ready but we still need to display the result, let’s get back to our result handler and add a couple of lines:

//Result event handler
protected function GetDomainInformation_resultHandler(e:ResultEvent):void
{
//set up an object and pass the result to it
var res:Object = e.result;
//set up a string variable and fill it with the result description
var description:String = res['Description'];
//display the description string to the Alert pop up
Alert.show(description);
}

The result handler and the general fault handler set up so all we have to do is to run the application.

I almost forget a piece of code that added, I have created a function called ‘init()” and set the textInput component to be focused at the creation of the air application, this makes our life easier so we can start typing the domain name right away. You also need to define when you need the init() function to be run. This can be done by adding this attribute to the “s:WindowedApplication” tag
creationComplete=”init()”

And the init() code is:

protected function init():void
{
DomainName.setFocus();
}

Here is the final mxml code:

Here you go!

 

You could go on and use more features to have better results and a better design view. You should give it a try!

I hope you like my post and found this information interesting!

Share it!Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedInShare on StumbleUpon

Comment (1)

  1. pop up
    October 9, 2010 at 3:06 pm · Reply

    Thanks for your sharing!!!

Leave a reply

Your email address will not be published. Required fields are marked *

Back to Top