GravityBlast » Flex

Using CouchDB from Air applications with CouchDB Flex

Andrea Franz — Tue, 03 Nov 2009 14:31:37 +0000

In the last weeks I played a lot with CouchDB and I love it. I always used it from ruby but yesterday I tried to use it with flex. I started a new Actionscript project called CouchDB Flex, you can browse the source from github. The implementation is inspired by couchrest, but it’s asynchronous because I use URLLoader internally. Since the flash player doesn’t support the PUT and DELETE HTTP methods, you must create an AIR project if you want to try the library. You can find a compiled swc here, put it in your libs folder and you are ready to go. Here a small example, but it’s still in development, and a lot of functionality are not implemented yet.

CouchdbFlexExample.mxml: the main mxml file, it’s just a window with a textarea that will display the data loaded from CouchDB.

xml version="1.0" encoding="utf-8"?>
<c:App xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:c="com.gravityblast.couchdbflexexample.*">
  <s:TextArea id="textarea" width="100%" height="100%" text="{log}"/>			
c:App>

com/gravityblast/couchdbflexexample/Contact.as: the model I’ll save on CouchDB. By default the model has a name and an email, but I can add more properties since it’s a dynamic class.

package com.gravityblast.couchdbflexexample
{
  import com.gravityblast.couchdb.Document;
 
  public dynamic class Contact extends Document
  {		
    public var name:String;
    public var email:String;
 
    public function Contact()
    {
      super();
    }
  }
}

com/gravityblast/couchdbflexexample/App.as: the main application, where I create a new Contact Document, and I load all the contacts using a view created with the Design and View classes.

package com.gravityblast.couchdbflexexample
{
  import com.gravityblast.couchdb.CouchDb;
  import com.gravityblast.couchdb.Database;
  import com.gravityblast.couchdb.Design;
  import com.gravityblast.couchdb.View;
  import com.gravityblast.couchdb.events.CouchRestEvent;
  import com.gravityblast.couchdb.events.DocumentEvent;
  import com.gravityblast.couchdb.events.ViewEvent;
 
  import mx.events.FlexEvent;
 
  import spark.components.TextArea;
  import spark.components.WindowedApplication;
 
  public class App extends WindowedApplication
  {		
    private var couchdb:CouchDb;
    private var database:Database;
 
    [Bindable]
    public 	var log:String;
    public 	var textarea:TextArea;
 
    public function App()
    {			
      this.couchdb = new CouchDb();
      this.database = this.couchdb.database("couchdb-flex-example");
      this.log = "";
      this.addEventListener(FlexEvent.CREATION_COMPLETE, this.creationCompleteHandler);
      super();
    }
 
    private function creationCompleteHandler(event:FlexEvent):void
    {			
      this.database.create(this.databaseCreateHandler);	
    }
 
    private function databaseCreateHandler(event:CouchRestEvent):void
    {
      trace(event.data);
      if (event.json.ok || event.json.error.toString() == "file_exists")
      {
        var map:String = "function(doc) {if (doc['couchdb-flex-type'] == 'com.gravityblast.couchdbflexexample::Contact') emit(null, doc);}";
        var view:View = new View("all", map);
        var design:Design = new Design("contacts");
        design.addView(view);
        design.save(this.designSaveHandler);	
      }
    }
 
    private function designSaveHandler(event:DocumentEvent):void
    {
      trace(event.data);									
      if (event.json.ok || event.json.error == "conflict")			
        this.createContacts();
      else
        trace("Error saving design document: " + event.data)			
    }
 
    private function createContacts():void
    {
      var contact:Contact = new Contact();
      contact.name    = "jack";
      contact.email   = "jack@example.com";
      contact.address = "Jack Street";
      contact.save(this.contactSaveHandler);			
    }
 
    private function contactSaveHandler(event:DocumentEvent):void
    {			
      trace(event.data);
      var contact:Contact = event.document as Contact;
      contact.address = "Jack Street updated at " + (new Date()).toString();
      contact.save(this.contactUpdateHandler);			
    }
 
    private function contactUpdateHandler(event:DocumentEvent):void
    {			
      trace(event.data);
      View.load("contacts", "all", {}, this.contactsLoadHandler);
    }
 
    private function contactsLoadHandler(event:ViewEvent):void
    {					
      for each (var contact:Contact in event.documents)
      {
        for (var property:String in contact.attributes)
        {
          this.log += property + ": " + contact[property] + "\n";	
        }
        this.log += "-------------\n";
      }
    }
  }
}

I’ll write more about the library as soon as it’s more stable.

share

Flex functional testing with FunFx and Cucumber

Andrea Franz — Thu, 20 Aug 2009 13:11:56 +0000

Cucumber is a great tool I usually use for BDD in my ruby projects, but yesterday I tried it with Flex, and it was very enjoyable. Here a little example on how to test Flex applications with Cucumber.

First of all you need ruby, then you need to install the following gems:

sudo gem install rspec cucumber watir safariwatir funfx

(I used the following codes on mac os x, with ruby 1.8.6, safari 4.0.3 and funx 0.2.2)

After that open Flex Builder and create a new project called CucumberExample and use the following code for your main mxml file:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Number id="index">0mx:Number>
	<mx:VBox width="300" height="200" backgroundColor="white">
		<mx:HBox width="100%" height="30">			
			<mx:Button id="buttonDecrement" label="-" width="100%" />
			<mx:Button id="buttonIncrement" label="+" width="100%" />
		mx:HBox>
		<mx:HBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
			<mx:Label id="myLabel" text="{index}"/>			
		mx:HBox>
	mx:VBox>
mx:Application>

As you can see, we have a number, 2 buttons and a label. Now create a directory called features inside your flex project folder and create the first Cucumber feature file, called counter:

CucumberExample/features/counter.feature:

Feature: Counter
  In order to count something
  As a flex rock star
  I want to use my great flex app
 
  Scenario: Increment index
    Given I open my flex app
    And I click the increment button
    Then the label text should be "1"
    When I click the decrement button
    Then the label text should be "0"
    When I click the decrement button
    Then the label text should be "-1"

It’s a test written in pure plain text.

In the features folder create another folder called step_definitions with a blank file called counter_steps.rb, we’ll use it later.

Now open the console, go the to flex project root and run your test:

cd /path/to/CucumberExample
cucumber features

You should see something like this:

...
1 scenario (1 undefined)
7 steps (7 undefined)
0m0.002s

You can implement step definitions for undefined steps with these snippets:

Given /^I open my flex app$/ do
  pending
end
 
Given /^I click the increment button$/ do
  pending
end
 
Then /^the label text should be "([^\"]*)"$/ do |arg1|
  pending
end
 
When /^I click the decrement button$/ do
  pending
end

Before implementing the steps above, we need to add the funfx component to our library.

Download the latest swc file from rubyforge and place it in your CucumberExample/libs folder (I used the version 0.2.2).

Duplicate the bin-debug folder and rename it to test (you have a bin-debug folder after the first time you run the CucumberExample from FlexBuilder).

Inside the test directory create a file called test_server.rb with the following content:

require 'webrick'
 
server = WEBrick::HTTPServer.new :Port => 9852, :DocumentRoot => File.dirname(__FILE__)
trap("INT"){ server.shutdown }
server.start

Now you need a compiled version of your project that includes funfx.We’ll use it just for testing:

build_test.sh

#!/bin/sh
FLEX_SDK_HOME="/Applications/Adobe Flex Builder 3/sdks/3.2.0"
"$FLEX_SDK_HOME/bin/mxmlc" -verbose-stacktraces -include-libraries ./libs/funfx-0.2.2.swc "$FLEX_SDK_HOME/frameworks/libs/automation.swc" "$FLEX_SDK_HOME/frameworks/libs/automation_dmv.swc"  "$FLEX_SDK_HOME/frameworks/libs/automation_agent.swc" -output ./test/CucumberExample.swf -- ./src/CucumberExample.mxml

Run test compile_test.sh

chmod 755 ./build_test.sh
./build_test.sh

Now open another terminal window and start the test server:

cd /path/to/CucumberExample/test
ruby test_server.rb

Open http://localhost:9852/CucumberExample.html with your browser and you should see your flex app.

Now you can come back to your features and implement the step we leave before. Here my implementation:

CucumberExample/features/step_definitions/counter_steps.rb

Given /^I open my flex app$/ do
  open_flex_app
end
 
Given /^I click the (increment|decrement) button$/ do |button|  
  click_button("button#{button.capitalize}")  
end
 
Then /^the label text should be "([^\"]*)"$/ do |text|
  label_text.should == text  
end

open_flex_app, click_button and label_text are methods defined in my env.rb file.

CucumberExample/features/support/env.rb

require "rubygems"
require 'funfx/browser/safariwatir'
 
module FlexWorld
  def open_flex_app
    @browser.goto("http://localhost:9852/CucumberExample.html")
  end
 
  def click_button(button_id)
    @flex_app.button(:id => button_id).click
  end
 
  def label_text
    @flex_app.label(:id => "myLabel").text
  end
end
 
Before do
  @browser  = Watir::Safari.new
  @flex_app = @browser.flex_app("CucumberExample", "CucumberExample")  
end
 
After do
  @browser.close
end
 
World(FlexWorld)

Now you are ready to run your tests. Start the test_server and then the features. You should have an error:

Then the label text should be "1"  # features/step_definitions/counter_steps.rb:9
      expected: "1",
           got: "0" (using ==)

This because we didn’t implement the functionality yet in our flex app. So, change the mxml file with the following:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Number id="index">0mx:Number>
	<mx:VBox width="300" height="200" backgroundColor="white">
		<mx:HBox width="100%" height="30">			
			<mx:Button id="buttonDecrement" label="-" width="100%" click="index--" />
			<mx:Button id="buttonIncrement" label="+" width="100%" click="index++" />
		mx:HBox>
		<mx:HBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
			<mx:Label id="myLabel" text="{index}"/>			
		mx:HBox>
	mx:VBox>
mx:Application>

It’s the same code but I added the click action to the increment and decrement buttons. Now compile the new code and run the features again:

./build_test.sh
cucumber features

You shoiuld have the following output, with all the seven steps passed:

Feature: Counter
  In order to count something
  As a flex rock star
  I want to use my great flex app
 
  Scenario: Increment index            # features/counter.feature:6
    Given I open my flex app           # features/step_definitions/counter_steps.rb:1
    And I click the increment button   # features/step_definitions/counter_steps.rb:5
    Then the label text should be "1"  # features/step_definitions/counter_steps.rb:9
    When I click the decrement button  # features/step_definitions/counter_steps.rb:5
    Then the label text should be "0"  # features/step_definitions/counter_steps.rb:9
    When I click the decrement button  # features/step_definitions/counter_steps.rb:5
    Then the label text should be "-1" # features/step_definitions/counter_steps.rb:9
 
1 scenario (1 passed)
7 steps (7 passed)
0m9.781s

If you have any problems you may want to clear the cache from safari.

I used the funfx gem from rubyforge but it’s not up to date. If you want you can get the new code from github, it should have new features.

share

Creating PDF with images using flex and AlivePDF

Andrea Franz — Sun, 19 Jul 2009 00:25:39 +0000

Today I’m working on an AIR application, and I need to create a PDF starting from a list of images. This PDF needs to have one image for each page. I used AlivePDF, a very useful ActionScript3 library for PDF generation, and I created a simple class that takes an array of image paths and creates the PDF I need.

Here the class I use:

package
{	
  import flash.events.Event;
  import flash.events.EventDispatcher;
  import flash.filesystem.File;
  import flash.filesystem.FileMode;
  import flash.filesystem.FileStream;
  import flash.net.URLLoader;
  import flash.net.URLLoaderDataFormat;
  import flash.net.URLRequest;
  import flash.utils.ByteArray;
 
  import org.alivepdf.pdf.PDF;	
  import org.alivepdf.display.Display;
  import org.alivepdf.images.ResizeMode;
  import org.alivepdf.layout.Layout;
  import org.alivepdf.layout.Orientation;
  import org.alivepdf.layout.Size;
  import org.alivepdf.layout.Unit;
  import org.alivepdf.saving.Method;
 
  public class PdfGenerator extends EventDispatcher
  {		  
    private var pdf:PDF;
    private var images:Array;		
    private var outFilePath:String;
    private var completedPages:int;
 
    public function PdfGenerator(images:Array, outFilePath:String)
    {
      this.outFilePath = outFilePath;
      this.images = images;
    }				
 
    public function generate():void
    {						
      this.completedPages = 0;
      this.pdf = new PDF(Orientation.LANDSCAPE, Unit.MM, Size.A4);
      this.nextPage();		
    }
 
    private function nextPage():void
    {
      this.completedPages < this.images.length ? this.loadImage(this.images[this.completedPages++]) : this.save();
    }
 
    private function loadImage(path:String):void
    {						
      var urlLoader:URLLoader = new URLLoader();			
      urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
      urlLoader.addEventListener(Event.COMPLETE, this.onImageLoadComplete);
      urlLoader.load(new URLRequest(path));						
    }
 
    private function onImageLoadComplete(event:Event):void
    {						
      this.pdf.addPage();
      this.pdf.addImageStream(ByteArray(event.target.data), 0, 0, 0, 0, 1, ResizeMode.FIT_TO_PAGE);
      this.dispatchEvent(new PdfGeneratorEvent(PdfGeneratorEvent.PDF_GENERATOR_PAGE_COMPLETE, false, false, this.images.length, this.completedPages));
      this.nextPage();
    }
 
    private function save():void
    {				
      this.pdf.end();
      this.writeOutFile();												
      this.dispatchEvent(new PdfGeneratorEvent(PdfGeneratorEvent.PDF_GENERATOR_COMPLETE));
    }
 
    private function writeOutFile():void
    {
      var fileStream:FileStream = new FileStream();								
      fileStream.open(new File(this.outFilePath), FileMode.WRITE);			
      fileStream.writeBytes(this.pdf.save(Method.LOCAL));
      fileStream.close();
    }
  }
}

Basically for each image it creates a new URLRequest and when the request is completed it adds a new page with the image. As you can see I also dispatch a custom Event called PdfGeneratorEvent. That because I need to create a PDF with a large number of images, and doing like this I can give a feedback to the user with a ProgressBar that display the generation progress.

package
{
  import flash.events.Event;
 
  public class PdfGeneratorEvent extends Event
  {			
    public static const PDF_GENERATOR_PAGE_COMPLETE:String = "PDF_GENERATOR_PAGE_COMPLETE";
    public static const PDF_GENERATOR_COMPLETE:String      = "PDF_GENERATOR_COMPLETE";			
 
    public var totalPages:int;
    public var completedPages:int;
 
    public function PdfGeneratorEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, totalPages:int=0, completedPages:int=0)
    {			
      super(type, bubbles, cancelable);
      this.totalPages     = totalPages;
      this.completedPages = completedPages;
    }
  }
}

And here the main file that uses this class:

public function createPdf(images:Array):void
{
  var generator:PdfGenerator = new PdfGenerator(images, "/path/to/my/test.pdf");
  generator.addEventListener(PdfGeneratorEvent.PDF_GENERATOR_COMPLETE, this.onPdfComplete);
  generator.addEventListener(PdfGeneratorEvent.PDF_GENERATOR_PAGE_COMPLETE, this.onPdfPageComplete);				
  generator.generate();				
}
 
public function onPdfPageComplete(event:PdfGeneratorEvent):void
{					
  progressBar.setProgress(event.completedPages, event.totalPages);
  progressBar.label = event.completedPages + " of " + event.totalPages;															
}
 
public function onPdfComplete(event:PdfGeneratorEvent):void
{											
  trace("completed")
}

share

Mask problem with flex canvas and drag & drop

Andrea Franz — Sun, 12 Jul 2009 23:34:37 +0000

Some weeks ago a spent a lot of time trying to fix a bug inside an AIR application I was working on.
I wrote a custom component that has an image as child. This image is draggable, and the container should act as a mask. The problem was that when I started dragging the picture, the picture went outside its container, like the following example.

Try dragging the red square outside the white one:

I fixed this bug just setting the scrollRect property to the container:

Only when I realized how to fix the bug I found another guy with the same problem and the same solution.

Here the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application width="500" height="300" xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="vertical" verticalAlign="middle" horizontalAlign="center"
  applicationComplete="init()">
  <mx:Script>
    [CDATA[												
      public function init():void
      {				
        this.container.scrollRect = new Rectangle(0, 0, this.container.width, this.container.height);																
        this.draggableCanvas.addEventListener(MouseEvent.MOUSE_UP, this.mouseUpHandler);				
        this.draggableCanvas.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDownHandler);
      }			
 
      private function mouseDownHandler(event:MouseEvent):void
      {
        this.draggableCanvas.startDrag();
      }
 
      private function mouseUpHandler(event:MouseEvent):void
      {
        this.draggableCanvas.stopDrag();
        }
    ]]>
  mx:Script>
  <mx:Canvas id="container" width="300" height="250" backgroundColor="white" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Canvas id="draggableCanvas" x="50" y="25" width="200" height="200" backgroundColor="#AA0000">			
    mx:Canvas>
  mx:Canvas>
mx:Application>

share