SimplyStored and CouchDB

Posted by Jonathan

Yesterday I gave a presentation about CouchDB and SimplyStored, our convenience Ruby library, at the Ruby User Group Berlin.

There is a recording of the presentation at ustream.tv.

Mathias and I wrote SimplyStored in order to easily interact with Ruby objects serialized in CouchDB. We use CouchDB as the main data store for Scalarium and so far it has been great. But it is a bit cumbersome to write all those map and reduce functions yourself.

SimplyStored generates the JavaScript map&reduce functions for handling associations or dynamic finders for you.

SimplyStored offers:

  • Models
  • Associations
  • Callbacks
  • Validations
  • Dynamic finder
  • S3 attachments
  • Paranoid delete

    class User
      include SimplyStored::Couch

      property :login
      property :age
      property :accepted_terms_of_service, :type => :boolean
      property :last_login, :type => Time
    end

    user = User.new(:login => 'Bert', 
                    :age => 12, 
                    :accepted_terms_of_service => true, 
                    :last_login = Time.now)
    user.save

    User.find_by_age(12).login
    # => 'Bert'

    User.all
    # => [user]

    class Post
      include SimplyStored::Couch

      property :title
      property :body

      belongs_to :user
    end

    class User
      has_many :posts
    end

    post = Post.create(:title => 'My first post', 
                       :body => 'SimplyStored is so nice!', 
                       :user => user)

    user.posts
    # => [post]

    Post.find_all_by_title_and_user_id('My first post', user.id).first.body
    # => 'SimplyStored is so nice!'

    post.destroy

    user.posts(:force_reload => true)
    # => []
  

The code is on github and OpenSource: SimplyStored example code

Another thing I talked about is RockingChair. RockingChair is an in-memory CouchDB implementation that understands all of SimplyStored's functionality. We use it to speed up our tests and be able to run them in parallel.

tooltip.js - version 0.2

Posted by Jonathan

I just releases version 0.2 of my tooltip.js library.

The new version follows the mouse correctly on Firefox (thanks to Graham TerMarsch) and can apply a constant delta when displaying the tooltip. This can be useful if your CSS rules include absolute positioning that can result in a constant offset.

var my_tooltip = new Tooltip('id_of_trigger_element', 
                            'id_of_tooltip_to_show_element', 
                            { delta_x: -210, delta_y: 20 })

Another nice addition (by Xavier Lepaul) is the ability to create tooltips out of given text. Version 0.1 required you to give it the DOM id of a valid element. Version 0.2 will create a div with the class tooltip if it is given only text:

var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')

This can be used to create popups out of title attributes:

Event.observe(window,"load",function() { 
  $$("*").findAll(function(node){
    return node.getAttribute('title');
   }).each(function(node){
     new Tooltip(node,node.title);
     node.removeAttribute("title");
   });
}); 

You can get tooltip.js here and you can try out the live demo.

Rails-Konferenz

Posted by Jonathan

Rails-Konferenz was really a success, nearly a hundred people showed up!

Lot’s of interesting talks and I’m looking forward to the next one.

The slides to my talk about JavaScript and RJS in Rails should soon on the Rails-Konferenz site.

There are also available here:

JavaScript und Ajax mit Rails

tooltip online demo

Posted by Jonathan

After several requests I’ve put up an online demo for tooltip.js and it now has it’s own page.

A lightweight prototype based JavaScript tooltip

Posted by Jonathan

For a recent project I needed JavaScript tooltip functionality for showing detail information. All tooltip libraries that I came across were too complicated and bloatet, did just too much and most of the time were still not flexible enough with the tooltip. So I decided to create my own library that is based on prototype.js:

<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/tooltip.js" type="text/javascript"></script>

<div id='tooltip' style="display:none; margin: 5px; background-color: red">
  Detail infos on product 1....<br />
</div>

<div id='product_1'>
  This is product 1
</div>

<script type="text/javascript">
  var my_tooltip = new Tooltip('product_1', 'tooltip')
</script>

Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will be shown slightly below the mouse pointer. On the mouseOut event the tooltip disappears. The script is clever enough to move the tooltip to the top and/or left if there is not enough space left on the screen to display the tooltip.

This way you are totally flexible with the tooltip. It can be any div with any CSS you like.

You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.

At the moment the tooltip appears and hides with Element.show() and Element.hide() but a future version will use the script.aculo.us effects.

Download it here (BSD license): tooltip-v0.1.js

UPDATE:
I've put up an online demo here. In the future more updates can be found here.

Dojo and Rails or better Dojo and the base relative path

Posted by Jonathan

For a new project we need a WYSIWYG editor and my experiences with FCKeditor are not the best. It throws a bunch of JavaScript errors and warnings and just doesn’t feel right.

As I know Prototype and script.aculo.us quite good I thought I should give Dojo and their nice editor a try. Dojo is a heavy-weight framework compared with Prototype but has some very nice Widgets.

Normally you integrate Dojo like this:

&lt;script src="path/to/dojo/dojo.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
  dojo.require("dojo.widget.*");
  dojo.require("dojo.widget.Editor");
  //.. have fun with Dojo
&lt;/script&gt;

In my case I wanted to use the Dojo rich text editor in a view called /mail/new so I had this code in app/view/mail/new.rhtml:

&lt;script src="/javascripts/dojo/dojo.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
  dojo.require("dojo.widget.*");
  dojo.require("dojo.widget.Editor");
  //.. have fun with Dojo
&lt;/script&gt;

So you just include the core Dojo source file and the rest is done by magic. The problem is that this magic relies on finding dojo in a path relative to this file and does not use the path you used to include the core file. I got this error:

Could not load 'dojo.widget.Editor'; last tried '__package__.js'

If you look (e.g. with FireBug) where Dojo tried to load the JavaScript from you will see

GET http://localhost:3000/mail/src/widget/Editor.js
GET http://localhost:3000/mail/src/widget.js
GET http://localhost:3000/mail/src/__package__.js
GET http://localhost:3000/mail/__package__.js

I looked through the documentation and searched for a way to tell Dojo where all it’s files are. I found this solution:

&lt;script src="/javascripts/dojo/dojo.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
  dojo.setModulePrefix("dojo", "../javascripts/dojo/src");
  dojo.require("dojo.widget.*");
  dojo.require("dojo.widget.Editor");
  //.. have fun with Dojo
&lt;/script&gt;

This worked for the JavaScript files but not for the CSS that is pulled down afterwards to make the editor look nice:

GET http://localhost:3000/javascripts/dojo/src/widget/Editor.js
GET http://localhost:3000/javascripts/dojo/src/widget/Toolbar.js
GET http://localhost:3000/javascripts/dojo/src/widget/RichText.js
GET http://localhost:3000/javascripts/dojo/src/widget/ColorPalette.js
GET http://localhost:3000/mail/src/widget/templates/HtmlToolbar.css

So the code that includes the CSS does not honor the dojo.setModulePrefix.

After whining at the mailings list I got this hint:

&lt;script type="text/javascript"&gt;
 djConfig = {baseRelativePath: "../javascripts/dojo/"}; 
&lt;/script&gt;

&lt;script src="/javascripts/dojo/dojo.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
  dojo.require("dojo.widget.*");
  dojo.require("dojo.widget.Editor");
  //.. have fun with Dojo
&lt;/script&gt;

Now everything works fine:

GET http://localhost:3000/javascripts/dojo/src/widget/Editor.js
GET http://localhost:3000/javascripts/dojo/src/widget/Toolbar.js
GET http://localhost:3000/javascripts/dojo/src/widget/RichText.js
GET http://localhost:3000/javascripts/dojo/src/widget/ColorPalette.js
GET http://localhost:3000/javascripts/dojo/src/widget/templates/HtmlToolbar.css

Hopefully that will save someone a desperate evening.

Rails 1.1.1 and script.aculo.us 1.6.1 released

Posted by Jonathan

Rails 1.1.1 was just released!

I was waiting with upgrading the FreeBSD port as Rails 1.1 had some issues and 1.1.1 was in the planning. I hopefully have the port updated be the end of the weekend. The upgrade to Rake 0.7 is already submitted.

Further script.aculo.us 1.6.1 was also released some minutes ago. It includes Protoype 1.5.0_rc0 and fixed some ugly IE bugs.

Have fun with all the upgrades.

Moved to the lucid

Posted by Jonathan

I installed a new theme (The Lucid) for typo and I like it very much.

Gone is the fixed width layout (you can now switch between fixed width and a fluid layout with the buttons in the top right corner) and the heading for each post are very nice. Notice the calendar style date at the beginning. Checkout how the LiveSeach results are presented. Really nice.

Blockquotes are now nicely rendered and the red ist just more rubyish :-)

So how do you like it?