Tom at the wishlisting.com blog has a comprehensive tutorial on setting up Ruby on Rails (with a load balancer and Rmagick) on a Media Temple (dv) server. He deserves praise for installing ImageMagick without a package manager, which can turn into a marathon event of yak-shaving.

Found a great set of tutorials for setting up a VPS. The tutorials focus on SliceHost but could be used on most VPS hosts that you build from scratch. The best part about the tutorials is that they don’t assume you’re a Linux geek, the first tutorial is an intro to the command line. The second best thing is that the server used is Litespeed (the OS X of the server world), you get a GUI for server management, and no messing around with a load balancer for Rails, yay!

My Flex DateChooser to JavaScript example didn’t solve my date selection problem entirely as the project I’m working on requires a project to have a start week rather than a start day. The Flex DateChooser has built in selectable ranges so it’s pretty easy to set that up (right click on swf to view source).

The Flex Ajax Bridge, which for some reason you can only download with Flex Data Services (a 150mb+ download for a 16k file), isn’t the only way to send data from Flex to JavaScript there’s also the External Interface API. I’m working on a Rails project tracker application for a construction company and need to set start and end dates for each project. To make sure dates are entered without mistakes I needed a calendar widget that I could easily drop in a form and customize. I tried out some of the Ajax libraries calendars but they where either a) hard to figure out or b) hard to customize or c) both.

I was worried the Flex solution would be a large file at 152k but was surprised to find the files needed for the best Ajax Calendar I found, the Yahoo! UI one, were double in size at 292k (js, css, and gifs). You can download the source here.

A live example is here.

Here’s the MXML code to layout the calendars:

<mx:HBox horizontalAlign="center" verticalAlign="middle" horizontalGap="10" x="0" y="0" width="375">
    <mx:VBox verticalGap="0">
        <mx:Label text="Start Date" color="#333333" fontSize="13" fontWeight="bold" width="100%" textAlign="center" height="25"/>
        <mx:DateChooser id="startDate" yearNavigationEnabled="true"
            change="setDate(DateChooser(event.target))"
            height="175" width="175"
            borderColor="#006600" borderThickness="3"
            cornerRadius="10"
            selectionColor="#99FF33"/>
    </mx:VBox>
    <mx:VBox verticalGap="0">
        <mx:Label text="End Date" color="#333333" fontSize="13" fontWeight="bold" width="100%" textAlign="center" height="25"/>
        <mx:DateChooser id="endDate" yearNavigationEnabled="true"
            change="setDate(DateChooser(event.target))"
            height="175" width="175"
            cornerRadius="10"
            borderColor="#990000" borderThickness="3"
            selectionColor="#FF9999"
            enabled="false"/>
    </mx:VBox>
</mx:HBox>

Here’s the ActionScript to validate the dates and send the data to JavaScript. ExternallInterface.call() is the method that sends the data:

import flash.external.*;
import mx.controls.Alert;

public var startDate_reset:Date     = undefined;
public var endDate_reset:Date       = undefined;

public function setDate(calendar:DateChooser) : void
{
    // start date
    if (calendar.id == "startDate")
    {
        if (endDate.enabled && endDate.selectedDate <= startDate.selectedDate)
        {
            Alert.show("Start Date must be before End Date");
            startDate.selectedDate = startDate_reset;
        }
        else
        {
            endDate.enabled = true;
            startDate_reset = startDate.selectedDate;
            setDateJS(calendar);
        }
    }
    // end date
    else
    {
        if (endDate.selectedDate <= startDate.selectedDate)
        {
            Alert.show("End Date must be after Start Date");
            endDate.selectedDate = endDate_reset;
        }
        else
        {
            endDate_reset = endDate.selectedDate;
            setDateJS(calendar);
        }
    }
}

public function setDateJS(calendar:DateChooser) : void
{
   var s:String;
   if (ExternalInterface.available)
   {
      var eventObj:Object = new Object();
      eventObj.id = calendar.id;
      eventObj.date = calendar.selectedDate;
      var wrapperFunction:String = "setDate";
      s = ExternalInterface.call(wrapperFunction, eventObj);
   }
   else
   {
      s = "Wrapper not available";
   }
}

And finally the JavaScript and markup on the page, Prototype is used to set the input values (they have ids to match their Flex counterparts):

<html>
<head>
<title>Flex to JavaScript, Calendar Example</title>
<script src="javascripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="javascripts/prototype.js" type="text/javascript"></script>
</head>
<body>

<SCRIPT LANGUAGE="JavaScript">
    function setDate(eventObj)
    {
        var date = new Date(eventObj.date);
        $(eventObj.id).value = eventObj.date.getMonth() + 1 + "/" + eventObj.date.getDate() + "/" + eventObj.date.getFullYear();
    }
</SCRIPT>

<div>
    <script type="text/javascript">
AC_FL_RunContent( ‘id‘,‘mySwf‘,‘codebase‘,‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0‘,‘height‘,‘200‘,‘width‘,‘375‘,‘name‘,‘mySwf‘,‘src‘,‘Calendar‘,‘pluginspage‘,‘http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash‘,‘flashvars‘,‘‘ ); //end AC code
</script><noscript><object id=‘mySwf‘ classid=‘clsid:D27CDB6E-AE6D-11cf-96B8-444553540000‘ codebase=‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0‘ height=‘200‘ width=‘375‘>
<param name=‘src‘ value=‘Calendar.swf‘/>
        <param name=‘flashVars‘ value=‘‘/>
        <embed name=‘mySwf‘ src=‘Calendar.swf‘ pluginspage=‘http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash‘ height=‘200‘ width=‘375‘ flashVars=‘‘/>
    </object></noscript>
</div>

<form id="dateForm" action="#" method="post">
    <p>
        Start Date: <input id="startDate" type="text" />
    </p>
    <p>
        End Date: <input id="endDate" type="text" />
    </p>
</form>

</body>
</html>

Just checked my sites stats and noticed that Google, the Ajax kings, have added some Flash spice to Google Analytics. Each technology handling what it does best, Flash as the presentation layer and Ajax as the data workhorse.

More on the analytics blog.

Flash/Flex has been blowing up lately, it’s faster growing book category for O’Reilly (via Ryan Stewart), and every Flex developer I know has projects flying at them left and right. Come on you Ajax folk you know you want some AS.

Matt MacLean (yet another Canadian ActionScripter, I swear ActionScript has to be in Canada’s top ten exports, right after soft-wood lumber) has created an ActionScript driver that connects to MySQL called asSQL (I wonder how you pronouce that [ass-kwuhl]?) :P

In Sept. 06 I set out to show someone that is was possible to connect to a mySQL server from acionscript. It took about an hour to get actionscript connecting to mySQL. I was getting a bad handshake error but if anything I proved that it could be done. That project then sat in Flex Builder until about a month ago when I started back on it. And now, a mySQL actionscript 3 driver exists.

This project is very much still in Alpha stages but neverless it is working. Writing a database driver in actionscript raises some major concerns. One of the biggest concerns to address is fact that to use an actionscript database driver you will need to make your database server publicly accessible. Another issue is where to store the server location, username’s, password’s etc.

Being able to connect straight to the DB is pretty cool!

I’ve always wondered why Adobe/Macromedia didn’t push AS on the server side more. Ruby on Rails have been trying to get Ruby to be the “one language to rule them all” with RJS etc., and now Microsoft have Silverlight which brings .NET to the client.

Adobe should hire Nicolas Cannasse of HaXe fame to create an *open source* AS3 web server (rather than just a media server than can run AS3 server side.). Then charge for add ons like FLV streaming, messaging, etc.

Looks like we’re on the verge of a rapid increase in the speed your web app can be delivered.

Comcast CEO Shows Off Super Quick Modem

Comcast Corp. Chief Executive Brian Roberts dazzled a cable industry audience Tuesday, showing off for the first time in public new technology that enabled a data download speed of 150 megabits per second, or roughly 25 times faster than today’s standard cable modems.

The cost of modems that would support the technology, called “channel bonding,” is “not that dissimilar to modems today,” he told The Associated Press after a demonstration at The Cable Show. It could be available “within less than a couple years,” he said.

The new cable technology is crucial because the industry is competing with a speedy new offering called FiOS, a TV and Internet service that Verizon Communications Inc. is selling over a new fiber-optic network. The top speed currently available through FiOS is 50 megabits per second, but the network is already capable of providing 100 Mbps and the fiber lines offer nearly unlimited potential.

Yahoo! has released a beta version of their web messenger. Mike Potter of Adobe gets in a shot at Silverlight over Yahoo!’s choice of Flex over WPF/Silverlight:

Of course, the application release comes hot on the heels of Michael Arrington saying that Silverlight from Microsoft was going to make “Flash/ Flex look like an absolute toy”. Apparently that wasn’t too accurate, because the Yahoo Messenger team chose Flex for the web UI, despite the fact that they have already been working on a WPF version of Messenger for Vista.

That WPF version may see the light of day again if Microsoft buys Yahoo!.

The majority of work I do is Flash/Flex and Rails so ActiveRecord, which is the M in the Rails MVC, is really the only part of Rails I use. I’ve always wished I could get ‘Rails Lite’ (In this case Camping doesn’t count) and just use ActiveRecord to pass data back and forth. My wish has come true as I found out about RubyAMF (via FlexOnRails). RubyAMF and a database are all you need to use Flash Remoting with Ruby as RubyAMF has it’s own servlet or can integrate with Apache or Lighttpd.

But what if you don’t use Ruby? ActiveRecord is a pattern and not language specific. I’ve been doing some research on a PHP ActiveRecord solution for Flash Remoting because of the speed increases that are possible with AMFPHP 2.0. PHP Doctrine was the closest PHP ActiveRecord implementation I could find to the one in Rails. However, the future of AMFPHP is now up in the air as Patrick Minnault is retiring as a programmer to become a Neuro Scientist! I always knew he was too smart to be a programmer, actually he still supports the NDP in Canada so he can’t be that bright :P

I’m sure WebORB for PHP could be used with PHP Doctrine, maybe if I wish hard enough someone will figure it out for me.