Default

Caso não seja informado o atributo widget durante o mapeamento, será assumido o widget padrão do MIRA, o SimpleHtml

Caso deseje alterar o widget padrão, você pode fazer isto após o start da aplicação, como neste exemplo que altera para o BootstrapSimple:

return function Index() {
    var app = new Mira.Application(interface_abstracts, concrete_interface, rules, selection);
    Mira.Widget.setDefault("BootstrapSimple");
};

Atributos Básicos

name

Nome do widget, este nome será utilizado para fazer referência a qual Widget Abstrato deverá ser mapeado por este Widget Concreto.

when

Opcional

Condição que deverá ser verdadeira para que este Widget Concreto mapeie o Widget Abstrato.

Caso queira usar duas condições, você pode colocar uma seguida da outra separada por ,, neste caso, todas as condições infomadas deverão retornar true para que esta seleção seja a escolhida.

{ name: 'ambiente_seguro_mobile', when: 'isSecure,isMobile'}

Você pode utilizar uma condição geral ou escrever uma expressão que deverá ser avaliada.

{ name: 'preco' when:'$data.preco != null'}

De preferência a escrever as condições na estrutura de condições do framework, assim será mais fácil de reaproveitar e dar manutenção as condições.

children

Válido apenas se o widget-abstrato for folha na estrutura de widgets da interface abstrata.

Adicionar mais widgets concretos como filho do widget-abstrato mapeado.

/** abstrato **/
{ name: 'link', bind:'$data.link' }

/** mapeamento **/
{ name: 'link', tag: 'a', href: '$bind', children: [
    { name: 'image', tag: 'img', src: '$bind' },
    { name: 'leia_mais', tag: 'span', value: 'Leia Mais' }
]}

Comuns

SimpleHtml

Parâmetros

O parâmetros que não estão listados e forem informados durante o mapeamento, serão atribuídos como atributos da tag html.

tag

Default: div

Tipo de elemento html que será criado.

Exemplo

Mapear um elemento H1 que quando for clicado exibirá uma mensagem de olá:

{ name: 'example', type: 'SimpleHtml', tag:'h1', onclick:'alert("olá");' value:'clique me!'}

Será renderizado:

<h1 id='example' onclick='alert("olá");'>clique me!</h1>

Head

Feito para carregar a referência de ícones, estilos css.

Deve ser utilizado apenas no head da interface concreta.

Parâmetros

Os parâmetros que não estão listados e forem informados durante o mapeamento, serão atribuídos como atributos da tag html criada.

tag

Default: link

Se o valor informado for style ou icon, não é necessário informar atributos type e rel

Exemplo

{name: 'main_css', widget:'Head', href:'css/bootstrap.css', tag: 'style'},

Será renderizado dentro do head do HTML como:

<link type="text/css" rel="stylesheet" id="main_css" href="css/bootstrap.css">

Meta

Deve ser utilizado apenas no head da interface concreta.

Parâmetros

Qualquer parâmetro informado além dos padrões, serão atribuídos a meta criado.

Exemplo

{ name: 'viewport', widget:'Meta', content:'width=device-width, initial-scale=1' }

Será renderizado dentro do head do HTML como:

<meta name="viewport" content="width=device-width, initial-scale=1">

Title

Título da página.

Deve ser utilizado apenas no head da interface concreta.

Exemplo

{ name: 'title', widget:'Title', value: '"Your App Title"' }

Será renderizado dentro do head do HTML como:

<title>Your App Title</title>

ImageHtml

Feito para exibir imagens.

Os parâmetros informados durante o mapeamento, serão atribuídos como atributos da tag img gerada.

BootStrap

Conjunto de widgets que utilizando da estrutura criada pelo framework de CSS, o Bootstrap

BoostrapSimple

Parâmetros

O parâmetros que não estão listados e form informados durante o mapeamento, serão atribuídos como atributos da tag html.

sm

Funcionalidade de grid do Bootstrap, para telas pequenas, como smartphone

md

Funcionalidade de grid do Bootstrap, para telas médias, como tablets

lg

Funcionalidade de grid do Bootstrap, para telas largas, como notebooks

xs

Funcionalidade de grid do Bootstrap, para telas extra largas como desktop

print

O que será exibido na hora de imprimir o documento em uma impressora ou PDF

img

text

bg

pull

list

dl

table

form

btn

input

sr

has

Outros widgets com base no Bootstrap

• BootstrapSimple
• BootstrapFormControl
• BootstrapModalDialog
• BootstrapModalHeader
• BootstrapModalBody
• BootstrapModalFooter
• BootstrapPanelBody
• BootstrapCarousel
• BootstrapCarouselItem
• BootstrapIcon
• BootstrapImageBox
• BootstrapFooter
• BootstrapNavigation
• BootstrapNavigationList
• BootstrapNavigationListItem
• BootstrapFormGroupButton

Outros widget

• MapStatic
• MapDynamic
• Input
• Head
• Meta
• Title
• ImageHtml
• AudioPlayer
• ProfileContainer
• ProfileImage
• ProfileDetail
• ProfileCount
• TecWebRodape