Interface Abstrata
É o esqueleto da interface, onde definimos a ordem, origem dos dados e hierarquia dos elementos para que venham a ser mapeados pela Interface Concreta.
var abstracts = [
{
name: "interface_name",
widgets: [
...
]
},
...
];
Cada interface abstrata é composta por 2 parâmetros:
Parâmetros
name
Nome da interface abstrata, este nome será utilizado pela* (ou PELO ou só NO) no parâmetro abstract
de elementos da
Seleção de Interface.
widgets
Uma lista de widgets abstratos que compõem a interface.
Widget Abstrato
O widget abstrato compõem a estrutura de interface abstrata
{
name: 'widget_name',
bind: '$data.property'
when: ''
datasource: 'url_or_property',
parser: '',
cache: true
expires: 3600000
children: [ ]
}
Um widget abstrato é composto pelos parâmetros:
Parâmetros
name
Nome do widget abstrato, este nome será utilizado no mapeamento de widgets concretos na interface concreta.
bind
Mapeamento do dado retornado a ser utilizado pelo mapeamento de widgets concretos na interface concreta.
when
Opcional
Informar a condição que deve ser avaliada para que este widget seja exibido na interface.
Caso queira usar duas condições, você pode colocar uma seguida da outra separada por ,
{ 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ções as condições.
Mais informações sobre condições
datasource
Opcional
Se você desejar que alguma informação seja baixada em uma API, você pode informar a URL e os dados serão baixados:
datasource:"url:http://api.domain.com.br/exemplo/"
Pode ser feita referência a uma coleção que foi retornada da URI que foi navegada:
datasource:"$data.alguma_colecao"
Ou uma URL que foi retornada pela API:
datasource:"url:<%= $data.alguma_uri %>"
Quando esta propriedade é setada, a propriedade children
deve obrigatoriamente conter um elemento children composto pelos
widgets que serão repetidos para cada item que será retornado pelo datasource
:
{
name: 'exemplo',
datasource: 'url:<%= $data.elementos_url %>',
children: [
{
name: 'repetidor',
children: [
{ name: 'prop1' },
{ name: 'prop2' },
...
{ name: 'propN' }
]
}
]
}
parser
Opcional
Se a informação que for retornada do datasource
precisa ser tratada para ser manipulada pelo MIRA, você pode informar
uma função ou informar qual a propriedade deve ser utilizada, Exemplo:
Dado retornado
{ "time": 10, "etag": 'FEDCBA0987654321', items: [
{"name": "Ezequiel"},
{"name": "Daniel"},
{"name": "Laufer"},
{"name": "Puc-Rio"},
]}
parser
{ name: 'exemplo', datasource: 'url:$data.elementos_url', parser:'$data.items' ... }
Apenas os dados da propriedade items
do dado retornado pelo datasource
serão utilizados pelos filhos do widget abstrato.
Resultado
[
{"name": "Ezequiel"},
{"name": "Daniel"},
{"name": "Laufer"},
{"name": "Puc-Rio"}
]
children
Opcional
Uma lista de widgets que são filhos do widget abstrato atual.
Esta propriedade é obrigatória se widget abstrato também possuir algum valor atribuído na propriedade datasource
.
Reduzido
Para facilitar a escrita dos widgets abstratos, foi criada uma forma reduzida para se escrever a estrutura.
Widget Abstrato apenas com o name
Se dentro de children de um widget você só precisa de um widget, mas não precisa informar nenhum outro parâmetro,
você pode fazer referência a ele colocando somente uma string
:
{
name:'composto',
children: ['filho1', 'filho2', 'filho3']
}
Isto equivale há:
{
name:'composto',
children: [
{ name: 'filho1' },
{ name: 'filho2' },
{ name: 'filho3' }
]
}
Widget Abstrato com name
e children
Se precisar representar um widget com filhos, você pode adotar a forma reduzida feita com um object
de javascript,
onde a key
é o nome do widget, e o seu value
será composta pelos filhos, podendo ser uma lista ou somente um elemento,
{
name:'composto',
children: [
{ 'filho' : { 'filho-filho': 'filho-filho-filho' } }
]
}
Isto equivale há:
{
name:'composto',
children: [
{
name: 'filho',
children: [
{
name: 'filho-filho',
children: [
{
name: 'filho-filho-filho'
}
]
}
]
}
]
}
Exemplos
Uma interface com um campo de busca e um botão para realizar a busca:
{
name:'search',
widgets : [
{'header': ['logo', {'search_form':{'search_group' : ['search_field', 'search_button']}}]},
{'footer': ['footer-content']}
]
}
Uma interface com resultado de uma busca:
{
name: 'results',
widgets : [
{'results_box': [
{ name: "results", datasource: "$data.result",
children: [
{name: 'result_panel', when:'hasName', children: {'result_item': {'result_link':
['result_icon', 'result_title', 'result_details']
}}
}]}
]},
{'footer': ['footer-content']}
]
}