Variáveis de Contexto
O MIRA disponibiliza algumas variáveis que podem ser usadas durante a validação de condições e atribuir valores a atributos de Widgets Abstratos e Widgets Concretos.
$bind
Valor mapeado pelo atributo bind
na definição dos widget abstrato.
$data
Nesta variável se encontra as informações retornadas pela requisição feita a URI da API REST que foi informada por parâmetro na URL navegada.
Se em um Widget Abstrato existir o atributo datasource
, o $data
para os filhos deste Widget será cada
item do datasource.
Se dentro de um Widget filho de um Widget com datasource
precisar de uma informação do dado retornado pela URI, utilize o $env.$data
$data.$parent
Se o contexto atual for de um item de um datasource
, está variável contem os itens do pai do item do datasource.
Caso contrário, esta variável não será definida.
$env
Contém todas as informações além das informações retornadas pela API, como informações da requisição, do dispositivo, das funcionalidades do dispositivo.
{ request: Object, device: Object, $data: null }
$env.request
Informações que variam de acordo com o requisição feita ao MIRA.
Exemplo para navegação para esta URI: http://mira.tecweb.inf.puc-rio.br/?app=example/github#?URI=https://api.github.com/users/ebertti
hash: "#?URI=https://api.github.com/users/ebertti"
host: "mira.tecweb.inf.puc-rio.br"
hostname: "mira.tecweb.inf.puc-rio.br
href: "http://mira.tecweb.inf.puc-rio.br/?app=example/github#?URI=https://api.github.com/users/ebertti"
origin: "mira.tecweb.inf.puc-rio.br"
params: { URI : "https://api.github.com/users/ebertti" }
pathname: "/"
port: ""
protocol: "http:"
search: "?app=example/github"
uri:
file: "ebertti"
hash: ""
host: "api.github.com"
params: Object
path: "/users/ebertti"
port: ""
protocol: "https"
query: ""
relative: "/users/ebertti"
source: "https://api.github.com/users/ebertti"
$env.request.href
Uma String contendo toda a URL.
$env.request.protocol
Uma String contendo o protocolo da URL, incluindo ':' no final.
$env.request.host
Uma String contendo o host, é o hostname, com ':', e a porta informada na URL.
$env.request.hostname
Uma String contendo o domínio da URL.
$env.request.port
Uma String contendo o número da porta da URL.
$env.request.pathname
Uma String iniciada a partir do primeiro '/' até o final ou até '?' ou '#'.
$env.request.search
Uma String iniciada por '?' seguido pelos parâmetros da URL.
$env.request.hash
Uma String contendo a '#' seguido pela informação de ancora da página.
$env.request.origin
Uma String contendo a URL navegada.
$env.request.uri
Um Object contento a mesma estrutura de informações do $env.request
, mas para a URI informada como parâmetro.
Se for uma navegação para a interface landing, esta propriedade não contém informações.
$env.request.params
Um Object contendo informações decompostas do que é informado na variável $env.request.hash
Exemplo para http://localhost:3000/#var1=exemplo&var3=example
{
var1 : 'exemplo'
var3 : 'example'
}
$env.device
Contém informações para descobrir qual é o tipo de dispositivo que está acessando a aplicação.
Estas informações também são adicionadas no DOM da página na tag HTML, assim, o designer pode utilizar estas informações para compor seu CSS.
Exemplo acessando de um desktop com sistema operacional Windows.
$env.device.android: false
$env.device.androidPhone: false
$env.device.androidTablet: false
$env.device.blackberry: false
$env.device.blackberryPhone: false
$env.device.blackberryTablet: false
$env.device.cordova: undefined
$env.device.desktop: true
$env.device.fxos: false
$env.device.fxosPhone: false
$env.device.fxosTablet: false
$env.device.ios: false
$env.device.ipad: false
$env.device.iphone: false
$env.device.ipod: false
$env.device.landscape: true
$env.device.meego: false
$env.device.mobile: false
$env.device.nodeWebkit: false
$env.device.portrait: false
$env.device.tablet: false
$env.device.windows: true
$env.device.windowsPhone: false
$env.device.windowsTablet: false
Veja como fica a tag do HTML:
<html class="desktop landscape ...">
...
</html>
Veja mais informações sobre na documentação do Device.js
$env.device.features
Contém informações sobre as funcionalidades que o dispositivo que está acessando a aplicação disponibiliza para o seu usuário.
Estas informações também são adicionadas no DOM da página na tag HTML, assim, o designer pode utilizar estas informações para compor seu CSS.
$env.device.feature.adownload: true
$env.device.feature.apng: false
$env.device.feature.applicationcache: true
$env.device.feature.audio: Booleanaudiodata: true
$env.device.feature.backgroundsize: true
$env.device.feature.battery: false
$env.device.feature.bgpositionshorthand: true
$env.device.feature.bgpositionxy: true
$env.device.feature.bgrepeatround: false
$env.device.feature.bgrepeatspace: false
$env.device.feature.bgsizecover: true
$env.device.feature.blobconstructor: true
$env.device.feature.blobworkers: true
$env.device.feature.borderimage: true
$env.device.feature.borderradius: true
$env.device.feature.boxshadow: true
$env.device.feature.boxsizing: true
$env.device.feature.canvas: true
$env.device.feature.canvastext: true
$env.device.feature.classlist: true
$env.device.feature.contenteditable: true
$env.device.feature.contentsecuritypolicy: false
$env.device.feature.contextmenu: false
$env.device.feature.cookies: true
$env.device.feature.cors: true
$env.device.feature.createelement-attrs: false
$env.device.feature.cssanimations: true
$env.device.feature.csscalc: true
$env.device.feature.csscolumns: true
$env.device.feature.cssfilters: true
$env.device.feature.cssgradients: true
$env.device.feature.csshyphens: false
$env.device.feature.cssmask: true
$env.device.feature.csspositionsticky: false
$env.device.feature.cssreflections: true
$env.device.feature.cssremunit: true
$env.device.feature.cssresize: true
$env.device.feature.cssscrollbar: true
$env.device.feature.csstransforms: true
$env.device.feature.csstransforms3d: true
$env.device.feature.csstransitions: true
$env.device.feature.cssvhunit: true
$env.device.feature.cssvmaxunit: false
$env.device.feature.cssvminunit: true
$env.device.feature.cssvwunit: false
$env.device.feature.cubicbezierrange: true
$env.device.feature.customprotocolhandler: true
$env.device.feature.datalistelem: true
$env.device.feature.dataset: true
$env.device.feature.datauri: true
$env.device.feature.dataview: true
$env.device.feature.dataworkers: false
$env.device.feature.details: true
$env.device.feature.devicemotion: true
$env.device.feature.deviceorientation: true
$env.device.feature.display-runin: false
$env.device.feature.display-table: true
$env.device.feature.draganddrop: true
$env.device.feature.emoji: false
$env.device.feature.eventsource: true
$env.device.feature.exif-orientation: false
$env.device.feature.fileinput: true
$env.device.feature.filereader: true
$env.device.feature.filesystem: true
$env.device.feature.flexbox: true
$env.device.feature.fontface: true
$env.device.feature.formattribute: true
$env.device.feature.formvalidation: true
$env.device.feature.formvalidationapi: false
$env.device.feature.formvalidationmessage: false
$env.device.feature.framed: false
$env.device.feature.fullscreen: true
$env.device.feature.gamepads: true
$env.device.feature.generatedcontent: true
$env.device.feature.geolocation: true
$env.device.feature.getusermedia: true
$env.device.feature.history: true
$env.device.feature.hsla: true
$env.device.feature.ie8compat: false
$env.device.feature.indexeddb: true
$env.device.feature.inlinesvg: true
$env.device.feature.input: Object
$env.device.feature.inputtypes: Object
$env.device.feature.json: true
$env.device.feature.lastchild: true
$env.device.feature.localstorage: true
$env.device.feature.lowbandwidth: false
$env.device.feature.lowbattery: false
$env.device.feature.mathml: false
$env.device.feature.mediaqueries: true
$env.device.feature.meter: true
$env.device.feature.microdata: false
$env.device.feature.multiplebgs: true
$env.device.feature.notification: true
$env.device.feature.object-fit: true
$env.device.feature.olreversed: true
$env.device.feature.opacity: true
$env.device.feature.outputelem: true
$env.device.feature.overflowscrolling: false
$env.device.feature.performance: true
$env.device.feature.placeholder: true
$env.device.feature.pointerevents: true
$env.device.feature.pointerlock: false
$env.device.feature.postmessage: true
$env.device.feature.progressbar: true
$env.device.feature.quotamanagement: true
$env.device.feature.raf: true
$env.device.feature.regions: false
$env.device.feature.rgba: true
$env.device.feature.ruby: true
$env.device.feature.sandbox: true
$env.device.feature.scriptasync: true
$env.device.feature.scriptdefer: true
$env.device.feature.seamless: false
$env.device.feature.sessionstorage: true
$env.device.feature.shapes: true
$env.device.feature.sharedworkers: true
$env.device.feature.smil: true
$env.device.feature.softhyphens: true
$env.device.feature.softhyphensfind: true
$env.device.feature.speechinput: false
$env.device.feature.srcdoc: true
$env.device.feature.strictmode: true
$env.device.feature.stylescoped: false
$env.device.feature.subpixelfont: false
$env.device.feature.supports: false
$env.device.feature.svg: true
$env.device.feature.svgclippaths: true
$env.device.feature.svgfilters: true
$env.device.feature.textshadow: true
$env.device.feature.texttrackapi: true
$env.device.feature.time: false
$env.device.feature.todataurljpeg: true
$env.device.feature.todataurlwebp: true
$env.device.feature.touch: true
$env.device.feature.track: true
$env.device.feature.unicode: true
$env.device.feature.userdata: false
$env.device.feature.userselect: false
$env.device.feature.vibrate: true
$env.device.feature.video: Booleanweb
$env.device.feature.audio: true
$env.device.feature.webgl: Boolean
$env.device.feature.webintents: false
$env.device.feature.webp: true
$env.device.feature.websockets: true
$env.device.feature.websqldatabase: true
$env.device.feature.webworkers: true
$env.device.feature.xhr2: true
Veja como fica a tag do HTML:
<html class="... js flexbox canvas canvastext webgl touch geolocation postmessage websqldatabase indexeddb hashchange
history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow
opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface
generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths
adownload webaudio audiodata no-battery no-lowbattery contenteditable no-contentsecuritypolicy no-contextmenu cookies
blobconstructor cors bgpositionshorthand bgpositionxy no-bgrepeatround no-bgrepeatspace csscalc cubicbezierrange
no-display-runin boxsizing display-table cssfilters no-csshyphens softhyphens softhyphensfind lastchild mediaqueries
object-fit cssmask no-overflowscrolling pointerevents no-csspositionsticky cssremunit cssresize cssscrollbar
no-regions no-subpixelfont shapes no-supports no-userselect no-cssvmaxunit cssvminunit bgsizecover no-cssvwunit
cssvhunit customprotocolhandler dataview classlist dataset datalistelem details no-createelement-attrs
no-microdata outputelem progressbar meter no-time ruby strictmode devicemotion deviceorientation filereader
no-emoji fileinput filesystem formattribute formvalidation fullscreen no-speechinput gamepads no-ie8compat
getusermedia no-seamless sandbox placeholder srcdoc no-mathml olreversed texttrackapi track no-lowbandwidth
eventsource json xhr2 notification no-pointerlock quotamanagement scriptasync performance raf scriptdefer
svgfilters no-stylescoped unicode vibrate no-webintents no-userdata no-framed sharedworkers no-dataworkers
todataurljpeg todataurlwebp no-exif-orientation no-apng webp datauri blobworkers">
...
</html>
Veja mais informações sobre na documentação do Modernizr
$env.$data
São os valores retornados durante a requisição da URI, não é alterado durante o contexto.