Move Flex Alert.show on the screen

I have a tall Flex application that uses Alert.show( ) to display error messages.  This created problems when the error messages were centered on the screen, but not visible when the screen was at an extreme scroll position (top or bottom).  To solve this, I capture the MouseEvent and use it to set the Alert’s “Y” position.  Note this code did not work UNTIL I used the PopUpManager.centerPopUp prior to moving:

 

var errorMsg:Alert = Alert.show(errmsg,"Error", Alert.OK, this);

PopUpManager.centerPopUp(errorMsg);

 

var mousePt:Point = new Point(event.localX, event.localY);

mousePt = event.target.localToGlobal(mousePt);

errorMsg.move(errorMsg.x, mousePt.y - 50); // try to vertical center it at button

Google Maps and Flex are beautiful together

All I can say is WOW! Working with Google Maps in ActionScript is SOOOO much easier than HTML/JavaScript. In 5 minutes I had a working map and in 20 minutes of Google examples I had this:

http://edgewaters.s3.amazonaws.com/maps/Places.html

I am sold.

Adding new folders in Eclipse

I discovered a great feature/shortcut for adding new folders in Eclipse. Java/Flex packages sometimes have very deep folder structures which are a bit of a pain to recreate by hand. The good news is Eclipse will create the folder structure in one fell swoop if you enter it. Here's what I do: I find the folder in Windows Explorer and copy the location (e.g. com\adobe\crypto ) and paste it into the new folder dialog and viola!

Flex mx:Label htmlText and Font color behaviors

I just discovered a few qwerks with the Flex Label’s htmlText property that I thought were worth passing along.

First off, Labels are limited to one line, so the default behavior of the <mx:htmlText> <![CDATA[ will not display:

<mx:Label>

      <mx:htmlText>

            <![CDATA[

                  <font color="Red">*</font> indicates required field.

                  ]]>

      </mx:htmlText>

</mx:Label>

Once I consolidated the the CDATA lines into one it displayed:

<mx:Label>

      <mx:htmlText>

            <![CDATA[ <font color="Red ">*</font> indicates required field.]]>

      </mx:htmlText>

</mx:Label>

…but the color still didn’t work.  Turns out you have to use Hex to specify font color:

<mx:Label>

      <mx:htmlText>

            <![CDATA[ <font color="#FF0000">*</font> indicates required field.]]>

      </mx:htmlText>

</mx:Label>

The Adobe LiveDocs explain all this in more detail.

Flex Builder stopped generating HTML wrapper after adding VSS

 

After adding my Flex project to VSS, the Flex Builder silently stopped generating the HTML wrapper files.  To fix the problem, I unchecked the Generate HTML wrapper file in the project properties.  I was prompted to delete the html-template directory and I did remove it (including the VSS linkage).  I then changed the project properties back and the HTML wrappers generated again.  Note, I did not check the html-template directory back in to VSS.

Improved Flex Validation: Display Error Tooltip

I combined two validation concepts to arrive at my Improved Flex Validation. The key component is Joel Hooks Form Validation for the Lazy Programmer. I incorporated the UIComponent.callLater() hack for displaying error ToolTips and viola!

Full Source

Here is what the callLater() looks like:

...
    // display errorTip
    if (showErrorsImmediately && 
        currentControlIsValid == false && 
        supressEvents == false)
    {
        // cast the focussed control to a UIComp to use callLater
        var ffc:UIComponent = focusedFormControl as UIComponent;
        ffc.callLater(showDeferred, [focusedFormControl]);
    }
    
    return currentControlIsValid;
}

private function showDeferred(target:DisplayObject):void {
      target.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT));
      target.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
}            

Flex CompareValidator custom Validator

I have been using Matt Holden's Password Strength Indicator component with great success, but I was asked to make the input errors more obvious. The Flex Validators are a nice start, but their red-outline + tooltip approach is not the most intuitive. So, in conjunction with my improved Flex validation, I created a custom Validator for the password component to do the confirmation password comparison. The CompareValidator is generic enough that it can be reused for other components like account numbers or email addresses.

package core.util
{
import mx.validators.ValidationResult;
import mx.validators.Validator;


public class CompareValidator extends Validator
{
   public var valueToCompare:Object;
   public var errorMessage:String = "Value does not match.";

   public function CompareValidator()
   {
       super();
   }

   override protected function doValidation(value:Object):Array {
       var results:Array = [];
       var srcVal:Object = this.getValueFromSource();
 
       if (srcVal != valueToCompare) {
           results.push(new ValidationResult(true, null, "Match",errorMessage));
       }
       return results;

   }
}
}

The MXML looks like this:

  <coreutil:CompareValidator
      id="comparePasswords"
      source="{password2}"
      property="text"
      valueToCompare="{password.text}"
      errorMessage="Passwords do not match."
  />

Flex Relative paths for embedded images in buttons with @Embed

Flash, Flex and ActionScript: Relative paths for embedded images

Setting the @Embed source with an absolute path (based on flex_src root) :

<mx:Button icon="@Embed(source='/assets/blue_delete.png')" />

as3corelib Contains Crypto Utils for FLEX MD5 Hash

I needed to store MD5 hashed passwords in the database and was delighted to find the as3corelib already contains the necessary libraries.  While there are many more features, I only needed the MD5 Hash function so I only copied in the com.adobe.crypto.MD5 and com.adobe.utils.* files.  With the .as files added to my Flex project, hashing the password was a simple as calling:

    MD5.hash( passwordComp.getPassword() );

 

I verified that it returns the same hash as the MySQL MD5 function

UPDATE user_table SET password = MD5(‘change_me’) WHERE username = ‘sandman’

Dynamically position a Flex popup relative to a button mouse click

I was having trouble with positioning a wide popup window that was in a component nested several containers deep.  The PopUpManager.centerPopUp method would center on the container and push the window off the right edge of the screen.  To correct this, I moved the popup over 100 pixels using:

popup.x = popup.x – 100;

That worked, but the problem would come back if the window grew wider.  Bush league.  To make it a bit more reliable, I changed to use the mouseEvent localX/Y properties.  Note you have to convert the “local” coordinates to “global”:

 

      private function showPopup(event:MouseEvent):void

        {

            pop = EnotaryRegReturnPopup(PopUpManager.createPopUp(this,EnotaryRegReturnPopup,true));

            pop.title = "Please select return reasons.";

            pop.showCloseButton =true;

            pop.enotaryRegReturnList = this.enotaryRegReturnList;

            pop.buildUnselectedReturns();

           

                  // position the window next to the "add" button

            var pt:Point = new Point(event.localX, event.localY);

            pt = event.target.localToGlobal(pt);

            pop.x = pt.x - pop.width;

            pop.y = pt.y;

           

            pop.addEventListener("close",removeMe);

            pop["cancelButton"].addEventListener("click", removeMe);

            pop["okButton"].addEventListener("click",processReturns);

        }