uma estrutura , é HTML (Figura 1) controle 2 conseguimos controle CronApp do controle no Editor HTML, personalização , internacionalização , inclusão HTML no CronApp
Figura 2 - Abas propriedades, eventos e responsividade também são influenciadas pelo components.json
Estrutura
A quando controles padrões do CronApp utilizam o mesmo arquivo "components.json", que fica em diretórios diferentes dependendo do tipo do projeto:- 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
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
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)
- 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.
Elementos do components.json
Elemento: (raiz)
Tipo: objeto
Descrição: Objeto que engloba todo o documento components.json.
Item | Tipo | Objetivo | Possíveis valores / exemplo |
---|---|---|---|
name | valor | Define se é um arquivo responsável pelo controles padrões do CronApp ou um controle customizado pelo usuário. |
|
version | valor | Valor com a versão do arquivo. | Ex.: 1.0.0 |
components | lista | Lista dos objetos responsável por definir os controles e suas propriedades. | - |
Elemento: components
Tipo: lista
Descrição: Lista dos objetos responsável por definir as cada componente e suas propriedades.
- 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.
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.
- 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.
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)”.
-
Informa qual componente HTML receberá o texto do campo Sugestão no editor HTML.
Possui em seu interior o valor "selector" onde será informado o componente HTML.
Ex.: { "selector": "input" }
- true: exibe o controle no editor HTML. Valor default quando não informada essa propriedade.
- false: oculta o controle no editor HTML.
- true: Adiciona uma tag <div>. Valor default quando não informada essa propriedade.
- false: Não adiciona uma tag <div>.
Elemento: attributesForPreview
Tipo: lista
Descrição: Lista de propriedades customizadas para os atributos CSS dos componentes.
Item | Tipo | Objetivo | Possíveis valores / exemplo |
---|---|---|---|
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. |
|
target | valor | Informa o atributo ou elemento que será customizado. Normalmente utilizado para adicionar “class” ou “style”. | Ex.: "class" |
values | lista | Lista das opções da propriedade. | - |
Elemento: values do attributesForPreview
Tipo: lista
Descrição: Lista das opções da propriedade attributesForPreview
Item | Tipo | Objetivo | Possíveis valores / exemplo |
---|---|---|---|
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" |
icon | valor | Exibe um ícone 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. Só é possível utilizar com o type “options”. | Ex.: "#fff" |
Elemento: childrenProperties
Tipo: lista
Descrição:
Item | Tipo | Objetivo | Possíveis valores / exemplo |
---|---|---|---|
displayName_en_US | valor | Internacionalização (inglês EUA) do nome do campo que aparecerá no editor HTML. | Ex.: "Field" |
displayName_pt_BR | valor | Internacionalização (português Brasil) do nome do campo que aparecerá no editor HTML. | Ex.: "Campo" |
editExpression | valor | Exibe o ícone "Editar expressão" ao lado do nome do campo. Ao clicar é aberta uma caixa de texto para a edição da expressão ou inserção de Fonte de dados. |
|
name | valor | Informa o atributo do elemento HTML que será manipulado em um campo do editor HTML. | 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 permitir apenas texto, seletor ou importação de fonte de dados. | Ex.: "datasourceFieldList" |
Elemento: handleRules
Tipo: Objeto
Descrição: Define características para algumas propriedades e regras para elementos do componente.
Item | Tipo | Objetivo | Possíveis valores / exemplo |
---|---|---|---|
canActivate | valor | Ativa ou desativa as regras. |
|
canIncrement | valor | Exibe o ícone "Adicionar" ao lado do nome do campo. Ao clicar é inserido outro item na lista. Exemplo: outra coluna em uma tabela ou outro item em uma lista de opções. |
|
canOrder | valor | Define a possibilidade de ordenação dos itens. |
|
canToggle | valor | Mostra o ícone "Exibir" ao lado do nome do campo. Esse ícone recolhe ou expande os itens ou submenus desse controle no editor HTML, permitindo visualizar e selecionar seu conteúdo para personalização. Exemplo caixa de seleção ou menu. |
|
rules | lista | Define algumas regras para alteração do template do componente a partir de determinadas ações. | - |
Elemento: rules do handleRules
Tipo: lista
Descrição: Lista de regras do controle.
Item | Tipo | Objetivo | Possíveis valores / exemplo |
---|---|---|---|
accordionTabClicked | valor | Específico do controle Acordeão, usado para acionar a ação de expandir ou recolher seus itens no editor HTML. | - |
activeClass | valor | Ativa classe específica especificada. | 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 ou retirado do template, caso a regra seja atendida. | Ex.: "<li></li>" |
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" |
Elemento: properties
Tipo: Objeto
Descrição: Define as propriedades e evento do controle.
Executa evento antes de atualizar algo.
Descrição: