uma , é HTML (Figura 1) controle 2 conseguimos controle CronApp do controle no Editor HTML, personalização , internacionalização , inclusão

Image Removed HTML no CronApp

Image Removed
Figura 2 - Abas propriedades, eventos e responsividade também são influenciadas pelo components.json

Estrutura do arquivo

Estrutura

A estrutura do `components.json` é baseada em JSON (JavaScript Object Notation - Notação de Objetos JavaScript) que possui uma formatação simples e de fácil leitura e escrita, tanto para computadores quando quanto para humanos. Foi criado para facilitar a comunicação entre sistemas, independente da linguagem usada.
Os controles padrões do CronApp utilizam o mesmo arquivo "components.json", que fica em diretórios diferentes dependendo do tipo do projeto:componentes padrões do Cronapp possuem seus próprios arquivos que terminam com a extensão `components.json` e seus diretórios mudam conforme o tipo de componente - ou seja, se ele é web ou mobile (Figura 2.1).
Nota
Os arquivos `components.json` só serão mostrados quando o Modo Avançado estiver habilitado.
Componente mobile: `src/main/webapp/node_modules/cronapp-framework-js/components/`
Componente web: `src/main/mobileapp/www/node_modules/`
Projetos web: Código Fonte → Principal → Códigos Fonte Cliente → plugins → cronapp-framework-js → components
Projetos mobile: Código Fonte → Principal → mobileapp → www → plugins →
`cronapp-framework-mobile-js`
→ components
`/components/`

Image Added
**Figura 2.1 - Arquivos JSON de cada componente padrão do Cronapp web (direita) e mobile (esquerda)

O Cronapp permite criar componentes visuais e para cada novo componente, são criados os arquivos .template.html** e .components.jsonO CronApp ainda nos permite criar novos controles personalizados e para cada novo controle, além do arquivo .template.html também é criado o arquivo .components.json que é exclusivo. Ambos arquivos devem ficar no mesmo diretório (destaque na Figura 32.2).

Image RemovedFigura 3 - Arquivos do novo controle criado pelo usuário

Em sua estrutura, o components.json possui um lista chamada "components" que possui vários objetos representando cada um dos controle padrões do editor HTML, diferente do arquivo gerado na criação do componente customizado (*.components.json) que só possui apenas um elemento nesta lista. Além disso, os documentos possuem o elemento "name" em sua estrutura principal que varia da seguinte forma (Figuras 4 e 5):

Projeto web: crono-components;
Projeto mobile: cronos-components-mobile-phonegap e
Projeto web ou mobile criado pelo usuário: custom-cronos-components

Image Removed

Figura 4 e 5 - Diferença entre a estrutura do components.json gerada na criação do novo componente (esquerda) e o padrão para um projeto web (direita)

ÂncoraValorObjetoListaValorObjetoListaUma JSON normalmente é constituído de três estruturas:

Valor: elemento mais simples, considerado a folha da árvore. Possui apenas uma chave e um valor. Ex: "name: Nome da propriedade", onde "nome" é a chave e "Nome da propriedade" é o seu valor.
Objeto: Um objeto pode possuir valores e também outros objetos em seu interior.
Lista: Possui uma lista de objetos em seu interior.

Em uma lista existem 1 ou mais objetos que possuem a mesma estrutura, enquanto que um objeto pode possuir valores e outros objetos e essa estrutura não se repete.

Image Added

Figura 2.2 - Arquivos gerados ao criar componente visual

Propriedades do arquivo

As propriedades nesses arquivos mudam conforme o componente, mas existem algumas que são comuns em todos os componentes.

Image Added

Figura 2.3 - Arquivo do componente visual Botão

Propriedade	Objetivo	Possíveis valores / exemplos
`name`	Atributo id do componente HTML.	-
`text_en_US`	Nome do componente que aparecerá na aba controle do editor de views quando a IDE estiver no idioma inglês (EUA).	Button
`text_pt_BR`	Nome do componente que aparecerá na aba controle do editor de views quando a IDE estiver no idioma português (Brasil).	Botão
`class`	Define o ícone do controle que aparecerá no editor de views. OBS.: Diferente da aplicação que permite o uso dos ícones Glyphicons, font awesome icon e Material Design Icons; os botões dos componentes no editor de views permite apenas o Material Design Icons.	adjust-icon mdi mdi-stop
`templateURL`	Endereço do template do componente na IDE.	`src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/button.template.html`
`properties`	Lista as diretivas Angular, elementos HTML ou exclusivas do Cronapp para permitir sua edição nas propriedades do componente no editor de views.	O controle checkbox possuem 2 subcomponentes, rótulo e caixa, e o `properties` é responsável por criar propriedades que afetam todo o controle
`styles`	Lista os elementos HTML que compõem o template, possibilitando selecioná-los e personaliza-los no editor de views. Essa seleção pode ser feita utilizando as subabas dentro das abas Propriedades no editor de views ou selecionando o componente na tela, abrindo o ícone do cadeado e selecionando novamente os elementos internos do componente.	Para cada elemento informado na lista: selector: Informa qual elemento HTML será selecionado. Se o template possuir dois elementos HTML iguais, é possível utilizar o selector do CSS para referenciá-lo (ex.: “span:nth-child(2)”). text_pt_BR: Internacionalização em português do Brasil para o rótulo da subaba que apareceráem propriedades e eventos no editor de views referente ao elemento HTML selecionado; text_en_US: Internacionalização em inglês do EUA para o rótulo da subaba que aparecerá em propriedades e eventos no editor de views referente ao elemento HTML selecionado.

Outras propriedades que podem ser encontradas nesses arquivos, mas que podem variar de componente para componente:

Propriedade	Objetivo	Possíveis valores / exemplos
`attributesForPreview`	Lista de propriedades customizadas nos atributos CSS dos componentes	-
`autoWrapper`	Adiciona uma tag <div> em torno do template do componente, facilitando a modificação da diagramação.	true: Permite tratamento diferenciado entre o componente e a <div>. false: Não permite tratamento diferenciado entre o componente e a <div> e é o valor default quando a propriedade não é informada.
`childrenProperties`	Lista as diretivas Angular, elementos HTML ou exclusivas do Cronapp para permitir sua edição nas propriedades dos subcomponentes (filhos) do componente no editor de views.	O componente checkbox possuem 2 subcomponentes, rótulo e caixa, e o `childrenProperties` é responsável por possibilitar a criação de propriedades distintas para cada um desses subcomponentes.
`classForPreview`	Adiciona uma classe para ser visualizada somente no editor de views, no modo de edição. Não irá aparecer na execução do projeto.	-
`dependences`	Possui uma lista (editor) com os endereços de arquivos CSS específica para esse controle.	-
`forcedGroup`	Força o agrupamento dos componentes HTML no template, permitindo a seleção de todos os subcomponente de uma só vez.	true: Agrupa todos os subcomponentes, necessário realizar o desbloqueio para poder selecionar cada subcomponente. false: Permite a seleção de cada subcomponente sem a necessidade do desbloqueio e é o valor default quando a propriedade não é informada.
`handleRules`

Elementos do components.json

Image Removed

ÂncoraTopicJsonTopicJson

Elemento: (raiz)

Tipo: objeto
Descrição: Objeto que engloba todo o documento components.json.

ItemTipoObjetivoPossíveis valores / exemplonamevalorDefine se é um arquivo responsável pelo controles padrões do CronApp ou um controle customizado pelo usuário.

cronos-components: Nome do arquivo responsável por todos os controles do CronApp web.
cronos-components-mobile-phonegap: Nome do arquivo responsável por todos os controles do CronApp mobile.
custom-cronos-components: Nome do arquivo responsável pelo novo controle criado pelo usuário no CronApp.

versionvalorValor com a versão do arquivo.Ex.: 1.0.0componentslistaLista dos objetos responsável por definir os controles e suas propriedades.-

Image Removed

ÂncoratopicJSONtopicJSON

Elemento: components

Tipo: lista
Descrição: Lista dos objetos responsável por definir as cada componente e suas propriedades.

ItemTipoObjetivoPossíveis valores / exemploattributesForPreview listaLista de propriedades customizadas nos atributos CSS dos componentes -autoWrappervalorAdiciona uma tag <div> em torno do template do componente, facilitando a modificação da diagramação.

true: Permite tratamento diferenciado entre o componente e a <div>.
false: Não permite tratamento diferenciado entre o componente e a <div>. Valor default quando não informada essa propriedade.

childrenPropertieslistaLista as diretivas Angular, elementos HTML ou exclusivas do CronApp para permitir sua edição nas propriedades dos subcomponentes (filhos) do controle do Editor HTML.Ex.: O controle "Caixa de checagem" possuem 2 subcomponentes: rótulo e caixa. O childrenProperties é responsável por possibilitar a criação de propriedades distintas para cada um desses subcomponentes.classvalor

Define o ícone do controle que aparecerá no editor HTML.

Obs.: Diferente da aplicação que permite o uso dos ícones Glyphicons, font awesome icon e Material Design Icons; os botões dos componentes no editor HTML permite apenas o Material Design Icons.

Ex.: "adjust-icon mdi mdi-star"classForPreviewobjetoAdiciona uma classe para ser visualizada somente no editor HTML, no modo de edição. Não irá aparecer na execução do projeto.-dependencesobjetoPossui uma lista (editor) com os endereços de arquivos CSS específica para esse controle.-forcedGroupvalorForça o agrupamento dos componentes HTML no template, permitindo a seleção de todos os subcomponente de uma só vez.

true: Agrupa todos os subcomponentes, necessário realizar o desbloqueio para poder selecionar cada subcomponente.
false: Permite a seleção de cada subcomponente sem a necessidade do desbloqueio. Valor default quando não informada essa propriedade.

groupedChildrenlistaLista os elementos HTML que compõem o template, possibilitando selecioná-los e personaliza-los no editor HTML. Essa seleção pode ser feita utilizando as subabas dentro das abas “Propriedades” e “Eventos” no Editor HTML ou selecionando o componente na tela, abrindo o ícone do cadeado e selecionando novamente os elementos internos do componente.

Para cada elemento do array, temos:

text_pt_BR: Internacionalização em português do Brasil para o rótulo da subaba que aparecerá em “Propriedades” e “Eventos” no Editor HTML referente ao elemento HTML selecionado.
text_en_US: Internacionalização em inglês do EUA para o rótulo da subaba que aparecerá em “Propriedades” e “Eventos” no Editor HTML referente ao elemento HTML selecionado.
selector: Informa qual elemento HTML será selecionado. Se o template possuir dois elementos HTML iguais, é possível utilizar o “selector” do CSS para referenciá-lo. Por exemplo, para selecionar o segundo elemento span do template: “span:nth-child(2)”.

handleRulesobjeto

	Define características para algumas propriedades e regras para elementos do componente.	-
`mask-placeholder`

objeto

Informa qual componente HTML receberá o texto do campo Sugestão no editor

HTML

de views.

Possui em seu interior o valor "selector" onde será informado o componente HTML.

Ex.: { "selector":

"input" }namevalorAtributo id do componente HTML.-onDrop

"input" }

onDrop

valor

Abre a janela de configuração especificada quando o componente é arrastado para a área de edição da view.

Ex.: "onDrop": "openEditor";

"onDrop": "NomeAtributo"

onDoubleClick

valor

Abre a janela de configuração especificada quando o componente recebe um duplo click na área de edição da view.

Ex.: "onDoubleClick":"openEditor";

"onDoubleClick": "NomeAtributo"

pallete

valor

Oculta ou exibe o controle no editor

HTML

de .	true: exibe o controle no editor

HTML. Valor default quando não informada essa propriedade.

false: oculta o controle no editor HTML.

de views e é o valor default quando a propriedade não é informada.
false: oculta o controle no editor de views.

rows

propertiesobjetoLista as diretivas Angular, elementos HTML ou exclusivas do CronApp para permitir sua edição nas propriedades do componente no Editor HTML.Ex.: O controle "Caixa de checagem" possuem 2 subcomponentes: rótulo e caixa. O Properties é responsável por criar propriedades que afetam todo o controle, diferentemente do childrenProperties.rowsvalor

Define o tamanho do campo em número de linhas.

Ex.:

5

template

valor

Template HTML do componente. Por este ser um arquivo json, será necessário utilizar caracteres de escape para utilizar alguns caracteres.

Exemplo: “\n”e “\””

Ex.: "

"

templateURL

valor

	Endereço do template do componente.	-
`text`

valor

Nome do componente que aparecerá no editor

HTML

de views quando não houver internacionalização (propriedades: text_en_US e text_pt_BR

).Ex.: "Button"

).	Button
`wrapper`

text_en_USvalorInternacionalização (inglês EUA) do nome do componente que aparecerá no editor HTML.Ex.: "Button"text_pt_BRvalorInternacionalização (português Brasil) do nome do componente que aparecerá no editor HTML.Ex.: "Botão"wrappervalor

Adiciona uma tag <div> em torno do template do componente.

true:

Adiciona

adiciona uma tag <div>

. Valor

e é o valor default quando a propriedade não é informada

essa propriedade

.
false:

Não

não adiciona uma tag <div>.

Image Removed

Âncora

TopicAttributesForPreview

	attributesForPreview

TopicAttributesForPreview

	attributesForPreview

Elemento:

`attributesForPreview`

Tipo: lista

Descrição:

Lista de propriedades

customizadas para

customizadas para os atributos

CSS dos ÂncoraTopicValueAttributesForPreviewTopicValueAttributesForPreview

CSS dos componentes.

ItemTipo

Propriedade	Objetivo	Possíveis valores /

exemplo

exemplos
`name`

valor

Nome da propriedade que terá suas características alteradas neste objeto do attributesForPreview.

Ex.: "

xattr-size

"

type

valor

Define a forma que será exibida as opções da propriedade. Normalmente são utilizados o grupo de botões ou seletor de itens.

btngroup:

Para

para exibir as propriedades em um grupo de botões alinhados. Permite a utilização de ícones nos botões.
options:

Para

para exibir as propriedades em um seletor de itens (dropdown). Permite a utilização de ícones, cores ou ambos.

target

valor

Informa o atributo ou elemento que será customizado. Normalmente utilizado para adicionar

“class”

class ou

“style”

style.

Ex.: "

class

"

values

lista

Lista das opções da propriedade.

-

Image Removed

Elemento:

`values`

do attributesForPreviewTipo: lista
Descrição: Lista

Lista das opções da propriedade `values` do `attributesForPreview`.

ItemTipo
Propriedade Objetivo Possíveis valores /
exemplo
exemplos
`key`
valor
Classe CSS que será adicionado no template após o usuário escolher o value.
Ex.: "
display:block;
"
`value`
valor
Nome da opção que será exibida para o usuário.
Ex.: "Block"Exibe um ícone
block
`icon`
valor
Define o ícone que será exibido ao lado do nome da opção.
Ex.: "
mdi mdi-ray-start
"
`color`
valor
Exibe um quadrado com a cor especificada ao lado do nome da opção.
OBS.: Só é possível utilizar com o `type`
“options”
`options`.
Ex.: "
#fff
"

Image Removed

Âncora

TopicChildrenProperties

	childrenProperties

TopicChildrenProperties

	childrenProperties

Elemento:

`childrenProperties`

Tipo: lista
Descrição:

Lista das opções da propriedade childrenProperties.

ItemTipo

Propriedade

Objetivo	Possíveis valores /

exemplo

exemplos
`displayName_en_US`

valor

Nome

Internacionalização (inglês EUA) do nome

do campo que aparecerá

no editor HTML.Ex.: "Field"Internacionalização (português Brasil) do nome

na aba propriedades do editor de views quando a IDE estiver no idioma inglês (EUA).	Field
`displayName_pt_BR`

valor

Nome do campo que aparecerá

no editor HTML.Ex.: "Campo"

na aba propriedades do editor de views quando a IDE estiver no idioma português (BR).	Campo
`editExpression`

editExpressionvalor

Exibe o ícone

"

Editar expressão

"

ao lado do nome do campo

. Ao

e ao clicar é aberta uma caixa de texto para a edição da expressão ou inserção de Fonte de dados.

true:

Ativa

ativa a opção

.

;
false:

Desativa

desativa a opção

. Valor

e é o valor default quando a propriedade não é informada

essa propriedade

.

mandatory

valor

Define uma propriedade como preenchimento obrigatório, adicionando contorno vermelho à propriedade quando vazia.

true:

Define

define como obrigatória.
false:

Propriedade

define como não obrigatória.

name

valor

Informa o atributo do elemento HTML que será manipulado em um campo do editor

HTML

de views.

Ex.: "

ng-model

"

onDisplay

valor

Executa comando em JavaScript para atualizar o componente na tela sempre que uma alteração for feita.

Ex.: "

javascript:function() { /* função JavaScript */ }

"

onSave

valor

Executa comando em JavaScript para salvar sempre que uma opção for selecionada ou ação tomada no componente.

Ex.: "

javascript:function() { /* função JavaScript */ }

"

selector

valor

Informa qual atributo do elemento HTML será selecionado para manipulação.

Ex.: "

ui-select

"

type

valor

Define a forma de como o subcomponente irá se comportar

. Como

como permitir apenas texto, seletor ou importação de fonte de dados.

Ex.: "

datasourceFieldList

"

Image Removed

Âncora

	handleRules
	handleRules

Elemento:

`handleRules`

Tipo: Objeto

Descrição:

Define características para algumas propriedades e regras para elementos do componente.

ItemTipo

Propriedade	Objetivo	Possíveis valores /

exemplo

exemplos
`canActivate`

valor

Ativa ou desativa as regras.

true:

Ativa

ativa o handleRules do componente.
false:

Desativa

desativa o

handleRules do

handleRules do componente.

canIncrement

valor

Exibe o ícone

"Adicionar"

adicionar ao lado do nome do campo

. Ao

e ao clicar é inserido outro item na lista.

Exemplo: outra coluna em uma tabela ou outro item em uma lista de opções.

true:

Insere

insere o ícone

"Adicionar".

false: Oculta o ícone "Adicionar". Valor default quando não informada essa propriedade.

canOrder

adicionar;
false: oculta o ícone adicionar e é o valor default quando a propriedade não é informada.

canOrder

valor

Define a possibilidade de ordenação dos itens.

true:

Possibilita

possibilita ordenação dos itens

. Valor default quando não informada essa propriedade.

e é o valor default a propriedade não é informada;
false:

Impede

impede a ordenação dos itens.

canToggle

valor

Mostra o ícone

"Exibir"

exibir ao lado do nome do campo

. Esse

e esse ícone recolhe ou expande os itens ou submenus desse controle no editor

HTML

de views,

permitindo

permitindo visualizar e

selecionar seu conteúdo para

selecionar seu conteúdo para personalização.

Exemplo: caixa de seleção ou menu.

true:

Insere o ícone "Exibir".

insere o ícone exibir;
false:

Oculta

oculta o ícone

"Exibir". Valor default quando não informada essa propriedade

exibir e é o valor default a propriedade não é informada.

rules

lista

Define algumas regras para alteração do template do componente a partir de determinadas ações.

-

Image RemovedTopicRulesHandleRulesElemento:

ÂncoraTopicRulesHandleRules

`rules`

do handleRulesTipo: lista

Descrição:

Lista de as regras

do

de controle do handleRules.

Item

Propriedade

Tipo

Objetivo	Possíveis valores /

exemplo

exemplos
`accordionTabClicked`

valor

Específico do

controle Acordeão

componente acordeão, usado para acionar a ação

de expandir ou recolher

de expandir ou recolher seus itens

no editor HTML

.	-
`activeClass`

valor

Ativa uma classe específica

especificada

apontada anteriormente.

Ex.: "

in

"

activeSelector

valor

Seleciona o atributo que sofrerá a alteração.

Ex.: "

ul.nav-tabs li.active

"

sourceHTML

valor

Define trecho do HTML que será

acrecido

acréscido ou retirado do template, caso a regra seja atendida.

Ex.: "

"

targetSelector

valor

Seleciona um elemento HTML ou classe CSS para sofrer a alteração,

Ex.: "

div.panel-collapse.content

"

toggleClass

valor

Adicionar ou retirar uma classe CSS.

Ex.: "

invisible

"

toggleSelector

valor

Adicionar ou retirar um elemento seletor.

Ex.: "

ui-select-choices

"

Image Removed

Âncora

TopicProperties

TopicProperties

	properties

Elemento:

	properties

Tipo: Objeto
Descrição: ÂncoraTopicPropiedadesPropertiesTopicPropiedadesProperties

Elemento: características do properties

Tipo: Objeto
Descrição:

`properties`

Define as propriedades e evento do controle.

ItemTipo

Propriedade	Objetivo	Campo no editor de views
`crn-datasource`

objeto

	Define a fonte de dados do componente.	Fonte de dados
`cronapp-filter-autopost`

objeto

	Realiza consulta ou ação a cada letra digitada no campo.	Postagem Automática
`cronapp-filter-caseinsensitive`

objeto

	Define se o campo diferenciará letras minúsculas e maiúsculas.	Case Insensitive
`cronapp-filter-operator`

objeto

	Define operadores relacionais e de igualdade. (=, <, >, <= e >=)	Operador
`dependent-by`

objeto

Cria uma dependência do componente para a exibição de conteúdo.

Exemplo: As informações sobre um usuário só irá aparecer na tela quando um dos usuários

forem selecionados

for selecionado.	Depende de
`dependent-lazy-post`

objeto

Cria uma dependência do componente com a fonte de dados informada para a inserção de conteúdo. Nesse campo deve ser informado o objeto independente em relação ao campo "

Dependente

dependente de postagem de campo sob demanda".

Exemplo: As regras para um usuário só será submetida se existir um usuário.

Dependente de postagem sob demanda

dependent-lazy-post-field

objeto

Cria uma dependência do componente com a fonte de dados informada para a inserção de conteúdo. Nesse campo deve ser informado o objeto ou id que ficará dependente.

Exemplo: As regras para um usuário só será submetida se existir um usuário.

Dependente de postagem de campo sob demanda

entity

objeto

	Define qual a fonte de dados que irá alimentar o componente.	Origem de dados
`href`

objeto

	Define uma URL para gerar um link.	Referência
`keys`

objeto

	Define quais parâmetros serão usados como chave na fonte de dados.	Chaves
`mandatory`

valor

Define uma propriedade como preenchimento obrigatório, adicionando contorno vermelho à propriedade quando vazia.

true:

Define

define como obrigatória.
false:

Propriedade

define como não obrigatória.

mask

objeto

Lista pré-definida de mascarás.

Exemplo: CEP, CPF, data, telefone

entre outros

etc.	Máscara
`mask-placeholder`

objeto

Possibilita adição de novas

mascarás

máscaras customizadas.

Sugestão de

Máscara

máscara

ng-click

objeto

	Executa evento ao clicar (AngularJS).	Ao clicar
`on-after-create`

objeto

	Executa um evento após a criação algo.	Após criar
`on-after-delete`

objeto

	Executa evento após ação de deletar algo.	on-after-delete
`on-after-fill`

objeto

	Executa evento após preenchimento de um campo.	Após preencher
`on-after-update`

objeto

	Executa evento após atualização de algo.	Após atualizar
`on-before-create`

objeto

	Executa evento antes de criar algo.	Antes de criar
`on-before-delete`

objeto

	Executa evento antes de deletar algo.	Antes de deletar
`on-before-update`

objeto

	Executa evento antes de atualizar algo.	Antes de atualizar
`onclick`

objeto

	Executa evento ao clicar no componente (JavaScript).	Ao clicar
`on-error`

objeto

	Executa um evento quando ocorrer um erro no carregamento de algum arquivo ou mídia.	Ao errar
`onmouseover`

objeto

	Executa evento no precionar do clique do botão (JavaScript).	Ao clicar
`qr`

objeto

	Exclusivo para o controle QR Code.	QR Code
`src`

objeto

	Define campo para carregamento de imagem.	Origem
`target`

objeto

Seleciona em qual janela será aberta o link.	Alvo
`xattr-fullsize`

objeto

Determina se o componente ocupará a linha inteira ou não. Suas opções padrões são

"

inline

"

ou

"

block

";

e definidas

no Determina em

no `attributesForPreview`.	Largura
`xattr-position`

objeto

Determina em qual posição o componente ficará alinhado. Suas opções padrões são à esquerda (

Standard

standard), centro (

Middle

middle) ou direita (

Right); definidas no Determina o

right) e definidas no `attributesForPreview`.	Posição
`xattr-size`

objeto

Determina o tamanho do componente na tela. Suas opções padrões são

Standard

standard,

Larger

larger (btn-lg) e

Small

small (btn-sm)

;

e definidas

no

no `attributesForPreview`.	Tamanho
`xattr-theme`

objetoDetermina o

Determina o tema do componente. Suas opções padrões são

Default

default,

Primary

primary,

Success

success,

Info

info,

Warning

warning,

Danger

danger e link e

Link;

definidas

no Determina o

no `attributesForPreview`.	Tema
`xattr-type`

objeto

Determina o o estilo do botão. Suas opções padrões são

Default

default,

Clear

clear (button-clear) e

Outline

outline (button-outline)

;

e definidas

no

no attributesForPreview. Style

Type

Image Removed

Type

Características

Define as características das propriedades e evento do controle

.Obs: O último nível "propriedades" está entre aspas pois

e representa qualquer uma das propriedades informadas na tabela de properties

citadas acima

.

ItemTipo

Propriedade	Objetivo	Possíveis valores /

exemplo

exemplos
`displayName_en_US`

valorInternacionalização em inglês do EUA para o rótulo do campo no Editor HTML.

Nome do rótulo que aparecerá na aba propriedades do editor de views quando a IDE estiver no idioma inglês (EUA).

Datasource

Ex.: "Datasource"

displayName_pt_BR

valorInternacionalização em português do Brasil para o rótulo do campo no Editor HTML.Ex.: "Fonte de dados"

Nome do rótulo que aparecerá na aba propriedades do editor de views quando a IDE estiver no idioma português (BR).	Fonte de dados
`onDisplay`

onDisplayvalor

Executa comando em JavaScript para atualizar o componente na tela sempre que essa propriedade for alterada.

Ex.: "

javascript:function() { /* função JavaScript */ }

"

onSave

valor

Executa comando em JavaScript para salvar sempre que uma opção for selecionada ou ação tomada no componente.

Ex.: "

javascript:function() { /* função JavaScript */ }

"

options

lista

Define quais chaves/valores serão exibidas quando a propriedade for do tipo lista.	-
`options: key`

valor

Chave da opção para propriedades do tipo lista.

Ex.: "

true

"

options: value

valor

Valor da opção para propriedades do tipo lista.

Ex.: "

Sim

"

removable

valor

Exibe o ícone

"Remover

remover propriedade

"

ao lado do nome do campo

. Ao

e ao clicar, o campo será removido dentre as propriedades ou eventos.

OBS.: É possível chamar novamente a propriedade através do campo

"Nova

nova propriedade

"

.

true:

Insere

insere o ícone

.

;
false:

Oculta

oculta o ícone

. Valor default quando não informada essa propriedade

e é o valor default a propriedade não é informada.

resourceType

valor

Define o tipo do recurso usado na propriedade.

Exemplo: "image/jpeg,image/gif,image/png" (permite imagens do tipo jpeg, gif ou png)

Ex.: "

image/jpeg, image/gif, image/png

"

type

valor

Define em qual aba o campo aparecerá (Propriedades ou Eventos), além da forma de como o campo irá se comportar: permitir apenas texto, seletor, abrirá uma janela para segurança, importação de fonte de dados ou eventos.

Ex.: "

event

"

Árvore de páginas

Versões comparadas

Versão antiga 11

Nova versão 12

Chave

Estrutura do arquivo

Propriedades do arquivo

Elementos do components.json

Elemento: (raiz)

Elemento: components

`attributesForPreview`

`values`

`childrenProperties`

`handleRules`

`rules`

Elemento: características do properties

`properties`

Características

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 11

Nova versão 12

Chave

Estrutura do arquivo

Propriedades do arquivo

Elementos do components.json

Elemento: (raiz)

Elemento: components

attributesForPreview

values

childrenProperties

handleRules

rules

Elemento: características do properties

properties

Características

`attributesForPreview`

`values`

`childrenProperties`

`handleRules`

`rules`

`properties`