LabelTextInput in Flex 3

Looking for a Flex 3 component which acts like a TextInput and Label. The following component achieves the purpose. This component will act like a Label by default. But 'on mouse over' it will turn into a TextInput where we can enter text and 'on mover out' it will be again changed to Label.

LabelTextInput.as

package
{
  import flash.events.Event;
  import flash.events.FocusEvent;
  import flash.events.MouseEvent;
 
  import mx.controls.TextInput;

  public class LabelTextInput extends TextInput
  {
    public function LabelTextInput()
    {
      super();
      addEventListener(MouseEvent.MOUSE_OVER,onMouseOver);
      addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);
      addEventListener(Event.CHANGE,onChange);
      addEventListener( FocusEvent.FOCUS_IN, onFocusIn );
      addEventListener( FocusEvent.FOCUS_OUT, onFocusOut );
   
      this.setStyle("borderStyle","none");
      this.setStyle("backgroundAlpha",0);
    }
  
    private var _promptText:String = '';
    private var _previousText:String;
  
    public function set promptText(value:String):void
    {
      _promptText = value;
      super.text = value;
      this.setStyle("fontStyle","italic");
    }
  
    public function get promptText():String
    {
      return _promptText;
    }
  
    override public function set text(value:String):void
    {
      if(value != '')
      {
        this.setStyle("fontStyle","normal");
        super.text = value;
      }
      else
      {
        this.setStyle("fontStyle","italic");
        super.text = _promptText;
      }        
    }
    
    override public function get text():String
    {
      if(super.text == _promptText)
        return "";
      else
        return super.text;
    }
  
    private function onMouseOver(event:MouseEvent):void
    {
      this.setStyle("borderStyle","outset");
      if(super.text == '')
      {
        promptText = _promptText;
       }
    }
  
    private function onMouseOut(event:MouseEvent):void
    {
      this.setStyle("borderStyle","none");
    }
  
    private function onChange(event:Event):void
    {
      if(super.text == _promptText)
      {
        this.setStyle("fontStyle","italic");
      }
      else
      {
        this.setStyle("fontStyle","normal");
        this.setFocus();
      }
    }
  
    private function onFocusIn(event:FocusEvent):void
    {
      if(super.text == _promptText)
      {
        this.setSelection(0,textField.text.length);
        this.setFocus();
      }   
    }
  
    private function onFocusOut(event:FocusEvent):void
    {
      this.setStyle("borderStyle","none");   
    }
  }
}

Feel free to leave your comments.

Happy Birthday to My Country

Happy Independence Day

Trader's Goal

A trader’s first goal must be long-term survival; second goal, a steady growth of capital; and your third goal, making high profits. Unfortunately, many traders come to the market with third point as first goal.

Single/Multi line in one Component in Flex 3

In Flex 3 TextInput component allows single line & TextArea allows multi line text input. Want to have an single component which will allow both., then use below code (component)

SingleMutiLineTextArea.as

package components

{
   import flash.events.Event;
   import flash.events.KeyboardEvent;
   import flash.events.TextEvent;
   import flash.ui.Keyboard;
   import mx.controls.TextArea;

   public class SingleMutiLineTextArea extends TextArea
   {
       public function SingleMutiLineTextArea()
       {
           super();
           this.addEventListener(TextEvent.TEXT_INPUT,onTextInput);
       }

       private var _multiLine:Boolean = false;

       public function set multiLine(value:Boolean):void
       {
          multiLine = value;
       }

       public function get multiLine():Boolean
       {
          return _multiLine;
       }

       private function onTextInput(event:TextEvent):void
      {
          if (!_multiLine  && (event.text.charCodeAt() == 10 ||   event.text.indexOf(String.fromCharCode(10))!=-1))
          {
             event.preventDefault();
          }
      }
  }
}

If the property 'multiLine' is set to 'true' it accepts multiline entering of text., if it is set to 'false' it wont allow.

Leave you comments below if found useful

My Musings with/on my bike

My bike was stolen in Bangalore on a night of April when I went to my hometown. Totally 12 bikes are there where I parked mine, but I am LUCKY person to lose bike. Still I didn’t know why the thief took my 6 year old bike leaving 2 months old ones which were parked with mine. On next day I went to my nearest police station and informed them regarding this.

The first thing I learnt here is in every police station there is ONLY ONE person with whom we had to deal regarding these stolen/theft cases.

The police whom I met told that he will file an FIR if I want it for insurance or else he will just take a complaint. I too agreed for this as I had to search for my insurance papers. So I just gave details regarding mine & my bike and left that place.

After a few days I was informed that my bike was found but in an another police station.

I neither given complaint nor filed FIR upto now but it was found., kudos to the investigation abilities of police.

I was asked to bring FIR copy first. So I went to the police station where I informed regarding this and got an FIR.

The cost I got incurred is RS.200 that too the police didn’t asked/insisted directly, (seems he’s a contract employee or a good one) but based on his facial feelings I myself given him the amount.

Then I took the FIR to the police station where my bike was there.

Here also everybody pointed me to only one person who dealt with this particular issue (stolen goods).

I expected he will ask for some money and will give my bike immediately. But he told me an (long) actual procedure to get my own bike back from them. I am not sure about the exact procedure but the procedure tentatively is as follows:

First they will file some case and inform the court that they arrested some thief and recovered this number of bikes (there are many bikes recovered with mine).

Then a complaint number (he told a name for this) is generated.

Then I had to take this number to the court and file an appeal to them that the police had recovered an vehicle with its registration/engine/chassis number and the bike is mine for which I had show proofs like my original RC book etc. They told for this I had to hire a lawyer. Then the court will give us a “Release Order” which we had to submit in the police station to get our bike release from them.

(I heard we can get a lawyer(for 1000rs but not sure about the actual cost) who will complete the process and get us the “Releasing Order”. May be the police people will have those lawyer numbers )

The police told me about this procedure and told me to come next week as they are dealing with “laptop theft/recovery” cases in that week and gave me his number for further communication.

In the next week I called that police daily but he told they are still dealing with laptop cases and bike cases are not still taken up.

After one week he told me to come on next Wednesday and he will tell me the actual process/ formalities and I can get my bike on that next day. So I went to the police station on next Wednesday but he was on leave, and every other police man told he is the point of contact for these stolen cases. His cell was switched off and it took me another 5 days to get him on cell. He told me to come on next Monday with an “Indemnity Bond” paper.

See point number 22 in this link: http://www.ksp.gov.in/static/citizen-charter/

P.S: “Indemnity Bond papers in Bangalore are available with STOCK HOLDING CORPORATION OF INDIA”.

Locations: http://www.shcilestamp.com/estamp_statekarnataka.html#shcilbranchkarnataka

On next Monday he simply took an printed statement on that bond with my signature and gave my bike back :-)

The entire printed matter was in Kannada which I couldn't understood a single line but kept the signature.

It took 1800 bucks to get my bike here and the police are very frank in these matters.

I got my bike exactly after one month I lost it and it took exactly 14 days to take it out of police station.

The doubt is when there is an easy process like this why did the police insisted on a long process (through court) which will take a long time!!! Although we went through court then also the cost will be almost same where we had to more for lawyer and less for police

P.S: But it took 6000 bucks to repair the bike and bring it into normal condition. The battery & petrol were taken off. Seems nothing left to peel from it.

Everybody says I am lucky to get my bike back. But if the bike was not found I may have saved a 8000 bucks of expenses and may get around 15k-20k as insurance claim (but it will take time). with around 20k-25k I can buy a better bike then mine.

NOW THE DILEMMA : IS I AM UNLUCKY TO LOSE MY BIKE OR LUCKY TO GET MY BIKE BACK OR IT WAS WRITTEN (fate) THAT I HAD TO REVOLVE AROUND TWO POLICE STATIONS FOR ONE MONTH???

Dispatching Events from Popups in FLEX

Sometimes we don't know (or forget) some silly things. Today I required to dispatch an custom event from a popup and handle that in component (parent mxml) in/on which that popup was opened. I normally used this line in popup:

this.dispatchEvent(new Event("myEvent"));

and handled this in the parent(of popup) mxml as:

this.addEventListener("myEvent",myEventHandler);

private function myEventHandler(event:Event):void
{
Alert.show("I came here");
}

While looking everything is fine but the (intended) functionality didn't worked.
i.e the event was fired but the Alert(event handler) was not executed.

I spend some 1 hour on this thinking any typo error is there.

Then I opened GOOGLE mahatma and searched for this
(I scolded myself why I didn't done this at first itself)

The first two results itself told all the story.

The first link said:
"DisplayObjects created through the PopupManager.createPopup() function are not children of the application container"
i.e popups are not children of Application container so the 'event' dispatched in popup can't be handled in its parent.

http://www.munkiihouse.com/?p=45

The second link gave me the solution:

Add the listener to popup while creating it in parent(mxml).

var myPopupObj:MyPopUp = PopUpManager.createPopUp(this,MyPopUp);
myPopupObj.addEventListener("myEvent",myEventHandler);
//This is where everything lies. Assign eventlistner for popup

Now dispatch the event(myEvent) as usually from the popup and it will be handled in its parent mxml(myEventHandler);

http://matthijs.stichelz.be/blog/2008/12/dispatch-custom-events-from-popup/

May this is an small thing but its useful.

Paradox of Choice - Psychologist Barry Schwartz @ TED

Too Much Choice Spoils the Selection :)

William Bernstein on INVESTORS

There are two kinds of investors, be they large or small: those who don’t know where the market is headed, and those who don’t know that they don’t know. Then again, there is a third type of investor – the INVESTMENT PROFESSIONAL, who indeed knows that he or she doesn’t know, but whose livelihood depends upon appearing to know.
- William Bernstein, The Intelligent Asset Allocator

Indian Language's Font/Lipi in Flex using Text Layout Framework

Any time tried to show some Indian text/lipi in Flex 3., i.e on Flex 3 controls like label, button, combobox etc..

If you want to display a hindi text on a button control, you will write a normal code:

<mx:Button label="पहला आइटम"/>

But it wont work :)

You will get the output as below



you will be greeted with some unexpected square boxes as above..

Adobe "Text Layout Framework" will help us here when we want to show these indian languages or other languages like arabic in Flex 3 controls. This framework is still in its beta stage. For Flex 3 we had to include 'textLayout_conversion.swc' & 'textLayout_core.swc' in libs folder and for Flex 4 these swc's are already included.

You can find more details about "Text Layout Framework" from here

So lets see how to display Indian language text in Flex..

I am showing Hindi & Telugu (as it is my mother tongue) languages in Flex controls, we can also display other languages like tamil, malayalam, kannada, arabic etc but I didn't tried with those as I am not familiar with those languages (but I tried with arabic and succeeded almost although I didn't understand the language)

we had to include 'textLayout_conversion.swc' & 'textLayout_core.swc' in libs folder

The Screen shots of the examples can be seen here




Indian Languages/ any other language on (click on the text for demo example)

Label Control

Button Control

ComboBox Control - Actually, the displaying indian text in ComboBox control some modifications to ComboBox control. For this a custom combobox control is done and the text positionion for some languages is not perfect. You can change the custom component according to your requirements.

You can get the source code of all the above from here and change it according to your requirements.

Feel free to add your comments.

ELIPS Studio: Mobile Application Developement using Adobe Flex Builder

ELIPS Studio 3 is a mobile application development SDK based on Adobe's Flex Builder. Using ELIPS Studio developers can quickly develop mobile applications and deploy them on any mobile platforms supported by ELIPS.

Until now if developers want to develop an mobile application they had to develop the application using various technologies (Windows Mobile, SYmbian, IPhone, Android..) for different mobiles of different manufacturers. ELIPS cuts this complexity with a single development toolkit for popular handsets. It also includes sophisticated simulator and the code it generates is compact and rapid enough to run even on low-specification, mass-market handsets.

see the supported mobile OS by ELIPS here:

http://developer.openplug.com/index.php/learn/supported-platforms

ELIPS Studio 3 is available as a plug-in for Adobe Flex / Flash Builder. It allows you to develop mobile applications using ActionScript and MXML.

For any platform, the compilation of your application to the platform format is done in 2 stages:

1. Generation of the native source code (C/C++/ASM) from your MXML/AS
2. Compilation of the native source code to executable format


If we take iPhone development using ELIPS Flex Builder, ELIPS studio will map the controls available in iPhone with Flex Controls (as we use ELIPS sdk it has only those controls/containers which are mapped/present in mobile platforms)

For all platforms except the iPhone, the above said two stages 1 and 2 are done transparently one after the other, on the same machine of course.

For the iPhone, in this technology preview, it’s different: stage 1 is done in a Windows VM in your Mac, or on your Windows PC, but stage 2 needs to be done on a Mac, using XCode, at least today.

The complete flow for the iPhone comes as follows:

- Develop in ELIPS Studio3 / Flex Builder on a PC (or a Mac, in a Windows VM, like Parallels or VMWare)
- Within Flex Builder, build for the iPhone target. This will actually generate an XCode project with the C++ files from your MXML/AS
- Copy the generated sources with the XCode project to a Mac (if you were working on a VM, simply put it in a shared folder of your VM)
- Open it in XCode, build, simulate, debug, deploy on the Mac


So How to start using ELIPS???

Download the latest version of ELIPS Flex sdk setup from here:

http://developer.openplug.com/index.php/download

Then Run the file 'ELIPS_STUDIO_***.exe'

It has its own sdk (we had to use ELIPS flex SDK which was developed on Flex SDK to develop mobile application) and maps/imports this sdk and some options into flex builder.

See the other installation steps here:

http://developer.openplug.com/index.php/learn/tutorials/?videoid=3

We had to use ELIPS for flex builder. Open ELIPS for flex builder from Programs -> Open_Plug -> ELIPS Studio -> ELIPS for Flex Builder, and create a normal New AIR Project (Lets the name of the project be 'ElipsDemoPrj')



Goto Project Properties (Right Click on Project -> Properties) and go to Elips3 -> Targeted Devices and select the Devices you want the code to be generated and press "Apply".



I selected Iphone & Generic WM6 is selected default

In 'Flex Compiler' options change the 'Use a specific SDK' option to 'ElipsFlexSDK***' and click 'OK'



For further info:

http://developer.openplug.com/index.php/learn/tutorials/?videoid=20

Now in top toolbar you will find some new (3) options/icons



By pressing the '?' (first new icon) icon the Help for ELIPS sdk will open
By pressing the second icon the native code for mobile platforms will be generated from flex code
In the third option (like dropdown) you can select the platform (among those you selected in Targeted Devices) to Run

Lets start with a typical 'Hello World' example. Take a label and place "Hello World" on it., select Iphone in the dropdown in toolbar and Run the APP (like a normal Flex application using 'Run' option'), now a VM of the IPhone will run and it shows your output in an IPhone simulator




The left window (SimUI) contains some options and the right (IPhone window) window contains your output

Now press the 'Build ELIPS package for all Targeted Devices' button (middle icon in the three new icon/control in toolbar.

Two new folders 'resources' & 'output' will be created parrllel to 'src' folder. The 'output' folder contain subfolders (one folder for each targeted device we selected) and native code (each Targeted device in its native language) is created and placed in respective folders.



From the above image you can see a '.cab' file is generated for WM(windows mobie) which can be directly deployed into the mobile but for IPhone XCode project with the C++ is generated which had to be compiled using a MAC & XCode.

Visit ELIPS website:

http://developer.openplug.com/

Haapy new Year 2010..

Haapy new Year 2010.,

May this new year all your dreams may come true..