v 1.1.3

Getting started with modoJS

Of course, you need to download your copy of modoJS, first. I recommend you to download the development build. Its a bit larger because it contains ALL available UI elements, but this way you can just develop your app without having to make up your mind about which elements you will be using in the end.

Don't wory about that - there is a way to tell which elements you really have used and which not.

Setting up your HTML file

What you really need to do to make modoJS running is loading the javascript library and the rudimentary CSS styles into your html file - and of course the dependencies: jQuery and Backbone.

If you want to sketch out your interface quickly, or want to rely on a predefined theme anyways, you'll also need to include the theme CSS file into your html document.

<!DOCTYPE html>
<html>
<head>
    <title>My first modoJS app</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!-- this is needed -->
    <link href="modo-1.1.1-full.css" type="text/css" rel="stylesheet" media="screen">

    <!-- This is optional -->
    <link href="morphine.css" type="text/css" rel="stylesheet" media="screen">

    <!-- Your custom styles -->
    <link href="myApp.css" type="text/css" rel="stylesheet" media="screen">    
</head>
<body>
    <!-- dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="lib/js/jquery-2.1.4.min.js"><\/script>')</script>
    <script src="//oss.maxcdn.com/underscorejs/1.8.3/underscore-min.js"></script>
    <script src="//oss.maxcdn.com/backbonejs/1.2.1/backbone-min.js"></script>

    <!-- the modoJS library -->
    <script src="modo-1.1.1-full.min.js"></script>

    <!-- your app code! -->
    <script src="myApp.js"></script>
</body>
</html>

This should be good to go - and you most certainly won't ever have to touch that HTML file again.

I strongly recommend to utilize a module loader like requireJS for developing your app. It also helps you to structurize your application code - and even modularize your user interface to do cool stuff like this:

require(['ui/dialogs/createUser'], function(dialog){
    dialog.open();
});

This enables you to load and open dialogs (for example) from anywhere in your application!

Creating a basic user interface

You know what? Lets build a basic code editor. Well, at least one, that can load and display code files. That should be a very easy task with the default elements modoJS brings to you.

In the HTML file above, you can see that there is a myApp.js included at the very end of the document. That contains the logic of your application.

Lets create a basic interface for our code editor. We do so by using the modo.generate() utility function because it makes interface creation much faster and easier.

var fileList = [
    "index.html",
    "myApp.js"
];

var ui = modo.generate(
    {
        type: 'FlexContainer',
        ref: 'root',
        children: [
            {   //On the left side of our app, there should be a sidebar.
                type: 'Container',
                params: {
                    className: 'tme-application-sidebar' //All tme-* classes come from the CSS theme
                },
                children: [
                    {   //We place one element into the sidebar - a list for our files
                        type: 'List',
                        params: {
                            data: fileList
                        }
                    }
                ]
            },
            {   //The right side of our app should contain a full-size editor
                type: 'AceEditor',
                ref: 'editorElement',
                flexible: true
            }
        ]
    }
);

//And now, tell modoJS to add our UI to the DOM!
modo.init(ui.root);

After adding a small CSS change to bring padding to the sidebar, the application looks like this, now:

Our first app

Loading files into the editor

Now we want the app to actually do something. When the user clicks on a filename in the list, the file should be loaded from the server and displayed in the editor element.

For this purpose, we add the itemEvents property into our UI declaration to tell the generator that we want to attach some event listeners to the list elements:

...
{   //We place one element into the sidebar - a list for our files
    type: 'List',
    params: {
        data: fileList,
        itemEvents: {
            'click': function(e, i, fileName){ //event, index, data
                $.get(fileName, function(result){
                    ui.editorElement.set(result);
                }, 'text');
            }
        }
    }
}
...

And thats it already. The files will be pulled from the server by jQuery and the result will be set on the code editor. If you want to be perfect, you could switch the editor mode between "html" and "javascript" depending on the extension of the file to be loaded. I actually did that when you click on the resulting link at the bottom of this article ;)

One final thing

Lets add another button to the interface that clears the content of our editor - just for fun.

We add the button right below the List element into our sidebar:

...(list element above)...
{
    type: 'Button',
    params: {
        label: 'Clear editor'
    },
    on: {
        click: function(){
            ui.editorElement.set('');
        }
    }
}
...

Notice that we attached events this time through the on property. This is because normally, you would attach event-listeners through object.on('event', callback);. This is also applied when using the generate() directives - but only because you will listen to pre-configured events there. You can look up all events of all elements in the reference documentation.
Its a different case with our list element above. Notice that we passed our events to a constructor parameter there (property itemEvents). Thats because its technically no event of the element itself, but a custom event you attach to the items inside the list.
Most confusing example ever, but I hope you get it. Rule of thumb: all events should be attached through on - outside of the params property. :)

Finished in record time!

Our first app

Well, yeah - thats it for the beginning. You can see the demo app we've created, here. Nice side-effect: the editor will display its own source code when you click on the files in the sidebar ;)

Leave a comment if you like to!

comments powered by Disqus