The search field in iTunes offers exactly the functionality I was looking for, packed in Apple’s usual understated style.

Well, this was definitely a challenging task for me in terms of skinning.

However, I’m quite pleased with the result. The component looks appealing and fulfills its function.

But not only the nested skinning of the component was challenging. I ran into a lot of troubles with the positioning and sizing of all the sub-components. Especially the sizing of the DropDownList cost me some nerves. But after repeated insertion and deletion of width="100%" here and there it finally looked as desired.

If you want to see the result, check out the demo. Or if you are after the code and information on how to use the component, go to github. There is definitely room for improvements, code and design wise.

However, when I sent mails from my server (using sSMTP) with sender addresses like blog@smartcode.ch or wiki@smartcode.ch, they all arrived in my inbox with the sender address set in the ssmtp.conf file.

Read on for instructions to configure Google Apps mail service to allow some kind of alias addresses for a mail address.

First of all, login to the Google Apps administration site and create a new user, which servers as the mail account for all the aliases you create afterwards. I named mine mailer@smartcode.ch.

Next, log in to google mail with your newly created account, and open the Mail settings. Select the Accounts tab, and click the Add another email address you own link. Enter your desired mail address in the Pop-Up, go on to the Next Step and click the Send Verification button.

The verification mail is sent to your administrative account of your Google Apps account. Spot the verification code and verify the account.

If you want to make the mail alias a no-reply address, change to the Filters tab in the mail settings view, and Create a new filter.

Insert the mail alias address in the To: field and click Next Step. Select the Delete it action and create the filter.

This is all there is for the Google Apps / Mail configuration.

On the server side, configure sSMTP for your mailer account. My ssmtp.conf file looks as follow:

#
# Config file for sSMTP sendmail
#
# The person who gets all mail for userids < 1000
# Make this empty to disable rewriting.
root=
 
# The place where the mail goes. The actual machine name is required no
# MX records are consulted. Commonly mailhosts are named mail.domain.com
mailhub=smtp.gmail.com:587
 
# Where will the mail seem to come from?
rewriteDomain=
 
# The full hostname
hostname=smartcode.ch
 
UseTLS=Yes
UseSTARTTLS=YES
 
AuthUser=mailer@smartcode.ch
AuthPass=**********
 
# Are users allowed to set their own From: address?
# YES - Allow the user to specify their own From: address
# NO - Use the system generated From: address
FromLineOverride=YES

With this setup I can configure my services (e.g. DokuWiki) running on the server to send mails from any desired mail address using Google Apps.

Let me know whatever you want me to know – about the design, usability, name, etc.

I implemented my custom SkinState using the information provided, but never succeeded. There was definitely something missing, which was not obvious to me.

After some (really long) time of inspecting variables and tracing method return values, I noticed, that the getCurrentSkinState():String method return null values.

As is so often, a web search session revealed the missing piece of information. A paragraph in the Adobe Flex 4.5 docs called Implementing the component, explains in detail how to override the getCurrentSkinState():String method in order to get your custom skin state name returned properly.

You can use information in the class to determine the new view state.

override protected function getCurrentSkinState():String {
    var returnState:String = "normal";
 
    // Use information in the class to determine
    // the new view state of the skin class.
    if (_textPlacement == "left")     {
        returnState = "textLeft";
    }
    return returnState;
}

Or applied to a component with several defined states ( e.g. RadioButton) which should still work:

override protected function getCurrentSkinState():String {
 
    if( _highlight ) {
	return "highlight";
    }
 
    return super.getCurrentSkinState();
}

The spark.components.Grid offers a method

1

isCellVisible(rowIndex:int = -1, columnIndex:int = -1):Boolean

Since the spark.components.Grid represents the grid part of the spark.components.DataGrid, the method can be called as follows:

1

dataGrid.grid.isCellVisible(rowIndex);.

You can call this method in an event listener to determine if a row (element) is visible in the scroller:

1
2
3
4
5
6
7
8

dataGrid.scroller.verticalScrollBar.addEventListener(
    TrackBaseEvent.THUMB_RELEASE,updateIsItemVisible
);
 
private function updateIsItemVisible( e:Event):void
{
    var visible:Boolean = dataGrid.grid.isCellVisible( _itemIndex );
}

I’m not an expert when it comes to the point where you have to override Flex framework methods. However, if you need a custom ItemRenderer for a spark DataGrid, Flash Builder 4.5 creates a template like the following for you.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
 
   <fx:Script>
      <![CDATA[
         override public function prepare(hasBeenRecycled:Boolean):void {
	    lblData.text = data[column.dataField]
	 }
      ]]>
   </fx:Script>
 
   <s:Label id="lblData" top="9" left="7"/>
 
</s:GridItemRenderer>

But, if you specified a labelFunction for the same GridColumn this ItemRenderer is attached to, you will get an error similar to the following:

1
2

ReferenceError: Error #1069: Property null not found on data and there is no default value.
                at ch.tofuse.renderers::ResultGridItemRenderer/prepare()

The fix is simple, once you understand that the template code for the prepare method is not really safe to use in this case.

Update the prepare method to look as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
 
   <fx:Script>
      <![CDATA[
         override public function prepare(hasBeenRecycled:Boolean):void {
	   if( column.labelFunction != null ) {
	      lblData.text = column.labelFunction( data, column );
	   } else {
	      lblData.text = data[column.dataField];
	   }
	 }
      ]]>
   </fx:Script>
 
   <s:Label id="lblData" top="9" left="7"/>
 
</s:GridItemRenderer>

The result consists of a Flex interface using Zend AMF for remoting, therefore PHP as backend technology, and is available for cloning and other experiments on github.

Visit the demo page or watch the screencast to see it in action.

Objectives

I wanted a simple application to query MySQL databases. From the user perspective the interface should be simple, clean and inviting. From a technical view, I wanted to get grip on the AsyncListView collection wrapper class introduced in Flex 4 which offers data paging to handle large result sets.

Features

The query browser consists of tree which displays the information about the database, its tables and fields. Auxiliary information such as table size (rows) and field types are shown alongside.

Clicking table or field nodes creates the appropriate  SQL query. For instance, if you wish to get all data from table directors, click on the the table node and a query in the form of SELECT * FROM directorsis displayed in the query input.

This is a very simple query builder, so do not expect it to create joins or multi table statements.Queries are validated using a simple Regular Expression, which tests for presence of field and table name. Hence, queries like SELECT 1+1will not validate.

The query history drop down list offers quick access to previous queries.

Results are displayed in a simple Spark Data Grid control. However, the dataProvider for this grid is an AsyncListView wrapping a PagedList, which enables data paging for large result sets.

Watch the following screencast that demonstrates the features.

Limitations

Obviously there are a lot of limitations compared to an application like MySQL Workbench. However, I never even thought about getting there.

A remaining limitation is the query of large tables (millions of records) with non-consecutive or without a primary key. In this scenario, I never got around working with the LIMIT clause, which is a real performance killer.

All you need is a copy of a Flex 4.5 SDK, ant and a bit of courage to deal with the Terminal.

If you are not in a do-it-yourself kind of mood, you can download the Flex 4.5.1 API docs.

Basic Setup

• First of all, if you haven’t already, grab a copy of the Flex 4.5 SDK and unzip it.
  
  
• To install the sdk for use in Adobe Flash Builder, move the sdk folder to the sdks folder of your Flash Builder installation …
   

  … and rename it to something more meaningful like 4.5.0.

  

• Open the Terminal application (using Spotlight or whatever you prefer). In the Terminal window type: cd followed by a blank space.
  
• Next, open the 4.5.0 folder, drag the asdoc folder to the Terminal and hit Return.
  
• Now that we are in the right place, we are ready to build the docs. Type the following command in the terminal window:

  ant -DFLEX_HOME=../ -lib ../ant/lib/flexTasks.jar -f build.xml

  

  Please note that the process to build the API docs takes some time (almost 7 minutes on my MBP).

  If you get an error like:

  -bash: ant: command not found

  you need to install ant first. The easiest way to get ant running on your Mac is to install Xcode.

• Upon a sucessful build you will notice a new folder called asdoc-output within your sdk folder.
  
• Double click the all-classes.html file to open it in the browser.
  
  

That’s it, create a bookmark for the page and you’re ready to browse the API docs …

… OR you make your Flex developer life even easier and read on …

Advanced Setup using Quicksilver

Quicksilver is an excellent alternative to Mac OS X builtin Spotlight feature. Basically it does the same as Spotlight, but one of the additional features of Quicksilver is the ability to index HTML links within files.

As you might guess, this comes in very handy to have the API docs at your fingertips.

• Obviously you need to install Quicksilver.Some introductory information about Quicksilver is available here.
• Next, we need to convert the relative links in all-classes.html to absolute file links that open in the browser.Meaning links like this one …

  <a title="mx.containers.Accordion" href="mx/containers/Accordion.html">Accordion</a>

  … should look like this.

  <a title="mx.containers.Accordion" href="file:///Applications/Adobe%20Flash%20Builder%204.5/sdks/4.5.0/asdoc-output/mx/containers/Accordion.html">Accordion</a>

  I created a Perl script to do this …

  #!/usr/bin/perl -w
   
  use strict;
  use File::Basename;
   
  my $FILE = $ARGV[0];
  my ($FILENAME, $PATH, $SUFFIX) = fileparse($FILE, qr/\.[^.]*/);
   
  exit 0 if $SUFFIX !~ m/\.html/;
  exit 0 unless( -r $FILE && -w _ && -f _ );
   
  my $FILE_PATH_PREFIX = 'file://';
  my $CLASS_LINKS_REGEX = qr/href="(.+\.(html|css))"/;
  my @NEW_LINES = ();
   
  $PATH =~ s/\s/%20/g;
   
  open(FILE, "+< $FILE") or die "can't open $FILE: $!";
  while (defined(my $line = ) ) {
   
      if ($line =~ m/$CLASS_LINKS_REGEX/ ) {
  	    my $org = $1;
  	    my $new = $FILE_PATH_PREFIX.$PATH.$1;
       	    $line =~ s/$org/$new/;
       }
       push(@NEW_LINES, $line);
  }
  close(FILE);
   
  open(FILE, "> $FILE") or die "can't open $FILE: $!";
  print FILE @NEW_LINES;
  close(FILE);

  … and packed it as an Automator application:

  

  Drop your all-classes.html file on the application and you’re done.

• Now we need to tell Quicksilver to index the file with its content:Open the Quicksilver preferences and select Catalog.
• Select the Custom section, add a new File & Folder Scanner …
   

  … and select your prepared all-classes.html file.

• To include the HTML links in the index, open the info (marked green ) drawer, select HTML Links from the Include Contents drop-down menu and hit the refresh button (marked red).
  
• You should notice a markable increase of the indexed elements for your all-classes.html entry.
  
• Here we go – the API docs at your fingertips. Open Quicksilver and type, for example, Accord. Select the Accordion entry and you get the API for the Accordion class.
  
  

I hope everything went well. If not, please leave a comment so that I can try to assist.

Unfortunately the application is on a server within the network of the University of Zurich. Therefore I can just offer you a screen-cast that introduces some features:

• Large version (100 MB)
• Small version (5 MB)

The Flex interface intends to support the researchers involved in this project during the data mining process. Since we collected around 11 million datasets so far, I focused on the development of data filters. Here I used a lot of the components offered in the flexlib library. A big thank you to the developers.

Click image for larger size

Once the researchers found an interesting set of data they can export it to Excel files. To ensure correct formatting of the Excel output I used the pear package Spreadsheet_Excel_Writer. This package is mostly a PHP clone of the great perl module called Spreadsheet::WriteExcel.

The second core feature of the application is the visualization of the social network in the mice population that I found processing the spatial position data using several perl scripts. The visualization is based on the excellent open source library birdeye. Another big thank to these developers. To the already rich feature set I added options to filter the edges by weight and to calculate some network measures (e.g. clustering coefficient, betweeness centrality).

Click image for larger size

The application source code is available as a github repository. Since this was my first Flex project do not expect great code.

However, one thing really bugged me. Not all of the class mappings worked as expected. For some of the classes I got general objects back in my Flex application instead of the typed objects. I checked forth and back and couldn’t find any bug in my code. So I checked the web and found a solution to my problem. First of all, I recommend you to watch the screencast created by the lead developer of Zend Amf (Wade Arnold), which shows the different possiblities to set up the class mapping.

That brought me to Charles, with which I could check that the desired class type is really returned by php remote service.

As this was the case, I searched the web for some more information about the class mapping in Flex. Finally I came across this forum thread offering some ideas to make the class mapping work.

This answer in the thread helped in my situation.

I added the registration to the creationComplete handler function in my application as follow:

/**
* Creation complete handler
*/
public function build() {

	// Register remote class mapping
	registerClassAlias( "vo.PublicationVO", PublicationVO);
	registerClassAlias( "vo.MonthlyHitsVO", MonthlyHitsVO);
	registerClassAlias( "vo.DailyHits", DailyHitsVO);
	registerClassAlias( "vo.PageHitsVO", PageHitsVO);
}

… and all the class mappings worked like a charm.

The dcoumentation for the registerClassAlias(aliasName:String, classObject:Class):void method can be found here.

In my case, the problem was, that I didn’t used an instance of some of the classes in the Flex app yet, so the class was not compiled into the SWF.