Create a reactive 0.2.0 application

Posted on May 13, 2009

Let’s prepare the system to create a reactive application.


Install reactive

Reactive is hosted on RubyForge, so using the gem command is all you need. Note that you’ll need rubygems 1.1.0 or later.

Because Reactive is very modular, we must choose which plugins to install, we want:

  • The core system: reactive-core
  • We are developers, so we want generators, rake tasks, etc… : reactive-dev
  • A dispatcher that handles MVC: reactive-mvc
  • reactive-mvc doesn’t impose an ORM, so choose one: reactive-activerecord
  • A way to expose data to the user (and get requests from it) : reactive-wx

Go for it:

sudo gem install reactive-core
sudo gem install reactive-dev
sudo gem install reactive-mvc
sudo gem install reactive-activerecord
sudo gem install reactive-wx

Done! Check if reactive is here:

reactive

And the usage is printed on your terminal.


Create the application

Tell reactive to create our app and choose all the plugins we use:

reactive books reactive-mvc reactive-activerecord reactive-wx

Your app is ready to run, let’s try it.

cd books
script/run

Okay, the window is minimalistic, but it is ready to host your application.


Add a resource

Our books application will simply handle books, so we need a Book resource:

script/generate resource book title:string isbn:string

Now setup the database:

rake db:create
rake db:migrate

Let’s add a validation in the model (app/models/book.rb)

class Book < ActiveRecord::Base
  validates_numericality_of :isbn
end

Code the views

The big part is now to fill the views. Our output handler (reactive-wx) expects the response body to be ruby code using the wxRuby library. So we must fill the views (index, new, create, …) with that ruby code.

This part is time consuming, the UI part of an application always is.

I’ll not show the details here, please download the books application and inspect the views. Choose either the complete application or only the new files at this point of the howto.

Currently Reactive definitively needs documentation. This task is planned for the next months.

Note also that I’m currently working on a scaffold system inspired by ActiveScaffold.

Your first reactive application

Posted on May 15, 2008

Developers need to see some code and see the product in (re)active state, so here is a how-to setup your first reactive application.


Install reactive

Nothing really hard here, let the gem be installed:

sudo gem install reactive

You also need a view provider, there’s currently only support for the wxWidgets toolkit (through wxRuby)

sudo gem install reactive_view_wx

Done! Check if reactive is here:

reactive

And the usage is printed on your terminal.


Create the application

Tell reactive to create our app and pass the view provider we want to use:

reactive mysales -w wx

Your app is ready to run, let’s try it.

cd mysales
script/run

Okay, the window is minimalistic, but it is ready to host your application.


Database and scaffolds

Create a database named ‘mysales’ and edit config/database.yml accordingly.

We want to model companies, ask reactive to create the scaffold:

script/generate scaffold company name:string description:text website:string --skip-timestamps

Reactive does create a bunch of files.

Now migrate our database to create the companies table:

rake db:migrate

We are now ready to run our app, so:

script/run

Wait a minute, nothing changed!
You are right, everything is ready to handle companies CRUD but we must have a way to start using them. This is a design choice, either a menu, toolbar or anything else that matches your way of designing the GUI.

Let’s do it with a toolbar. Create this file: app/views/application/resources_toolbar.rb And type in the code below:

toolbar = Wx::ToolBar.new(frame, :style => Wx::TB_FLAT|Wx::TB_NODIVIDER|Wx::TB_TEXT)
toolbar.set_tool_bitmap_size( Wx::Size.new(32,32) )

toolbar.add_tool(999, "Companies", art_provider.get_bitmap(Wx::ART_FOLDER, Wx::ART_TOOLBAR), "List companies")
frame.evt_tool(999) { do_request(:controller => 'companies', :action => 'index') }

toolbar.realize
frame.add_pane(:name => "resources_tb", :caption => "Resources", :left_dockable => false, :right_dockable => false) {|info| info.toolbar_pane.top; toolbar}

What is this? It’s GUI code, we are in a view part that will create the toolbar and bind it with the index action of the companies controller. Because we use the *wx* view provider this code handles Wx classes and methods. Modify the initial application view which is in the file app/views/application.rb like this:

# Because self is not self in the App.run block!
view = self

App.run do
  frame = MainFrame.new(nil, :size => [600,400], :title => "MySales")  
  view.render "record_toolbar", :frame => frame
  view.render "resources_toolbar", :frame => frame
  frame.show
end

The difference is the new line rendering the resources_toolbar code we just created.

Okay, time to re-run the app:

script/run

Here we are, click on the Companies toolbar button and voila! (Tweak the record toolbar buttons to go further)