Hide Show a Tab on Tab Navigator

Right, just a short code-snippet I'd like to share for those who have been searching for a solution for ages (like I have). I was looking for a way to hide specific tabs in a TabNavigator in Flex 3 without removing a child form the ViewStack. 

This is not possible by simply hiding a child in the viewstack (child.hide = true) or by setting its visibility to false (child.visible = false). 

With an easy workaround you can set the visiblity of a specific tab to false: 

tabNavigator.getTabAt(1).visible = false;

Probably more people have found this solution, but I couldn't find it on the web so here it is.

 

How to copy an ArrayCollection

 

There are many ways to copy an arrayCOllection to another one.Here is a couple of them

Initialize the new array with the older arrayCollection's source.

Example :var a : ArrayCollection = new ArrayCollection(array);   var b : ArrayCollection = new ArrayCollection(a.source);

Use mx.utls.ObjectUtil.Copy

Example :var arrayCollection1 : ArrayCollection = ObjectUtil.copy(arrayCollection2)

Hope it helps!

Proper Form Validation in flex

Validators in flex have always been a mystery and I happened to encounter one of those really upsetting quirks in one of my projects.What I am talking about is the un invited red borders that get visible when you tab out of fields which have validators assigned.One would expect that the error tooltip would also appear when the red borders come.But you know, flex throws some unpleasant surprises at you at times and this is one such thing.Don't contemplate harrikiri yet :-). Every problem has a solution hidden inside it.

 

This is how it looks

 

 

 

            Turns out that the ToolTipManager can help one hiding and showing tooltips as and when requried.

           

            Here is some sample code.

 

            <mx:FormItem label="Your name">

                <mx:HBox>

                    <mx:TextInput id="yourName" change="onChangeText(event);" focusOut="onChangeText(event);"/>                

                </mx:HBox>

            </mx:FormItem>

 

            private function onChangeText(eve:Event):void {

                       

          var target:TextInput = eve.currentTarget as TextInput;

if (target.text == "")

                        {

            // Has the error message ToolTip already been created?

            // (A reference to created ToolTip instances is saved in a hash called errorMessageToolTips.)

                   // Create the ToolTip instance.

        var pt:Point = new Point(target.x, target.y);

        pt = target.contentToGlobal(pt);

        var errorTip:ToolTip = ToolTipManager.createToolTip(errorMessages[target.name] + " cannot be empty", pt.x + target.width + 5, pt.y) as ToolTip;

        errorTip.setStyle("styleName", "errorTip");

        errorTip.visible=true;      

                        }

            }

 

           

 

            Comments Welcome .. As always.       

 

FlEX = UI + LOT MORE!

It infuriates me when I hear people say flex is Just another UI technology.Even the most tech savvy people have no clue what flex can do , but assume that its just about looks .. well good looks.. Though creating a cool UI is a very important part of flex's capablities, it can do much more.. I mean much much more!

Here is a short summary of capabilities that flex can bring to your next application.

• Consistent behaviour across browsers: How many times have we abused bill gates and his IE team for not being standards compliant when it comes to browser behaviour?? The flash runtime is probably the most matured runtime that can run on a browser. Code once written will never require a change no matter which browser you intend to use it on.Please note that by behaviour I am not trying to mean the look and feel alone.Many times HTML based applications just cant work on all intendedd browsers
  
• A stateful client : Flex allows an application to have a stateful client. When a client understands the state of itself , it saves a lot of server memory wasted in maintaining the state.Imagine something like ebay in which millions are logged in and are amidst a chekout process. SERVER MEMORY = MONEY and flex can save lots of it when you build your next web application
• Real time data: This is something that traditional web applications really suck at and flex is pretty darn good at. Flash supports sockets which is the only way to have the server push data on to multiple clients. For enterprise applications flex data services or cocomo can help one achieve PUSH .. Its just impossible to achieve with plain AJAX. Direct web remoting is an option many developers opt to but one review with firebug says its just as good as polling :-)
• MVC: Flex plays amazingly well in a system that uses MVC or MVP. Adobe backs up this aspect of flex with great support for "Cairngorm" the mvc micro architecture which is very widely used. PureMVC is another option that one would want to check out.
• Event Model: Flex works on an event model that will be very very similar for java swing developers. In flex every communication is done via events. What this really means is that your components don't really have to know anything about the callers. True component reuse :-)
• Multimedia: Youtube got sold for a few billions.. All by leveraging flex/flash multimedia capabilities.
  
• Remoting: Flex data services and blaze data services helps you bypass the xml/html layer that makes traditional applications horribly slow. The real magic here is the protocol called AMF that makes your apps render server side data in a whizzy.
• WEB TO DESKTOP in a minute: Your flex applications can be converted into desktop applications and vice versa in a matter of minutes.. Adobe AIR combines the connectivity of web apps with the responseiveness of desktop! Converting you flex applications to desktop application is a matter of changing the root tag from mx:application to mx:windowedapplication in most cases..
  Checkout adobe air here
  
• Compoenent Architecture: Last but not the least the component architecture built into flex is what makes flex what it is. One can opt to deliver components as closed source(think .swc) if required. Flex components do not suffer from DLL hell or the much talked about JAR hell that traditional apps suffer from
• 
  

Now stop saying flex is just about UI!!!!
As always.. Comments are welcome.. :-)

MVC with FLEX

There has been a lot of talk about flex being the next generation development tech for enterprise solutions. Whenever one gets to think about the idea of building enterprise solutions , one word can never be ignored "DESIGN PATTERNS". When you think of a MVC implementation with flex Caingorm and pureMVC frameworks are the ones all developement teams will consider.
I havent used pureMVC but worked with Cairngorm and havent felt too good with it. The problem I face with Cairngorm is that there is need to use observers to detect the change in the model. I mean the the view really has no idea when the model it consumes would change.
The problem here is when multiple UI components are trying to detect a change to the model, you have no idea about the order in which the views react. So cairngirm became a sure shot way of getting into trouble for me.

So I had to find other approaches. And a different approach find did I. :-) . Here is a brief description of my little MVC implementation.

1. Create an interface that acts a contract between the view and the controller(handler)

2. Have the view implement the interface. This helps you create a handler that doesnt need to know much about the view that is consuming it.

Ex: -- > mx:Application implements="com.simplemvc.IsampleInterface"

3.Create a reference to the handler in the view . The handler should also hold a refernce to tghe view. Have something like

Ex:--> handler:SampleHandler id="myHandler" view="{this}" myData="{this.gridData}"



4. Call the methods in handlers/controllers when you need to .
Ex: handler.getData();

5.Have the handler call your remote Object/web service/httpservice and call back the view using the reference
Ex:view.updateCollection(data:ArrayCollection)

Checkout the source code here

Comments welcome.

How to set Up Flex Builder for JAVA

Quick post on how to set up flex builder for editing and debugging java code in parallel.

You must have flex builder 3 installed for this.

1. Install WTP using Help->Software updates->Find and Install.

2. Create a new flex project .

3. Select the J2ee project type.

4. Select the create a combined flex using WTP option. Click Next

5. Select your tomcat home .

6.Select the location of your flex.war on the next screen. (Note: You can download flex.war and flex data services from adobe.com)

7. Click finish.

Flex builder would have create all the necccessary code structure and xml files create for you

To create a simple remote object project follow this tutorial.

http://livedocs.adobe.com/livecycle/8.2/programLC/programmer/lcds/help.html?content=rpc_remoteobject_2.html

There goes your first java enabled flex project.

Comments welcome!

Will be posting on and soon!

who is the ideal flex developer? Flash dev or Java dev or DHTML/Ajax dev?

Alright!! I know the topic is a little stupid , May be I should-phrase it to "who should I hire ?"

Whatever it be , I am just trying to figure out who would be my flex developer ??! . Is it the graphics guy Joe who had done numerous animations for web sites based on flash MX, spendign time on the timelines and frames using action script just a little to prevent the headaches that can happen later OR is it the java guy who was creating windows/Desktop applications with java swings and felt miserable with lack of flexibility (Think UI,colors,themes,god looking apps). Thank you sun! OR Is it the web developer who was toiling and moiling with the ugly browser quirks and the so called Ajax hacks and frameworks that are growing at tons per second.

Who would I hire If I had to ?

Well.Lemme try to summarize what command over flex really means and my opinion on who excels in which aspects?


1. OOPs principles

• Java Guy - It goes without saying that the java guys excels here.The java masters know how to apply a structured approach to problem solving. Picking up somethign like Cairnghorm will be a piece of cake if one is a proper Java developer. The event model is something that all java developers would find to be very very inituitive. Last but not the least, Java guys are almost always familiar with design pattenrs.Though these folks may have a tendency to write really large code, they structure the solution properly!! They Scale.
• Flash guys - Well ..How Object Oriented is actionscript? Most flash guys of 2000 - 2005 were working with actionscript2.0 which really did not have much to offer from an OO perspective
• Web Developer - Web developers are so to hacks that they are never really allowed to do oops with javascript . Thanks to lack of Mature Object Oriented aspects in javascript, no web developer really knows to crack a tough problem by breaking it into objects, if not rare.
  

2. Interface Design

• Java Guys: These folks are a little dumb here.. They never value the coolness that a tool like flex can bring to ones interface. They like simple interfaces lot more! Though using mxml will be very easy thanks to their familiarity with xml based frameworks like jsf
• Flash Guys: These folks will harness the power of flash animations to the fullest.just try giving them a login page as a sample. You will fall in love with flex on first sight. :-)
  
• Web Developer: These folks can do a decent enough job , but will surely take more time.. Reason. They are so to frameworks like prototype , SCriptaculous that it takes a bit of time for em to get rid of that "div" thing :-)
  

3. Product Engineering Capablities

• 
  
• (Will be continued)