Xilinus - English

Funny comic

2008-05-27T07:38:00Z

I just saw this little comic on a blog, I really like it!

But this kids should learn ruby instead of C, it will be easier and shorter to write :). It could be something like this:

   1   500.times { puts 'I will not throw paper airplanes in class' }

First RailsCamp in Paris

2008-05-15T08:07:00Z

I will be at the first RailsCamps in Paris organized by Jean-François Tran and the French Ruby comunity.

This is a great event to meet people working with rails and to learn some great stuffs around Ruby frameworks.

I will do a session about google maps and rails. I will try to create a application from scratch!

And may be a talk about Merb and DataMapper.

See you there :)

New Design

2008-05-15T08:06:00Z

Xilinus is changing, design too :)

Xilinus is now a company in web application development based on Ruby frameworks (Ruby On Rails, Merb).

This explains the new design, xilinus.com will be updated soon too.

If you have a project of web application feel free to contact us

New component (auto_complete) in prototype UI

2008-02-22T14:53:00Z

I have added a new component in Prototype UI after having seeing this auto_complete from InteRiders

First of all, I want to thanks those guys and also Guillermo Rauch for the first version based on mootools.

For a customer, I needed an component based on prototype butn with content set by Ajax request and with some other features. I decided to port this component in prototype UI.

The main advantage of being part of Prototype UI is I can use some great functionnalities of this frame work without adding complicated code like:

Shadowing system for a better look and feel and better user experience. It does not look like a “flat” div under the input field
IFrameShim to avoid the bug of having select box over the completion
packr version

The component is fully unobtrusive, all HTML code needed for displaying completion is built by the script. As always, I try to make component skinnable. You can see below a “facebook” style as the original version and a more Apple like look and feel.

Facebook style

Apple style

It’s only available in trunk version right now but it will be included in the next release candidate planned for March.

If you really want to use it :), you can dowload a zip file with functionnal tests included.

I will add some features like serialization or a way to hand automatically hidden fields for an easier submit process. I have also to work on unit tests and documentation before the release.

If you want to try it, check those two functional tests: non ajax and ajax fill (be aware that it’s faking an ajax request, some browser do not like it :)).

PS: I will be away from my computer for a week, so I won’t reply to any comments before March.

First Release Candidate of Prototype UI

2008-02-06T20:02:00Z

I am very proud to announce First Release Candidate of Prototype UI.

This release only includes Window and Carousel. In trunk version you will find also Context Menu and an experimental Dock. Really soon, we will add Tooltips, Calendar (from Min), Accordion and more

So stay tuned :)

Easy error display on rails ajax form

2008-01-30T16:28:00Z

I have never found a easy way to handle errors in rails with ajax form. Here is my implementation.

You have nothing to change in your view and in your controller, just few line of Javascript.

Here is how it works:

The form

Let’s imagine we have a contact form 3 required fields, name, email and message like this

   1  
   2  <%- form_remote_for @contact, :html => {:class => :contact, :id => :contact_form} do |f| -%>
   3    <label for="name">Name *</label>
   4    <%= f.text_field :name, :class => :text %>
   5    <br/>
   6    
   7    <label for="email">Email *</label>
   8    <%= f.text_field :email, :class => :text %>
   9    <br/>
  10  
  11    <label for="message">Message *</label>
  12    <%= f.text_area :message , :class => :text%>
  13    <br/>   
  14  
  15    <label for="submit">&nbsp;</label>
  16    <%= submit_tag "Submit" %>
  17    <br/>        
  18  <%- end -%>

We use form_remote_for for ajax post and we set an id to the form for later use. It should look like this

The model

Contact model just have some validations

   1  
   2  class Contact < ActiveRecord::Base
   3    validates_presence_of :name, :email, :message
   4  end

The controller

The controller is a classic REST action create. In this example I just handle Ajax post but you can add code for HTML or XML request. The only thing we need to do is to return an JSON response.

   1  
   2    def create
   3      @contact = Contact.new(params[:contact])
   4      respond_to do |format|
   5        format.js {
   6          if @contact.save
   7            render :json => {:object => "contact", :success => true}
   8          else    
   9            render :json => {:object => "contact", :success => false, :errors => @contact.errors}
  10          end    
  11        }
  12      end
  13    end

Javascript

So how our code will handle this JSON response. The view is a classic remote_form, the model just have validation and our controller returns a JSON string. It’s pretty easy.

With Prototype, you can register function on Ajax callback, here comes the magic:

   1  
   2  Ajax.Responders.register({
   3    onComplete: function(responder, request){  
   4      var response = (request.responseText.evalJSON(true)); 
   5      if (response.object)  {
   6        // Remove old erroes
   7        $(response.object + "_form").select(".error").invoke("removeClassName", "error");
   8        $(response.object + "_form").select(".error_message").invoke("remove");
   9  
  10        // Success: clear all input with text
  11        if (response.success) {
  12          var form = $(response.object + "_form");
  13          form.select(".text").each(function(element) {element.value = ""});
  14        }
  15        // Else add error by creating a div with error message
  16        else {
  17          response.errors.each(function(error) {     
  18            var element = $(response.object + "_" + error[0]);
  19            if (element) {
  20              element.addClassName("error");
  21              element.insert({after: new Element("div", {className: "error_message"}).update(error[1])});
  22            }
  23          })
  24        }
  25      }
  26    }
  27  });

The result will be like this:

Explanation

If fact everything is JSON data, it contains object name, and errors.

The JS just create divs after any field with error with error message and add an error class to the input. You just need to set some CSS attributes.

Prototype UI beta version (PWC reloaded)

2007-11-04T15:28:00Z

I am very happy and proud to announce prototype UI is officially open today.

At the beginning of the project, it was only a full rewrite of Prototype Window but it became quickly a UI library based on Prototype 1.6 and script.aculo.us 1.8 to include all my previous components like Prototype Carousel ....

This library is developed by Samuel Lebeau and myself. Sam worked hard on the core classes and the object design. It’s also done with help of Juriy Zaytsev and Vincent Le Moign for the design.

And I want to thank Emanuel ‘Mila76’ for his help on IE (BIG HELP) and for his div version of PWC (the new window system is based on it).

This version is only for developer and early adopters. You can only download it with subversion. The final release will be done when prototype 1.6 will be stable and of course when prototype UI too :).

You will be able to download a JS per component, a JS file with the full library and a build page will allow you to create your own JS file with UI components you need.

This goal is to build to best free UI library (under MIT licence) based on Prototype.

In the current version you have

window
- skinnable
- shadowing system independent from window and skinnable
- div based
- resizable from all borders and corners
- custom buttons
- Dialogs (like it’s done in PWC) are not yet implemented but will be done soon

carousel: only HTML content (no Ajax content)
dock (experimental)
shadow: a simple class to add shadow on any element with a absolute position.

Stay tuned ;) and long life to prototype UI.

Here is a sample test to see the new window system (from functional tests included in the distrib)

PS: Any feedback is really appreciated (bugs, documentation, patches, API …)

Simple Layout Manager with Prototype 1.6

2007-10-03T20:07:00Z

Aaron (Aaron @ ennerchi) ask me to develop a simple layout manager for a web application. First of all, I want to thanks him for accepting to release this layout manager in open source under MIT-license.

This class is inspired by RUZEE.LayoutManager but based on prototype 1.6. RUZEE version was to slow on complex layout.

It’s an unobtrusive script based on CSS classes. This picture shows what CSS class to use.

Inside a lm_container you can add:

lm_top / lm_bottom for top/bottom rows with fixed height and resizable width, you can add as many rows as you want,

lm_left / lm_right for left/right columns with fixed width and resizable height, you can add as many columns as you want,

lm_center, middle content with resizable width and height, you can have only one per container.

Here is a sample HTML code to show how it works:

   1  <div class="lm_container">    
   2    <div class="lm_top"></div>
   3  
   4    <div class="lm_left"></div>
   5  
   6    <div class="lm_center"></div>  
   7  
   8    <div class="lm_right"></div>  
   9  
  10    <div class="lm_bottom"> </div> 
  11  </div>

And just included layoutmanager.js in your head section

   1  <script type="text/javascript" src="prototype.js"></script>
   2  <script type="text/javascript" src="layout_manager.js"></script>

You can see it in this simple example

Of course layout can be nested like this:

   1  <div class="lm_container">    
   2    <div class="lm_top"></div>
   3  
   4    <div class="lm_left"></div>
   5  
   6    <div class="lm_center">
   7      <div class="lm_container">    
   8        <div class="lm_top"></div>
   9        <div class="lm_left"></div>
  10        <div class="lm_center"></div>  
  11        <div class="lm_right"></div>  
  12        <div class="lm_bottom"> </div> 
  13      </div>
  14    </div>  
  15  
  16    <div class="lm_right"></div>  
  17  
  18    <div class="lm_bottom"> </div> 
  19  </div>

You can see it in this embedded example

If you work with ajax request and want to add dynamically content, you just need to call

   1  layoutManager.add('your_element_id');

because you have a global variable: layoutManager. This zip file contains a sample with an Ajax Request.

So download it and focus on your web application :)

A pastis for pastie

2007-09-30T12:34:00Z

If you use pastie service to share code (or may be you are already addicted to it), Samuel Lebeau has released a perfect ruby gems to pastie anything in one command line.

It’s called pastis (if you are French you know what a Pastis:”http://en.wikipedia.org/wiki/Pastis” is :), it’s a great alcohol from south of France).

You can get details on his blog.

The best is you can add a command on TextMate to pastie selected text. When you workk remotely and you want to share code with co-workers it’s a great time saver.

Here is the command taken from his article:

   1  
   2  #!/usr/bin/env ruby
   3  require 'rubygems'
   4  require 'pastis'
   5  
   6  input = ENV['TM_SELECTED_TEXT'] || File.read(ENV['TM_FILEPATH'])
   7  
   8  languages = {
   9    /source\.ruby/ => :ruby,
  10    /text\.html\.basic/ => :html,
  11    /text\.html\.ruby/ => :rhtml,
  12    /source\.js/ => :javascript,
  13    /source\.(c|c\+\+)/ => :c,
  14    /source\.sql/ => :sql,
  15    /source\.diff/ => :diff
  16  }
  17  
  18  language = languages[languages.keys.find { |pattern| ENV['TM_SCOPE'] =~ pattern }] || :plaintext
  19  
  20  paste = Pastis.paste(input, :language => language)
  21  
  22  `open #{paste.url}`
  23

Prototype Portal Class #2

2007-09-04T20:38:00Z

I have added a new option to prototype portal window class to be able to have multiple portals on the same page. The new option is accept, based on accept option of Droppable. So you can do something like this;

   1  var  portal = new Xilinus.Portal("#page2 div", { accept:"portal1"});
   2  var  portal = new Xilinus.Portal("#page2 div", { accept:"portal2"});

for having to portal in the same window. With a new HTML file:

   1    <div id="page1">
   2        <div id="widget_col_0"></div>
   3        <div id="widget_col_1"></div>
   4        <div id="widget_col_2"></div>
   5   </div>       
   6    <div id="page2">
   7        <div id="widget_col_3"></div>
   8        <div id="widget_col_4"></div>
   9   </div>

I have added a new sample file. you can give it a try. I have updated widget.js javascript file or check out code from svn:


svn co http://svn.itseb.com/public/prototype-portal/trunk prototype-portal

Prototype Portal Class

2007-08-26T12:54:00Z

I have always wanted to create a Class to handle in a easy way portal page like netvibes. After having tried to used Sortable of script.aculo.us, I decided to write my own Class. I really like Sortable Class but it was too tricky to use it for a portal behavior. But I use Draggable and Droppable of course!

This article talks about the first version I made. It has been tested on Safari, Firefox, Opera and IE 6/7. The first version is based on Prototype 1.5.1.1 because I could not use 1.6. but the next version will be based on 1.6.

Here is how it works.

1) Create an HTML page with as many columns you need. Columns width can be fixed or variable, and with different size.

Here is a HTML sample with 3 columns

   1  <div id="page">
   2    <div id="widget_col_0"></div>
   3    <div id="widget_col_1"></div>
   4    <div id="widget_col_2"></div>
   5  </div>

And the CSS file

   1  #page {
   2    margin: 10px auto;
   3  }
   4  
   5  #widget_col_0 { 
   6    float:left;
   7    width: 30%;  
   8  }
   9  
  10  #widget_col_1 {
  11    width: 50%;
  12    float:left;
  13  }   
  14  
  15  #widget_col_2 { 
  16    float:left;
  17    width: 20%;  
  18  }

Pretty easy!

2) You need to instanciate a Portal class with those columns:

   1  var  portal = new Xilinus.Portal("#page div")

3) Add widgets to this portal. There is a Widget class, fully CSS skinnable (there is a default theme), just create a new Widget instance and add it to the portal by specifying the column index. For example:

   1  portal.add(new Xilinus.Widget(), 0)
   2  
   3  // Or with title and content
   4  portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);

And that’s it!! There are also some options when you create the portal:

url: Url called by Ajax.Request after a drop (default null, no requests)
onOverWidget: Called when the mouse goes over a widget (default null)
onOutWidget: Called when the mouse goes out of a widget (default null)
onChange: Called a widget has been move during drag and drop (default null)
onUpdate: Called a widget has been move after drag and drop (default null)
removeEffect: Remove effect (by default no effects), you can set it to Effect.SwitchOff for example

And main functions are:

add(widget, columnIndex): add a new widget .
remove(widget): remove a new widget.
serialize(): returns a parameters string for Ajax.Request

You could a see a live example here. I have used onOverWidget/onOutWidget to add edit/delete buttons on widget and I added a remove effect to show how to use it with advanced features.

You can download the widget.js javascript file or check out code from svn:


svn co http://svn.itseb.com/public/prototype-portal/trunk prototype-portal

Next I will create a full website for this class with documentation and CSS details (it’s based on sliding doors technique), port it to prototype 1.6 with new Element class (I will remove builder.js) and the new class model. Prototype rocks!!

The 1.6 version will also include unit tests.

One more thing, it’s under MIT license, as Prototype and script.aculo.us, so feel free to use it.

PS: Thanks to Seb for testing and debugging!

News of PGF

2007-05-10T08:20:00Z

It’s been a while without anything on this blog but not in PGF trunk.

Now you have polylines and lines. (sample) As you can see on the sample you can change renderer on the page, if you use Firefox you can switch from SVG to Canvas, same code, same look.

For fun and for showing how PGF is simple, I have created a sample for mouse drawing, you can give it a try.

Here is the full code of the drawing tool:

   1  
   2  Graphic.DrawingTool = Class.create();
   3  Object.extend(Graphic.DrawingTool.prototype, Graphic.Tool.prototype);
   4  Object.extend(Graphic.DrawingTool.prototype, {
   5    initialize: function() {  
   6      this.renderer = null;
   7      this.shape    = null;
   8    },
   9    
  10    activate: function(manager) {
  11      this.renderer = manager.renderer;
  12    },
  13    
  14    unactivate: function(manager) {
  15      this.renderer = null;
  16    }, 
  17    
  18    initDrag: function(x, y, event) { 
  19      this.polyline =  new Graphic.Polyline(this.renderer); 
  20      this.polyline.setStroke(this._randomStroke());
  21      this.polyline.addPoint(x, y); 
  22      
  23      this.renderer.add(this.polyline)
  24      this.renderer.draw();
  25    },
  26    
  27    drag: function(x, y, dx, dy, ddx, ddy, event) {    
  28      if (this.polyline) {           
  29        this.polyline.addPoint(x, y); 
  30        this.renderer.draw();
  31      }
  32    },
  33    
  34    endDrag: function(x, y, event) {
  35      if (this.polyline) {
  36        this.polyline = null;
  37      }
  38    },
  39    
  40    mouseMove: function(x, y, event) {
  41    },
  42    
  43    _randomStroke: function() {
  44      var r = Math.floor(255 * Math.random());
  45      var g = Math.floor(255 * Math.random());
  46      var b = Math.floor(255 * Math.random());
  47      var a = 128 + Math.floor(128 * Math.random()); 
  48      var w = 5 + Math.floor(5 * Math.random());
  49      return  {r: r, g: g, b: b, a: a, w: w}
  50    }
  51  });

Prototype Windows (PWC) version 1.3

2007-04-24T12:57:00Z

After a while without any new versions (as PWC) becomes complete and pretty stable) here comes 1.3.

The main features are blur/focus events with possibility of having 2 themes to make the focused window looks different. And a new theme by Emanuel Mila

Also a new example/tutorial, PWC-OS, a lightweight Web OS using PWC. It uses the focus/blur feature, of course.

I have also added a PWC section in this blog to post every new ideas/features.

New CTM managment in PGF

2007-04-16T20:21:00Z

I have commited a new version with a new CTM (current transformation matrix) managment for shapes.

Now shapes handles matrix and inverse matrix. So it’s really easy to convert points from shape to viewport and from viewport to shape coordinates.

With this, handling missing pick feature in canvas is much more easier. Check this canvas example (Firefox and Safari). You still can play with the SVG/VML version (IE/Firefox/Opera)

In NeoMeeting, I am able now to edit shapes graphically, here is a little screenshot:

Next I will add some shapes like lines and polylines and I will do the first official!

First tool on PGF

2007-04-13T10:28:00Z

As promised, I have adding the first tool in PGF. It’s a select/move tool. It’s easy as a pie to activate, only two lines of code. Just after renderer creation, add:

   1  
   2  var toolManager = new Graphic.ToolManager(renderer);
   3  toolManager.setTool(new Graphic.SelectTool());

I use my EventNotifier class, so you can receive an event on each move. You can play with it here

Of course, you can do it without using toolManager by observing events on DOM Element like this:

   1  
   2  Event.observe("rectangle_0", "mouseover", function() {alert("over a rectangle")});

But keep in mind it won’t work for canvas as canvas does use DOM element for rendering. But, anyway, this version of PGF doed not support selection in canvas.

A Group class has also been added to group shapes. Once grouped, you can apply transform on group, it will affect all included shapes. (Only SVG/VML, canvas renderer will do it later).