Wicket Tips: Localization

If you are using resource bundles to localize your applications and your resources are stored in *.properties files you have to use escaped Unicode sequences for non ASCII chars, but if you are using XML you can use UTF-8 directly.

Strong Password Validator

Recently I was needed to create a password strength validator, which will basically info user how strong is the entered password. There are different standards for the strong password, I decided to go on with these:

- Must contain eight characters or more
- Should not contain spaces

Previous two are required criteria, it means that if the entered password doesn't match this requirements it is not valid.

Contain characters from one or more of the following three character classes:
- Alphabetic (e.g., a-z, A-Z)
- Numeric (i.e. 0-9)
- Punctuation and other characters (e.g., !@#$%^&*()_+|~-=\`{}[]:";'<>?,./)

It is pretty easy to validate password based on those requirements, but sometimes we don't want requirements to be hard-coded. That's why I decided to store requirements as regular expressions. You can store each requirement as a separate reg exp in DB, you can also store additional "required" flag (if password doesn't match required criteria it is invalid). In my demo regular expressions are hard-coded, but they can be easily retrieved from DB.

Demo | Code

Template Components

This is not a complex topic, but there are lot of Flex developers that never used or don't even know about template components. Template components are unique type of components where the variables are typed in a more general way, allowing for flexibility in design. Let's say we want to have a panels of news. Each panel should contain one news. Each news has it's title which is simple label, it's footer which is some link and content. While the title and footer are always label and link the content can be very different e.g. it can be photo for one news, just a text or some voting for another one. But we didn't want to have different custom components for each of this types. So here where we can use template components. See in the following example.

Source

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="*"
 layout="vertical">

 <ns1:NewsPanel title="Hockey">
  <ns1:newsTitle>
   <mx:Label text="Ryan Miller returns" color="red" fontWeight="bold" />
  </ns1:newsTitle>
  <ns1:content>
    <mx:Image source="http://fan.violescent.net/enthness/affiliates/smyth/5_ryanmiller.jpg"/>
  </ns1:content>
  <ns1:footer>
   <mx:LinkButton label="Other Photos..." />
  </ns1:footer>
 </ns1:NewsPanel>
 
 <ns1:NewsPanel title="Hockey">
  <ns1:newsTitle>
   <mx:Label text="A costly meltdown" color="red" fontWeight="bold" />
  </ns1:newsTitle>
  <ns1:content>
    <mx:Text text="The Panthers were less than three minutes away from sliding into a playoff position Saturday night."
     truncateToFit="true" width="225" />
  </ns1:content>
  <ns1:footer>
   <mx:LinkButton label="Details..." />
  </ns1:footer>
 </ns1:NewsPanel>
 
</mx:Application>

NewsPanel.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
 initialize="init()" width="250">
 
 <mx:Script>
  <![CDATA[
   import mx.controls.Label;
   import mx.controls.LinkButton;
   import mx.core.UIComponent;
   
   // An array which stores the UI components
   // of our content
   [ArrayElementType("mx.core.UIComponent")]
   private var _content:Array;
   
   private var _footer:LinkButton;
   private var _newsTitle:Label;
   
   
   public function init():void
   {
    this.addChild(_newsTitle);
    
    for each(var component:UIComponent in _content)
    {
     this.addChild(component);
    }
    
    this.addChild(_footer);
   }
   
   public function set newsTitle(value:Label):void
   {
    _newsTitle = value;
   }
   
   public function get newsTitle():Label
   {
    return _newsTitle;
   }
   
   public function set footer(value:LinkButton):void
   {
    _footer = value;
   }
   
   public function get footer():LinkButton
   {
    return _footer;
   }
   
   public function set content(value:Array):void
   {
    _content = value;
   }
   
   public function get content():Array
   {
    return _content;
   }
  ]]>
 </mx:Script>
 
</mx:Panel>

mx:TextInput bug from Flexosaurus

Nearly five months ago I noticed mx:TextInput's bug. The following steps will reproduce the bug.

In the Application 1

- Enter some long string in the mx:TextInput e.g. "asd asdsa sadsadsa sadsad asdsa"

- Click on the "Button" button(it is setting text in the mx:TextInput to "yes")

- You will not be able to see the text in the mx:TextInput, you will be able to see the text if you e.g. click on the mx:TextInput

Application 1

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 width="300" height="50" layout="absolute">

 <mx:Script>

  <![CDATA[

   private function clickBtn(event:MouseEvent):void
   {
    txtInput.text = "yes";

   }
  ]]>

 </mx:Script>

 <mx:Button id="btnSubmit" x="178" y="10" label="Button"
  click="clickBtn(event)"/>
 <mx:TextInput id="txtInput" x="10" y="10"/>

</mx:Application>

There is a few ways for fixing this problem. Here is one of them. We will create custom text input component and override public function set text(value:String):void function. In the text setter we will call initialize mx:TextInput text property (super.text = value;) and then we'll just bring the cursor to the begging.

Reproduce the bug for the Application 2 and you will be able to see the text.

Application 2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    xmlns:ns1="*"
 width="300" height="50" layout="absolute">

 <mx:Script>

  <![CDATA[

   private function clickBtn(event:MouseEvent):void
   {
    txtInput.text = "yes";

   }
  ]]>

 </mx:Script>

 <mx:Button id="btnSubmit" x="178" y="10" label="Button"
  click="clickBtn(event)"/>
 <ns1:CustomTextInput id="txtInput" x="10" y="10"/>

</mx:Application>

CustomTextInput.as

package
{
 import mx.controls.Alert;
 import mx.controls.TextInput;

 public class CustomTextInput extends TextInput
 {
  public function CustomTextInput()
  {
   super();
  }
  
  override public function set text(value:String):void
  {
   super.text = value;
  
   // Bringing cursor to the beginning
   setSelection(1,1);
  }
 }
}

Little hint concerning Flickr API from Flexosaurus

If you are trying to use ActionScript 3.0 API for Flickr and while creating FlickrService you are getting following error:

1017: The definition of base class URLLoaderBase was not found.



Or following exception run-time:

Error #1014: Class com.adobe.webapis::URLLoaderBase could not be found.



Do not panic. You just need to download as3corelib . There are number of classes in as3corelib that are getting used by ActionScript 3.0 API for Flickr.

3D Ferris Wheel from Flexosaurus

I just tried to implement something "3D" and here it is:) Actually it's just number of planes which you can rotate in the way the Ferris Wheel get rotated. You can also change the X,Y,Z angles of scene. E.g. you can change the angles, place the planes horizontally and you'll get whirling photo album. It is also very easy to make this planes clickable. The sample is powered by Away3D and Caurina Tweener.

SOURCE | SAMPLE

Cool ToolTips from Flexosaurus

Conventional Flex tooltips are just displaying text that provides info. In the following sample I created few custom tooltips.

•Animated tooltip
•Image tooltip

The first one is a tooltip with transparent background with some animation added. The second tooltip is more decorative. Because of the image size the text should be short. It is possible to take bigger image and resize it depending on text length, but I don't think that the big tooltips of this style will look good enough.

Also here is provided the way for applying some effects for tooltip's appearance and disappearance.

It is often useful to have tooltip which is supporting HTML. It is quite easy to implement. If you need it, just let me know in the comments and I'll give you the code.


Source