Showing posts with label js. Show all posts
Showing posts with label js. Show all posts

May 3, 2009

CoverFlow for YUI beta version released

I am proud to announce that I have released a beta version of my CoverFlow Image for YUI. It has just two dependencies: yahoo-dom-event and animation. It works with Safari, Chrome and Firefox. IE is not supported yet. It is a javascript based component so you don't need anything but a browser with canvas support.
Feel free to leave comments or suggestions. It's completely free so you can download it and use it.
Since it is a beta version you might found issues.
Check it here: elmasse.gaver.nl

Release 0.1 beta version:

- Multiple image sizes. There is no restriction for size.

- No image limit. You can add how many images as you like.

- Simple interface. You can just use an image list, no need to have complex configuration.

- Works in Firefox3, Safari4 and Chrome. IE is not supported yet.

- All javascript. No flash required.

Oct 12, 2008

undefined, null and boolean comparisons in Javascript

Last week I've been working with some simple javascript and I found a common mistake when someone tries to use a variable into an if() or for() sentence.
First let's make a simple review about types in javascript:

Javascript has 5 primitive data types: string, boolean, number, null and undefined.

The first three types are well-known types. Let's talk a bit about the others; undefined means that a variable has been declared but it has not yet been assigned to a value, null is representative for an object that has not been initialized.
In fact, undefined is a type in itself and null is an object.
Consider this example:


var undef;
var nullObject = null;

alert(undef); //shows "undefined"
alert(nullObj); //shows "null"

if(undef) // always false;
if(nullObject) //always false;

Now what if I use an undefined in comparison with a number?


if(1 > undef) //false
if(1 < undef) //false
if(1 == undef) //false


So, nice! don't you think? The problem that I found was into a for sentence, doing something like this:


var flag = true;

for(var i = 0 ; i < someVar || flag ; i++){
   if(someVar < 1) flag = false;
   //some code goes here ...
}

This code has no much sense, but it is for simple demonstration purpose, think about it for a moment.

Looks like a simple, nice and unoffensive javascript code right? No, this is an infinit loop, since undefined < 1 is always false.

Conclusion:
if you are trying to obtain some data maybe using something like document.getElementById() or whatever function which can retrieves an undefined, take this into account.

Enjoy!
elmasse!

Apr 14, 2008

i18n with Ext.js: A resource bundle



Last weekend I was working on i18n with Ext.js, and there is a feature that I miss (so much) from jsp and it is the Resource Bundle. So I realized that I should get something similar to this and I started to write an Ext.i18n.ResourceBundle. The main idea is to create an object that can get a bundle, it means that taking the resource bundle, i.e. from a resource name and the browser's language it tries to find a .properties, so if the language is es-ES it looks for the [bundle]_es-ES.properties file and if it does not exist then it reads the [bundle].properties.

Then you can get a message by the key property through the getMsg(key) method.
This is the entire code and a little example. Enjoy it!

Code and Example could be found here


Usage:

var bundle = new Ext.i18n.Bundle({bundle='Application'});
bundle.onReady(
alert('example'+ bundle.getMsg('key1'));
);

This would read:
-An Application_es-ES.properties file like this if the browser's language is es-ES:
#This is a simple comment
key1 "Mensaje para la propiedad key1"


-If the Application_es-ES.properties doesn't exist then tries to find the Application.properties file like this:
#This is a simple comment
key1 "this is the message for key1"

Bundle(config): config: {bundle: , resource:}
bundle: The bundle name for the properties file.
{bundle: 'mybundle'}
This looks for the file located in:
http:/yourdomain/yourApp/mybundle_[language].properties.
You will need at least the mybundle.properties file.


path: (optional) the path to the bundle file.
{bundle: 'mybundle, path: 'resources'}
This looks for the file located in:
http:/yourdomain/yourApp/resources/mybundle_[language].properties.


Take into account that you need to write your application in the bundle.onReady() method in order to be able to access to your bundle.

Updated [JUL-09] A new Ext.18n.
bundle v0.2 is available. Problem solved with ExtJS 3.0