Xul(Runner) and Rails Tutorial, Part 1: Introduction and Setup

Read Parts: One
Two

Please Note: I’m not the first to do this. Check out that app, very nifty.

But now I’m going to give it a go.

For this demo app, we’re going to create a simple online forum based in XUL with a Rails backend.

First up, gotta boot up RadRails and start a new project, and we’ll call it XRForum.

It will do the following, making it probably less of a real forum and more of a toy. But hey, that’s what it is.

Let’s define what it’s gotta do.

  • Make a topic
  • List Topics in order of most recent post
  • Read a Post
  • Make a Post
  • Search Posts

Basic. Nice and basic.

Let’s set up the migrations.

Create a model named “topic”.
script/generate model topic

script/generate model topic
exists app/models/
exists test/unit/
exists test/fixtures/
create app/models/topic.rb
create test/unit/topic_test.rb
create test/fixtures/topics.yml
create db/migrate
create db/migrate/001_create_topics.rb

From the output, we see it created a migration for us. Awesome. I think it’s new in RoR 1.1 but I’m not sure. Either way, let’s use it.

I end up with this for 001_create_topics.rb
<pre> class CreateTopics < ActiveRecord::Migration def self.up create_table :topics do |t| t.column :title, :string, :null => false t.column :created_at, :datetime t.column :last_post, :datetime end end def self.down drop_table :topics end end </pre>

Let’s jump right into the posts…

<pre>script/generate model post</pre>

002_create_posts.rb

<pre> class CreatePosts < ActiveRecord::Migration def self.up create_table :posts do |t| t.comµçVÖâ¦7&VFVEöB¦FFWF–ÖPТBæ6öÛ^umn :body, :text, :null => false t.comµçVÖâ§÷7FW"§7G&–ær¦çVÆÂÓâfÇ6PТBæ6öÇVÖâ§F÷–5ö–B¦–çFVvW"¦çVÆÂÓâfÇ6PТVæ@ТVæ@РТFVb6VÆbæF÷vàТG&÷÷F&ÆR§÷7G0ТVæ@ЦVæ@УÂ÷&S

Doing well so far, let’s cover some basics in the model real quick so we don’t forget about it later.

Here’s the contents of app/model/post.rb and app/model/topic.rb respectively.

Nothing fancy, I just like to get the basics out of the way quickly.

<pre> class Post < ActiveRecord::Base validates_presence_of :body, :poster, :topic_id end </pre></pre>
<pre> class Topic < ActiveRecord::Base validates_presence_of :title end </pre></pre>

Okay, now we’ve got the database basics done, set up your database config and run rake migrate. Your database config is in config/database.yml. The database should be called xrforum_development.

Now, let’s create a new folder called “xul” under the main XRForum directory.

Now pop on over to The XulRunner page at devmo and grab yourself a copy. I’ve had good luck grabbing from the stable nightly’s, currently located here. I grab 1.8.0.2 because 1.8.0.1 had a major crash bug that I kept hitting. If you’re not so brave, grab the 1.8.0.1 version on the front page(not the nightlies!).

Extract it under the xul directory, yours should look something like this.

xul/
xul/xulrunner/
xul/xulrunner/xulrunner.exe
xul/xulrunner/lots of other files

Copy the xulrunner-stub.exe file to xul/ and rename it to XRForum.exe

Next let’s create a xul/application.ini file
<pre> [App] Vendor=Joseph Guhlin Name=XRForum Version=0.1 BuildID=2006040401 [Gecko] MinVersion=1.8 MaxVersion=1.8 </pre>

If you’re using xulrunner 1.9, first of all, good luck. I don’t know the changes between that and 1.8. Secondly, make sure you set MinVersion and MaxVersion to 1.9. If you test it with 1.8, then you can put 1.8 as MinVersion. But leave it at 1.9 for now.

Next, create a xul/chrome.manifest file with the following line in it:
<pre>content xrforum content/</pre>

Next, we need some directories. You’ll end up with something like this:

xul/
xul/xulrunner/
xul/defaults/preferences/
xul/chrome/
xul/content/

One more file.

xul/defaults/preferences/prefs.js

Just these two lines:
<pre>pref("toolkit.defaultChromeURI", "chrome://xrforum/content/main.xul"); pref("xrforum.debug", true);</pre>

The first line is required, the second is for later. Keep it though.

Almost done here, not going to leave you with nothing though.

Next, create a file, xul/content/main.xul

Put this here


&lt;?xml version="1.0"?&gt;
&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;

&lt;window id="xrforum-main-window"
    title="XRForum"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;

&lt;label value="Hello XRForum!" /&gt;

&lt;/window&gt;

A few things to remember for those of you new to Xul reading this, Xul is standard XML so you have to close every tag, either in itself such as <label /> or with two entries, <description></description>

Now, run XRForum.exe. There, something!

In the next part, we’ll connect the two.

ADDED: If you’re interested in more stuff on Rails and Xul, check out the following links:

Posted: April 4th, 2006 under AJAX, Ruby on Rails, Tutorials, XUL, XulRunner.
Comments: 1

Comments

Pingback from ruby on rails some tutorials -01- at Web Thoughts
Time: August 8, 2006, 11:04 am

[…] Xul(Runner) and Rails Tutorial, Part 1: Introduction and Setup […]

Write a comment