Controller

To invoke Controller, as follows

• tipJS.action("controller name", parameter)
• tipJS.action.controllerName(parameter)

It invokes beforeController method that defined in tipJS.app method before processing the Controller that defined in tipJS.controller method. And it is invoked afterController method that defeind in define.js after completed process of Controller.

Controller Tutorial [src] [view]

The second argument of tipJS.action method can be used as input argument for:

• beforeController method and afterController method in tipJS.define method
• beforeInvoke, invoke, afterInvoke and exceptionInvoke method in Controller

An attribute “this.controllerName” in beforeController / afterController method represents a name of a controller currently running.

tipJS.app({
    ...
    onLoad:function(params){
        // call Controller
        tipJS.action("someController", "someValue");
        // or
        tipJS.action.someController("someValue");
    },
    beforeController:function(params){
        console.log(params); // result is "someValue"
        console.log(this.controllerName); // result is "someController"
    },
    afterController:function(params){
        console.log(params); // result is "someValue"
        console.log(this.controllerName); // result is "someController"
    },
    ...
});

// controllers/someController.js
tipJS.controller("someController", {
    beforeInvoke:function(params){
        console.log(params); // result is "someValue"
    },
    invoke:function(params){
        console.log(params); // result is "someValue"
    },
    afterInvoke:function(params){
        console.log(params); // result is "someValue"
    },
    exceptionInvoke:function(exception, params){
        console.log(params); // result is "someValue"
    }
});

You can invoke tipJS.action method at any location since you have invoked tipJS.loadApp method.

// controllers/someController.js
tipJS.controller("someController", {
    beforeInvoke:function(params){
    ....
    },
    invoke:function(params){
        console.log("invoke Start");
        // load Application Model
        var initModel = this.getModel("initModel");
        // load Application ViewModel
        var initView = this.getView("initView");

        initView.drawBody(bodyHtml);

        console.log("invoke Done");
    },
    afterInvoke:function(params){
        ....
    },
    exceptionInvoke:function(exception, params){
        alert(exception);
    }
});

tipJS.app({
    ...
    onLoad:function(params){
        tipJS.action("someController", params);
    },
    ...
});

There are four basic methods in Controller. They run as below.

The tipJS Javascript MVC Framework in general cases runs beforeInvoke method first, invoke method second and afterInvoke method last. The exceptionInvoke method is called only if 1) exceptionInvoke method is defined in Controller and 2) an exception is raised while running Controller.

You can call any user defined methods in Controller.

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke:function(params){
        this.userFn();
    },
    userFn:function(){
        ...
        Some Process..
        ...
    }
});

If “async” attribute is set as true when Controller declared, the controller runs in async mode. You can also set delay time with “delay” attribute. Its unit value is 1/1000 sec.

// controllers/someController.js
tipJS.controller("someController", {
    async:true, // AnSynchronized Controller
    delay:500, // 0.5 sec.
    ...
    invoke:function(params){
        this.userFn();
    },
    userFn:function(){
        ...
        Some Process..
        ...
    }
});

Here are attributes details defined in Controller besides four basic methods.

• async
  sets async mode (true – async mode)
• delay
  sets async delay in 1/1000 sec unit (default: 15)
• getModel(ModelName)
  get Application Model Object defined in tipJS.model method
• getView(ViewName)
  get Application View Object defined in tipJS.view method
• render(options)
  see HTML Template
• getById(id)
  equivalent to document.getElementById
• getByName(name)
  equivalent to document.getElementsByName
• getByTag(tagName)
  equivalent to document.getElementsByTagName

Model

You don't necessarily have to implement Model Object in tipJS JavaScript MVC Framework. Model Object can be implemented if required.
You can load a different Model in the same Layer.

When you define Model, methods automatically defined by Framework are as follows

• __init
  __init method will invoke only once when corresponding Model or View is created following call by loadModel or loadView.
• getModel(modelName)
  get Application Model Object defined in tipJS.model method.
• getById(id)
  equivalent to document.getElementById.
• getByName(name)
  equivalent to document.getElementsByName.
• getByTag(tagName)
  equivalent to document.getElementsByTagName.

VO (Value Object) Model should be used if you don't need methods automatically defined. Please refer to following VO (Value Object) Model section for further details.
Model Tutorial [src] [view]

// models/someModel.js
tipJS.model("someModel", {
    __init:function(){
        // Object was created by the framework is executed only once and destroyed.
        ...
    },
    properties:...
    someMethods:function(){
        var someModel2 = this.getModel("someModel2");
        ... some process ...
    }
});

// models/someModel.js
tipJS.model("someModel", {
    __init:function(){
        // Object was created by the framework is executed only once and destroyed.
        ...
    },
    someValue:"foo"
});

// controller One
tipJS.controller("someController1", {
    ...
    invoke:function(params){

        // load Application Model(normal)
        var someModel = this.getModel("someModel");
        console.log(someModel.someValue); // "foo"
        someModel.someValue = "bar";

        // load Application Model(synchronized)
        var someModelSync = this.getModel("someModel", true);
        console.log(someModelSync.someValue); // "foo"
        someModelSync.someValue = "bar";
    },
    ...
});

// controller Two
tipJS.controller("someController2", {
    ...
    invoke:function(params){

    // load Application Model(normal)
    var someModel = this.getModel("someModel");
    console.log(someModel.someValue); // "foo"

    // load Application Model(synchronized)
    var someModelSync = this.getModel("someModel", true);
    console.log(someModelSync.someValue); // "bar"
    },
    ...
});

// models/modelVO.js
tipJS.model("modelVO", {
    __init:function(){
    // Object was created by the framework is executed only once and destroyed.
        ...
    },
    value1 : "123",
    value2 : "abcd"
});

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke:function(params){
        console.dir(this.loadModel("someModel"));
        console.dir(this.loadModel("modelVO"));
    },
    ...
});

tipJS.model("modelParent", {
    parent1 : "modelParent",
    parentFn : function() {
        console.log(this.parent1); // modelParent
    }
});

tipJS.model("modelChild",{
    __extend : "modelParent",
    child1 : "modelChild",
    childFn : function() {
        console.log(this.child1); // modelChild
    }
});

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke : function() {
        var modelChild = this.getModel("modelChild");
        modelChild.parentFn(); // modelParent
        modelChild.childFn(); // modelChild
    },
    ...
});

View Model

You don't necessarily have to implement ViewModel Object in tipJS JavaScript MVC Framework. Model Object and View Object can be implemented if required.
ViewModel is for seperating logics of HTML Template from Controller.
You can load a different ViewModel in the same Layer.

When you define ViewModel, methods automatically defined by Framework are as follows.

• __init
  __init method will invoke only once when corresponding ViewModel is created following call by getView.
• getView(viewName)
  loads Application ViewModel defined in tipJS.model method.
• getById(id)
  getById(id) equivalent to document.getElementById.
• getByName(name)
  getByName(name) equivalent to document.getElementsByName.
• getByTag(tagName)
  getByTag(tagName) equivalent to document.getElementsByTagName.
• render(options)
  Please refer to following HTML Template section for further details.

View(HTML Template) Tutorial [src] [view]

// views/someView.js
tipJS.view("someView", {
    properties:...
    methods:function(){
        ...
    }
});

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke : function() {
    var modelChild = this.getModel("modelChild");
        modelChild.parentFn(); // modelParent
        modelChild.childFn(); // modelChild
    },
    ...
});

tipJS.view("viewParent", {
    parent1 : "viewParent",
    parentFn : function() {
        console.log(this.parent1); // viewParent
    }
});

tipJS.view("viewChild",{
    __extend : "viewParent",
    child1 : "viewChild",
    childFn : function() {
        console.log(this.child1); // viewChild
    }
});

// controllers/someController.js
tipJS.controller("someController", {
    ...
    invoke : function() {
        var viewChild = this.getView("viewChild");
        viewChild.parentFn(); // viewParent
        viewChild.childFn(); // viewChild
    },
    ...
});

HTML Template

tipJS JavaScript MVC Framework provides HTML based template engine.

render method implements data mapping in HTML template Then, if id value is defined as renderTo property, the method will return HTML string including mapping data after printing it out to corresponding element.
Once a HTML template file has been loaded, tipJS will load it from cache. if you don't want to load a template file from cache, please change templateCache property of tipJS.app method from default value to ‘false'.(default:true)

If renderTo property is skipped, renderTemplate method always returns HTML string including mapping data without printing it out.

<-- index.html -->
<html>
    <head>
        <script type="text/javascript" src="/tipJS/tipJS.min.js"></script>
        <script>
            window.onload = function(){
                tipJS.loadApp(["someApplication"]);
            };
        </script>
    <body>
        <div id="target_id"></div>
    </body>
</html>

<-- someTpl.tpl -->
<h1>
<@= data.someString @>
</h1>
<ul>
<@ for(var i=0; i<data.someArray.length; i++) { @>
    <li> <@= data.someArray[i] @> </li>
<@ } @>
</ul>

// controllers/someController.js
tipJS.controller("someController", {
    invoke:function(params){
        var _templateConfig = {
            url:"/templates/someTemplate.tpl",
            renderTo:"target_id",
            data: {
                someString:"some String " + params,
                someArray:["some1","some2","some3"]
            }
        };
        var returnHTML = this.render(_templateConfig); // return html
    }
});

ViewModel(HTML Template) Tutorial [src] [view]

<-- someTpl.tpl -->
<div>
    <ul>
    <@ for(var i=0; i<data.length; i++) { @>
        <@ if (i != 0) {@><li class="<@=( (i==2) ? "foo":"bar" )@>"><@= data[i] @></li>
        <@}else{@><div class="<@=( (i==2) ? "foo":"bar" )@>"><@= data[i] @></div><@}@>
    <@ } @>
    </ul>
</div>

ViewExtend(HTML Template) Tutorial [src] [view]

tipJS prints out values to <@= value @> in HTML Template, and loop control statement should be located in <@ for(…) @> . Please note with caution that an error occurs when you put a termination character (;) in front of a termination tag (@>).

Properties of Object, an argument of this.renderTemplate method, are as follows:

• url
  It defines url of HTML Template file. There is no limit on extention name of files.
• renderTo
  It defines id value of HTML element in which HTML string including mapping data will be printed. (Not necessary).
• data
  It defines data will be mapped.

You can receive rendered HTML as formats of HTML string and data Object.

tipJS.controller("someController", {
    invoke:function(params){
        var htmlString = "<div><@= data.foo @></div>";
        var data = {
            foo:"foo"
        };
        var returnHTML = this.render(htmlString, data); // return html
    }
});

[[#template01]] <!-- id : "template01" -->
<ul>
    <li><@= data.foo @></li>
</ul>
[[#template02]] <!-- id : "template02" -->
<span><@= data.bar @></span>

// someController1.js
tipJS.controller("someController1", {
    invoke : function(params){
        var _templateConfig = {
            url:"/templates/someTemplate.tpl",
            renderTo:"target_id",
            tplId:"template01",  // id : "template01"
            data:{
                foo:"foo"
            }
        };
        var returnHTML = this.render(_templateConfig); // return template01 html
    }
});

// someController2.js
tipJS.controller("someController2", {
    invoke : function(params){
        var _templateConfig = {
            url:"/templates/someTemplate.tpl",
            renderTo:"target_id",
            tplId:"template02", // id : "template02"
            data:{
                bar:"bar"
            }
        };
        var returnHTML = this.render(_templateConfig); // return template02 html
    }
});

AOP

tipJS JavaScript MVC Framework provides AOP(Aspect-Oriented Programming). add 'interceptors' property in the tipJS.app method when you want activate it.

tipJS.app({
    ...
    interceptors:[
        "interceptor.js"
    ]
    ...
});

Create interceptors folder below the application folder and add interceptor JS files. Use tipJS.interceptor method for interceptor registration.

tipJS.interceptor("interceptor", {
    target:"controllers",
    before:function(){
        console.log("interceptor.before : " + this.msg);
    },
    after:[
        function(){
            console.log("interceptor.after #1 : " + this.msg);
        },
        function(){
            console.log("interceptor.after #2 : " + this.msg);
        }
    ]
});

target property means point cut.

For example, If it applies to the entire range of Model puts the models(ex:”models”).
If it applies to a Model puts the Model Name(ex:”models.modelName” or “models.modelNam*”).
If it applies to particular method of a particular Model puts method Name.
(ex:”models.modelName.getName” or “models.modelName.get*”).

The target property of an array and more than one available.
'this' context in before and after means target's context.
The Before, the after can be specify more than one, too.

There is Controller code.

tipJS.controller("someCtrler", {
    msg:"some Message",
    invoke:function(params){
        console.log( this.msg ); // "some Message"
    }
});

The result is as follows:

interceptor.before : some Message
some Message
interceptor.after #1 : some Message
interceptor.after #2 : some Message

tipJS.controller("someCtrler", {
    msg:"some Message",
    invoke:function(params){
        console.log( this.msg ); // "some Message"
    }
});

tipJS.interceptor("interceptor1", {
    order:1,
    target:"controllers",
    before:function(){
        console.log("interceptor.before #1-1 : " + this.msg);
    },
    after:[
        function(){
            console.log("interceptor.after #1-1 : " + this.msg);
        },
        function(){
            console.log("interceptor.after #1-2 : " + this.msg);
        }
    ]
});

tipJS.interceptor("interceptor2", {
    order:2,
    target:"controllers",
    before:function(){
        console.log("interceptor.before #2-1 : " + this.msg);
    },
    after:[
        function(){
            console.log("interceptor.after #2-1 : " + this.msg);
        },
        function(){
            console.log("interceptor.after #2-2 : " + this.msg);
        }
    ]
});

interceptor.before #1-1 : some Message
interceptor.before #2-1 : some Message
some Message
interceptor.after #1-1 : some Message
interceptor.after #1-2 : some Message
interceptor.after #2-1 : some Message
interceptor.after #2-2 : some Message

ETC

tipJS.app({
    ...
    developmentHostList:[
        'localhost'
        ,'127.0.0.1'
        ,'tipjs.com'
    ],
    ...
});

var someValue = someMethod();
tipJS.debug("someValue is " + someValue);

tipJS.app({
    ...
    releaseHostList : [
        "sub1.example.com",
        "sub2.example.com",
        "sub3.example.com"
    ],
    ...
});

tipJS.benchmark.mark("point1");
...
tipJS.benchmark.mark("point2");
tipJS.benchmark.elapsedTime("point1", "point2");

tipJS.benchmark.mark("point1");
...
tipJS.benchmark.mark("point2");
tipJS.benchmark.elapsedTime("point1", "point2", function(startName, endName, startTime, endTime, elapsedTime){
    ...
});

tipJS.app({
    ...
    localSet:true,
    ...
});

// lang/ko.js
tipJS.localSet({
    "Save":"저장",
    "Load":"불러오기"
});

// lang/ja.js
tipJS.localSet({
    "Save":"保存",
    "Load":"読み込み"
});

...
tipJS.lang = "ja"; // set to Japaness
tipJS.loadApp();
...

tipJS.controller("someCtrler", {
    invoke:function(params){
        console.log( tipJS.msg("Save") ); // result "저장"
    }
});

tipJS.model({
    __name : "someApp.someModel",
    someMethod:function(params){
        console.log( tipJS.msg("Load") ); // result "불러오기"
    }
});

tipJS.model("someModel", {
    someMethod:function(params){
        console.log( tipJS.msg("Some Message") ); // result "Some Message"
    }
});

Tutorials

• Controller [src] [view]

• Router [src] [view]

• AOP [src] [view]

• Model [src] [view]

• ModelSync [src] [view]

• ModelVO [src] [view]

• ModelExtend [src] [view]

• View(HTML Template) [src] [view]

• ViewExtend(HTML Template) [src] [view]

Examples

• basicTemplate [src] [view]

• myBatisLogParser [src] [view]

• todoMVC with external template [src] [view]

• todoMVC with internal template [src] [view]

• base64 image encoder [src] [view]

• ImageViewerOnTab(chrome extension) [src]

Contributors

• 

  tipJS

  @tipJS pekuid
• 

  javarouka

  @YiHanghee hanghui.i
• 

  coma

  @Coma333 jeongbu.yun
• 

  iMaZiNe

  @iMaZiNe80 imazine80
• 

  rkJun

  @rkJun juntai81