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:

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:

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

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:

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!

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:

With Mooml.globalize() we can do this:

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

Will generate the dom elements for this html:

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.

Asset.css claims to have an onload event in Mootools documentation, but sadly, not all browsers support this feature. Even worse, browsers like Chrome seem to support the event, but never fire it.

After some research and testing at work, we have come up with a solution that overrides Asset.css to detect when CSS gets loaded by the browser using the onload event in those browsers that support it (Internet Explorer and Opera) and doing polling in those that do not (Chrome, Safari and Firefox). Here is the code:

Enjoy!

I have been using for a while the “new new Class” syntax to create singletons on the projects I am working on. This is for many reasons, but specially because I didn’t like other solutions like Class.Mutators, Class.Oclude or extending a plain object with $extend().

Now, after discussing a little bit on the Mootools email list about what was the best way to create singletons, I have created Class.Singleton so we can create singletons the Mootools way. Here is how it works:

Using inheritance, mixins, etc

Class.Singleton works like defining any other Mootools class using Class(), so we can have inheritance, mixins, etc.

Hope you like it!

Repository url: http://github.com/eneko/Class.Singleton

It was a month ago when I found about Jaml, an excellent small Javascript library created by Ed Spencer which allows generating HTML code using very nice and clean templates. At work we use Mootools in most of our projects, so I thought it would be nice to improve Jaml by taking advantage of the power of Mootools. And this is the result.

Mooml: Mootools markup language

What is Mooml? Mooml is a templating system that allows generating HTML snippets very easily, without all the ugly nested “new Element” calls or string concatenation. With Mooml you can save templates for later use or evaluate snippets on the fly.

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

Let’s see an example

Required HTML:

Node title and body are variables, so let’s save them on a Json format for now.

Using Mootools “new Element” we would have to code something like this:

That code is much better than plain Javascript, but still messy. We could use the new Elements.from included in Mootools More 1.2.4, but that would require us writing the html as a string, which rapidly gets messy concatenating variables, etc.

With Mooml…

With Mooml, we can create a template for that piece of code, and reuse it later as many times as we need:

We can also execute the template directly as a function:

Finally, with Mooml we can evaluate templates on the fly, without having to store them for later:

More examples soon :)

On all the projects I’ve worked on, I always try to follow the MVC arquitectural pattern, separating the model from the view *and* creating a controller. It may be a simple controller in charge of a tab-set, or an accordion. Or it may be a full size controller in charge of the whole page structure, on sites that make an extensive use of javascript.

Either way, I always have a controller for a dynamic section of the page and the controller always works with the container of that section. If I need to reference any element inside the container I will use this.container.getElementById() or this.container.getElements(), which will do a search only on the child elements of the container and not on the whole dom tree of the page.

Yes, it is very usual to see nowadays code that alters the links of a page we are searching the whole page. And coding like that is just a waste of resources.

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:

In Mootools, the equivalent should be:

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:

Now you can do this:

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

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 :)

Very nice snippet to solve a few annoying issues with the change event:
http://www.meiocodigo.com/2009/08/13/new-changed-event/

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.

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

Nice, uh?

Two interesting things I have to review;
MooTools: Bubbling Controllers
MooTools: Ignoring the next click