Category Archives: Tutorial

NoiseGen, generate background noise with jQuery

Tutorial

Adding a subtle background noise to Web pages is becoming a design trend: it produces a nice old-skool “analog” look that feels more like the “real world”. Neat examples are Forrst.com or Stripe.com, as well as many UI elements in iOS5.

Screen-Shot-2011-10-21-at-12.09.28-AM

Click the image to see a demo of NoiseGen, the jQuery plugin discussed later in this article

The usual way to achieve the effect is to use an image editing software to produce a PNG image and then set it as the background-image through CSS. Still, this approach has some drawbacks. First of all, the image has its bandwidth footprint. Moreover, fine-tuning background noise during development can be very time consuming, having to come back to the image editing software to save a new image each time you want to adjust the effect. Luckily, there’s a solution: using JavaScript and the HTML5 canvas element to dynamically produce a background image.

The idea is simple: create a canvas element, paint it with noise, and then set it as the background-image through CSS.


// Create the canvas
var canvas = document.createElement("canvas");
canvas.width = 80;
canvas.height = 80;
var context = canvas.getContext("2d"), x, y, opacity = 0.2;

// Paint it with random noise
for (x=0; x < canvas.width; x++) {
  for (y=0; y < canvas.height; y++) {
    var rand = Math.floor(Math.random() * 60);
    context.fillStyle = "rgba("+rand+","+rand+","+rand+","+opacity+")";
    context.fillRect(x, y, 1, 1);
  }
}

// Use it as the CSS background-image (here we are assuming jQuery is imported)
$("body").css("background-image", "url(" + canvas.toDataURL("image/png") + ")");

Unfortunately, some browsers do not support the canvas element yet (guess who?), so we need to provide for a graceful fallback. Also, it would be cool to have the possibility to finely tweak parameters like opacity, dimension of the image, size of the noise grains, statistical distribution of noise, colors, etc…

Luckily, we’ve got you covered! NoiseGen is an open-source jQuery plugin that does exactly that, offering support for a fallback image for crappy old browsers and many useful configuration options. Using it is straightforward:


$(document).ready({
  $("body").noiseGen({ fallbackImage: "bkgnd.png" });
});

Here we’re adding background noise to the body element. Cool browsers will do that dynamically on the client side, while old browsers can rely on the bandwidth hungry image. Moreover, we can finely tweak the look of our background:


$("body").noiseGen({
  fallbackImage: "bkgnd.png",
  opacity: 0.7,
  width: 64,
  height: 64,
  grainDimension: {
    width: 5,
    height: 1
  },
  fromColor: "0099CC",
  toColor: "10AADD",
  independentChannels: true,
  distribution: "uniform",
  bias: 5
});

Do you want to give noiseGen a try? There’s a demo here, and you can read more documentation on the GitHub project page, where you can also fork the code and contribute if you want.

Birth and death of an object in Ruby

Tutorial, , , ,

Last week I played with a SOAP API with savon.rb to develop a newsletter system.

This API require authentication with a two-way handshake. At first you send a login, a password and a key and it gave you back a token. When you ended operation you should send a “close connection” command.

This is a popular way but when you use it in a model seems a bit tricky so I decided to hide this method inside a custom class.

First I create ApiWrapper class that wrap SOAP operation:

class ApiWrapper

  def initialize
    @client = Savon::Client.new APP_CONFIG[:wsdl]
  end

  def open_connection
    response = do_soap_request("openApiConnection", {
      :login => APP_CONFIG[:login],
      :pwd => APP_CONFIG[:pwd],
      :key => APP_CONFIG[:key]
    })
    @token = response[:token]
  end

  def close_connection
    response = do_soap_request("closeApiConnection", {
      :token => @token
    })
  end

  def do_soap_request(method, arguments)
    response = @client.request(:api, method) do
      soap.body = arguments
    end
    response.to_hash
  end

end

Then use the ApiWrapper object inside the model:

class Newsletter

  def initialize
    @api = ApiWrapper.new
  end

  def send
    # do something
  end

end

Now we can use the @api object for communicate with the API. I want to hide the authentication process, first attempt can be to incapsulate operation inside each method:

def send
  @api.open_connection
  @api.do_soap_request("send", arguments)
  @api.close_connection
end

It works but the webservice il very slow, opening and closing connection require about 20 seconds and for hundred operation is too much time.

Another way is to encapsulate authentication process inside object initialization and finalization. For this we need something similar to a C++ constructor and destructor method. Ruby has got the initialize method similar to constructor but it does not have a standard destructor. Luckily we can emulate it.

The ObjectSpace module enable you to define block that is executed when the object is destroyed using the define_finalizer method.

ObjectSpace.define_finalizer(self, Proc.new{@api.close_connection})

In the initialize method we can open the connection and define this finalizer. We can rewite the method as follow:

def initialize
  @api = ApiWrapper.new
  @api.open_connection
  ObjectSpace.define_finalizer(self, Proc.new{@api.close_connection})
end

Now we can use the object with easier and more efficient connection management.

> n = Newsletter.new # implicit connection open
> n.send # connection is still open
> n.send # connection is still open
> n.send # connection is still open
> quit # implicit connection close

These methods are very useful (also) to mask unnecessary complexity and make the data access more readable.

An MVC implementation for Appcelerator – Part 4: Model and DB

Tutorial, , ,

In part 3 we setup a simple app based on Fabio Barbieri‘s evolution of Appcelerator on Rails. Now is time to start playing with some models and data.

The application had two controllers: Products and Clients. We added to the Products controller a function that shows a static message when we click on the button. Now we want to fetch the data to display from the database.

First create the “Client” model:

ruby scripts/generate.rb model Client name:string
Resources/models/client.js
Resources/db/migrations/20110721190738.js

Resources/models/client.js

var Client = Model.extend({
    table_name: "clients",
    _fields: {id: Number, name : String},

    find: function(id) {
        var model = new Client(this.db, this._find(id));
        return model;
    },

    item_from: function(row) {
        var model = new Client(this.db, this._item_from(row));
        return model;
    }
});

Resources/db/migrations/20110721190738.js

migrate("20110721190738", "CREATE TABLE IF NOT EXISTS clients (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name STRING)");

Each time we start the application, the closure in db.js run the migrations not already executed. We can run the app to create the table then add some fake data with a SQLite manager. Alternatively we can create another migration to add sample data, it’s up to you.

Create Resources/db/migrations/20110721190739.js (one unit after previous migration) and write:

migrate("20110721190739", "INSERT INTO clients (name) VALUES ('John Doe')");
migrate("20110721190740", "INSERT INTO clients (name) VALUES ('Jane Doe')");

When you start the app this migration will insert into “clients” table two items.

Finally add a function to the Clients controller to load the data and display them on an alert box:

loadClients: function() {
	var c = new Client(db);
	var recs = c.find_all();
	var results = "Clients:n";
	if(recs.length &gt; 0)
	{
		for(var i = 0; i &lt; recs.length; i++)
		{
			results += recs[i].name + 'n';
		}
	}
	else
	{
		results += "none";
	}
	alert(results);
}

And the corresponding button into the Clients view:

var button = Titanium.UI.createButton({
	title:'Click me',
	font:{fontSize:12,fontWeight:'bold'},
	width:65,
	height:30,
	top:300
});
button.addEventListener('click', this.controller.loadClients);
this.win.add(button);

Launch the simulator and switch to the “Client” tab. When you click on the button the client list will be showed.

You can download the sample code and look use it for your projects.

With this fourth part we conclude this series of tutorials. It’s not too much, just a start but we are planning to create a new series of tutorials in september that will cover the coding of a complete application with Appcelerator on Rails.

Enjoy and have a good summer vacation!

Links:
Part 1: Introduction
Part 2: Improvements
Part 3: A simple demo

An MVC implementation for Appcelerator – Part 3: A simple demo

Tutorial, , ,

In part 2 we learned how to improve a standard distribution of Appcelerator on Rails. Now we will see it in action.

We are going to create a small application with 2 empty tab, with a very simple logic, that at the end will look like this.

First create the controllers and the views. We need the ruby interpreter (version 1.8.7) in ordert to run the generators. If you have no Ruby interpreter installed on your system, you can find one here.

First controller:

ruby scripts/generate.rb controller Products
Resources/controllers/products.js
Resources/views/products.js

Generated code:
Resources/controllers/products.js

Ti.include("/views/products.js");
var ProductController = Controller.extend({
    init: function(win) {
        this._super(win);

        this.view = new ProductView(win, this);
    }
});

Resources/views/products.js

var ProductView = View.extend({
    init: function(win, controller) {
        this._super(win, controller);

        this.layout();
    },
    layout: function() {

    }
});

Second controller:

ruby scripts/generate.rb controller Clients
Resources/controllers/clients.js
Resources/views/clients.js

Now add some (simple) logic to the first controller:

btnClicked: function(event) {
	alert("click");
}

and write code that builds the interface using th controller logic:

layout: function() {
	this.win.title = 'Products';
	this.win.backgroundColor = '#fff';

	var label = Titanium.UI.createLabel({
		color:'#999',
		text:'I am Products Window',
		font:{fontSize:20,fontFamily:'Helvetica Neue'},
		textAlign:'center',
		width:'auto',
	});
	this.win.add(label);

	var button = Titanium.UI.createButton({
		title:'Click me',
		font:{fontSize:12,fontWeight:'bold'},
		width:65,
		height:30,
		top:300
	});
	button.addEventListener('click', this.controller.btnClicked);
	this.win.add(button);
}

You can made the same operation on the other controller and view.

In the app.js file we only setup properties, create tabs and instantiate controllers. Nothing more.

Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();

// Product tab (root tab)
var productWin = Ti.UI.createWindow({exitOnClose:true});
Ti.include("/controllers/products.js");
var productController = new ProductController(productWin);
var productTab = Titanium.UI.createTab({
    icon:'KS_nav_ui.png',
    title:'Products',
    window:productWin
});

// Client tab
var clientWin = Ti.UI.createWindow({exitOnClose:true});
Ti.include("/controllers/clients.js");
var clientController = new ClientController(clientWin);
var clientTab = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Clients',
    window:clientWin
});

tabGroup.addTab(productTab);
tabGroup.addTab(clientTab);
tabGroup.open();

Now we can launch the emulator and enjoy our new MVC-based project.

You can download the sample code wrote and packed by Fabio Barbieri.

Links:
Part 1: Introduction
Part 2: Improvements
Part 4: Model and DB

An MVC implementation for Appcelerator – Part 2: Improvements

Tutorial, , ,

Hi again, in this four parts tutorial I will present some ideas and projects to implement a MVC framework for Appcelerator Titanium, a multiplatform (iOS and Android) Javascript framework to build native mobile apps.

In part 1 we discovered the structure of Appcelerator on Rails. It’s a quite well designed framework, the basic ideas are good but there are several limitations. The first problem comes from the implementation of the controller.

var MainController = Controller.extend({
    init: function(win) {
        this._super(win);
        this.view = new MainView(win, this);
    }
});

(function() {
    var win = Titanium.UI.currentWindow;
    new MainController(win);
})();

The closure at the end of this class instantiates the controller only when you include the file. If you want to instantiate one more, you must include the class file again and this isn’t good from a coding perspective. A better implementation would split definition and instantiation.

Controller file can be more compact:

var MainController = Controller.extend({
    init: function(win) {
        this._super(win);
        this.view = new MainView(win, this);
    }
});

In this way, when you use the class include file once and it will instantiate the controller every time you need it.

Ti.include("/controllers/main.js");
var mainController = new MainController(mainWin);

This, as well as having potential advantages in terms of memory usage, it’s more rational too.

Another advantage is the ability to access global variables inside the controllers and views without weird tricks, something not previously allowed.

These were functional improvements: another improvement is to clean the included code. The Appcelerator on Rails’ library files are full of code that is no longer used. As well as increasing the size and memory usage it also generates a long series of warnings that complicates debugging. Cleaning and tidying these files is a necessary work.

Fabio Barbieri, the developer behind these improvements, has made ​​a preliminary sample of the code, cleaned and fixed, that can be downloaded here.

That’s all for part 2. In the next part I will present how to build a simple app starting from these considerations.

Links:
Part 1: Introduction
Part 3: A simple demo
Part 4: Model and DB