Mar 24 2008

HotRuby – Ruby for Flash and JavaScript

Tag: Flex, Ruby, hotruby, iron monkeyDerek Wischusen @ 2:19 am

It looks like there is another project, in addition to IronMonkey (which I wrote about in a previous post), that is looking to bring Ruby support to Flash/Flex (and JavaScript).

HotRuby is a Ruby VM, which is written in JavaScript, that runs opcode that is compiled by YARV (the VM that is used in Ruby 1.9). 

Using HotRuby it is possible to use straight Ruby to build a Flash app.  Here are a couple Flash examples from the HotRuby website:

You can grab the source files for HotRuby from the Google Project site.


Feb 18 2008

Integrating Flex and RabbitMQ using STOMP

Tag: Flex, Messaging, RabbitMQ, STOMPDerek Wischusen @ 12:21 am

An experimental STOMP adapter was recently released for RabbitMQ. This means that it is now possible for Flex/Flash apps to communicate with RabbitMQ using the ActionScript 3 STOMP client. The following is a simple demonstration of how to get these technologies to work together.

First, let’s start with a quick description of RabbitMQ and STOMP.

RabbitMQ:

RabbitMQ is a complete and highly reliable Enterprise Messaging system. The RabbitMQ client libraries and broker daemon can be used together to create an AMQP network, or used individually to bring the benefits of RabbitMQ to established networks.

Packages/installers are available for all major operating systems and platforms. RabbitMQ can also be deployed as a VMWare/Debian virtual appliance.

Features:

* A complete, conformant and interoperable implementation of the published AMQP specification
* Based on a proven platform, offering exceptionally high reliability, availability and scalability
* Good throughput and latency performance that is predictable and consistent
* Compact, easily maintainable code base, for rapid customisation and hot deployment
* Extensive facilities for management, monitoring, control and debugging
* Licensed under the open source Mozilla Public License

STOMP:

The Stomp project is the Streaming Text Orientated Messaging Protocol site (or the Protocol Briefly Known as TTMP and Represented by the symbol :ttmp).

Stomp provides an interoperable wire format so that any of the available Stomp Clients can communicate with any Stomp Message Broker to provide easy and widespread messaging interop among languages, platforms and brokers.

As you can see from its description, the primary protocol that RabbitMQ uses is AMQP. If you’d like to learn more about AMQP, then check out this site.

There is an ActionScript 3 client for AMQP that is being developed by Ben Hood. You can read more about this client and learn how to use it by checking out this post on Ben’s site.

Alright, let’s get started with the example of how to use as3-stomp client with RabbitMQ.

1. Follow the steps in this tutorial to get RabbitMQ running with the STOMP adapter.

2. Download the project files for the Flex app.

This project consists of two separate Applications: the ImageSender and the ImageReceiver. The project file also contains the compiled as3-stomp library, so you do not need to download it separately.

3. Import the project into Flex Builder. (This step is optional. Alternatively you could unzip the project file and run the apps by opening the ImageSender.html file and the ImageReceiver.html file in the bin-debug folder.)

4. Launch both applications.

Before we proceed let’s take a quick look at what happened when we launched the apps.

Both apps have an init method that gets called when the application first the creationComplete event. Here is what this method looks like in the ImageSender app:

private function init () : void
{
    var ch: ConnectHeaders = new ConnectHeaders();
    ch.login = "guest";
    ch.passcode = "guest"
    stomp.connect("localhost", 61613, ch);
}

In this code we create a ConnectHeaders object that we use to set the login and passcode for this session. By default, RabbitMQ creates a user called “guest” with password “guest”. We then call connect on the stomp client. The stomp client was instantiated using an MXML tag like so,

<stomp:Stomp id="stomp"  />

The code for the init method in the ImageReceiver app looks pretty much the same except that it contains one more line.


private var destination: String = "/queue/images";

private function init () : void
{
    var ch: ConnectHeaders = new ConnectHeaders();
    ch.login = "guest";
    ch.passcode = "guest"
    stomp.connect("localhost", 61613, ch);
    stomp.subscribe( destination );
}

On the final line in the init method we call the subscribe method on the stomp client. By calling this method we tell the stomp broker (RabbitMQ in this case) that we want to consume messages that are sent to this destination.

The code where we instantiate the stomp client in the ImageReceiver is also pretty much the same as it is in the ImageSender,

<stomp:Stomp id="stomp" message="handleMessages(event)"  />

The only difference is that we set message event property so that every time a message event is fired the handleMessages method gets called.

Ok, back to the demo.

5. Go to the ImageSender app and click the Images button.

6. Select an image from the list and use the mouse cursor to draw some lines on the image.

Stomp Image Share ImageSender

7. Click Send Image.

8. Go to the ImageReceiver app and you should see the image that you sent.

Stomp Image Share ImageSender

Ok, back to the code. When you clicked the Send Image button the sendImage method was called,

private function sendImage():void
{
    var image: ByteArray = ImageSnapshot.captureImage(canvas).data;
    stomp.send(destination, image);
}

In this method we use the ImageCapture class (FYI: this class is only available in Flex 3) to capture the image data from that canvas that contains our image and store it in a ByteArray. We then call send on the stomp client to send this data to the “/queue/images” destination.

RabbitMQ receives this message and sends it along to any consumer that are subscribed to this destination, including our ImageReceiver app.

When the stomp client in the ImageReceiver receives the message it fires a message event and calls the handleMessage method.

private function handleMessages(event : MessageEvent) : void
{
    var bd: BitmapData = new BitmapData(canvas.width, canvas.height);
    var loader : flash.display.Loader = new flash.display.Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBytesLoaded);
    loader.loadBytes(event.message.body);
    function onBytesLoaded (event : Event) : void
    {
        var content : DisplayObject = LoaderInfo( event.target ).content;
        bd.draw( content );
        canvas.graphics.beginBitmapFill(bd);
        canvas.graphics.drawRect(0,0, canvas.width, canvas.height);
        canvas.graphics.endFill();
    }
}

This method grabs the body of the message (which is the ByteArray containing the image data) and draws it on to a canvas.

That’s it. As always, let me know if you have any questions. And if you encounter any bugs that appear to be in the as3-stomp client, please submit a report here.


Feb 11 2008

Server push with Ruby on Rails using Flex, JRuby, and BlazeDS

Tag: ActiveMQ, ActiveMessaging, Flex, Flex and Rails, JRuby, Messaging, Server Push, blazedsDerek Wischusen @ 5:32 am

In a previous post I discussed how you can integrate Flex and Scala/Lift using BlazeDS.  In this post I’ll show that it’s also possible to get Rails running on BlazeDS using JRuby.

Here is what I am using for this example:

You don’t really need Netbeans, but I’ve found that it makes things a bit easier.

For this example I am going to assume you have a basic understanding of Flex and Rails.  That said, if anyone has a question, not matter how basic, please feel free to ask.

Here are the source files if you want to follow along:

—– 

Ok, first lets get the Rails app set up.

1. Create a new Rails app called RoRBlaze.

2. Generate a controller called Greeting with an index view.  i.e.,

> ruby script/generate controller Greeting index

3.  Open up your newly generated greeting.rb file and add the following code:

class GreetingController < ApplicationController
  include Java
  import "flex.messaging.MessageBroker"
  import "flex.messaging.messages.AsyncMessage"
  import "flex.messaging.util.UUIDUtils"

  @@msgBroker = MessageBroker.getMessageBroker(nil)
  @@clientID = UUIDUtils.createUUID()

  def hello
    @msg = AsyncMessage.new()
    @msg.setDestination("notifications")
    @msg.setClientId(@@clientID)
    @msg.setMessageId(UUIDUtils.createUUID())
    @msg.setTimestamp(Time.new.to_f)
    @msg.setBody("Hello from Rails")
    @@msgBroker.routeMessageToService(@msg, nil)
    render :text => "Greeting Sent"
  end
end

4. Open view/greeting/index.rhtml and add a button to it like so,

<%=button_to "Send Greeting to Flex", :action=>"hello" %>

5. Go to the BlazeDS folder and  locate the following two .jar files in tomcat\webapps\blazeds\WEB-INF\lib:

  • flex-messaging-common.jar
  • flex-messaging-core.jar

6. Copy these .jar files into the lib folder in your Rails app (keep this folder open, you’ll need the more of the .jars in a moment).

7. In your Rails app open up config/environment.rb and add the following to the bottom of the file:

Dir["#{RAILS_ROOT}/lib/**/*.jar"].each do |jar|
  require jar
end

Alright, thats pretty much all of the Ruby code for this simple example.  Now we need to use the Goldspike Rails plugin to modify our Rails app so that it can run in a Java server (like Tomcat or Jetty or Glassfish, etc)

8.  From a command line, go to the root of your Rails app and install the Goldspike plugin:

> ruby script/plugin install http://jruby-extras.rubyforge.org/svn/trunk/rails-integration/plugins/goldspike

9. WARify you Rails app using the following rake command:

> rake war:standalone:create

Assuming that Goldspike did its job, you should now have a folder called WEB-INF in the root of you Rails app.  We need to add a few file to this folder to get BlazeDS working.

10. Copy the .jars from BlazeDS\tomcat\webapps\blazeds\WEB-INF\lib into RoRBlaze\WEB-INF\lib

11. Copy the folder BlazeDS\tomcat\webapps\blazeds\WEB-INF\flex into RoRBlaze\WEB-INF

12. Open up the web.xml file in blazeds\WEB-INF and merges its contents into the web.xml file in RoRBlaze\WEB-INF.  Click here to see what the final file should look like.

13. Open up RoRBlaze\WEB-INF\flex\messaging-config.xml and modify it so that it looks like this (click to view the file).  The key thing to note here is that we added a messaging destination called “notifications”.  This is the destination that the Greeting controller publishes to and it is the destination that our Flex app will subscribe to.

14. Open up RoRBlaze\WEB-INF\flex\services-config.xml and modify it so that it looks like this (click to view the file).  The key thing to notice in this file is that we defined a streaming channel called my-streaming-amf that BlazeDS will use to push messages over a persistent, streaming HTTP channel.

That’s it for the Rails app.  Now let’s create the Flex app.

—–

1. Create a new Flex Project (File -> New -> Flex Project)

2. Fill in the rest as follows:

  • Project name: RoRBlaze
  • Application type: Web Application
  • Application server type: J2EE
  • Use remote object access service: check this
  • Root folder: RoRBlaze  (the root folder of your Rails app)
  • Root URL: http://localhost:8080/RoRBlaze/
  • Context root: /RoRBlaze
  • Output folder: RoRBlaze\public
  • Output folder URL: http://localhost:8080/RoRBlaze

3. Open up RoRBlaze.mxml and edit it like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical"
	creationComplete="consumer.subscribe()">

    <mx:Script>
        <![CDATA[
          	import mx.messaging.events.MessageEvent;

            private function messageHandler(message: MessageEvent): void
            {
                pushedMessage.text = message.message.body as String;
            }
        ]]>
    </mx:Script>

    <mx:Consumer
    	id="consumer"
    	destination="notifications"
    	message="messageHandler(event)"
    	channelConnect="trace(event)"
        channelFault="trace(event)"
        fault="trace(event)" />

    <mx:TextInput id="pushedMessage" width="300"/>
</mx:Application>

That’s it for the Flex app.  Let’s test everything out.

—–

1. Open a terminal and go to the root of your Rails app.  Then use Goldspike to boot up your Rails app in a Jetty server:

> rake war:standalone:run

In a few short seconds your Rails app should  be up and running.

2. Launch the Flex app.

3.  Open a browser and enter the following URL: http://localhost:8080/RoRBlaze/greeting

You should see a single button that says “Send Greeting to Flex”

4. Click the button.

Upon clicking the button you should see the browser display “Greeting Sent” and you should see “Hello from Rails” appear in the text input in your Flex app.

That’s it.  Assuming that everything worked properly, the Rails app should have pushed an AMF encoded message to Flex using a persistent streaming HTTP channel created by BlazeDS.

One importatant thing to take note off is that this technique could be useful to you even if you aren’t planning on using Flex/Flash as your presentation layer.  You could use a Juggernaut style approach and push messages from Rails to an embedded Flash player whose only job is to pass those messages along to the browser.

This example demonstrates a very simple way to integrate Flex, Rails, and BlazeDS.  I think the ideal way to integrate these technologies would be to use the ActiveMessaging plugin for Rails, since both ActiveMessaging and BlazeDS have JMS adapters which they could use to integrate with a more robust messaging system like ActiveMQ.  If I can find some time in the near future, and if there is any interest, I’ll do a follow up post on this.


Jan 24 2008

We need a package manager like RubyGems for distributing Flex components – Revisited

Tag: AS3, ActionScript, Flex, Ruby, maven, package manager, sproutsDerek Wischusen @ 6:31 am

About a year ago I wrote a post about how the Flex/As3 community needs a package manager like RubyGems for managing libraries and components.

Well, I have some good news. Recently I’ve learned about two potential solutions to this problem.

The first I learned about from a comment on the original post by Luke Bayes. Here is an excerpt:

I’ve been working on ’sprouts’ for the past year and finally landed on an architecture that actually sits on top of Rubygems for package management. Even though we have a functional pre-alpha in the wild right now, we expect to release a production-ready build before the end of January 2008 that will really support versioning via Rubygems the repository.

Check it out: http://www.projectsprouts.org

The second potential solution is a Flex plugin for Maven. It appears that it is still under development, but it looks promising. You can check it out here.


Jan 24 2008

Integrating Flex, BlazeDS, and Scala/Lift

Tag: AMF, Flex, Remoting, Server Push, blazeds, lift, scala, tutorialDerek Wischusen @ 6:00 am

A short while ago Adobe announced that they would be releasing an open source version of LiveCycle Data Services called BlazeDS. In short, BlazeDS is Java technology that makes it really easy to do HTTP streaming and server-side push to Flex and AIR applications. While this announcement is definitely welcome news, there may be a lot of people out there who thought to themselves, “That’s great, but I don’t use Java.” Well, the good news is that just because BlazeDS uses Java the platform doesn’t mean that you necessarily need to use Java the language to take advantage of it.

In fact, Java the platform supports several different languages, including Groovy, Python, Ruby, and Scala. And, of course, ColdFusion. In theory, it should be pretty straight-forward to integrate any of these languages with BlazeDS.

For the rest of this post I am going to focus on just one of them, Scala. Why Scala? Well, it is because recently I decided that I wanted to broaden my programming language horizons and I’ve found that Scala is both extremely interesting and very powerful. It’s both object-oriented and functional, it has mixin style composition, it has an exceptional implementation of Erlang style Actors for handling concurrency, and much more. Lastly, and perhaps most important for my purposes, there is an excellent webapp framework for Scala called Lift.

All right, let’s get started with integrating Flex, BlazeDS, and Scala/Lift.

Prerequisites – latest versions of:

—–

If you’d like to follow along with source files, here they are.

Source Code:

—–

First, let’s create a Lift project named LiftBlaze:

1. Open a terminal and navigate to the directory where you want to create the project.

2. Enter the following command:

mvn archetype:create -U                                    \
-DarchetypeGroupId=net.liftweb                             \
-DarchetypeArtifactId=lift-archetype-blank                 \
-DarchetypeVersion=0.4                                     \
-DremoteRepositories=http://scala-tools.org/repo-releases  \
-DgroupId=org.rxr.liftblaze -DartifactId=liftblaze

3. Next enter:

cd liftblaze

4. Lastly, enter:

mvn jetty:run

If everything worked properly, then you should see a “Hello World” welcome page at http://localhost:8080/

—–

Next, let’s use Maven to create an eclipse project for us:

1. In a terminal, go to lift linkblaze project and enter:

mvn eclipse:eclipse

You should now be able to import the linkblaze project into Eclipse. Once you have the project imported you will need to add the BlazeDS jars to your build path. These jars are located in {blazeds_folder}\tomcat\webapps\blazeds\WEB-INF\lib.

—–

Now let’s start setting up the Lift project to work with Flex and BlazeDS.

1. Open the web.xml file located in {blazeds_folder}\tomcat\webapps\blazeds\WEB-INF

2. Open the web.xml file located in liftblaze\src\main\webapp\WEB-INF.

3. Copy the contents of the web.xml file from the BlazeDS folder into the web.xml file in the liftblaze Lift project.

At this point, it would be useful to talk a bit about how lift handles HTTP requests. Lift is a view first framework. What this means is that by default lift will try to match an HTTP request against one its views. If it finds one it will do some processing on it, and then render it our as HTML. For more info on how Lift handles HTTP requests, check out this page.

For this project, the entire view is going to be in Flex, so we don’t really Lift want to concerned about the view we just want it to handle our web service calls. To achieve this do the following:

4. Inside you newly merged web.xml file, modify the filter-mapping tag like so:

<filter-mapping>
  <filter-name>LiftFilter</filter-name>
  <url-pattern>/webservices/*</url-pattern>
</filter-mapping>

Now Lift will only handle requests that start with webservices. In a later step we will tell Lift how to route these calls so that they invoke methods on a class that we will define.
5. Copy {blazeds_folder}\tomcat\webapps\blazeds\WEB-INF\flex into liftblaze\src\main\webapp\WEB-INF

6. Inside the flex folder, open the messaging-config.xml file and add the following:

 <destination id="notifications">
     <channels>
         <channel ref="my-streaming-amf"/>
     </channels>
 </destination>

This is the messaging destination that our Lift app will publish to and that our Flex app will subscribe to.

—–

All right, let’s start adding some Scala code to our lift project.

1. In Eclipse, create a package called org.rxr.liftblaze.actor

2. In this package, create a Scala Class called Notifier and add the following code to it:

package org.rxr.liftblaze.actor;

import flex.messaging.MessageBroker
import flex.messaging.messages.AsyncMessage
import flex.messaging.util.UUIDUtils
import scala.actors._
import scala.actors.Actor._
import compat.Platform._
import net.liftweb.util._
import org.rxr.liftblaze.model.Notification

class Notifier extends Actor {

  val msgBroker = MessageBroker.getMessageBroker(null)
  val clientID = UUIDUtils.createUUID()
  val msg = new AsyncMessage() 

  var notificationsSent = 0;

  def act{

    ActorPing.schedule(this, Notify, 500L)

    loop {
      react {

        case Notify =>
          msg.setDestination("notifications")
          msg.setClientId(clientID)
          msg.setMessageId(UUIDUtils.createUUID())
          msg.setTimestamp(currentTime)
          msg.setBody(new Notification(notificationsSent, "Hello from Scala/Lift", new java.util.Date()))
          msgBroker.routeMessageToService(msg, null)
          notificationsSent+=1
          println("notification sent at " + currentTime)
          ActorPing.schedule(this, Notify, 500L)       

        case "stop" =>
          exit()
      }
    }
  }

}

case object Notify

This is class that does the majority of the work in this simple application. The first thing to note about it is that it is a Scala Actor. I don’t want to go into too much detail about Actors here. For this tutorial we can grossly oversimplify and say that an Actor is kind of like a thread that can send and receive messages. If you want to get the full story you can click on the preceding link.

Here is a very brief explanation of what is happening in this class. When the Notifier Actor is started (you’ll see where this happens later) the act method is called. The first thing inside the act method is a call to the ActorPing.schedule helper method. This method basically says that I want to send a Notify message to this Actor in 500 milliseconds. Next comes loop which simply creates a loop and then react which has case statements that are used to handle incoming messages. So, when react receives a Notify or a “stop” message all of the code for that case is executed.

When a Notify is received a message is published to the “notifications” destination that we created earlier in the message-config.xml file. Once the message is sent, there is another call to ActorPing.schedule which will send another Notify message in 500 milliseconds. So, until a “stop” method is received, the Notifier Actor will publish a notification every 500 milliseconds.

The body of the message that is being published is a custom Scala class called Notification. One of the benefits of BlazeDS is that you can use the AMF protocol to send strongly typed objects from the server to your Flex client. So I can have BlazeDS serialize my Notification class in Lift down into AMF binary and then have it reappear as a Notification class in Flex, which is pretty handy. Though I have found that there is one small trick to creating classes in Scala that will serialize properly. To illustrate, let’s create the Notification class next.

3. Create a Scala Class named Notification in 0rg.rxr.liftblaze.model and add the following code,

package org.rxr.liftblaze.model

import java.util.Date

class Notification(var id: Int, var message: String, var timesent: Date)
{
    def getId = id
    def setId(id: Int) = this.id = id

    def getMessage = message
    def setMessage(m: String) = message = m

    def getTimesent = timesent
    def setTimesent(t: Date) = timesent = t
}

The main thing to take note of here is that I am using methods that are named like Java (the language) getters and setters, rather than variables. This is because the Scala compiler takes variables defined in Scala and turns them into methods in Java. So,

val greeting = "Hello"

in Scala becomes

public String greeting()
{
  return "Hello"
}

in Java. The same goes for var (FYI, vals are immutable variables, while vars are mutable). So, member variables in Scala won’t serialized by BlazeDS because they turn into methods in Java. The solution, as I have already shown, is just to use methods in Scala that are named like Java getters and setters.

Now that we’ve seen who is sending the messages in Lift (the Notifier Actor) and what is being sent (the Notification class), let’s create the class that starts and stops the Notifier.

4. In org.rxr.liftblaze.controller create a Scala Class called WebServices and then add the following code

package org.rxr.liftblaze.controller

import net.liftweb.http._
import javax.servlet.http.{HttpServlet, HttpServletRequest , HttpServletResponse, HttpSession}
import org.rxr.liftblaze.actor.Notifier

class WebServices (val request: RequestState,val httpRequest: HttpServletRequest) extends SimpleController {

  def start_feed = {
    WebServices.notifier.start()
    XmlResponse(<start_feed success="true"/>)
  }

  def stop_feed = {
    WebServices.notifier ! "stop"
    XmlResponse(<stop_feed success="true"/>)
  }
}

object WebServices {
  val notifier = new Notifier()
}

This is class is pretty much self explanatory. The start_feed method calls start on our Notifier Actor, which as we discussed causes the Notifier to send out a Notification every 500 milliseconds. The stop_feed method sends a “stop” message to the Notifier, which causes it to exit. Both methods return a simple XML response.

We’re almost done with the Lift app, just one more thing to do. In a previous step we modified the web.xml file so that Lift would only handle requests that start with webservices. Now we just need to tell Lift how to process/route those request so that they call the method in our WebServices class. To do this we need to modify the Boot class.

5. Open the Boot class located in bootstrap.liftweb and modify it thusly

package bootstrap.liftweb

import net.liftweb.util._
import net.liftweb.http._
import Helpers._
import org.rxr.liftblaze.controller.WebServices
import javax.servlet.http.{HttpServlet, HttpServletRequest , HttpServletResponse, HttpSession}

/**
  * A class that's instantiated early and run.  It allows the application
  * to modify lift's environment
  */
class Boot {
  def boot {

    val dispatcher: LiftServlet.DispatchPf = {
     // if it's a web service, pass it to the web services invoker
     case RequestMatcher(r, ParsePath("webservices" :: c :: _, _,_),_, _) => invokeWebService(r, c)
    }
    LiftServlet.addDispatchBefore(dispatcher)

  }

  private def invokeWebService(request: RequestState, methodName: String)(req: HttpServletRequest): Can[ResponseIt] =
    createInvoker(methodName, new WebServices(request, req)).flatMap(_() match {
    case Full(ret: ResponseIt) => Full(ret)
    case _ => Empty
  })
}

This code is taken directly from the examples included with the Lift source code. In Basic terms, this code matches a request that starts with webservices and passes the request and method name to be invoked to the invokeWebService method. This method the calls createInvoker which invokes the method on our WebServices class. So, for example http://localhost:8080/webservices/start_feed would call the start_feed method on the WebServices class. You can read more about how this code works here.

That’s it for the Lift App. All in all there really isn’t that much code. Though, of course, this app is pretty simple. Regardless of how simple this app is, I would say that in the short time that I have been using Scala I have found it to be the most concise statically typed language that I have ever used.

—–

Now let’s create the Flex App in Flex Builder.

1. Create a new Flex Project (File -> New -> Flex Project)

2. Fill in the rest as follows:

Project name: LiftBlaze

Application type: Web Application

Application server type: J2EE

Use remote object access service: check this

Root folder: {liftblaze_lift_app}\src\main\webapp

Root URL: http://localhost:8080/

Context root: /

Output folder: {liftblaze_lift_app}\src\main\webapp

Output folder URL: http://localhost:8080/

3. Once you have everything filled out, click Finish

All right, now that we have the project created let’s add some code to it.

4. Open LiftBlaze.mxml and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" >
    <mx:Script>
        <![CDATA[
        	import org.rxr.liftblaze.model.Notification;
          	import mx.messaging.events.MessageEvent;

            private function messageHandler(message: MessageEvent): void
            {
            	var notification : Notification = message.message.body as Notification;
                pushedValue.htmlText = "<b>id:</b> " + notification.id + " <b>Date:</b> " + notification.timesent;
            }    

        ]]>
    </mx:Script>

    <mx:Consumer
    	id="consumer"
    	destination="notifications"
    	message="messageHandler(event)"
    	channelConnect="trace(event)"
        channelFault="trace(event)"
        fault="trace(event)" />

    <mx:HTTPService
    	id="startFeed"
    	url="webservices/start_feed"
    	result="consumer.subscribe()" />
    <mx:HTTPService
    	id="stopFeed"
    	url="webservices/stop_feed"
    	result="consumer.unsubscribe()" />

 	<mx:Button
 		label="Subscribe to 'notifications'"
 		click="startFeed.send({stop_cache: new Date().getMilliseconds()})"
 		enabled="{!consumer.subscribed}"/>

	<mx:Button
		label="Unsubscribe from 'notifications'"
		click="stopFeed.send({stop_cache: new Date().getMilliseconds()})"
		enabled="{consumer.subscribed}"/>

    <mx:TextInput id="pushedValue" width="300"/>
</mx:Application>

What we’ve create here is an app that has a very simple UI that consists of two buttons and a text input field. The app also has two HTTPServices and Consumer. A couple of things to take note of here. First, the Consumer subscribes to the “notifications” destination, the same destination that our Notifier Actor publishes its messages to. Second, the HTTPServices make calls to webservices/start_feed and webservices/stop_feed. If you’ll recall we set up our Lift app so that these calls would be routed to invoke the methods in our WebServices class.

We just need to add one last piece of code to get everything working properly. In our Lift app the Notifier Actor sends out instances of the Notification class that we created. Now we need to create a corresponding Notification class in our Flex app so that when we receive the data in Flex it will show up as strongly typed class.

5. Create a Class named Notification in org.rxr.liftblaze.model and add the following code

 package org.rxr.liftblaze.model
{
    [Bindable]
    [RemoteClass(alias="org.rxr.liftblaze.model.Notification")]
    public class Notification
    {
        public var id : int;
        public var timesent : Date;
        public var message: String;

        public function Notification()
        {
            super();
        }

    }
}

You’ll notice that this class has the same attributes as the Scala Notification class in our Lift app. The key to mapping this class to our Scala class is the RemoteClass metadata tag located just above the class definition. This tag is used to tell Flex the fully qualified name of the server side class that this class maps to.

—–

That should be it. You now be able to boot up you Lift app, launch the Flex app, click the “Subscribe to ‘notifications’” to start the Notifier Actor and subscribe to the Consumer to the notifications destination. You should then see id number and the time in the text input field get automatically updated every 0.5 seconds. You can the click the “Unsubscribe from ‘notifications’” to stop the Notifier actor and the Consumer to unsubscribe from the notifications destination.

Pretty exciting. With these three technologies it’s really easy to automatically push data from the server to the client in real time. This is obviously a trivial example, but I think it should be relatively straight forward to scale this approach up for more sophisticated apps.

That wraps this up. Please let me know if you have any questions.


Sep 19 2007

FunFX – A Ruby based automated testing framework for Flex

Tag: Flex, Ruby, TDD, TestingDerek Wischusen @ 4:31 pm

During the development of a large-scale (or even a medium-scale) Flex application it is very likely that you will quickly reach a point where manually testing your interface becomes impractical. This is where Flex’s automation framework comes into play. It makes it possible to simulate user level interactions in your Flex interfaces. So, you can write a script that performs a series of interactions (e.g., click this button, fill out this form, click here, click there, and so on) and then automatically run that script, and any others, with the rest of your tests. Pretty nice, right? Well, there is one potential problem; until recently there was only one existing solution that worked with Flex’s automation framework, and it is pretty expensive. Fortunately, there is now another option.

FunFX is a free, open source framework, developed by Peter Motzfeldt, that makes it possible to take advantage of Flex’s automation framework using test scripts written in Ruby. It is still relatively early in its development, but as you can see in this tutorial video, it already has some pretty impressive functionality. FunFX is packaged as a Ruby gem. I was unable to install it via the normal gem install route, so for now it looks like you’ll have to download it from here and do a local install.

CREDITS:

I came across this gem via Aslak Hellesoy’s blog (who, incidentally, just gave a well received tutorial on using Flex and Rails at RailsConf Europe).


Aug 07 2007

method_missing in ActionScript 3/Flex

Tag: AS3, ActionScript, Flex, RubyDerek Wischusen @ 2:05 am

method_missing is one of the small bits of Ruby magic that can be used to some really amazing things when used properly, and some really dangerous things when used improperly. Rails dynamic finders are good example of the amazing things that you can do. Here are some others.

It is possible to implement something like method_missing in AS3 using the Proxy class. Here is a relatively simplistic example:

import flash.utils.Proxy;
import flash.utils.flash_proxy;
 
dynamic public class BaseProxy extends Proxy
{     
	flash_proxy override function callProperty(method: *, ...args): * {
	   try { 		 
	   var clazz : Class = getDefinitionByName(getQualifiedClassName(this)) as Class;
	    return clazz.prototype[method].apply(method, args);
	   }
	   catch (e : Error) {
		return methodMissing (method, args);
	   }
 
	}
 
	protected function methodMissing(method : *, args : Array) : Object{
		throw( new Error("Method Missing"));
	}
}

The callProperty method is called whenever an undefined method is called on an instance of this class, or any instance of class that extends this class. In the try block we check if the method was defined on the prototype. If it is not found there, we call methodMissing.

So, now if we create another class that extends this one like so

public dynamic class Model extends BaseProxy
{
	public function myMethod (arg1 : String, arg2 : Boolean) : String {
		return arg1 + " " + arg2;
	}
}

and then run the following trace statements

import flash.display.Sprite;
 
public class MethodMissingExample extends Sprite
{
	public function MethodMissingExample()
	{
		var m : Model =  new Model();
 
		Model.prototype.runtimeMethod = function (date : Date) : String {
			return "I was defined at runtime at " + date.toLocaleTimeString();
		};
 
		trace(m.myMethod("I exist", true));
                trace(m.runtimeMethod(new Date()));
		trace(m.someMethod(0, false, "x"));
	}
}

You will see the following in the console:

I exist true
I was defined at runtime at 09:58:00 PM
Error: Method Missing

The first call succeeds because myMethod is defined. someMethod is not defined, so a Method Missing error gets thrown.

Now, if we override the missingMethod in the Model class like so,

public dynamic class Model extends BaseProxy
{
	public function myMethod (arg1 : String, arg2 : Boolean) : String {
		return arg1 + " " + arg2;
	}
 
	override protected function methodMissing(method : *, args : Array) : Object {
		return "You called " + method + " with " + args.toString();
	}
}

and run the same trace statements you will see the following in the console:

I exist true
I was defined at runtime at 09:58:00 PM
You called someMethod with 0,false,x

Jun 19 2007

Lightweight server push with Rails and AIR

Tag: AIR, Apollo, Flex, RailsDerek Wischusen @ 2:30 am

Alex MacCaw has posted a really nice example of how his Juggernaut plugin for server-side push can be used with Adobe’s AIR (formerly Apollo) runtime to create a simple chat application.


Apr 29 2007

Extending Apollo with Ruby using RubyAMF

Tag: Apollo, Flex, Ruby, RubyAMFDerek Wischusen @ 3:08 am

At the end of my last post about RubyAMF I mentioned that I was particularly interested in how it could be used to extend Apollo applications using Ruby in the same way that Artemis makes it possible to extend Apollo with Java.

Here’s why:

  • It enables AMF3 communication between Flex and Ruby.
  • It comes with its own webrick servlet, so deploying RubyAMF is dead simple (if you have Ruby installed).
  • It’s small: less than 300k. So it’s a quick download.

Here’s an example:

I put together a very simple demo app that uses RubyAMF to extend Apollo. I am calling the app Clairify (because everything needs a name). Clairify allows you to take a screenshot of whatever is underneath it, mark it up with some simple drawing tools and text boxes, and then save it to disk. The concept behind Clairify is that you could use it to quickly provide feedback on an application’s UI.

It would take several steps and downloads for many people to run the app, so I’ve put together a short video.

Here is a quick overview of what is going on in the video:

  1. I launch Clairify.
  2. When Clairify launches all you see are the controls. The rest of the app is transparent.
  3. I then bring up the interface that I want to capture (the login screen of my simple issue tracker).
  4. I click the capture button. This calls code in Ruby (see below) that captures the screen and saves the image to a PNG that Apollo loads.
  5. I add some comments to screen.
  6. I click save, which uses Apollo’s File API to save the marked up image to my desktop as PNG.
  7. I open up the PNG in Fireworks.

Click here to view the video.

If you want to take a look at the Apollo source code, click here. (If you really want to know how to run this on your own machine let me know and I will put together some instructions).

And, here is the Ruby code:

require 'win32screenshot'
require 'RMagick'
include Magick

class CaptureService
  def screenCapture
    width, height, bitmap = Win32::Screenshot.desktop
    img_lst = ImageList.new
    img_lst.from_blob(bitmap)
    img_lst.write('public/screen.png')
    true
  end
end

Credits:
Clairify is based on the ScreenPlay app that is avalable on Adobe Labs.


Apr 29 2007

RubyAMF – an open source AMF gateway for Flex/Flash remoting with Ruby

Tag: Flex, Rails, RubyAMF, weborbDerek Wischusen @ 3:08 am

RubyAMF is an open source Ruby application being developed by Aaron Smith that enables AMF0/3 communication between Flex/Flash and Ruby.

So, you might be asking yourself, how is this different from WebORB for Rails? Well, the main difference is in how the apps are architected. WebORB for Rails is built as Rails plugin. This makes it really easy to use WebORB for Rails with your Ruby on Rails applications. However, this means you need to use Rails if you want to use WebORB for Rails, even if you want to use it for an application that does require any Rails specific code.

RubyAMF, on the other hand, is designed to be integrated directly with a server and, as such, does not require Rails. It even comes with its own webrick servlet, which means that all you have to do to start RubyAMF is download it, point a command line to the root folder, and enter ruby server/start. This makes it dead simple to use RubyAMF to integrate Flex/Flash with a Ruby application. However, if you want to use RubyAMF with Rails then you are going to have to do a little extra work.

So, for right now my simple heuristic is that if you want to use AMF remoting with Rails, then use WebORB for Rails. If you want AMF remoting with just Ruby, then use RubyAMF. (I suppose the names make that kind of obvious).

That said, I think it would be relatively trivial to rearchitect either app to be like the other, but I think it is good that they are different. Choice is, generally, a good thing.

Right now the thing that has me most excited about RubyAMF is how it could potentially be used to extend Apollo using Ruby in much the same way that Artemis does using Java. More on this in my next post….


Next Page » Valium 10 mg
Low cost levitra
Prednisone 20mg side effects
Tramadol online overnight
Levitra purchase
Buy tramadol cod
Viagra purchase uk
Generic viagra online without prescription
Levitra online cheap
Prescription propecia
Buy valium cheap online
Generic xanax
Viagra online uk
Best way to take tramadol
How to buy valium without a prescription
Viagra pharmacy uk
Buy valium without prescription uk
Brand name cialis
Xanax 1mg side effects
Valium online uk
Where to buy viagra online
Viagra buy online no prescription
Viagra prescription cost
Propecia generic canada
Buy phentermine online without prescription
Viagra cheap no prescription
Viagra 50mg side effects
Viagra express delivery
Buying cialis
Purchase tramadol without prescription
Viagra pills for sale
Prednisone dosages
Phentermine hcl without prescription
Viagra fast delivery
Generic tramadol
Best levitra prices
Canada viagra
Cialis 20 mg dosage
Order tramadol online overnight
Cheapest generic viagra online
Valium from india
Prednisone online
Viagra tablets for sale
Generic viagra 100mg
Xanax bars side effects
Ordering cialis online
Generic xanax no prescription
Order tramadol online cod
Tramadol free shipping
10mg prednisone
Cialis canada no prescription
Xanax 0.5 mg
Free samples of cialis
Canada pharmacy valium
Online prescription tramadol
Buy viagra from canada
Cost of viagra 50mg
Prescription phentermine online
Valium generic
Buy xanax overnight
Purchase phentermine
Where to buy levitra online
Phentermine diet pills without prescription
Real phentermine without prescription
Phentermine 37.5mg
Viagra online without prescription reviews
Buy viagra australia
Low cost cialis
Viagra cheapest
Cheapest online cialis
Low price viagra
Phentermine 37.5 wholesale
Cialis cialis
Prescription viagra uk
Buying tramadol in uk
Generic viagra for sale
Viagra for sale online
Tramadol india
Buy phentermine no rx
Tramadol pharmacy
Order viagra without prescription
Cheap xanax bars
Buy viagra online in australia
Generic cialis uk
Phentermine canadian pharmacy
Buy viagra in england
Buy viagra uk online
Buy generic valium
Propecia price
Buy cheap valium online
Purchase tramadol online
Cialis order canada
Viagra canada mastercard
Xanax no rx
Prednisone 40 mg
Best way to buy viagra online
Propecia generic online
Australia viagra prescription
Generic viagra super active
Phentermine cheap online
Buy viagra 100mg
Discount viagra usa
Buy viagra online in ireland
Brand viagra cheap
Cialis over the counter
Propecia online uk
Buy cialis uk
Propecia uk pharmacy
Generic viagra sales
Cheap valium online
Buy brand name viagra
Levitra samples
Buy phentermine 37.5mg pills
Best price tramadol
Propecia uk prices
Phentermine canada no prescription
Cialis 20mg side effects
Order tramadol cod
Buy propecia cheap
Viagra generic cheap
Order xanax cod
100mg tramadol online
Prednisone tablets
Levitra 20mg
Buy viagra online uk no prescription
Cialis prescription cost
10mg valium effects
Viagra online cheap
Phentermine online free shipping
Free cialis online
Best price cialis
Where can i buy viagra in the uk
Cialis samples canada
Buy cialis brand
Phentermine purchase online
Cheap xanax for sale
Tramadol prescription online
Valium without prescription uk
Buying cialis online without a prescription
Cialis ordering
Purchase levitra online
Levitra on sale
Best prices for cialis
Fedex tramadol
Buy viagra uk no prescription
Viagra super active
Viagra in the philippines
Buying viagra in new zealand
Best viagra dose
Buying levitra without prescription
Buy xanax cheap online

Propecia cheap
Xanax with no prescription
Propecia price australia
Phentermine hcl no prescription
Low price cialis
Dosage of xanax
Viagra lowest prices
Buying valium in spain
Cheap cialis
Purchase xanax
Buy tramadol hydrochloride
Levitra price
Viagra discount prices
Buy phentermine no script
Cialis prices uk
Buy valium europe
100mg tramadol effects
Cialis soft tabs online
Prescriptions for phentermine
Cheap 37 5 phentermine
Viagra professional online
Viagra sale uk
Cialis purchase online
Where can i buy cialis without a prescription
Where to buy cialis safely
40 mg prednisone side effects
Buying prednisone online
Cialis dosage 20mg
Propecia 1mg generic
Valium without prescription
Overnight tramadol no prescription
Xanax no prescription overnight
Buy valium no rx
Phentermine with no prescription
Buy phentermine online no prescription
Cheapest cialis price
Phentermine 37.5 mg
Discount viagra india
Buy pfizer viagra without prescription
Purchase viagra online without prescription
Cheap levitra uk
Phentermine buy australia
Buy tramadol hcl
Viagra in the uk
Cheap cialis soft tabs
Generic propecia
Phentermine buy uk
Xanax buy uk
Where to buy cialis online
Valium online fast delivery
Cheap tramadol overnight delivery
Propecia cost
Levitra online buy
Propecia information
Viagra in france
Viagra 50 mg online without prescription
Xanax 1 mg dose
Cheapest place to buy viagra online
Tramadol for sale
Cialis order online
Viagra shop online
Valium drug side effects
Phentermine 37.5 pills
Tramadol medication
How to buy phentermine online
Xanax price per pill
Cheap generic valium
Generic cialis overnight
Pfizer viagra price
Viagra prescription
Xanax overnight cod
Buy xanax online without prescription
Blood pressure and prednisone
Order tramadol overnight
Valium online overnight
Buy generic cialis uk
Cialis 20mg
Best price on phentermine
Viagra indian pharmacy
Generic xanax xr
Overnight xanax delivery
No prescription valium
Cialis for sale
Viagra discount coupons
Dose of xanax
Viagra ordering
Online prescriptions xanax
Viagra no prescription online
Purchase phentermine without prescription
Buy viagra in canada online
Get viagra prescription
Buy tramadol overnight
Online valium without prescription
Order xanax online
Order cheap viagra online
Cheapest cialis professional
Buy generic valium online
Levitra canada