Application Structure (The M Project 1.x)

Introduction

Before you get started with building your own applications based on The M-Project, you need to know how to structure such an application. There are lots of view elements available by now, so it is important to know how they have to be combined to get a nice application at the end.

How to structure a “Hello World” Application

Let's dive right into some code sample:

SampleApp.app = M.Application.design({

    page: M.PageView.design({

        childViews: 'header content footer',

        header: M.ToolbarView.design({

            value: 'HEADER',
            anchorLocation : M.TOP

        }),

        content: M.ScrollView.design({

            childViews: 'label',

            label: M.LabelView.design({

                value: 'Hello World '

            })

        }),

        footer: M.ToolbarView.design({

            value: 'FOOTER',
            anchorLocation: M.BOTTOM

        })

    })

});

What you see above is the basic structure of an application built with The M-Project. The surrounding element is M.Application. This basically no view at all since nothing is rendered. It is more like the root node of your application, the object that holds all ties together. Nevertheless we use the design() method any object provides that extends M.View. This method the most important one in the view context within The M-Project. All views implement this method as the convenient way for a developer to customize a view. In our sample application you can see this, too. If you take a close look, you will see that we actually simply pass an object to the design() method that is internally used to set the view's properties, e.g. value or anchorLocation, depending on the view's type.

Another important thing is the childViews property. It is used to define a view's child views. You might ask why we need this, since a view's childs are defined inside its design() method, so we already know them. The reason for using the childViews property is to be able to activate and deactivate child views pretty fast, since only the child views specified with the childViews property are really rendered. So this property primarily helps during the development process to quickly add / remove a view by simply removing its name from the childViews property of the parent view.