McArthur GFX

MVC in MooTools: Views

Sep 02, 2010

After you make the building blocks of your application, using Models, Views are how you display that information to a user. Having written a lot of JavaScript that adds content to the page, I know just how much it can suck. You typically have two options:

1. Concatenate a huge string of markup with variables, then setting the innerHTML of a div.
2. Use a bunch of document.createElement and el.appendChild, ad infinitum.

Both are equally unappetizing. Wouldn’t it be so much nicer to write your views like we do in other languages?

Templating

Here’s a nice mix of HTML and JavaScript. No tricky string concatenation¹. You just have to put your JavaScript inside tags like you would in PHP.

<% tasks.forEach(function(task) { %>

    

        
        <%= task.get('title') %>
        <% if(tag.get('tags').length) { 
            print(view('tasks/inline_tags', { tags: task.get('tags') }));
        } %>
    

<% }); %>

View.Helpers

Besides print, which does exactly what you think it does, there are a bunch of other functions that are sort of “globally” accessible from a View. And these are functions defined on View.Helpers. The most basic version of the helpers only includes a view function, which let’s you nest views inside each other, like I used above. If you include the View.Helpers file, you get more functions, such as excerpt (truncates to a certain length) and date (allows date formating similar to PHP’s date method). As I find more basic functions that you would want in a templating system, I’ll add more, such as possibly something like escape.

The File

These are saved as .html files. You don’t need to manually include them like Models or Controllers; the View class will first check to see if they’ve been included, and if not, go and fetch them over the wire. And they go in you app’s views folder. The example above would have a structure like so:

js/
    views/
        tasks/
            list.html

The View Class

The View Class is what converts templates into views for your application. You can instantiate a View, and then pass it data and ask for it to process itself using the passed data.

var myView = new View('tasks/list').render({ tasks: myTasks });
myEl.grab(myView);
myOtherEl.set('html', myView);

Views have both a toElement and toString function defined to return the processed mark-up in the proper format. This means you can simply pass the view as a parameter to most MooTools Element methods, and it just works².

Good news, though: Controllers have a convenience method called view that really makes this a joy to use. I’ll have more to say about Controllers in my next report.

Ladies. Look at your code.

Aug 30, 2010

Now look at mine.

Sadly, it isn’t mine.

I’m on a horse.¹

The Omnibox

Aug 30, 2010

Chrome started it.

Firefox is following along in version 4. The browser in Android does this too.

There is only one bar to enter text. You can enter a URL, and it will work as you’d expect. Or you can enter some terms, and it will send you to your default search engine.

Google has done the same with the default browser in Android. Apparently, it can be confusing in the iPhone’s Safari.

To think that most users of a browser are going to know the difference between a URL and search term would be wrong thinking. To make users care about the difference, for those that do know it, is not caring about your users. All the users should care about is:

How can I find what I’m looking for? Ah yes, the browser bar. I’ll just type what I’m looking for here. It will tell me.

When will all browsers finally combine the location bar with the search bar?

What's in your Simplenote?

Aug 26, 2010

It’s always cool to learn new systems to productivity and work. Patrick Rhone asks people to share what they keep in their Simplenote, and so I join in:

• Blog Post Drafts - Ideas hit me at random times. So I’ll start writing, sometimes at lunch time, or waiting outside the dressing room like a loyal husband, or at midnight after reading from Instapaper. Even this post is in my Simplenote.
• My Wishlist - I keep an ordered list of what little things I’d like to save up for, one at a time. Current contents include: a second monitor, Carcassonne, and a chess timer.
• Brainstorming Spurts - When I have an idea for something in the future, I like to keep it with me so I may review it from time to time, and add to it when something more hits me. Such as my current freemium plans for a personal project.

I quite like Patrick’s Yay me! idea, and Randy’s elevator pitch/bio idea.

Stylebot

Aug 26, 2010

This is a fantastic extension for Chrome. This lets you easily edit the styles of a web page, and have them be saved and applied next time you visit.

The demo shows one excellent use: improving a site you frequent. I did that for Kotaku/Lifehacker. I never use the Share box, and always mistake it for a search box. So, share box hidden, search box moved into place.

Also, I have refrained from Adblockers in the past because I don’t want to block all ads. I respect websites’ needs to make money. But I don’t respect the need to make a website that is more about the ads than the content. So, certain websites that cover their articles in flash ads, or have far too many ads in the sidebar, have their ads hidden.

Yes, I know. Shame on me, etc.