Archive

Archive for the ‘FLEX’ Category

Change is inevitable

February 13, 2011 Leave a comment

Hi everybody,

Hope everyone doing good in their respective fields. i could not write single post in the past ten months due to various reasons. But still i could see good number of visitors checking my blog and hope it would help them in some way. I strongly believe that my content speaks lot more than what i do and thanks for your continuous support.

Here by i would like to tell you all that i was not working in flex technology for a year. Its really painful that i could not help people who raise questions at me. At the same time, whenever there is end of one there is beginning of another. Yes I really like the idea of sharing my ideas and i would not stop doing it.  I am gonna start writing posts about the technology which i am currently working on “Data warehousing“.

Data warehousing is another emerging technology which all IT firms keen on capturing market and have great demand for developers. In coming months, i would like to tell you more about the technologies, practices and pain areas which i have encountered. Lets get ready folks. Something good is really awaiting.

Advertisements
Categories: FLEX

AS3 Signals – Threat to Event Dispatcher

April 17, 2010 5 comments

Hi all! Most of you would have predicted now what i gonna discuss here by reading title of this post. Yup I gonna speak about the AS3 signals developed by flex geek Rob Penner which is doing rounds in flash community quite some time.  Though this post meant for As3 signals, i gonna discuss about the pitfalls of Event Dispatching system. (Forgive people i could not explain the pitfalls as Rob penner mentioned but I try to list out some which i felt bad in my development experience).

Pitfalls of flash Event Dispatching system

  • We had situation to create custom event for just sending a values along with the event we dispatch. It might not sound really bad but to make it happen we should extend any subclass of IEventDispatcher class, override clone method, need to receive additional properties via constructor and   assign to public variable so that listener functions could access it. It has not ended here. Eg. If you would like to pass additional properties along with mouse event, you have to create one and create another custom event for  another event type atlast we will end up with lot of boiler plate code.
  • Event could be listened only by the ancestors of the component which is dispatching event. But most of the cases we need to listen an event in many components  which are not ancestors of dispatching component and obviously we would listen an event in system manager or stage as we could listen any event triggered in the app from anywhere. But the real gotcha is when we remove an event listener in one place and all other listener will be removed.
  • We dont have utility function which would listen an event only at once instead of that we should manually remove an event listener once it has been fired as well as we dont have event methods which would remove all the listeners for a  particular event type.
Categories: FLEX

Augmented Reality and my tough times

February 13, 2010 Leave a comment

Hi everybody! I have been trying my hands on flar-toolkit (flex based augmented reality libarary) for quite some time. Initially i went through some of the examples in web to get started but once i got in to it, i felt it was not much easier as i thought. The app which i have been working demanded me to work with multiple markers and i have tried to accomplish with flar manager which is a framework of augmented reality for flash based on saqoosha flar-toolkit library and it had bunch of examples which helped me to pass through the first puzzle thrown at me.

The next one was detecting the markers in the order in which it has been placed. I had examples and references in web to got through my first puzzle but this time i realized that i was on my own. But the year of experience in flex helped me to got through this one. Yes I managed to achieve it by ordering the markers based on its x and y coordinate which would be the first thing strike in your mind if you have been part of flash platform.

The last one was the worst nightmare i went through in my recent times. Actually what i wanted to do was, had to do computation with detected markers and show my result as 3D object which doesnt have any corresponding marker. I just wanted to add it to the scene but it was not so easy as i have been telling. The reason was whenever markers were detected, computation would be done followed by 3D model would be added to scene. Just imagine how many times it would get executed and how many children would get added in a second. Further more what if it would be, if you could not clear up the old 3D models ? . Yes thats what i went through actually and my app started to respond as my old girl friend (sorry i dint have one)  i.e. i would have to wait indefinitely to get her reply.

But in my case it was not necessary to show up 3D model as i needed to show an integer value as result but we were decided to use 3D model earlier as it would bring 3D feel. When we had been looking for alternate solution i stumbled upon Text3D class in papervision 3D but it dint help me to bring what was expected. Then i tried to fix the issue in 3D model until i found TextField3D class in away 3D which was more look alike what i have been looking for.

Finally I have created only one instance of TextField3D class and used to update the result by setting its text property. Yup i told myself i got escaped and completed the task successfully. However i would have been more happy if i have found the fix for 3D model memory leaking  but i dint have patience and perseverance to get it done thats where I realized i am easily giving up instead of fighting for it and felt myself that i must develop so called ” never say die attitude” to stay alive in the race.  Thank you reading my horrible experience. lolz!!!

Disclaimer : Hereby i am not criticizing  anyone library, in fact i admire them and seeing them as my ideal. So whatever i have been posted here it was personal experience and even you may call it as my inability to get it done.

Augmented Reality (or) Computer Generated Reality

January 23, 2010 Leave a comment

Are you the one who amazed when you have watched the alien warship dashboard in films ? Are you the one who asked yourself “is it possible in real time ?” when arnold was scanning environment as he was walking, in the Terminator sequel. Some of you might not be, but i am really longing to develop like these ?. Imagine, how would it be interacting with web without computer and you  just sees the data in virtual screen ?. Yes we can make it possible all of these  using  Augmented reality (AR).

What does it mean ?

It superimpose graphics, audio and other sensory enhancements over real world environment in real time and allows to interact with three dimensional computer generated graphics.It blurs the line between what is real and what computer program gives you to feel, smell and hear which is actually not real. In short, it combines the physical world and three dimensional virtual world.

Where was it started-off ?

It is originated from virtual reality also known as user’s physical reality. Its an virtual environment that is generated by program and rendered to the user in such a way that the user ignores belief and accepts it as a real environment. VR  is primarily experienced through two of the five senses: sight and sound.

At first augmented reality applications found his way in to mobile platform especially IPhone and Android OS based mobiles. One of the applications is Layar, which examines the real world environment,  process it and projects the relevant information in computer generated graphics. The other worth mentioning application is Wikitude which retrieves the information from Wikipedia.

Later MIT Media Lab came with brilliant device named sixth sense which processes the image, gathers GPS coordinates and pulls data from the Internet and then projecting information onto the surface in front of the user.

Where would it go from here ?

Now augmented reality is getting adopted in all the possible areas ranging from gaming to military devices all around the globe. It will surely redefine all the gadgets so far invented, in the way it looks and works. Because it provides rich user interface by adding colors and effects and make the users to experience reality and also the computer generated graphics (sorry!!! computer generated reality) is less expensive with current technology so it would not find any barrier in its way.

I hope, few years down the line we don’t need multiple gadgets to make our life easier, all in one would become reality with the help of augmented reality. Thank you for reading this post.

Simple CSV Exporter

December 27, 2009 1 comment

Hi guys, when i wanted to write a  post about this topic i was clear that i am not gonna do something which no one would have done before but it will at least save others time who doesn’t familiar with CSV export. Unfortunately we doesn’t have enough example available for CSV export in web and that’s what compromised myself to write a post about it.

Now check out the simple CSV exporter utility class pasted below. Its a singleton class and  has method named exportCSV which writes the object from the collection to a chosen CSV (string delimited file) file. But when i wrote the class, i had two things in mind that not always developers want to write all the properties of an object, most of the times it will be only few so i wrote this method which receives array of properties of an object in the order it has to be written. And also the string delimiter will different from the requirements of an application so one can also pass the string delimiter they would like to use against the default string delimiter (“\t”) .

package
{
  import flash.filesystem.File;
  import flash.filesystem.FileMode;
  import flash.filesystem.FileStream;

  public class CSVExporter
  {
    protected var file : File;
    protected var dataProvider : Array;
    protected var columnFields : Array;
    protected var fileStream : FileStream;
    protected var columnSeparator : String;

    protected static var NEW_LINE : String = "\n";
    private static var instance : CSVExporter;

    public static function getInstance():CSVExporter
    {
      if(instance == null)
        instance = new CSVExporter();
      return instance;
    }

    public function exportCSV(file : File,
                              dataProvider : Array,
                              columnFields : Array,
                              columnSeparator : String = "\t")
    {
      this.file = file;
      this.dataProvider = dataProvider;
      this.columnFields = columnFields;
      this.columnSeparator = columnSeparator;

      fileStream = new FileStream();
      fileStream.open(file, FileMode.WRITE);
      writeHeaderRow();
      parseDataProvider();
      fileStream.close();
    }

    protected function writeHeaderRow():void
    {
      for(var index = 0; index < columnFields.length; index++)
      {
        fileStream.writeUTFBytes(columnFields[index].toUpperCase());

        if(index != columnFields.length - 1)
          fileStream.writeUTFBytes(this.columnSeparator);
      }
      fileStream.writeUTFBytes(NEW_LINE);
    }

    protected function parseDataProvider():void
    {
      for(var index : int = 0; index < this.dataProvider.length; index++)
      {
        writeDataRow(dataProvider[index] as Object);
        if(index != dataProvider.length-1)
          fileStream.writeUTFBytes(NEW_LINE);
      }
    }

    protected function writeDataRow(data : Object):void
    {
      for(var index : int = 0; index < columnFields.length; index++)
      {
        var property : String = columnFields[index] as String;

        if(data[property] != null)
          fileStream.writeUTFBytes(data[property] as String);

        if(index != columnFields.length-1)
          fileStream.writeUTFBytes(columnSeparator);
      }
    }
  }
}

Here it goes, the method which invokes CSV Exporter :-

protected function writeCollection():void
{
  var dataCollection : ArrayCollection = new ArrayCollection();
  dataCollection.addItem({name : "Sachin", age : 35, role : "All-rounder", state : "Mumbai"});
  dataCollection.addItem({name : "Sehwag", age : 30, role : "All-rounder", state : "Delhi"});
  dataCollection.addItem({name : "Gambhir", age : 25, role : "Batsmen", state : "Delhi"});
  dataCollection.addItem({name : "Yuvraj", age : 28, role : "All-rounder", state : "Punjab"});
  dataCollection.addItem({name : "Virat", age : 24, role : "Batsmen", state : "Delhi"});
  dataCollection.addItem({name : "Dhoni", age : 25, role : "Wicket-keeper",state : "Jharkand"});

  var  file : File = File.desktopDirectory.resolvePath("friends.csv");
  CSVExporter.getInstance().exportCSV(file, dataCollection.toArray(), ["name","role","state"]);
}

I hope you would have got brief insight about CSV exporting at the end of this post. If this post dint impress you for what you have looked for, please drop your comments i try to look out a solution for your need. Thank you for reading this post.

Move child of container anywhere

December 20, 2009 Leave a comment

Are you the one who faced tough times when you had to move child of container somewhere else than the position it has to be laid out and ended up using Canvas container . Consider the scenario, you have a VBox container and it contains three children. Now if you would like to position third child wherever you click within the container. Is it possible unless it is a canvas container ?. If you say, we cant, still it has logic as we all know the container and it sub-classes layout the component based on its layout behavior and it wont bent down as we wish to place the control.

But its certainly possible. Set the includeInLayout property of child (you want  to move around) to false and set the x and y position of child by invoking move method on the child control. It will be laid out as we intended. The reason behind the trick is, if you make the includeInLayout property of the control to false, it wont be considered when the container lays out the children and it will leave you to take care of the positioning of control. Thats how it works, got it ???.

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

    <mx:Script>
        <![CDATA[

            protected function  onInit():void
            {
                container.addEventListener(MouseEvent.CLICK, onMouseClick);
            }

            protected function onMouseClick(event : MouseEvent):void
            {
                floatMe.move(event.localX, event.localY);
            }

        ]]>
    </mx:Script>

    <mx:VBox id="container"  width="350" height="150" backgroundColor="#FFFFFF"
        borderStyle="solid" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <mx:Button id="floatMe" label="Wanna place me here" includeInLayout="false" />
    </mx:VBox>

</mx:Application>

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.