Em muitas ocasiões, o projetista precisa de um Widget que não existe dentro da nossa biblioteca de Widget Concretos.
Nesta sessão será apresentado como o designer deverá criar e como registrar este novo widget para que possa ser usado pela interface da aplicação.
Criando
Será criada uma function
que receberá os seguintes parâmetros, e estes não podem ter seus nome modificados: $parent
, name
, $data
, $env
, options
function($parent, name, $context, options, callback) {
var element = document.createElement('h1');
element.innerHTML = 'Mira';
element.id = name;
var $element = $(element);
$parent.append(element);
if(callback){
callback({
$children: $element,
$element: $element,
html: element.innerHTML
})
}
}
Parâmetros
$parent
É o objeto JQuery do elemento pai da estrutura do html.
<div id="parent">
<div id="atual"></div>
</div>
name
Nome que deverá ser adicionado como id do elemento html.
<div id="nome_do_mapeamento"></div>
$context
Dado do contexto atual que está sendo renderizado o widget.
Veja mais informações em Variáveis de Contexto
options
Todos os atributos do mapeamento na estrutura de interface concreta
{ name: "widget": widget:"SimpleHtml", tag:"h1", value:"Mira" }
callback
Deverá ser chamado com um object
com os atributos $children
, $element
e html
,
onde $children
será o objeto JQuery que será utilizado para renderizar, os elementos filhos na estrutura dos widgets abstratos.
Este $children
será o $parent
dos filhos da estrutura. E $element
que é o elemento atual do widget que acabou de ser renderizado.
Registrando
Após o start da aplicação no módulo que foi informado na url como app
, será feito o registro dos seus widgets customizados
return function Index() {
var app = new Mira.Application(interface_abstracts, concrete_interface, rules, selection);
Mira.Widget.register({
CustomWidget: function($parent, name, $data, $env, options){
var element = document.createElement('h1');
element.innerHTML = 'Mira';
element.id = name;
var $element = $(element);
$parent.append(element);
if(callback){
callback({
$children: $element,
$element: $element,
html: element.innerHTML
})
}
}
})
};
Helper
O MIRA disponibiliza algumas funções para ajudar na construção de widgets customizados,
Funções
Mira.Helper.build_context
Recebe os valores de $context
, options
e gera um objeto de context para ser utilizado pelas outras funções do helper
Mira.Helper.build_value
Recebe uma string
com o $context
e caso sejam informações de contexto, ele fará um build do valor, ou apenas retornara a string.
Mira.Helper.build_object_with_context
Recebe um object
e o $context
e faz a chamada de todos os seus valores com a função build_value
Mira.Helper.build_attributes
Recebe um element
e adiciona todos os atributos do object
e com o value como da função build_object_with_context