dev.enekoalonso.com » javascript

Titanium Developer: love and hate

Eneko Alonso — Sat, 31 Jul 2010 04:57:16 +0000

I’ve been using Titanium Developer for a while now, since I installed it to do some mobile app research one or two months ago. But up until now I barely used it again other than to maintain a desktop app I created for a game, which thanks to Titanium runs in both Mac and PC. Thus, up until this week, I hadn’t really get in depth with it.

The good things

Nice, easy and fast. Creating apps is piece of cake, loading JSON feeds from Internet, using local storage, placing buttons and labels on the screen… it’s all easy and it works on both iPhone and Android right away.

The bad things

Titanium Developer looks like an unfinished app. It shouldn’t be version 1.X, not even 0.X. Looks like an alpha, buggy and very easy to get screwed up, specially if you share your projects between Windows and Mac. This time it launches the emulator, this time it does not. This time your project does not load properly. Next time, you try to create a new project and it fails. And the errors are totally useless. Not very helpful.

Conclusion

The idea is great, awesome. The code is clean and using Javascript for development makes it easy for web developers to get easily involved into mobile app development. If only the Appcelerator team could improve their app, we would save a lot of headaches.

February 19, 2010 -- Having fun with Mooml & Twitter (0)
January 28, 2010 -- Things to do (0)
August 29, 2009 -- Spaniards for iPhone available now (0)
June 30, 2009 -- iPhone 3.0 geolocation with Javascript (1)

Little tricks: string padding in Javascript

Eneko Alonso — Tue, 20 Jul 2010 22:35:45 +0000

I just found this little trick to zero pad numbers in Javascript. It is also applicable to padding with any character, not just zeros.

var n = 123
String("00000" + n).slice(-5); // returns 00123
("00000" + n).slice(-5); // returns 00123
(" " + n).slice(-5); // returns " 123" (with two spaces)

Found here.

July 2, 2010 -- Equivalent of parseInt() in Freemarker (0)
July 1, 2010 -- Little tricks: editing strings by index in Javascript and Python (1)
September 2, 2009 -- Creating HTML blocks with Mootools (3)
July 30, 2010 -- Titanium Developer: love and hate (2)

Little tricks: editing strings by index in Javascript and Python

Eneko Alonso — Thu, 01 Jul 2010 16:57:04 +0000

Editing strings by index maybe something that we don’t do all the time. But it’s one of these things that, coming from languages like C, one would assume is as trivial as assigning the value of an indexed position. Something like this:

var a = "hello world"
a[0] = "H"
console.log(a) // outputs "hello world"

Go ahead and paste that code in your favorite javascript console. You would expect the output to be “Hello there”, but it is not.
Same goes with Python, check this code:

>>> a = "hello world"
>>> a[0] = "H"
Traceback (most recent call last):
File "", line 1, in <module>
TypeError: 'str' object does not support item assignment
>>> a[0] = 'H'
Traceback (most recent call last):
File "", line 1, in <module>
TypeError: 'str' object does not support item assignment

This is because strings are read only and cannot be modified at all. Only replaced with new strings.

The solution: convert to array and back to string

There may be other solutions out there, I’m sure, but this is the solution I use: Both in Python and Javascript, a string can be converted into an array or list of characters (actually, list of strings). Then we can modify values by index and finally join the output into a new string.

Javascript:

var a = "hello world"
a = a.split("")
a[0] = "H"
a = a.join("")
console.log(a) // outputs "Hello world"

Python:

>>> a = "hello world"
>>> a = list(a)
>>> a[0] = "H"
>>> a = "".join(a)
>>> a
'Hello world'

It’s interesting to see how the syntax for joining arrays into strings is totally the opposite in Javascript and Python. In Javascript, join() is a function of the Array object while in Python join() is a function of the string class.

In the other hand, split() is a method of the String object in Javascript. There is a split() function on the string class in Python, but it cannot be used to split strings without a specific separator. The list() function/constructor does the trick.

July 20, 2010 -- Little tricks: string padding in Javascript (2)
May 22, 2010 -- More WebSockets, now with Python! (1)
September 2, 2009 -- Creating HTML blocks with Mootools (3)
July 30, 2010 -- Titanium Developer: love and hate (2)

More WebSockets, now with Python!

Eneko Alonso — Sun, 23 May 2010 06:41:27 +0000

A couple of weeks ago, Tim and I worked on a little game/demo using WebSockets and C# (I haven’t been able to put it online since I do not have a Windows server). It was a lot of fun and we were able to see the potential of WebSockets and how much internet ~~can~~ will change in the next few years because of them.

Today I spent a couple of hours researching and implementing a WebSocket solution that I could run in my linux servers, and I found this very nice tutorial for creating a Python WebSockets server: http://yz.mit.edu/wp/web-sockets-tutorial-with-simple-python-server/

So I took that code and modified to create a very, very basic chat, that broadcasts received messages to all connected clients. You can try it here (as long as the python server is still up): http://enekoalonso.com/research/html5/websockets/python/

Here is the client code:

var form = document.getElementById('form');
var msg = document.getElementById('msg');
var output = document.getElementById('serveroutput');
var s = new WebSocket("ws://"+window.location.hostname+":9876/");
s.onopen = function(e) {
console.log("opened");
out('Connected.');
}
s.onclose = function(e) {
console.log("closed");
out('Connection closed.');
}
s.onmessage = function(e) {
console.log("got: " + e.data);
out(e.data);
}
form.onsubmit = function(e) {
e.preventDefault();
msg.value = '';
window.scrollTop = window.scrollHeight;
}
function sendMsg() {
s.send(msg.value);
}
function out(text) {
var el = document.createElement('p');
el.innerHTML = text;
output.appendChild(el);
}
msg.focus();

And the server code:

#!/usr/bin/env python
import socket, threading
# httphost = "localhost:8888"
# sockethost = "localhost:9876"
httphost = "enekoalonso.com"
sockethost = "enekoalonso.com:9876"
def handle(s, addr):
handsake = "HTTP/1.1 101 Web Socket Protocol Handshake\r\nUpgrade: WebSocket\r\nConnection: Upgrade\r\nWebSocket-Origin: http://%s\r\nWebSocket-Location: ws://%s/\r\nWebSocket-Protocol: sample\r\n\r\n" % (httphost, sockethost)
s.send(handsake)
data = s.recv(1024)
lock = threading.Lock()
while 1:
data = s.recv(1024)
if not data: break
print 'Data from', addr, ':', data
lock.acquire()
[conn.send(data) for conn in clients]
lock.release()
print 'Client closed:', addr
lock.acquire()
clients.remove(s)
lock.release()
s.close()
def start_server():
s = socket.socket()
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(('', 9876))
s.listen(1)
while 1:
conn, addr = s.accept()
print 'Connected by', addr
clients.append(conn)
threading.Thread(target = handle, args = (conn,addr)).start()
clients = []
start_server()

Check the live demo (be aware WebSockets are only supported by Google Chrome right now): http://enekoalonso.com/research/html5/websockets/python/
Open a few tabs and send some text. You should see it appearing in all of them. It will also work if you open the page in multiple browser windows or even if you open the page in different computers.

May 3, 2010 -- Playing with WebSockets (2)
May 6, 2010 -- Tech talks at LEVEL Studios (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
July 1, 2010 -- Little tricks: editing strings by index in Javascript and Python (1)

Performance matters

Eneko Alonso — Sun, 16 May 2010 18:36:24 +0000

I just read this on an email from a Google’s Closure developer:

Adding runtime checks for invalid usage is something we have policy against. It adds to the code size as well as to the runtime cost.

I totally agree. Developers should be responsible for their usage of APIs or third party libraries, while these should focus on working as efficient as possible given the correct parameters. Being Javascript a non-strongly-typed language, checking the parameters passed to every function are right at runtime would be a huge overkill.

March 15, 2010 -- More updates to Mooml coming soon (0)
January 28, 2010 -- Dojo y yo (0)
May 6, 2010 -- Tech talks at LEVEL Studios (0)
January 28, 2010 -- Things to do (0)

Interesting JSON vulnerability (old stuff)

Eneko Alonso — Fri, 14 May 2010 21:00:56 +0000

Somebody at work passed this article about an interesting vulnerability in web APIs that use JSON.

The exploit combines Cross Site Request Forgery (CSRF) with a JSON Array hack allowing an evil site to grab sensitive user data from an unsuspecting user. The hack involves redefining the Array constructor, which is totally legal in Javascript.

http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx

I’ve found a while ago that you can put pretty much any URL on a script tag and the browser will download the content right away, whether it’s javascript or not, as long as the type attribute in the tag is set to ‘text/javascript’. But although browsers download the URL content and place it inside the script tag, you can’t get to the content from Javascript (using innerHTML, for instance). Or can you? Apparently, Firebug can, at least on the HTML tab. I’m not sure if Firebug has direct access to the DOM, other than through Javascript, but I hope that is the case.

February 19, 2010 -- Having fun with Mooml & Twitter (0)
July 30, 2010 -- Titanium Developer: love and hate (2)
July 20, 2010 -- Little tricks: string padding in Javascript (2)
July 1, 2010 -- Little tricks: editing strings by index in Javascript and Python (1)

Mooml 1.2.3 – Bye, bye, with()

Eneko Alonso — Thu, 29 Apr 2010 04:26:54 +0000

Mooml 1.1 was the first version of Mooml that didn’t rely on eval(), a javascript function that causes lot’s of problems when not used properly, but that also prevent minimizers and compilers like Closure to generate valid code.

The new Mooml 1.2.3 release also gets rid of with(), which will no longer be used to render Mooml templates. Instead, templates are prepared when they get registered, so all template tag functions (div(), span(), p()) get replaced by calls to the Mooml engine. Although this means there will be a performance hit when registering templates, it also means templates will render faster. As a plus, template parameter names will no longer conflict with template tag function names. Thus, you can now have a template with a parameter named ‘div’ and the template wont fail rendering.

Download: http://mootools.net/forge/p/mooml
Source: http://github.com/eneko/mooml

March 15, 2010 -- More updates to Mooml coming soon (0)
March 24, 2010 -- Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)

Getting unique timestamps in Javascript

Eneko Alonso — Wed, 14 Apr 2010 18:16:18 +0000

Sometimes, when you want to generate unique id’s or similar, it is very common to use the current date as unix timestamp (new Date().getTime() or $time() in Mootools). The problem is that if we get the current timestamp multiple times too fast, it may happen that we get exactly the same value. Actually, this will happen very easily, as this tests shows:

var times = [];
while (times.length < 20) {
times.push(new Date().getTime());
}
console.log(times);
// All timestamps returned would be pretty much the same

To prevent this, we can use this little function which ensures we get a unique timestamp every time we call it:

// Mootools
function getUniqueTime() {
var time = $time();
while (time == $time());
return $time();
}
// Javascript generic
function getUniqueTime() {
var time = new Date().getTime();
while (time == new Date().getTime());
return new Date().getTime();
}

Test it in Firebug:

function getUniqueTime() {
var time = new Date().getTime();
while (time == new Date().getTime());
return new Date().getTime();
}
var times = [];
while (times.length < 20) {
times.push(getUniqueTime());
}
console.log(times);
// Now all timestamps are unique

Nice, uh?

April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (0)
March 24, 2010 -- Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)

Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates

Eneko Alonso — Wed, 24 Mar 2010 20:54:01 +0000

Mooml 1.1 has been finally released today and made available to everybody via Github and Mootools Forge plugin repository.

What is new in Mooml 1.1

Mooml 1.1 has a lot of new features, but these are worth to mention:

No more eval()
Mooml.Template
Mooml.Templates
Pass functions as arguments to template functions
References to elements with an Id

No more eval()

Although the use of eval() was transparent to the final user, Mooml 1.0.X depended on it to properly generate the dom elements using the template functions like div(), span(), table(), etc. Mooml 1.1 does not use eval() anymore, which prevents issues when compressing the code with compilers like Google Closure Compiler and also increments the overall performance of template rendering.

Mooml.Template

Mooml.Template is the new constructor for Mooml templates. This constructor will allow to create standalone templates like this:

var tpl = new Mooml.Template('mytemplate', function(params) {
div({ id: params.divId }, params.divContent);
});
document.body.grab(tpl.render({
divId: 'mydiv',
divContent: 'Hi there!'
}));
// will create:
Hi there!

There is no need to create a Mooml.Template object when using Mooml.register(), which will work as in previous versions of Mooml.

Mooml.Templates

Mooml.Templates is a mixing that can be implemented into other Mootools classes. This will allow these classes to create their own templates internally and use them without the need of registering global templates with Mooml.register(). Here is an example of a Dog class:

var Dog = new Class({
Implements: [Options, Mooml.Templates],
options: {
bark: 'Bark! Bark!'
},
initialize: function(options) {
this.setOptions(options);
this.register('dog', function(bark) {
div({ 'class': 'dog'}, bark);
});
},
toElement: function() {
return this.render('dog', this.options.bark);
}
});
document.body.grab(new Dog()); //
Bark! Bark!
document.body.grab(new Dog({ bark: 'Woof! Woof!' })); //
Woof! Woof!
document.body.grab(new Dog({ bark: 'Arf!' })); //
Arf!

Pass functions as arguments to template functions

With Mooml 1.1, template functions accept functions as arguments. These function can be any function that returns an element, array of elements, string, number or any other argument type supported by Mooml template functions. For example:

var tpl = new Mooml.Template('mytemplate', function(content) {
div(content);
});
document.body.grab(tpl.render(function() {
return 'Html returned by a function()'
}));
// will create:
Html returned by a function()

References to elements with an Id

Finally, Mooml 1.1 templates can return references to all elements rendered that contain an Id, including elements rendered in nested templates:

var tpl = new Mooml.Template('mytemplate', function(content) {
div({id:'div1'}, content);
div({id:'div2'}, content);
div({id:'div3'}, content);
}, {
saveElementRefs: true
});
document.body.adopt(tpl.render('some text'));
tpl.elementRefs.div1; // reference to
some text
tpl.elementRefs.div2; // reference to
some text
tpl.elementRefs['div3']; // reference to
some text

Don’t miss the new demo: http://enekoalonso.com/projects/mooml/
Enjoy!

April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (0)
March 15, 2010 -- More updates to Mooml coming soon (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)

Having fun with Mooml & Twitter

Eneko Alonso — Fri, 19 Feb 2010 20:43:54 +0000

Mooml is a templating engine for Mootools. With it, you can create HTML from Javascript using a very clean syntax. Plus, it is extremely useful when you have to generate repeating elements, since Mooml automatically renders arrays of data multiple times. Let’s see an example.

Searching Twitter

Nowadays there are a lot of APIs out there that support JSON or JSONP, which we can use directly from the front end using Javascript. Also, there are other APIs that return tons of JS data, like Google Maps. In this example we are going to be searching Twitter and displaying the search results in a container div, properly rendered as HTML.

The url for searching Twitter is http://search.twitter.com/search.json?q=mootools&show_user=true (searching for Mootools in this case). Check the output:

{
"results":[
{
"profile_image_url":"http://a3.twimg.com/profile_images/547672997/twitterProfilePhoto_normal.jpg",
"created_at":"Fri, 19 Feb 2010 17:08:55 +0000",
"from_user":"digitalr3bel",
"to_user_id":1212494,
"text":"@davidwalshblog Hi David – im a big fan of your site! Can you recommend a good MooTools tutorial for someone who can already program? thx",
"id":9343656026,
"from_user_id":23704390,
"to_user":"davidwalshblog",
"geo":null,
"iso_language_code":"en",
"source":"//apiwiki.twitter.com/" rel="nofollow">API"
}
// More results here…
],
"max_id":9343656026,
"since_id":0,
"refresh_url":"?since_id=9343656026&q=mootools",
"next_page":"?page=2&max_id=9343656026&q=mootools",
"results_per_page":15,
"page":1,
"completed_in":0.0352710000000001,
"query":"mootools"
}

We want to render each result inside out container div. On this example, we will just render the user name, user image and message text. Here is our Mooml template:

Mooml.register('twitter-search-result', function(entry) {
div({id: "tweet-" + entry.id},
img({src: entry.profile_image_url, alt: entry.from_user}),
span(entry.from_user),
p(entry.text)
);
});

Since all results are returned into an array, we can pass it directly to Mooml which will render all of the elements in it:

// Data is the JSON response from Twitter
Mooml.render('twitter-search-result', data.results);

So, let’s do a live test. Type something you want to search for and hit the search button to see Mooml in action :)

Search:

How cool is that?

The code

Ok, so here is the whole code I have used in this post for this mini-demo:

<script type="text/javascript" src="http://enekoalonso.com/lib/mootools-1.2.4-core-nc.js">script>
<script type="text/javascript" src="http://enekoalonso.com/lib/mooml.js">script>
<script type="text/javascript">
Mooml.register('twitter-search-result', function(entry) {
div({id: "tweet-" + entry.id},
img({src: entry.profile_image_url, alt: entry.from_user}),
span(entry.from_user),
p(entry.text)
);
});
function searchTwitter() {
new Element('script', {
type:'text/javascript',
src:'http://search.twitter.com/search.json?q={text}&show_user=true&callback=renderData'.substitute({
text:$('twitter-mooml-search').get('value')
})
}).inject(document.head);
}
function renderData(data) {
$('mooml-twitter-demo').empty().adopt(Mooml.render('twitter-search-result', data.results));
}
$('twitter-mooml-search-btn').addEvent('click', searchTwitter);
searchTwitter();

As you can see, the code is very basic and so is the Mooml template. The coolest thing here is that you don’t need to iterate over the results to render each element.

Have fun!

April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (0)
March 24, 2010 -- Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates (0)
March 15, 2010 -- More updates to Mooml coming soon (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)

Mooml.globalize(): Mooml template functions going global

Eneko Alonso — Mon, 01 Feb 2010 15:49:35 +0000

Since version 1.0.9, Mooml includes a new feature: globalize. It maybe handy for some websites to globalize all the Mooml template functions (div, a, p, span…) to the window object scope, so they can be used anywhere in the code without the need of defining or evaluating a template.

For example, in normal Mootools code we would create a div like this:

// options can have attributes, css, events and more
var mydiv = new Element('div', options);

With Mooml.globalize() we can do this:

Mooml.globalize(); // Only need to call this once
var mydiv = div(options); // Same options as Mootools new Element()

Mooml globalized functions can also have nested elements, which makes very easy to create dom elements:

var mydiv = div(options,
p('First paragraph'),
p('Second paragraph'),
div('Nested div:',
span('div content')
),
Mooml.render('nested_template'),
'Some inline html too'
);

Will generate the dom elements for this html:

First paragraph
Second paragraph
Nested div:
div content

Some inline html too

Elements created by Mooml template functions are not automatically injected in the DOM. They are just created like when you use new Element().

Please be aware that using Mooml.globalize() feature will pollute the window object scope, overriding any methods with the same name and/or possibly conflicting with other Javascript libraries. As a tip, Mooml.tags can be edited before calling Mooml.globalize(), so only functions for those tags we are interested on will be created.

April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (0)
March 24, 2010 -- Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
March 15, 2010 -- More updates to Mooml coming soon (0)

Dojo y yo

Eneko Alonso — Fri, 29 Jan 2010 05:48:02 +0000

Back in November 2008 I had a chance to work with Dojo on a project for Cisco WebEx. I didn’t like it at all. I was used to the simplicity of jQuery and Mootools and I couldn’t understand how Dojo had been designed so complicated. Well, one year later I just realized that it is not that Dojo was that complicated. It is that I wasn’t ready for it. Now it is time to give it another chance.

Some cool stuff about Dojo

Reading Dojo’s documentation I have finally understood something that I was wondering how it works. It’s nothing really complicated, but it’s actually very cool: dojo.require

Javascript requests to the server are asynchronous (not sure if synchronous request can be done). So we depend on callback functions to continue the flow of your program. That means that when we put dojo.require('somefancyjs'); on a line, the execution does not stop and it continues to the next line of code while the browser downloads that file from the server in the background.

Looks like Dojo puts those requests on some kind of array, array that is checked when you use dojo.addOnLoad() which does not execute your callback function until all elements of the array have been downloaded. That is very cool because that means you can do as many dojo.require’s as you need. The down side is that you need to put your code inside a callback function, which is not very bad when working with objects.

Next, I have to find out how goog.require works ;)

May 16, 2010 -- Performance matters (2)
January 28, 2010 -- Things to do (0)
May 6, 2010 -- Tech talks at LEVEL Studios (0)
March 15, 2010 -- More updates to Mooml coming soon (0)

Happy New Year 2010

Eneko Alonso — Fri, 01 Jan 2010 02:19:52 +0000

(function(){
t=[72,97,112,112,121,32,78,101,119,32,89,101,97,114,32,50,48,49,48];
alert(String.fromCharCode.apply(null, t));
})()

July 30, 2010 -- Titanium Developer: love and hate (2)
July 20, 2010 -- Little tricks: string padding in Javascript (2)
July 1, 2010 -- Little tricks: editing strings by index in Javascript and Python (1)
May 22, 2010 -- More WebSockets, now with Python! (1)

Creating HTML blocks with Mootools

Eneko Alonso — Wed, 02 Sep 2009 20:50:16 +0000

Sometimes we need to create HTML from JS. There are multiple ways to do this, from using innerHTML to creating element by element appending child to parents, setting attributes, etc. And there are as many different opinions about what is the right way to do it.

Meanwhile, once thing I missed from jQuery, not available on Mootools, was the ability to do something like this:

var element = jQuery('
bar
');

In Mootools, the equivalent should be:

var element = new Element('
bar
');

But that does not work.

On the Mootools mailing list, someone was asking about how to implement this and we just found a different approach, which instead of using the Element class, extends the String class like this:

String.implement({
toElement: function() {
return new Element('div', {html:this}).getFirst();
}
});

Now you can do this:

var element = '
bar
'.toElement();

To try it, paste this snippet on Firebug’s console:

String.implement({
toElement: function() {
return new Element('div', {html:this}).getFirst();
}
});
console.log('
bar
'.toElement().get('id'));

Nice, uh? Of course, the HTML can be as complex as you need and where do you get the content of the string is up to you :)

March 24, 2010 -- Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates (0)
July 20, 2010 -- Little tricks: string padding in Javascript (2)
July 1, 2010 -- Little tricks: editing strings by index in Javascript and Python (1)
April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (0)

Bad practices writing Javascript & good tips for everyone

Eneko Alonso — Mon, 17 Aug 2009 18:56:12 +0000

I found specially interesting the use of document fragments.. Didn’t know about them before :)
http://james.padolsey.com/javascript/javascript-bad-practices/

July 30, 2010 -- Titanium Developer: love and hate (2)
July 20, 2010 -- Little tricks: string padding in Javascript (2)
July 1, 2010 -- Little tricks: editing strings by index in Javascript and Python (1)
May 22, 2010 -- More WebSockets, now with Python! (1)

Setters & Getters on Mootools classes

Eneko Alonso — Mon, 20 Jul 2009 23:45:15 +0000

Although I haven’t need them for my classes, I thought it would be very cool to have the possibility to use them. Setters and Getters are very popular in modern programming languages, since they let you do some actions when a member/property of an object is being accessed or modified. Setters and Getters are native on Javascript objects.

// Setter on plain JS
var b = {
saveCount: 0,
set count (c) {
console.log('Setting count (B):' + c);
this.saveCount = c;
},
get count () {
console.log('count is being accessed (B)');
return this.saveCount;
}
}
b.count = 5;
console.log("Count (B): " + b.count);

Well, Mootools objects created using Class do not support that syntax. Fortunately, we can use the __defineSetter__ and __defineGetter__ functions:

// Setter in Mootools
var A = new Class({
saveCount: 0,
initialize: function() {
this.__defineSetter__("count", this.setCount);
this.__defineGetter__("count", this.getCount);
},
setCount: function(c) {
console.log('Setting count(A):' + c);
this.saveCount = c;
},
getCount: function() {
console.log('count is being accessed (A)');
return this.saveCount;
}
});
var a = new A();
a.count = 5;
console.log("Count(A): " + a.count);

Nice, uh?

April 23, 2009 -- Sending messages between Javascript objects (2)
April 7, 2009 -- Setting up timers and intervals inside JS objects (2)
January 2, 2009 -- Solving the 8 Queen Puzzle in Javascript (1)
April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (0)

iPhone 3.0 geolocation with Javascript

Eneko Alonso — Tue, 30 Jun 2009 16:13:43 +0000

I was watching one of the video tutorials from Apple last night about some custom JS available on Safari, only on the iPhone 3.0, that let’s you interact with the phone and obtain data like the current location, etc.

So I built a little page to see how it works. I included Mootools 1.2.3 from Google servers and the Google Maps API. And voilá, with a few lines of code we have a totally functional web based GSP navigation system. A little bit ugly, but functional. Currenlty it only centers the map on the coordinates given by the phone, and also does a reverse geolocation to obtain the address (actually city, state and country). But it could be easily extended to add markers to the map, or even paths to track the movement.

If you have an iPhone (or an iPhone simulator) go to:
http://enekoalonso.com/research/iphone/geolocation.html

The source code:

var Navigator = new Class({
initialize: function() {
// Listen for position changes
this.watchId = navigator.geolocation.watchPosition(
function(position){ this.position(position) }.bind(this),
function() {},
{ enableHighAccuracy: true, timeout: 1000, maximumAge: 10000 }
);
this.infoPanel = $('info');
// Create the Geocoder and the Map
this.geocoder = new google.maps.Geocoder();
this.map = new google.maps.Map($('map'), {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
},
position: function(position) {
// Update labels
this.infoPanel.getElement('p.date').set('text', position.timestamp);
this.infoPanel.getElement('p.coords').set('text', position.coords.latitude + ', ' + position.coords.longitude);
this.infoPanel.getElement('p.altitude').set('text', position.coords.altitude);
this.infoPanel.getElement('p.heading').set('text', position.coords.heading);
this.infoPanel.getElement('p.speed').set('text', position.coords.speed);
// Center map
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
this.map.set_center(latLng);
// Reverse geolocation (get current address)
this.geocoder.geocode({'latLng': latLng},
function(results, status) {
if (google.maps.GeocoderStatus.OK) this.showAddress(results)
}.bind(this)
);
},
showAddress: function(results) {
// console.dir(response);
if (results[1]) {
this.infoPanel.getElement('p.location').set('text', results[1].formatted_address);
}
}
});
window.addEvent('load', function() {
new Navigator();
});

Enjoy.

February 19, 2010 -- Having fun with Mooml & Twitter (0)
January 28, 2010 -- Things to do (0)
February 28, 2009 -- Kyte’s REST API (0)
July 30, 2010 -- Creating QR Codes with Google Charts API (0)

Sending messages between Javascript objects

Eneko Alonso — Fri, 24 Apr 2009 04:44:34 +0000

When applications (or websites) get pretty big, it usually happens that a lot of different objects or classes interact with each other or, even worst, depend on each other to achieve the site functionality.

A simple example could be a Tabs manager class, which controls a set of tabs in the page. Sometimes, the content in this tabs is sensitive to when the tabs are shown or hidden. At this point you have three options: either the Tabs class needs to know about the content or you create a set of callback functions or you use custom events. Still, for every one of these options you are going to need variables referencing the instances of your classes (this is: var myTabs = new Tabs())

Personally, I don’t like having global variables for the objects I create. I think the code gets very messy and complicated.

So, after dealing with all these issues at work day after day I thought it would be very cool to have a messaging system between my classes, the same way other languages like Cocoa do (in a more simpler way, at least for now).

Sending messages between classes

Wouldn’t it be nice if the Tabs class would send a message every time a new tab is selected? Wouldn’t it be nice if the objects that are going to reside inside those tabs could listen to that message and update accordingly?

To do this, I created a Base class and a Register, where my objects will register automatically upon instantiation (thanks to the Base class).

var InstanceRegister = new Class({
instances: [],
addInstance: function(object) {
this.instances.push(object);
},
broadcastMessage: function(msg) {
$A(this.instances).each(function(item, index) {
item.processMessage(msg);
});
}
});
var Register = new InstanceRegister();
var Base = new Class({
ClassName: 'Base',
Implements: Options,
initialize: function(options) {
this.setOptions(options);
Register.addInstance(this);
},
processMessage: function(msg) {
console.log(this.ClassName, ' msg received: ');
console.dir(msg);
},
sendMessage: function(msg) {
Register.broadcastMessage(msg);
}
});

As you can see, the register is just an array of Instances. Yes, Register is a global object, but it will be the only one we will need. Meanwhile, the Base class adds the new instance to the Register automatically. For convenience, the Base class has a sendMessage method. Also, for convenience, I like to add a ClassName property to all my classes in case I need it later for logging, instance class type identification, etc.

Now, thanks to MooTools, we can create our classes and make them inherit from Base. We can override the processMessages method and act accordingly:

var Tabs = new Class({
ClassName: 'Tabs',
Extends: Base,
…
activateTab: function(tab) {
…
this.sendMessage({msg:'tabActivated', data:tab});
}
});
var VideoPlayer = new Class({
ClassName: 'VideoPlayer',
Extends: Base,
…
processMessage: function(msg) {
if (msg.msg == 'tabActivated' && msg.data = 'video-tab') {
// Play video
}
}
});

The beautifulness of this code resides, as I mentioned before, in the absence of any object references. Tabs doesn’t know anything about the VideoPlayer class nor any other object listening to the messages. And the VideoPlayer doesn’t know anything about the Tabs class either. It only knows about the message it has to listen to. No object references, no methods, no callbacks.

Pay attention now. This is the best part! Whenever we instance our classes, no matter how many times we do, we don’t need variable references anymore:

new Tabs();
new VideoPlayer();

Nice, uh?

Since I implemented this class I use it a lot on every project at work. It makes my life easier, keeping my classes simple and independent from each other. It’s even better. We have got to a point where we have integrated this feature with our Flash components, so these send messages to the Register when needed and any JS object listening reacts to them as needed.

By doing this, even being unidirectional (Flash to JS only), we have achieved something great: from now on, our Flash objects don’t need to know anything about our JS objects at all. Just send a message to the register and done.

At any point, even from Firebug, you can send a message to the Register. This is very nice, even for debugging:

A listener class

I found it is very nice, while in development, to have a Listener class debugging any message received. This way I don’t need to add a console.log call on all my classes to output received messages. The Listener will do it for me:

var Listener = new Class({
Extends: Base,
initialize: function() {
this.parent();
this.ignoreMessages = false;
},
processMessage: function(msg) {
if (msg.msg == 'stopListener') this.ignoreMessages = true;
if (msg.msg == 'startListener') this.ignoreMessages = false;
if (this.ignoreMessages) return;
console.log('Listener: msg received:');
console.dir(msg);
}
});
new Listener();

Even you can control the Listener by sending custom messages to it! Awesome!

Could this be achieved with custom events?

With Mootools, creating custom events is piece of cake. But from what I understand, custom events work only inside the object that is firing them. This is, if object A fires an event ‘customEvent’, you can only listen to it if you add a callback function when you instantiate that class:

var A = new Class({
Implements: Events,
initialize: function() {
document.body.addEvent('click', function() {
console.log('A: body clicked');
this.fireEvent('bodyClicked', [this]);
}.bind(this));
}
});
var B = new Class({
doSomething: function() {
console.log('B: doing something…');
}
});
new A({
onBodyClicked: function() {
// Tell B to do something (you need a reference to B!)
}
});
new B(); // Will never do something

Ideally, B should be able to listen to the bodyClicked event without passing any info when A is instantiated. But if I’m not mistaken, this is not possible.

Revised version

I decided that it would be cool to have the Messenger as something my classes could implement, instead of inherit from (Base). Also, it would be good if one object could register for a specific message only, which would improve performance too.

var NotificationServiceCenter = new Class({
instances: {},
addObserver: function(msg, instance) {
if (!this.instances[msg]) {
this.instances[msg] = [];
}
this.instances[msg].push(instance);
},
broadcastMessage: function(msg, data) {
if (this.instances[msg]) {
$A(this.instances[msg]).each(function(item, index) {
item.processMessage(msg, data);
});
}
}
});
var NotificationService = new NotificationServiceCenter();
var Messenger = new Class({
addMsgEvent: function(msg) {
NotificationService.addObserver(msg, this);
},
sendMessage: function(msg, data) {
NotificationService.broadcastMessage(msg, data);
},
processMessage: function(msg, data) {
// For implementation on the final Class
}
});
var A = new Class({
Implements: Messenger,
initialize: function() {
document.body.addEvent('click', function(){
console.log('A: document body clicked');
this.sendMessage('documentbodyclicked', 'Hello world!');
}.bind(this));
}
});
var B = new Class({
Implements: Messenger,
initialize: function() {
this.addMsgEvent('documentbodyclicked');
},
processMessage: function(msg, data) {
console.log('B: msg received: ', data);
}
});
new A();
new B();

Here you go!

July 20, 2009 -- Setters & Getters on Mootools classes (0)
April 7, 2009 -- Setting up timers and intervals inside JS objects (2)
January 2, 2009 -- Solving the 8 Queen Puzzle in Javascript (1)
January 18, 2010 -- Finally: Singletons, the Mootools way (0)

Setting up timers and intervals inside JS objects

Eneko Alonso — Wed, 08 Apr 2009 05:00:58 +0000

It may seem trivial but it has its tricky point. Usually, in procedural Javascript (this is, non object oriented programming), timers are set up passing the callback function on a string:

function hello() {
alert("hello");
}
// Will execute hello() after 10 seconds
setTimeout('hello()', 10000);

For this code to work, hello() has to be a global function (actually a function of the window object). Otherwise, when the timer times out, it won’t find it.

When writing object oriented code, one would like to call a function inside the object itself, not a global function. We can achieve this passing an anonymous function to the setTimeout function that calls our function:

var MyClass = new Class({
initialize: function() {
setTimeout(function() { this.hello(); }, 10000); // This wont work
},
hello: function() {
alert("hello");
}
});

The previous code wont work, since this inside the anonymous function points to the window object and not to our instance of MyClass. We solve this using the bind function provided by Mootools:

var MyClass = new Class({
initialize: function() {
setTimeout(function() { this.hello(); }.bind(this), 10000);
},
hello: function() {
alert("hello");
}
});

This code will work fine, but it still has a big problem. If we wanted to access any member or function of our instance inside the hello() function, it wouldn’t work. This is because when the timer times out, the context of our instance is lost. Inside the hello() function, this will point to the window object.

var MyClass = new Class({
initialize: function() {
this.text = 'hello';
setTimeout(function() { this.hello(); }.bind(this), 10000);
},
hello: function() {
alert(this.text); // This wont work
}
});

There are multiple ways to solve this issue but my favorite is to use the function call() of the function object. This function let’s you pass an object while calling your function that will become this inside it.

var MyClass = new Class({
initialize: function() {
this.text = 'hello';
setTimeout(function() { this.hello.call(this); }.bind(this), 10000);
},
hello: function() {
alert(this.text);
}
});

Now we can use this inside the hello() function and everything will work fine, no matter how many instances of MyClass we create.

var MyClass = new Class({
initialize: function(text) {
this.text = text;
setTimeout(function() { this.hello.call(this); }.bind(this), 10000);
},
hello: function() {
alert(this.text);
}
});
new MyClass('hello');
new MyClass('hi there!');
new MyClass('wassup?');

Enjoy :)

April 23, 2009 -- Sending messages between Javascript objects (2)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)
January 18, 2010 -- Finally: Singletons, the Mootools way (0)
July 20, 2009 -- Setters & Getters on Mootools classes (0)

Chrome Experiments

Eneko Alonso — Sun, 29 Mar 2009 23:34:52 +0000

chromeexperiments.com gathers a good amount of very impressive javascript demos, showing the future of the Internet, where javascript intensive sites and application will become more and more common.

My favorites:
Browser ball – bounce a ball between different browser windows
Kaleidoscope – very smooth animation and beautiful colors

July 30, 2010 -- Titanium Developer: love and hate (2)
July 20, 2010 -- Little tricks: string padding in Javascript (2)
July 1, 2010 -- Little tricks: editing strings by index in Javascript and Python (1)
May 22, 2010 -- More WebSockets, now with Python! (1)

dev.enekoalonso.com » javascript

Titanium Developer: love and hate

The good things

The bad things

Conclusion

Related Posts:

Little tricks: string padding in Javascript

Related Posts:

Little tricks: editing strings by index in Javascript and Python

The solution: convert to array and back to string

Related Posts:

More WebSockets, now with Python!

Related Posts:

Performance matters

Related Posts:

Interesting JSON vulnerability (old stuff)

Related Posts:

Mooml 1.2.3 – Bye, bye, with()

Related Posts:

Getting unique timestamps in Javascript

Related Posts:

Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates

What is new in Mooml 1.1

No more eval()

Mooml.Template

Mooml.Templates

Pass functions as arguments to template functions

References to elements with an Id

Related Posts:

Having fun with Mooml & Twitter

Searching Twitter

The code

Related Posts:

Mooml.globalize(): Mooml template functions going global

Related Posts:

Dojo y yo

Some cool stuff about Dojo

Related Posts:

Happy New Year 2010

Related Posts:

Creating HTML blocks with Mootools

Related Posts:

Bad practices writing Javascript & good tips for everyone

Related Posts:

Setters & Getters on Mootools classes

Related Posts:

iPhone 3.0 geolocation with Javascript

Related Posts:

Sending messages between Javascript objects

Sending messages between classes

A listener class

Could this be achieved with custom events?

Revised version

Related Posts:

Setting up timers and intervals inside JS objects

Related Posts:

Chrome Experiments

Related Posts: