LudoJS View

new ludo.View({ });

When you render something on screen in ludoJS, you create a View. The most basic View, and ancestor to all other Views is ludo.View. This will append this to your HTML document.

<div class="ludo-view">
    <div class="ludo-body">

    </div>
</div>

In code, you create a view by calling

new ludo.View({
    // Object containing constructor params
});

renderTo

new ludo.View({
    renderTo:document.body
});

When creating a ludoJS View using new like above, you should specify where to render the View. Inside ludoJS, the jQuery $ is used on this argument, so any value acceptable to jQuery's $ function is acceptable here.

Child Views

A view can have child Views. The HTML of child views are rendered inside

<div class="ludo-body"></div>

of it's parent view.

Child Views are usually configured in a children array of it's parent View.

<div id="view-container1" style="height:360px"></div>
<script type="text/javascript">
new ludo.View({
    renderTo:'#view-container1',
    layout:{ width:300,height:300 },
    children:[
        { // Configuration for a ludo.View
            type:'View', //
            html: 'Child A', layout:{height:60}
        },
        {   // Configuration for a ludo.View
            html: 'Child B', layout:{height:60}
        }
    ]
});
</script>

The code above renders three views to the screen, one parent view and two child views. Parent view has been created with new ludo.View. The child views are create automatically from the config properties inside the children array.

The configuration properties for the view inside the children array are the same as you have when you call new ludo.View

With the code above, the following HTML is created:

<div class="ludo-view">
    <div class="ludo-body">
        <div class="ludo-view">
            <div class="ludo-body">Child A</div>
        </div>
        <div class="ludo-view">
            <div class="ludo-body">Child B</div>
        </div>
    </div>
</div>

As you can see, the two child views have been appended inside the <div class="ludo-body"> element of it's parent view.

Kind of view

ludo.View is the basic View in ludoJS, and ancestor to all other views. There are many other Views in ludoJS which are available for you.

For example, to create a View with a title bar, you create a new ludo.FramedView

new ludo.FramedView({})

In the children array, kind of View is defined using the type property. If type is not set, a basic ludo.View will be rendered.

new ludo.View({
    children:[
        { type:'FramedView', title: 'Framed View' } // No "ludo" prefix in "type"
    ]
});

Here's the same demo as above where parent View and one of the child views is of type ludo.FramedView:

<div id="view-container2" style="height:390px"></div>
<script type="text/javascript">
new ludo.FramedView({
    renderTo:'#view-container2',
    title:'View',
    layout:{ width:300,height:300  },
    children:[
        { // Configuration for a ludo.View
            html: 'Child A', layout:{height:60}
        },
        {   // Configuration for a ludo.View
            type:'FramedView', // Type decides kind of View
            html: 'Child B', layout:{height:60}, title: 'Framed View'
        }
    ]
});
</script>

Creating your own views

To create your own reusable views, extend ludo.View or one of the other View classes. This is done with code like this:

Example:

ludo.factory.ns('myApp.view'); // automatically creates window.myApp = {} and window.myApp.view = {} if  not defined.
myApp.view.MyView = new Class({
    Extends: ludo.View,
    color: undefined,

    __construct:function(config){
        this.parent(config);
        this.color= config.color;
    },

    __rendered:function(){
        this.parent();
        if(this.color != undefined){
            this.getBody().css('background-color', this.color);
        }
    }
});
ludo.factory.createAlias('myApp.view.MyView', myApp.view.MyView); 

in LudoJS, the Mootools library has been used to make extendable classes. You extend a View by using the Extend keyword.

The __construct method is the constructor of a View. You can override this method in your new Views. Just remember to always call the parent constructor with this.parent(config).

__rendered is another method which we can override. This method is called just after the View has been rendered on screen.

Create alias name for your class

After your View has been created, we recommend creating an alias to make ludoJS aware of your new View. This is best practice for performance.

An alias is created like this:

ludo.factory.createAlias('myApp.view.MyView', myApp.view.MyView); 

The first argument is the alias name, the second is a reference to your class. Alias name is what you use for the type attribute when you use your View in a View hierarchy(children array).

Use your new View

Your new View is now ready for use

new myApp.view.MyView({});

or

children:[{
    type: 'myApp.view.MyView'
    }]

Demo - Custom View

<div id="view-container3" style="height:390px"></div>
<script type="text/javascript">

ludo.factory.ns("sampleApp.view");
sampleApp.view.HelloWorldView = new Class({
    Extends: ludo.View,
    _html: 'Hello World', // _html  and not html when extending a class, html is a method
    css:{ 'background-color': '#669900' }
});
ludo.factory.createAlias("sampleApp.view.HelloWorldView", sampleApp.view.HelloWorldView);

new ludo.FramedView({
    renderTo:'#view-container3',
    title:'View',
    layout:{ width:300,height:300  },
    children:[
        { 
            type:'sampleApp.view.HelloWorldView',
            layout:{height:60}
        },
        {
            type:'sampleApp.view.HelloWorldView',
            layout:{height:60}
        }
    ]
});
</script>