Prompt TextInput with ignore text

November 15, 2009 5 comments

There are cases in which we need more than text input, which should let the user to notify with some custom text  in text input whenever it is empty. i.e. prompt text input. But there are special cases in which we should even treat some text as empty and should show the prompt text in text input. I went through this need when my client asked me to show a prompt text in text input whenever it is zero. We could restrict zero in text input by using conditional expression in text property, provided we must ensure wherever we are setting the text input.

So i have decided to extend the text input component so that i could restrict zero in one place called set text(value : String) method. when i wanted to implement, i needed prompt text input and i asked myself why should not i do that too. I went ahead did at last.

You can find the implemented component code below which allows you to set ignore text (the text you want to treat as empty text) and you can also enable/disable the prompt text input. If it is disabled, it would function as normal text input.

Click here to download sample application

package
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	import flash.events.FocusEvent;

	import mx.controls.TextInput;
	import mx.utils.StringUtil;
	[Style(name="promptStyleName", type="String")]
	public class PromptIgnoreTextInput extends TextInput
	{
		[Bindable] private var textEmpty : Boolean;
		public function PromptIgnoreTextInput()
		{
			super();
			this.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
			this.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
			this.addEventListener(Event.CHANGE, handleChange);
		}
		[Bindable] private var _prompt : String;
		public function set prompt(value : String):void
		{
			_prompt = value;
		}
		public function get prompt():String
		{
			return _prompt;
		}
		[Bindable] private var _ignoreText : String;
		public function set ignoreText(value : String):void
		{
			_ignoreText = value;
		}
		public function get ignoreText():String
		{
			return _ignoreText;
		}
		[Bindable] private var _enablePrompt : Boolean;
		public function set enablePrompt(value : Boolean):void
		{
			_enablePrompt = value;
		}
		public function get enablePrompt():Boolean
		{
			return _enablePrompt;
		}
		override public function set text(value:String):void
		{
			value = StringUtil.trim(value);
			if(value != null && value != "")
			{
				if(value == ignoreText)
				{
					textEmpty = true;
				}
				else
				{
					textEmpty = false;
				}
			}
			else
			{
				textEmpty = true;
			}

			super.text = value;
			invalidateDisplayList();
		}
		override public function get text():String
		{
			return super.text;
		}
		override protected function updateDisplayList(unscaledWidth:Number,
		unscaledHeight:Number):void
		{
			if(_enablePrompt)
			{
				if(textEmpty && !isCurrentlyFocussed())
				{
					super.text = prompt;
					this.styleName = getStyle("promptStyleName");
				}
				else if(textEmpty && isCurrentlyFocussed())
				{
					super.text = "";
					this.styleName = "";
				}
				else
				{
					this.styleName = "";
				}
			}
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
		protected function isCurrentlyFocussed():Boolean
		{
			var focussedComponent : DisplayObject;
			focussedComponent = focusManager.getFocus() as DisplayObject;
			if(focussedComponent)
			{
				if(focussedComponent == this || this.contains(focussedComponent))
					return true;
			}
			return false;
		}
		protected function handleFocusIn(event : FocusEvent):void
		{
			invalidateDisplayList();
		}
		protected function handleFocusOut(event : FocusEvent):void
		{
			text = super.text;
			invalidateDisplayList();
		}
		protected function handleChange(event : Event):void
		{
			textEmpty = (super.text.length == 0 || super.text == _ignoreText) ?
			            true : false;
		}

	}
}

Please let me know if you find any problem or have any suggestion about this component so that i could refine this code when i find time. Thank you for reading this post.

Advertisements

Dont re-invent Datefield when it needs to be editable

November 14, 2009 6 comments

Hi guys, we always look for customization if the feature we are looking,  is not available in the flex framework. But  if the same thing is possible with  minor tweaks, what is the need of re-inventing the wheel. I have experienced this scenario when i needed to implement a DateField which should allow the users to edit it as well as it has to display a DateChooser when they edit it, which is not quite possible even if you make editable property of  DateField is true.  As usual i went for google search and found couple of developers created their own component using Grid. I dint have enough time to test and use their component, i stumbled upon dateField public functions named open() and close().

Atlast I found the way of how to show a DateField dateChooser when i make editable property to true ( normally DateChooser wont show up if we make editable true). I extended the DateField component , invoked open() in focus-in event handler and i have done what i wished to be done without spending much time. further if you are not compromised with the position in which DateChooser shows up, you could change the x and y values of dateChoooser of DateField in  its open event.

Check out the below code for reference.

package
{
import flash.events.FocusEvent;
import flash.geom.Point;

import mx.controls.DateField;
import mx.events.DropdownEvent;

public class EditableDatefield extends DateField
{
public function EditableDatefield()
{
super();
this.addEventListener(DropdownEvent.OPEN, onOpenDropDown);
this.addEventListener(FocusEvent.FOCUS_IN, onFocusIn);
}

protected function onFocusIn(event : FocusEvent):void
{
this.open();
event.stopImmediatePropagation();
}

protected function onOpenDropDown(event : DropdownEvent):void{
var point : Point = new Point(this.textInput.x, this.textInput.y);
var targetCoordinates : Point = this.localToGlobal(point);
dropdown.x = targetCoordinates.x - dropdown.width/2 + textInput.width/2;
dropdown.y = targetCoordinates.y + textInput.height + 5;
}
}
}

I hope this post would atleast help one flex developer and would save his/her time. If you find any problem with above code, please let me know i will try to resolve it as much as possible. Thank you for reading this post!

Get recent images uploaded in flickr using flex

May 29, 2009 2 comments

Hi everybody, we have used third party widgets in our blog which shows the recent images of the subscribed URL from flickr, but do you know how it is working ?. If you dont know please trust me, i will tell you how it can be done.

As i said in my previous post, you must know few things about the api which you are going to access

  1. Which api method you are going to access ?
  2. What is the URL of the api method you need to access ?
  3. What are the parameters the api method expects ?
  4. What kind of data the api method returns ?
  5. What can you do with the returned data ?

Here i am going to access the getRecent method of flickr api which will get api key as required parameter and it will return set of XML node. Each XML node represents the details of an image and using those details we can construct the URL of the image where it has been located in flickr. Once we have known the location we could display the image in our widget.

I can sense what is going through your mind right now, i.e. “what is api key ?”, if i am not wrong. ok let me tell you about api key. Anyone who wants to access api method they must have unique identification so that the server can know who wants to access api methods. thats why we need api key and it comes up in two versions. Non commercial key & Commercial key. Non commercial key will be allowed to use by programmers who are not using for commercial product and if you want to get commercial key, you must give some information about the product which want to access api and with prior permission from flickr you can use it.

Finally what we ever need to know is URL of the api method which we are going to access. It can be constructed if you know the api key and method name you are going to access.

http://www.flickr.com/services/rest/?method={method_name_here}&api_key={your_api_key}

Now create HttpService instance, specify URL, result format, event handler function for result and fault property, then invoke the HttpService instance.


<mx:HTTPService url="http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key={your_api_key}"
 result="resultHandler(event)" resultFormat="e4x" id="service" fault="faultHandler(event)" method="POST"
 showBusyCursor="true" />

Once the getRecent method has been invoked successfully it will return set of XML node named photo as I have mentioned below.

<photos page="2" pages="89" perpage="10" total="881">
<photo id="2636" owner="47058503995@N01"
		secret="a123456" server="2" title="test_04"
		ispublic="1" isfriend="0" isfamily="0" />
<photo id="2635" owner="47058503995@N01"
		secret="b123456" server="2" title="test_03"
		ispublic="0" isfriend="1" isfamily="1" />
<photo id="2633" owner="47058503995@N01"
		secret="c123456" server="2" title="test_01"
		ispublic="1" isfriend="0" isfamily="0" />
<photo id="2610" owner="12037949754@N01"
		secret="d123456" server="2" title="00_tall"
		ispublic="1" isfriend="0" isfamily="0" />
</photos>

As i have told earlier each photo node represents the details of an image in flickr and we can construct URL of the image using ID, server ID, farm ID and secret property of each photo XML node.

http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg

Now you know how to construct an URL of image, assign this to the source property of Image tag and it will display it. thats it!!!. How long you will use widgets that others have been developed, just develop your widgets in the way you want. Who knows someone even buy yours.

My simple image gallery

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="service.send()">

 <mx:Script>
 <!&#91;CDATA&#91;
 import mx.collections.ArrayCollection;
 import mx.rpc.xml.SimpleXMLDecoder;
 import mx.rpc.AsyncToken;

 import mx.controls.*;
 import mx.rpc.events.*;
 import mx.effects.easing.*;

 &#91;Bindable&#93;public var p : String;

 &#91;Bindable&#93; public var index : Number = 0;

 &#91;Bindable&#93;public var xmlRes : XML;

 &#91;Bindable&#93; public var ac : ArrayCollection = new ArrayCollection();

 &#91;Bindable&#93; public var imgSource : ArrayCollection = new ArrayCollection();

 &#91;Bindable&#93; public var timer : Timer;

 public function resultHandler(event : ResultEvent):void
 {
 xmlRes = new XML(event.result.photos);

 for each(var x:XML in xmlRes.photo)
 {
 ac.addItem(x);

 var url : String = "http://farm"+ x.@farm +".static.flickr.com/" + x.@server + "/"+ x.@id + "_" + x.@secret+".jpg"

 var obj : Object = {isource : url};

 imgSource.addItem(obj);

 } 

 var farmid : String = ac.getItemAt(index).@farm;
 var serverid : String = ac.getItemAt(index).@server;
 var id : String = ac.getItemAt(index).@id;
 var secret : String = ac.getItemAt(index).@secret;

 var source : String = "http://farm"+farmid+".static.flickr.com/" + serverid + "/"+ id + "_" + secret+".jpg";

 img.source = source;
 panel.title = ac.getItemAt(index).@title;

 img.visible = true;
 img.includeInLayout = true;

 timer = new Timer(10000);
 timer.addEventListener(TimerEvent.TIMER,nextHandler);
 timer.start();

 }

 public function nextHandler(event : Event):void
 {
 index = index + 1;

 if(index < ac.length)
 {
 var farmid : String = ac.getItemAt(index).@farm;
 var serverid : String = ac.getItemAt(index).@server;
 var id : String = ac.getItemAt(index).@id;
 var secret : String = ac.getItemAt(index).@secret;

 var source : String = "http://farm"+farmid+".static.flickr.com/" + serverid + "/"+ id + "_" + secret+".jpg";

 img.source = source;
 panel.title = ac.getItemAt(index).@title;

 img.visible = true;
 img.includeInLayout = true;

 }

 }

 public function faultHandler(event : FaultEvent):void
 {
 Alert.show(event.fault.message);

 }

 public function callService():void
 {
 var asyn : AsyncToken = service.send();
 }

 public function nextClick(event : Event):void
 {
 back.enabled = true;

 if((hList.horizontalScrollPosition + 6) < hList.maxHorizontalScrollPosition)
 {
 next.play(&#91;hList&#93;);
 }

 if((hList.horizontalScrollPosition + 12) > hList.maxHorizontalScrollPosition)
 {
 forw.enabled = false;
 }
 } 

 public function prevClick(event : Event):void
 {
 forw.enabled = true;

 if((hList.horizontalScrollPosition - 6) > 0)
 {
 prev.play(&#91;hList&#93;);
 }
 if((hList.horizontalScrollPosition - 12) < 0)
 {
 back.enabled = false;
 }
 }

 &#93;&#93;>
 </mx:Script>

 <mx:HTTPService url="http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=your_api_key_here"
 result="resultHandler(event)" resultFormat="e4x" id="service" fault="faultHandler(event)" method="POST"
 showBusyCursor="true" >

 </mx:HTTPService>

 <mx:WipeUp id="fade" duration="2000" />

 <mx:Panel id="panel" width="600" height="300">
 <mx:Image showEffect="fade" hideEffect="fade" id="img" width="100%" height="100%" maintainAspectRatio="false" />
 </mx:Panel>

 <mx:HorizontalList id="hList" dataProvider="{imgSource}" columnWidth="100" horizontalScrollPolicy="off" rowHeight="150" width="600" height="150" >
 <mx:itemRenderer>
 <mx:Component>
 <mx:HBox dropShadowEnabled="true" horizontalGap="300" verticalGap="200" >
 <mx:Image  showEffect="" source="{data.isource}" maintainAspectRatio="false" width="100%" height="80%"   />
 </mx:HBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:HorizontalList>

 <mx:HBox>
 <mx:Button id="back" label="prev" enabled="false" click="prevClick(event)" />
 <mx:Button id="forw" label="next" click="nextClick(event)" />
 </mx:HBox>

 <mx:Sequence id="prev">
 <mx:AnimateProperty property="horizontalScrollPosition"
 fromValue="{hList.horizontalScrollPosition}" toValue="{hList.horizontalScrollPosition - 6}" duration="7000" easingFunction="{Elastic.easeOut}" />
 </mx:Sequence>

 <mx:Sequence id="next">
 <mx:AnimateProperty property="horizontalScrollPosition" easingFunction="{Elastic.easeOut}"
 fromValue="{hList.horizontalScrollPosition}" toValue="{hList.horizontalScrollPosition + 6}" duration="7000"/>
 </mx:Sequence>

</mx:Application>

MXML : Why i am always getting late, is it from from my heredity ?

May 26, 2009 Leave a comment

Hi very good morning, today i am going to explain about how mxml and actionscript differs from each other and which one is better suits for building flex application. Before we gonna look at which one is best, let me tell one thing that the flex framework is written using actionscript alone, now you would have realized how great actionscript is. but it would not be a surprise to the people who knows that actionscript is object oriented programming language which is used to write a client side business logic and whatever mxml tag we have, we do also have corresponding actionscript class.

you may have doubt that why certain properties which is available either in actionscript or mxml which could not access by other. In order to resolve this conflict i must explain the three tiers of actionscript api. They are follows.

  • Flex framework api
  • Flash player api
  • custom api

Flex framework api

All the controls, containers, managers, effects which resides in the mx package are part of flex framework api and it was written using actionscript.

Flash player api

All the classes which resides in the flash package are part of flash player api. All the core classes and network specific classes of flash player api are part of flash player.

Custom api

All the custom classes which are written using flex framework api as well as flash player are custom api.

Now you would have known why certain properties available in one could not access by other because they are not belong to the same package and they are not belong to same api so some properties available in one may not be available in other.

Come back to our discussion that which one is better suited for web application ?. Both has certain advantages and disadvantages. Using mxml, we can easily layout the controls and design a page but the run time environment of flex application is flash player which doesnt know mxml. so when we compile the mxml component or application, it will be converted to actionscript class and then it will converted in to swf object along with the libraries you have used in mx package when you developed the mxml component or application. therefore the swf object size will be increased and it also have greater impact when loading application.

But this is not the same case for actionscript because it will only reference the classes in flash player so it doesnt need to add any libraries from flex framework api therefore the swf object will be lesser relatively compared to swf object created from mxml. Although creating user interface in actionscript is not preferable way to do, we can easily create user inteface with mxml tag than actionscript. Actionscript is meant for developing client side businees logic and used to define dynamic behavior of components.

In certain cases like custom preloader where we must develop a custom preloader component using actionscript since its loading time will be lesser compared to mxml. So choose wisely which one to use for your component and dont blame mxml it is not its fault but its ancestors.

And finally thank you for reading my post!!!.

Origins of flex application

May 25, 2009 Leave a comment

Hi folks!!!, we do always compare between flex and flash as they are two other technologies and we always thinking that what we cant do in flash that can do by flex. Here the conclusion for the people who have still doubts about the differences between flash and flex.

There is nothing flash cant do, that flex can do. Both flex and flash application will be compiled in to .swf object and the flash player (run time environment of .swf) will execute swf file with th help of AVM2 (ActionScript virtual machine). So the only difference is the way you are creating application and not how it behaves.

In fact, root application of any flex application is System manager which is responsible for managing and handling flex application. It itself subclass of flash.display.movieclip which is a one of the class in flash which will have timeline and the timeline in turn will have many frames which will contain the content to display when the user runs.

But in flex, the system manager will have only two frames and they are preloader & flex application. When application starts executing, the system manager will create an instance of preloader and the preloader will start loading flex application & run time shared libraries. Once it has been loaded, the preloader will notify the system manager & the system manager will create an instance to main flex application. The application will initialize and layout the child components and once it has been done its task, the application will notify the preloader which will notify the system manager. At last the system manager will remove the preloader from its display list and will add flex application in display list.

You are developing flex application whether using flex or flash, after compilation it will be in form of .swf (to be precise it will be in the form of byte code) which will be executed by flash player which doesn’t know neither flash nor flex, but it knows how to interpret byte code and it executes flex and flash based applications.

URL loader frowns “when HttpService does, why cant I ?”

May 19, 2009 4 comments

URL loader allows the users to handle requests and response to and from HttpServices same as what flex HttpService allows the users to do. So whatever the task can be done by HttpService, can also do by URL loader but the way they do will be different. We do have MXML HttpService tag which will invoke HttpServices like servlet in a much easier way than URL loader. Because we dont have MXML URL loader tag since its part of Flash player API so we can create an URL loader instance and call servlet using ActionScript alone.

To invoke a servlet using load method of URLLoader instance, the load method will expect a single parameter which is none other than URLRequest instance. It defines the URL in which it will request the servlet when URLLoader instance invokes the load method. As well as the event handler function for URLLoader complete event should be registered before you invoke the servlet because as you know well this event handler function will be executed once the request has been fulfilled.


var loader : URLLoader = new URLLoader();
var request : URLRequest = new URLRequest("http://localhost:8080/CallServlet/callService");
loader.addEventListener(Event.COMPLETE,resultHandler);
loader.load(request);

When we make a request to the servlet, we should also send request parameters which will be expected by the servlet when it receives the request. In URL loader we do have class named URLVariables through which we will create the request parameters as name/ value pair and finally we will set the data property of the URLRequest instance to URLVariables instance.


var param :URLVariables = new URLVariables();
param.email = email.text;
param.pass = pass.text;
request.data = param;

Thats it. Now replace the URLLoader instance code, instead of HttpService instance code in our previous example & run the application.


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

 <mx:Script>
 <!&#91;CDATA&#91;
 import mx.rpc.events.FaultEvent;
 import mx.rpc.events.ResultEvent;
 import mx.controls.*;

 var loader : URLLoader;
 var request : URLRequest;

 public function createLoader():void
 {
 loader = new URLLoader();
 request = new URLRequest("http://localhost:8080/CallServlet/callService");
 loader.addEventListener(Event.COMPLETE,resultHandler);
 }
 public function callLoader():void
 {    
 var param :URLVariables = new URLVariables();
 param.email = email.text;
 param.pass = pass.text;
 request.data = param;
 loader.load(request);
 }
 public function resultHandler(event : Event):void
 {
 Alert.show(loader.data);
 }
 public function faultHandler(event : Event):void
 {
 Alert.show("error");
 }
 &#93;&#93;>
 </mx:Script>

 <!--<mx:HTTPService id="service" url="http://localhost:8080/CallServlet/callService" result="resultHandler(event)" fault="faultHandler(event)" method="GET" showBusyCursor="true" resultFormat="text">
 <mx:request xmlns="">
 <email>{email.text}</email>
<pass>{pass.text}</pass>
 </mx:request>
 </mx:HTTPService> -->

 <mx:Panel paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20">
 <mx:FormItem label="E-mail">
 <mx:TextInput id="email" />
 </mx:FormItem>
 <mx:FormItem label="Password">
 <mx:TextInput id="pass" displayAsPassword="true" />
 </mx:FormItem>
 <mx:Button label="Submit" click="callLoader()" />
 </mx:Panel>

</mx:Application>

Download previous example here

Note :

This post is continuity of my previous post if you could not follow this instructions. Please refer my previous post click here. Still you could not follow, drop your feedback i will try to refine the content as much as possible.

HttpService says “I can invoke the servlet”

May 18, 2009 9 comments

Hi everybody, its my pleasure to come up with another interesting blog that is how to invoke a servlet from flex application using HttpService. Let me start with HttpService which is responsible for handling request and response to and from http services like servlet. Now we are bound to know how servlet works, dont get panic !!! its easy let me explain.

Servlet – a glance

Whenever the client requests resource from web server (Apache), the web server will fetch the resource and send it as a response to the client. But the web server will love to serve as long as the requested resource is static content. If the client request any dynamic content which will not be available until the request is made, the web server cant do it alone so that it need help from some helper application like servlet which is capable of generating just in time resource i.e. dynamic content.

Who is the manager of servlet ?

Now you must know the person who is managing servlet who is none other container. the role of container has to create an instance of servlet before any one requests the servlet and whenever the client requests the servlet the container will intercept and create new thread of the requested servlet and also it will handover the request parameters to the servlet class

Note :

One could not explain the concept of servlet and container in single post because its too vast, i hereby just given idea about servlet and how it works. If you want to know more there are plenty of forums available where you can know everything about these stuffs.

Now come back to our concept. To invoke a servlet from flex you have to create HttpService component, Servlet class and at last you have to map the URL to Servlet in deployment descriptor.

Before you do all these stuffs, set up your web application in Tomcat , create flex project and configure server location of your flex application. Please refer to my previous post if you dont know how to do it, click here

Create HttpService component

  • Create HttpService instance in your MXML application file, name the instance and define the event handler function name for result and fault property.
  • specify the url which will invoke the servlet class when user invokes the service.
  • Define the http method of your request e.g. GET, POST etc.
  • Specify the request parameters of your HttpService which will passed to the servlet and servlet will do some process with the data. It can be specified using request property of HttpService.
  • Define the event handler function for result and fault inside <mx:script> tag.
  • The response of the servlet will be handled by either result event handler function or fault event handler function depends on the result of servlet invocation.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

 <mx:Script>
 <!&#91;CDATA&#91;
 import mx.rpc.events.FaultEvent;
 import mx.rpc.events.ResultEvent;

 import mx.controls.*;

 public function resultHandler(event : ResultEvent):void
 {
 Alert.show(event.result.toString());
 }

 public function faultHandler(event : FaultEvent):void
 {
 Alert.show("error");
 }

 &#93;&#93;>
 </mx:Script>

 <mx:HTTPService id="service" url="http://localhost:8080/CallServlet/callService" result="resultHandler(event)" fault="faultHandler(event)" method="GET" showBusyCursor="true" resultFormat="text">
 <mx:request xmlns="">
 <email>{email.text}</email>
<pass>{pass.text}</pass>
 </mx:request>
 </mx:HTTPService> 

 <mx:Panel paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20">
 <mx:FormItem label="E-mail">
 <mx:TextInput id="email" />
 </mx:FormItem>
 <mx:FormItem label="Password">
 <mx:TextInput id="pass" displayAsPassword="true" />
 </mx:FormItem>

 <mx:Button label="Submit" click="service.send()" />
 </mx:Panel>

</mx:Application>
 

In the code you are seeing above, i just created HttpService instance and the request parameter are the users input of email address and password which will be passed to servlet once the user invokes servlet by clicking “Submit” button.

Create, compile & deploy servlet

  • Create a java class which should extend HttpServlet Class
  • Define doGet method if you have declared GET in the method property of HttpService instance else doPost.
  • Get the request parameters sent by the HttpService instance
  • Do some process with request parameters
  • Compile the servlet class
  • Finally copy your_servlet.class and paste this file in to {Tomcat_home_directory}\webapps\{Web_application_name}\WEB-INF\classes folder of your web application.
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class MyServlet extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
String email = request.getParameter("email");
String password = request.getParameter("pass");
String result = "Hi iam servlet, I am here to conform your username & password, they are " + email + " & " + password + ". is it correct ?";
PrintWriter out = response.getWriter(); out.println(result);
}
}

In the servlet class above, i have implemented doGet() method since i have declared GET in the method property of HttpService instance. I am also getting the request parameters , construct a string which asks user whether the email address and password they have entered are same as it displays and finally it returns that string as response to the HttpService request.

Map URL to servlet

Actually the servlet will have three names. They are public URL, internal name and actual servlet path . The public URL and internal name wont be necessary to same as actual servlet path. Internal name will be chosen by the developer who deploys servlet and it will be internally used in the deployment descriptor. The public URL is the one which users knows and when they request the container will find the internal name of the requested servlet and using internal name the container will find the actual path of the servlet. here the example goes. Please add the following code in the web.xml before </webpp> which is present under

{Tomcat_home_directory}\webapps\{Web_application_name}\WEB-INF folder of your web application.


<servlet>
 <servlet-name>servlet</servlet-name>
 <servlet-class>MyServlet</servlet-class>
 </servlet>

 <servlet-mapping>
 <servlet-name>servlet</servlet-name>
 <url-pattern>/callService</url-pattern>
 </servlet-mapping>

Tags & Definitions

<url-pattern> – defines the relative public URL

<servlet-name> – defines the internal name

<servlet-classs> – defines the fully qualified class name.

Yes we did it all, now restart your tomcat server, run your flex application, input email address, password, click Submit button and see the response of your servlet.

Download this application

Note : Download the application, deploy it in the webapps of your tomcat home directory. Copy the url below and paste in the address bar of your web application and run the application. http://localhost:8080/CallServlet/HttpRequest-debug/HttpRequest.html