Sandman 0.2 released

Demo:
Click here to view a demo of the latest version

New features:

- download attachments
- pagination to view all mail
- some slightly improved CSS markup
- various bug fixes

Loading an image using ActionScript with a DataGrid / ItemRenderer

I didn't find any examples of this on Google on how to do this programmatically.
What I wanted to do was display a trash icon / image indicating whether an email message was deleted or not.

For your DataGridColumn:

<mx:DataGridColumn headerText="" dataField="icon" width="11" 
itemRenderer="com.sandman.view.IconRenderer" />

Now your renderer:

package com.sandman.view
{
 import mx.containers.HBox;
 import mx.controls.Image;
 
 public class IconRenderer extends HBox
 {
     private var imageReference:Image = null;
        override public function set data(value:Object):void {

         if (value.deleted && imageReference==null) {
      var img:Image = new Image();
      img.source = 'assets/icons/trash.gif';
      img.height = 10;
      img.width = 10;
      imageReference = img;
      addChild(img);
         } else if (imageReference is Image) {
          imageReference.visible = value.deleted;
         }
            
            super.invalidateDisplayList();
            
        }
 
 }
}

The above is a more flexible equivalent to the <mx:Component /> tag.

Creativity in your application

Where does creativity begin or end?

I sent a message to Sebastien asking him about what he means by creativity...

At my job, I have rarely been asked to be creative. So what is it and how can I use it? Sebastien responded to my message and posted it in the comments. I suppose my main reaction is about including subtle experience changes. Another step to take is integrating useful 3rd-party plugins or services. How about integrating Soashable for a web-based IM client (compared to GTalk)?

What people most care about for email is new email notifications. So, how can I use existing technlogies to deliver these notifications? Text messages? IM's? XMPP? RSS? The poll instead of push model of email seems to muddy how real-time these notifications could be.

Sandman Mail 0.1 released!

What is Sandman Mail?
It is a Flex-based IMAP client.

What is the goal of Sandman Mail?
To be the future replacement of Squirrelmail, Neomail, commercial alternatives, etc.

What is the license?
All the Flex code is licensed under the BSD. All the IMAP PHP code is licensed under the GPL. There are also a few libraries (mainly PEAR, AMFPHP, Cairngorm) used which have their own licenses.

Where can I download it?
Download at SourceForge

What does the initial release have?
The first release is largely focused on some very basic things:

• Connect to IMAP server
• Download mail
• Read mail
• Read different mail folders

It should be noted that this release is definitely not meant for any production use but more of a look-and-see kind of thing.

Where is the repository?
Browse SVN Repository

Is there an online demo?
For now the online demo is hosted here:
Online demo

You may login using your Gmail account or your UMN account.

To test with your Gmail account, you will need to make sure IMAP is enabled. You can enable it under Settings > Forwarding and POP/IMAP.

Are there any limitations?
A constraint has been put in place where it will only download 25 email messages per mailbox. This is mainly because I have not yet determined how I will go about doing pagination yet and I don't want to overload anyone who may try out the demo.

Extending DataGrid and more conveniant way to style a row

The listItems tends to be the most useful way for styling things. and instead of iterating through all items for each row, I instantiate MessagesDataGridRow in getRowAt():

package com.sandman.view
{
 import mx.controls.DataGrid;
 
 public class MessagesDataGrid extends DataGrid
 {
  public function MessagesDataGrid() {
   super();
  }
  
  public function getRowAt(rowIndex:int):MessagesDataGridRow {
   
   var row:* = super.listItems[rowIndex];
   return new MessagesDataGridRow(row);
  }

 }
}

MessagesDataGridRow:

package com.sandman.view
{
 public class MessagesDataGridRow
 {
  private var row:*;
  public function MessagesDataGridRow(itemRow:*) {
   row = itemRow;
  }
  
  public function setStyle(attribute:String, value:String):void {
   var length:int = row.length;
   var i:int;
   for (i=0; i<length; i++) {
    row[i].setStyle(attribute, value);
   }
  }

 }
}

Example usage:

var row:MessagesDataGridRow = yourGrid.getRowAt(3);
row.setStyle('fontWeight', 'bold');
row.setStyle('fontStyle', 'italic');

You'll likely want to modify this to suit your needs.

Random issues with Flex and Flash

1. Using setFocus or focusManager for your Flex login form to have the caret focus when the page loads:
You set your initialize method to set the focus of your TextInput. When you test in your browser it merely sets the border color of your element since your SWF doesn't yet have the focus yet.

Solution:
In your html-template directory, set the body's onload event to contain:
document.getElementById('${application}').focus()

2. Trying to print with Flex using FlexPrintJob:
So, trying to print something from the click of a button but what you're printed is created dynamically and is never actually displayed to the user? Maybe the pictures aren't loading?

Solution:
To print something that is essentially offscreen or in the background, do something like this:
<mx:canvas><somenamespace:print id="myObject" x="-20000" y="-20000" /></mx:canvas>

And the pictures that aren't loading? Well, they can't print until they're actually loaded so create a class to track when all those media objects are loaded.

3. Internet Explorer popup blocker is reloading the page and affecting the display/dimensions of symbols/movieclips inside of your SWF:
Well, in my case what was happening, we were using SWFObject and it was setting the dimensions to a size that was different then the document dimensions of the SWF itself.

Solution:
Update SWFObject to use the correct dimensions of the SWF, or re-export your SWF to use the dimensions that SWFObject is using.

4. Issues with scrolling in your Flex app on OSX:
Would be nice if I could use my scrollwheel for once. Pretty nice and crippling bug.

Solution:
OSX scrollwheel workaround for Flex 2

5. TextFormat doesn't always underline correctly in IE/Firefox/whatever
Underlining, for whatever reason can only be set using TextFormat. I found no elegant solution for this.

Solution:
Draw a line and place it under your text (ugh...).

6. Text you are getting from a webservice appears to be double spaced
When I was setting a textarea to the contents of a response from a webservice. It was peculiarly double spaced.

Solution:
It's those unix line endings. Replace all those \r\n with \n.

7. Dynamic event listener in Flex
I needed a login form to have different focus out events when someone selected a different item in a ComboBox

Solution:

private var loginKeyupProxy:Function;
private var loginKeyup:Function;
private function init():void {
    loginKeyupProxy = function(event:FocusEvent):void { loginKeyup(); };
    username.addEventListener(FocusEvent.FOCUS_OUT, loginKeyupProxy);
}

// somewhere else in your code:

loginKeyup = function() { /* do stuff */ };

Flex-o-rama

I can't make any promises about this blog. I am a web developer/student/whatever. I am currently working on a Flex-based IMAP client and use Flex at my day job.