Pillar v12

PiClass

As classes herdeiras de PiClass possui um comportamento particular. Há métodos auxiliares de construção, transformação e clonagem além das propriedades auxiliares.

1. Os métodos de construção auxiliares predefinidos são:

• instances: invocada no inicio da construção da classe logo após instanciação;
• init: invocada no final da construção da classe na instanciação.
• create: cria uma instancia da classe passando todos os parametros como argumento para instances()e init()
• clone: cria uma copia do objeto atua
• cloneWillLoad: invocado antes da clonagem;
• cloneDidLoad: invocada após a clonagem do objeto.

Todo objeto passado por parametro na instanciação é injetado nas propriedades classe por padrão. Porém esse processo ocorre apos a invocação do método instances. Esse comportamento pode ser desativado atribuindo false para a propriedade _extendParameters da class PiClass.

2. O métodos auxiliares de transformação são:

• Injeção: inject(obj) injeta todas as propriedades de obj para dentro do objeto;
• Conversão: toJson() converte o objeto em representação JSON;
• jsonWillConvert: invocado antes da conversão do objeto em json;
• jsonDidConvert: invocado após a conversão do objeto em json

3. Propriedades auxiliares:

• _extendParameters: Defini se o objeto passado por parametro na construção da classe será injetado no objeto;
• parameters: Propriedade somente leitura que retorna todos os parametros informados na instanciação da classe.

Exemplo

import PiClass from 'pyllar/class'; 

class Hello extends PiClass {
    instances(){
        this._name = 'Hello';
    }

    init(param){
        this._param = param
    }

    cloneDidLoad(){
        console.log('Socorro! foi clonado');
    }

    jsonDidConvert(){
        console.log('Ops! foi convertivo');
    }

    print(){
        console.log(this.msg);
    }
}

const hello = new Hello({
    msg: 'Olá mundo'
});
hello.print()
console.log(hello.toJson());

const newHellow = hello.clone();
newHellow.msg = 'Olá submundo';
newHellow.print();

PiComponent

Classe responsável por gerenciar o ciclo de vida, interação com a view e vinculos com o PiModel.

O Pillar permite que o html contenha associação com dois tipos de diretivas: evento e expressão.

As diretivas de declaração permitem a utilização das expressões da linguagem. Além disso todo o corpo html pode receber as expressões. Dentro de cada expressão pode conter uma ou varias propriedades monitoradas.

Por padrão o Pillar não monitora as variáveis do elemento definidas nas expressões do html;

As diretivas de declaração são definidas por meio do prefixo : enquanto as diretivas de evento são definidas pelo @;

• Diretivas de declaração predefinidas:

  • :for = intera n vezes por meio da contagem range(n, inicio, passo);
  • :foreach = intera sobre propiedade do componente. Permite dois formas de epxressão = (index, name) in property ou name in property;
  • :class = altera a propiedade class do elemento;
  • :style = altera a propiedade style do elemento;
  • :init = executa uma expressão na criação do elemento;
  • :bind = associa alterações no elemento com uma propriedade;
  • :on = associa evento a um método;
  • :value = define o valor do atributo value do elemento;
  • :selected = define o valor do atributo selected do elemento;
  • :disabled = define o valor do atributo disabled do elemento;
  • :if = mostra o elemento se a expressão for verdadeira;
  • :else = mostra o elemento se a expressão do :if adjacente superior for falsa
  • :model = permite vincular uma propriedade do model;
  • :change = invoca um metodo sempre que o elemento dispara o evento change;
  • :src = define o valor do atributo src do elemento;
  • :checked = define o valor do atributo checked do elemento;
  • :mount = invoca método quando component associado for renderizado
  • :render = callback para a instanciação de um componente que será renderizado no elemento em questão.

• Métodos auxiliares:

1. inject: Injeta as propriedades do model nos elementos (data-model);
2. get: Retorna o valor do component;
3. set: Define o valor do component. Dispara o evento nativo 'change';
4. dispatchEvent: Dispara um evento customizado nativo;
5. render: Renderiza o component em um elemento;
6. viewWillRender: Invocado antes da renderização;
7. viewDidRender: Invocado após a renderização;
8. watch: Observa por alterações na propriedade do componente;
9. unwatch: Para de observar por alterações em uma propriedade do componente;
10. destroy: Libera todos recursos e destroi o component;
11. register: Registra o componento na aplicação

• Propriedades auxiliares

1. $element : Retorna o elemento em jquery;
2. element : Retorna o elemento nativo.

Exemplo

import PiComponent from 'pyllar/component';

export default class Hello extends PiComponent {
    view = /*html*/`<div>
        <div :render="() => new UserForm()"></div>
        <div>essa propiedade <b>{name}</b> não é monitorada</div>
        <div>esta propiedade <b>{@name}</b> é monitorada</div>

        <input :change="ChangeMe($value)" :value="{name}" />
        <button @click="clickme('{name}')">ClickMe()</button>
        <button @click="changeName()">ChangeMe()</button>

        <ul>
            <li :foreach="planeta in planetas">{planeta}</li>
        </ul>

        <ul>
            <li :foreach="(index, planeta) in planetas">{index + 1 }. {planeta}</li>
        </ul>

        <ul>
            <li :for="i in range(10, 4, 2)">{i}</li>
        </ul>

    </div>`;

    name = 'Mundo';
    planetas = ['terra', 'marte', 'jupiter']

    clickme(name){
        console.log(`Meu nom é ${name} (:`);
    }

    ChangeMe(newValue){
        this.name = newValue;
    }

};

PiComponent.register(Hello);

PiModel

Classe responsável por gerenciar as ações, os estado e os vinculos com componente view. Possui os seguintes métodos auxiliares:

1. initWithJson(json) : injeta o json recebido no objeto. Esse método é invocado automaticamente quando uma action retorna um objeto ou um array de objetos do servidor;

2. validators: Retorna todos as regras de validação que seráo aplicadas quando os dados de vinculos do componente foi injetado na model;

3. Inject: Injeta todos os elementos de pagina com atributo (data-model) nas propriedade do model, executando as regras definidas no validators;

4. Register: Registra o model no contexto da aplicação.

Exemplo

user.js

import PiModel from 'pi/model';
import CPF from './cpf'; 

export default class Model extends PiModel {

    init() {
        super.init('/api');
    }

    validators() {
        return {
            'name': new PiValidatorRequire('Informe o nome do usuário para continuar')
        };
    }

    initWithJson(json) {
        super.initWithJson(json);

        this.cpf = new CPF(json.cpf);

        return this;
    }

    actions() {
        return {
            'filtrarPorNome': 'GET:/filtrar-por-nome?name=:name'
        };
    }

};

PiModel.register(Model);

form.js

import PiComponent from 'pyllar/component';
import UserModel from './user.js'; 

export default class Form extends PiComponent {
    view = /*html*/`<form>
        <input data-model="name" placeholder="Informe o nome do usuário"/>
        <button @click="salvar()">Salvar</button>
    </form>`;

    async salvar(){
        const user = UserModel.create();
        const err = user.inject(this);

        if(err.length > 0){
            return;
        }

        const newUser = await user.save();
        console.log(newUser);
    }
};

PiComponent.register(Form);

PiConfig

Toda configuração do framework é carregada pelos valores definidos em PiConfig.set().

Segue abaixo a configuração padrão

{
    app: {
        parse: {
            enable: true, /** Boleano: define se o framework irá realizar um parse na inicialização */
            selector: 'body' /** String: define qual será o elemento analisado */
        }
    },
    html: {
        loader: 'Carregando ...' /** String | Function : Define qual será o texto exibido para os componentes de carregamento assíncrono */
    },
    expression: {
        xlanguage: /(\{>?)([^\}]+)(\})/gi, /** Regex: Expressão regular para as declarações em html */
        xvariable: /(@)([\w\.]+)/gi, /**Regex: Expressão regular para as variáveis monitoradas */
        xhtml: /(\{>)([^\}]+)(\})/gi, /** Regex: Expressão regular para declarações que retornam texto em html */
    },
    request: {
        fetch: null /** Function: Função prioritaria executada na cadeia de chamadas pelo PiRequest  */
    }
}

Uma configuração específica pode ser buscado através do método get: PiConfig.get('app.parse.enable');

Exemplos

Exemplo app.js

import { app } from "pyllar/env";
import Bootstrap from "pyllar/bootstrap";
import HomePage from "./views/home";

new Bootstrap()
    .onLoad(() => {
        app().register(HomePage);
    })
    .onReady(() => {
        app().startServices();
    })
    .load();

Ciclo de vida do boot

class Bootstrap {
    onInit(){
        /**
         * Hook de inicialização:
         *  - Executado na inicialização antes da instanciação da aplicação
         */
    }

    onLoad(){
        /**
         * Hook de carga:
         *  - Executado apos a instanciação da aplicação
         *  - Executado antes do carregamento e analise da pagina definida pelas configurações
         *      : PiConfig.get('app.parse.enable')
         *      : PiConfig.get('app.parse.selector')
         */
    }

    onReady() {
        /**
         * Hook de finalização:
         *  - Executado apos todo processo de carregamento da aplicação
         */
    }

    load() {
        /**
         * Inicia, carrega e executa a aplicação
         */
    }
}

Como registrar uma classe

import { app } from 'pyllar/env';
import Component from './component';

app().register(Component);

Como registrar rotas

app.js

import { app } from "pi/env";
import Bootstrap from "pi/bootstrap";
import PageService from './service'

new Bootstrap()
    .onLoad(() => {
        app().addService(new PageService());
    })
    .onReady(() => {
        app().startServices();
    })
    .load();

service.js

import { app } from "pi/env";
import PiService from "pi/service";
import Page1 from './page1'
import Page2 from './page2'

export default class PageService extends PiService {

    routes = {
        '/page1'() {
            app().setPage(new Page1());
        },

        '/page2?id=:id'(id) {
            app().setPage(new Page2(id));
        }
    };

    routeNotFound(route) {
        console.log('route not found ' + route)
    }
}

PiService.register(PageService)