Reactive

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)