Dicas

Dicas para uso do MIRA

Alterando widget concreto padrão.

O widget concreto padrão é o SimpleHtml, mas você pode alterar para qualquer outro. Basta executar o seguinte metodo após a inicialização da aplicação.

var app = new Mira.Application(interface_abstracts, concrete_interface, rules, selection);
Mira.Widget.setDefault('BootstrapSimple');

Modelos distribuído em módulos

Na declaração da função principal, poderá ser feito a requisição dos módulos para o MIRA, assim, o projetista poderá separar os modelos em vários módulos.

Estrutura de arquivos

path/to/mira/
    index.html

    css/
    imgs/
    fonts/
    js/
        index.js # your application
        abstract.js
        concrete.js
        rules.js
        selection.js

        mira/
        libs/

Exemplo do módulo da aplicação:

if(typeof define === 'function') {

    define([
        "jquery",
        "bootstrap",
        'mira/init',
        'rules',
        'selection',
        'abstract',
        'concrete'
    ], function Main($, $bootstrap, Mira, rules, selection, abstract, concrete) {

        return function MyApplication() {
            this.mira = new Mira.Application(abstract, concrete, rules, selection, conf);
        };

    });
}

Exemplo modelos separados em módulos

condition.js

define([], function () {
    return [
        {
            name: 'hasName',
            validate: '$data.name != null'
        },{
             name: 'hasLogin',
             validate: '$data.login != null'
        }
    ];
});

rules.js

define([], function () {
    return [
        {
            when: 'hasName'
            abstract: 'abstract_name',
            concrete: 'concrete_name'
        }
    ];
});

abstract.js

define([], function () {
    return [{
        name: 'abstract_name',
        widgets: [
            'widget1',
            'widget2',
            'widget3'
        ]
    }]
});

concrete.js

define([], function () {
    return [{
        name: 'concrete_name',
        head: [
            { name: 'main_css', widget:'Head', href:'css/bootstrap.css', tag: 'style'},
            { name: 'viewport', widget:'Meta', content:'width=device-width, initial-scale=1'},
            { name: 'title', widget:'Title', value: '"YourApp"'}
        ]
        maps: [
            { name: 'widget1', widget: 'SimpleHtml', tag:'h1', class:'well', value:'$data.name' },
            { name: 'widget2', widget: 'SimpleHtml', tag:'p', class:'well', value:'sem login' },
            { name: 'widget3', widget: 'SimpleHtml', tag:'p', class:'well', value:'inativo' },

            { name: 'widget1', widget: 'SimpleHtml', tag:'h1', class:'well', value:'$data.login', when: 'hasLogin' },
            { name: 'widget2', widget: 'SimpleHtml', tag:'p', class:'well', value:'$data.join', when: 'hasLogin' },
            { name: 'widget3', widget: 'SimpleHtml', tag:'p', class:'well', value:'$data.active', when: 'hasLogin' },
        ]
    }]
});

Criando Funções

As declarações de funções devem ser feitas dentro da função Main que da início a aplicação.

function Main($, $bootstrap, Mira) {

    this.my_function1 = function(){
        console.log('sou uma função que pode ser chamada em qualquer contexto da aplicação');
        return true;
    }

    this.my_function_with_args = function($data){
        return $data != null;
    }

    return function MyApplication() {
        this.mira = new Mira.Application(interface_abstracts, concrete_interface, rules, selection, conf);
    };

}

Desta forma, a função estará disponível em qualquer contexto da aplicação, como neste exemplo:

var rules = [{
    name: 'condicao_com_com_funcao',
    validate: 'my_function() && my_function_with_args($data)'
}]


var concrete = [{
    name: 'exemplo',
    maps: [
        { name:'simples', type:'SimpleHtml', value:'my_function_with_args($data)'}
    ]
}]