Using Qooxdoo in Rails

Let us create a simple rails application called namelist with just one model.

gg[qtest]$ rails namelist -d sqlite3

I am using my favorite sqlite3 to power the app. Feel free to use the database of your choice.

Now create a model called Person

gg[namelist]$ ruby script/generate model Person
      exists  app/models/
      exists  test/unit/
      exists  test/fixtures/
      create  app/models/person.rb
      create  test/unit/person_test.rb
      create  test/fixtures/people.yml
      create  db/migrate
      create  db/migrate/001_create_people.rb

The model person has just one attribute called ‘name’. The migration script for the Person model as below

  1 class CreatePeople < ActiveRecord::Migration
  2   def self.up
  3     create_table :people do |t|
  4       t.column :name, :string
  5     end
  6   end
  7
  8   def self.down
  9     drop_table :people
 10   end
 11 end

Run the migration to setup the database tables.

gg[namelist]$ rake migrate

Create a new controller called qx

gg[namelist]$ ruby script/generate controller qx
      exists  app/controllers/
      exists  app/helpers/
      create  app/views/qx
      exists  test/functional/
      create  app/controllers/qx_controller.rb
      create  test/functional/qx_controller_test.rb
      create  app/helpers/qx_helper.rb

Copy the qoxdoo framework files to our app’s public directory.

gg[namelist]$ cp ~/dump/qooxdoo/qooxdoo-0.6.1-build/frontend/framework/script/qx.js public/javascripts/.
gg[namelist]$ cp -rf ~/dump/qooxdoo/qooxdoo-0.6.1-build/frontend/framework/resource public

Add two actions to the qx controller as follows

 1 class QxController < ApplicationController
 2   def index
 3   end
 4   def hai
 5     person = Person.new
 6     person.name = params[:name]
 7     person.save
 8     person.reload
 9
 10     @people = Person.find(:all)
 11
 12     respond_to do |res|
 13       res.xml do
 14         render :partial => 'list'
 15       end
 16     end
 17   end
 18 end

The partial file is as follows

  1 xml.tag!('qx.client.builder.Container') do
  2   @people.each do |person|
  3     xml.tag!('qx.ui.form.ListItem', :label => person.name, :value => person.id)
  4   end
  5 end

Create our main html file as follows

  1 <html>
  2   <head>
  3     <title>
  4       NameList Application
  5     </title>
  6     <script type="text/javascript" src="javascripts/qx.js"></script>
  7   </head>
  8   <body>
  9     <script type="text/javascript">
 10       qx.core.Init.getInstance().defineMain(main);
 11       function main()
 12       {
 13         var docRoot = qx.ui.core.ClientDocument.getInstance();
 14
 15         var labelField = new qx.ui.basic.Label("name");
 16         labelField.setLeft(160);
 17         labelField.setTop(25);
 18         docRoot.add(labelField);
 19
 20         var textField = new qx.ui.form.TextField();
 21         textField.setLeft(200);
 22         textField.setTop(20);
 23         docRoot.add(textField);
 24
 25         var buttonField = new qx.ui.form.Button("Create");
 26         buttonField.setTop(16);
 27         buttonField.setLeft(370);
 28         buttonField.addEventListener("execute", buttonClick);
 29         docRoot.add(buttonField);
 30
 31         function buttonClick()
 32         {
 33           var remoteRequest = new qx.io.remote.RemoteRequest("/qx/hai","GET");
 34           remoteRequest.setRequestHeader("Accept","text/xml");
 35           remoteRequest.addEventListener("completed", processResponse);
 36           remoteRequest.setParameter("name", textField.getValue());
 37           remoteRequest.send();
 38         }
 39
 40         function processResponse(e)
 41         {
 42           new qx.client.Builder().build(listField,e.getData().getContent());
 43         }
 44
 45         var listField = new qx.ui.form.List();
 46         listField.setTop(50);
 47         listField.setWidth(300);
 48         listField.setHeight(300);
 49         listField.setLeft(160);
 50
 51         docRoot.add(listField);
 52
 53       }
 54
 55     </script>
 56   </body>
 57 </html>

About this entry

You’re currently reading “Using Qooxdoo in Rails,” an entry on Thoughts Unlimited

Published:
October 20, 2006 / 6:25 pm
Category:
Javascript, Ruby
Tags: