In the current version of Flex (3) it’s not possible to set width and height using CSS. The application I’m working on has a lot of screens containing a lot of TextInput fields. I want to be able to control the width and height of these text fields using CSS.

Sean Christmann has a nice solution for this. He uses HBox, I’ll use TextInput as an example:

package com.yourpackage {

	import mx.controls.TextInput;
	import mx.styles.StyleManager;

	public class ExtTextInput extends TextInput {

		public function ExtTextInput():void {
			super();
			// Default styleName for this component
			this.styleName = "extTextInput";
		}

		/**
		 * This method makes styles "width", "height", "percentWidth", "percentHeight", "x", "y" and "visible"
		 * valid from css.
		 */
		override public function styleChanged(styleProp:String):void{
			super.styleChanged(styleProp);
			if(!styleProp || styleProp == "styleName"){
				//if runtime css swap or direct change of stylename
				var classSelector:Object = StyleManager.getStyleDeclaration("." + styleName);
				if(classSelector != null){
					applyProperties(classSelector, ["width", "height", "percentWidth", "percentHeight", "x", "y", "visible"]);
				}
			}
		}

		private function applyProperties(styleObj:Object, arr:Array):void{
			for each (var item:String in arr){
				var prop:Object = styleObj.getStyle(item);
				if(prop != null) this[item] = prop;
			}
		}

	}
}

As the implementation extends the standard TextInput it will behave just like the standard TextInput. Databinding, runtime style changes… it all works.

The code sets a default styleName for the component, the style could look like this:

.extTextInput {
	percentWidth: 100;
	height: 18;
}

Of course you can set a different styleName while declaring the component in your application.

Everyone with a blog knows about spam in comments. WordPress standard comes with Akismet, which does a good job filtering spam in your comments. But wouldn’t you rather have no spam comments at all? That would save time checking for false-positives. The most used method for filtering spam is a CAPTCHA. A distorted image that should be unreadable for computer programs.

CAPTCHA

I read reCAPTCHA is a good implementation, and there is a WordPress plugin available. Before downloading and activating reCAPTCHA I had about 10 to 15 spam comments a day, after activating I had about 7 to 10 spam comments a day…

Apparently it isn’t that great, you could even say it’s (almost) useless. It annoys users (some CAPTCHA’s are hard to read even for humans) and it doesn’t do what is should do. Inspired by Jeff Atwood’s ‘orange’ CAPTCHA, I decided to implement my own system. Without doing any research I assumed the spambots search for the image on the page. Easy to find for reCAPTCHA:

<div style=“width: 300px; height: 57px;” id=“recaptcha_image”><img style=“display: block;” src=“http://api.recaptcha.net/image?c=reallyReallyLongCode” height=“57″ width=“300″></div>

One of the easiest improvements could be to use an image that’s not that easy to find for the bot, maybe even multiple images. Actually everything you do that differs from the popular CAPTCHA implementations will make it harder for spambots to beat your own implementation.

My Implementation

I decided to go for multiple images, with images in between which are hidden using CSS. The  inputfield with a non-standard ID ‘mycap’. As I wanted to test my implementation as soon as possible I hardcoded the CAPTCHA, which also made it easy to read the response. No distortion used in the images as I figured the spam bots would already be confused by the multiple images and the hidden images in between.

Screenshot of CAPTCHA

Up until today zero spam messages.

Update April 15th 8:12 AM:

Ben Maurer pointed me to the reCAPTCHA FAQ (I should have checked that earlier?), which indicates that comments indicated as spam by the reCAPTCHA plugin will end up in the Aksimet spam queue. After activating reCAPTCHA the Aksimet plugin should be disabled. Other options are to ignore the spam queue, or clean it regularly.

I choose to disable it, let’s see what happens

Update April 15th 6:26 PM:

10 hours later, 12 new spam comments. It seems the spambots are able to complete the reCAPTCHA tests, or someone has too much time on their hands. It seems I’m not the only one that noticed this. All spam comments were detected and moved to the spam queue. I’ll switch back to the ‘CAPTCHA’ I developed last weekend.

Update May 13th

I just had the first spam message passing my incredible difficult CAPTCHA, it was still caught by Akismet so it didn’t appear on the site. As there were no URL’s in the message (and there was only little text) I suspect it was a person and not a bot.

For my work I’ve been working with Adobe Flex. If you’re doing Flex development you (probably) work with Flex Builder. It has features a development tool should provide; code completion, design view, good integrated building/running of projects, debugging etc.

At work I’m tied to my Windows XP laptop, at home I work with Ubuntu Linux. Whenever I do Flex development in private time, I always use the Windows machine… but what if you’d like to develop Flex on Linux?

Google quickly pointed to Flex Builder Linux. ‘Yey! A Linux Flex builder!’ The release notes shows some (minor) inconveniences:

Unsupported Flex Builder Features

• Design view
• States view
• Refactoring
• Data Wizards
• Cold Fusion – Data Services Wizard
• Web Services introspection
• Profiler

And some known issues:

• Organize Imports removes necessary imports
• The default version of Java installed in Ubuntu systems is GCJ. This is not supported by the Flex Builder Linux installer and the installation may fail on Ubuntu Systems. Please ensure you have an installed Sun JRE before installing Flex Builder Linux.
• Getting a transparent window for AIR App depends on your Linux distro capabilities. You may need to turn-on some settings (ex: Desktop effects on Ubuntu 7.10) or install some special packages (example: compiz-fusion, beryl for installing compositing manager) to get this working (if its not working by default)

I left out anything not related to Ubuntu or Flex Builder in general. Besides the ‘design view’ most issues are minor issues. Usually the ‘design view’ is used for some initial drag and drop interface building or for containers with and ‘absolute’ layout  (i.e. Canvas). The ‘design view’ then limits the build/run/change cycles.

Installing Flex Builder on Ubuntu 9.04

The prerequisites mentioned by Adobe are

• Eclipse 3.3.x (32-bit)
• Sun JRE 1.5.x or newer (32-bit)
• Firefox 1.0, 1.5, or 2.0 (32-bit)

At the moment of writing, the version of Eclipse provided with Ubuntu is 3.2.x. So you’ll have to get a newer Eclipse version from Eclipse.org. I tried the latest version available, which is 3.4.2 (which later turned out to be a bad idea, use a 3.3.x version). Installation of Eclipse is as easy as unpacking to the desired location, so I’m not describing that any further. Make sure you have the Sun JRE 1.5.x or newer installed. I installed ‘sun-java6-jdk’ via the package manager, the JDK includes the JRE. Configure Eclipse to use that.

JRE settings Eclipse

Download the Flex Builder Plugin for Linux.

Installing Flex Builder Linux

To install Flex Builder Linux:

1. Prior to installing, remove any previous versions of Flex Builder Linux. Refer to the section ‘Uninstalling Flex Builder Linux’ below for instructions.
2. Run the installer either marking it as executable (chmod +x) or by using a shell to execute it (sh FlexBuilder_Linux_Plugin.bin).
3. Accept the license agreement and follow the prompts.
4. When prompted, specify whether to install Flash Player 9 (note that this is an updated version of Flash Player 9 and that Flex Builder Linux will work with earlier versions of Flash Player 9 for Linux). This is the debug version of Flash Player 9, which is required for debugging support and exception display.
5. Follow the prompts to complete the installation.
6. Start Eclipse.
   Note: You must create a new workspace before beginning. Select File > Switch Workspace from the menu bar and enter a new folder name. If the folder doesn’t exist, Eclipse creates it.

Install Folder

When choosing the ‘install folder’ you can leave that to default, the Eclipse folder will be defined in the next window.

Eclipse Folder

As described select the Eclipse folder, it must contain a subfolder named ‘configuration’. Continue the installation untill the installer displays that you’re done.

Start Eclipse and open the Flex perspective. If you get the following error while opening a MXML file:

Could not open the editor: Assertion failed:  org.eclipse.jface.util.Assert$AssertionFailedException: Assertion failed

Make sure you have the correct Eclipse version, I used 3.3.2 on Ubuntu 9.04.

Flex Builder in Linux with code completion

It seems Flex Builder accepts Flex 3 license keys, which is then ignored as it still displays “Flex Builder Linux will expire in xxx days.” If you use charting you can enter your license to remove the trial message.

You already choose to use the trail period and didn’t enter your license key? Open ‘license.properties’ in  ‘home/username/.adobe/Flex’. And add:

flexbuilder3=yourlicensekey

Or change:

flexbuilder3.displayedFirstLaunchMessage=true

to:

flexbuilder3.displayedFirstLaunchMessage=false

Restart Flex Builder and enter your license key in the launch message.