Criar plugin
A criação de plugins no Cronapp é de forma high code no momento atual e, através da seleção de modelos, é possível criar plugins do tipo servidor, cliente e componente.
Novo plugin
Ao clicar no ícone novo (seta da Figura 1), será aberta a janela de criação de projeto. Para criar um plugin , selecione a opção plugin (1 da Figura 1) na aba high-code, devendo informar um nome para esse plugin (2 da Figura 1) e selecionar uma fonte (destaque 3 da Figura 1). Ao clicar em finalizar, será aberta as janelas de configuração conforme o tipo da fonte selecionada.
Figura 1 - Criar plugin na IDE Cronapp
Projeto está sob controle de versão?
Se o projeto do tipo plugin já foi criado e está versionado, deve-se marcar esta opção para abrir a janela (Figura 1.1) que importará o projeto.
controle de versão
Figura 1.1 - Janela de controle de versão
: seleciona o protocolo de controle de versão, nesse caso o GIT; Protocolo
informa a URI do repositório que contém o projeto do tipo ;
URL do Repositório: plugin
ao marcar essa caixa, é possível importar projetos que estejam como públicos sem Anônimo:
informar o usuário e a senha;
informa o usuário do serviço do protocolo, nesse caso o serviço GIT; Usuário:
informa a senha do serviço do protocolo, nesse caso o serviço GIT; Senha:
preenchido automaticamente com os dados cadastrados no Cronapp, é o Nome do autor:
nome que será informado nas atualizações do projeto no GIT;
Nesta página
Novo plugin
Projeto está sob controle de versão? Baseado em modelo existente O projeto está em um arquivo ZIP? Modelos da IDE Plugin de componente visual Arquivo *. template. html Arquivo *. components. json Arquivo *.js Plugin para bloco cliente
Arquivo *. cronapi.js Plugin para bloco servidor Arquivo *. java Arquivo pom. xml Arquivo template. properties Adicionando parâmetros Arquivos dinâmicos *. ftl Arquivos de internacionali zação Conteúdo complementar Plugins Cronapp Adicionar plugin ao market
preenchido automaticamente com os dados cadastrados no Cronapp, é o
Email do autor:
que será informado nas atualizações do projeto no GIT; mail
: seleciona a desejada do projeto.
Branch branch
Baseado em modelo existente
Se o projeto é novo, deve-se marcar esta opção. Será aberta a janela de modelos (Figura 1.2) existentes na IDE para projetos do tipo plugin, podendo ser do tipo componente, cliente para bloco de programação e servidor para bloco de programação.
Figura 1.2 - Modelos da IDE para criar plugins
: modelo utilizado para criar que servirão como componentes
Componente visual plugins visuais, podendo ser tanto web quanto mobile;
modelo utilizado para criar que serão :
Plugin cliente para bloco de programação plugins
utilizados nos blocos de programação do tipo cliente da IDE, podendo ser tanto web quanto mo ;
bile
modelo utilizado para criar que serão :
Plugin servidor para bloco de programação plugins utilizados no bloco de programação do tipo servidor da IDE.
O projeto está em um arquivo ZIP?
Permite importar projetos do tipo plugin compactados. Será aberta uma janela para selecionar o arquivo no computador do usuário (Figura 1.3).
Figura 1.3 - Selecionar projeto compactado
Modelos da IDE
Existe três modelos para criar plugins: componente visual, cliente para bloco de programação e servidor para bloco de programação. Cada um desses modelos tem suas particularidades.
Plugin de componente visual
Ao selecionar o modelo componente visual (Figura 1.2), será direcionado para a janela de informe dos campos ID do componente e Nome do componente (Figura 2.1.1).
Figura 2.1.1 - Campos para criar componente
Ao finalizar, a estrutura do projeto será mostrada na árvore de arquivos e é criada tanto para mobile quanto para web (Figura 2.1.2). Se o plugin vai ser somente web - basta somente excluir a pasta mobile (
) e vice versa.
mobileapp
Por padrão, ambas as pastas apresentam os seguintes arquivos:
é o arquivo usado para criar o do componente, :
id_do_componente.template.html template que é um HTML;
é o arquivo usado para definir as propriedades e :
id_do_componente.components.json
eventos do componente, em um JSON;
é o arquivo usado para desenvolver a lógica do componente, em :
id_do_componente.js
JavaScript.
Arquivo
*.template.html
O *.template.html, seja ele web ou mobile, deve conter toda estrutura HTML do componente a ser criado (Figura 2.1.3). Ele precisa seguir a nomenclatura padrão: id_do_componente.template.html
e também precisa estar contida na pasta que também vem por padrão (nesse caso, a pasta templates).
Figura 2.1.3 - Arquivo *.template.html
Arquivo
*.components.json
O *.components.json, seja ele web ou mobile, deve conter todas as propriedades e eventos necessários para o componente a ser criado (Figura 2.1.4). Ele precisa seguir a nomenclatura padrão: id
e também precisa estar contida na pasta que também vem por
_do_componente.components.json
padrão (nesse caso, a pasta components).
Para mais detalhes sobre a estrutura desse arquivo, acesse a documentação Entendendo o
.
Components json
Figura 2.1.4 - Arquivo *.components.json
Arquivo
*.js
O arquivo JavaScript, seja ele web ou mobile, onde deve conter toda a parte lógica para o componente a ser criado (Figura 2.1.5). Ele precisa seguir a nomenclatura padrão: id_do_componente.js e também precisa estar contida na pasta que também vem por padrão (nesse caso, a pasta ).js
Figura 2.1.5 - Arquivo JavaScript do componente
para bloco cliente
Plugin
Ao selecionar o modelo plugin cliente para bloco de programação (Figura 1.2), será direcionado para a janela de informe dos campos (Figura 2.2.1) no qual deve ser preenchido os seguintes campos:
campo para informar o nome do arquivo JavaScript a ser criado; Nome do arquivo:
campo para informar o nome do bloco de programação gerado a partir da Nome da função:
primeira função JavaScript;
campo para informar a primeira função JavaScript do arquivo; Nome reduzido da função:
campo para descrever a finalidade da função; Descrição da função:
campo para criar a categoria em que esse bloco se encontrará no
Categoria: editor de Bloco
.
de programação
Figura 2.2.1 - Campos para criar bloco cliente
Ao finalizar, a estrutura do projeto será mostrada na árvore de arquivos e contém as pastas web e mobile com seus respectivos arquivos JavaScript como também contém os arquivos properties (Figura 2.2.2). Se o plugin vai ser somente para web - basta somente remover a pasta mobile (mobileapp) e vice versa.
Figura 2.2.2 - Estrutura do plugin do tipo bloco cliente
Arquivo
*.cronapi.js
O arquivo JavaScript criado, tanto para web quanto para mobile, precisa seguir a nomenclatura padrão: n
e também precisa estar contida na pasta que também vem por padrão
ome_do_arquivo.cronapi.js
(a pasta cronapi). O código base do arquivo criado vem com alguns parâmetros (anotações) tidos como padrão e eles podem ser modificados a depender da necessidade, mas eles são essenciais para garantir a funcionalidade.
Figura 2.2.3 - Arquivo JavaScript
define o tipo da função, nesse caso ;
@type: function
n
@name: ome da função; d
@description: escrição sobre a funcionalidade da função; d
@multilayer: efine se o componente criado estará disponível tanto no bloco cliente quanto no servidor (true) ou somente no bloco cliente (false);
d
@param: efine o tipo do parâmetro de entrada da função, podendo ser LIST STRING JSON, , ,
, , , , ou ;
DOUBLE DATETIME DATASET BOOLEAN BLOCK class
@returns: define qual o tipo de retorno da função, podendo ser LIST STRING JSON DOUBLE, , , ,
, , , ou .
para bloco servidor
Plugin
Ao selecionar o modelo plugin servidor para bloco de programação (Figura 1.2), será direcionado para a janela de informe dos campos (Figura 2.3.1) no qual deve ser preenchido os seguintes campos:
ID do plugin:
Nome da classe: campo para informar o nome da classe Java a ser criada;
Nome da função: campo para informar o nome do bloco de programação gerado a partir do primeiro método Java;
Nome da função reduzida: campo para informar o primeiro método Java do arquivo; Descrição da função: campo para descrever a finalidade do método;
Categoria: campo para criar a categoria em que esse bloco se encontrará no editor de Bloco
.
de programação
Figura 2.3.1 - Campos para criar bloco servidor
Ao finalizar, a estrutura do projeto será mostrada na árvore de arquivos. Além da classe Java criada, a estrutura também apresenta o arquivo Maven (pom.xml) e os arquivos properties (Figura 2.3.2).
Figura 2.3.2 - Estrutura do plugin do tipo bloco servidor
Arquivo
*.java
O arquivo Java criado precisa seguir a nomenclatura padrão: nome_da_classe.javae também precisa estar contida na pasta que também vem por padrão (a pasta cronapi). O código base da classe vem com alguns parâmetros (anotações) tidos como padrão e eles devem estar incluídos pois garantem a funcionalidade, principalmente a anotação @CronapiMetaData que deve aparecer acima da classe e também acima de cada método(Figura 2.3.3) existente na classe.
Figura 2.2.3 - Arquivo Java
Arquivo
pom.xml
É o arquivo XML que contém todas as configurações necessárias para que o Maven interaja corretamente com o projeto (Figura 2.2.4).
Figura 2.2.4 - Arquivo pom.xml
Arquivo template.properties
Todos os modelos apresentarão o arquivo template.properties, através dele é possível definir em quais arquivos do projeto instalado serão feitas as chamadas de Scripts e CSS ou definir os parâmetros utilizados durante a instalação do plugin.
Acessa a documentação sobre anotações para saber mais.
Figura 2.4.1 - Arquivo template.properties
Para cada chamada serão necessárias 2 linhas, na primeira é definida o endereço do arquivo fonte (src) , enquanto que na segunda linha será informado o endereço do arquivo que irá conter a chamada do arquivo fonte (resource).
html.<tipo>.<ordem>.src=<arquivo chamado>
html.<tipo>.<ordem>.resource=<arquivo alterado>
<tipo>: tipo do arquivo (ex.: script ou css).
<ordem>: ordem de execução, deve ter o mesmo valor nas 2 linhas. <arquivo chamado>: endereço do arquivo que será incluído na chamada. <arquivo alterado>: endereço do arquivo a ser atualizado com a chamada.
Após instalar o plugin que possui o arquivo template.properties exibido na figura 2.4.1, o arquivo i
do projeto mobile receberá a atualização destacada na figura abaixo.
ndex.html
Figura 2.4.2 - Chamada adicionada pelo arquivo template.properties
Adicionando parâmetros
Também é no arquivo properties que podem ser adicionados parâmetros (destaque da Figura 2.4.3) que serão exibidos no momento da instalação do plugin. Por exemplo, um parâmetro que pede a licença. Além de adicionar o parâmetro, é possível paginar os campos (ex: .page.1, .page.2.), o tipo do retorno do parâmetro (string, boolean, etc) e sua ordem (0, 1, 2).
Caso a pasta web ou a pasta mobile tenha sido removida do plugin, deve-se retirar todas as informações existentes no template.properties sobre a pasta removida - ou seja, remove o par que faz referência a pasta web ou pasta mobile removida.
1. 2. 3.
Figura 2.4.3 - Adicionando parâmetros
Parâmetro que exibirá um campo de entrada de texto;
Parâmetro que exibirá uma caixa de seleção com os valores: "Material", "Celurean" e "Cosmo"; Parâmetro que exibirá um checkbox.
Para cada parâmetro são necessárias 2 linhas, na primeira é definido o título do campo, enquanto que na segunda linha será informado um valor padrão.
parameter.page.<paginação>.<tipo do retorno>.<ordem>.<nome do parâmetro>=<nome do campo>
parameter.page.<paginação>.<tipo do retorno>.<ordem>.<nome do parâmetro>. value=<valor>
<paginação>: caso a janela possua várias páginas, é possível definir em qual delas será exibido o campo do parâmetro. No caso de plugins, o padrão é "1".
<tipo do retonro>: tipo do retorno do campo do parâmetro (ex.: string, boolean, list). O tipo definirá o tipo do campo: Entrada de texto, caixa de seleção, checkbox e outros.
<ordem>: ordem do campo a ser exibido na janela, deve ter o mesmo valor nas 2 linhas. <nome do parâmetro>.
<nome do campo>: nome exibido no título do campo.
<valor>: valor padrão do campo. No caso lista, os valores devem ser separados pelo caractere "|".
Durante a instalação do plugin que possua o arquivo template.properties exibido na figura 2.4.3, a janela de configuração do plugin será exibido como na figura 2.4.4.
Figura 2.4.4 - Campos exibidos a partir da configuração do arquivo template.properties
É possível criar arquivos dinâmicos através da estrutura do FreeMarker para os mais variados fins. Para isso, deve-se adicionar a extensão ".ftl" ao final da extensão original do arquivo - ou seja, se o arquivo é um ".txt" então é necessário criar o arquivo no projeto plugin com a extensão ".ftl" após o "
.txt", ficando então como "meu_arquivo.txt.ftl" (Figura 2.4.5). Após a instalação do plugin, o arquivo criado ficará sem a extensão ".ftl" e as variáveis contidas no arquivo serão substituídas por seus valores.
Na parte de cima da figura 2.4.5 foi criado um arquivo dinâmico que recebe os valores passados por parâmetro durante a instalação do plugin, já na parte debaixo, podemos ver o arquivo gerado a partir do arquivo dinâmico.
Figura 2.4.5 - Arquivo dinâmico e o arquivo gerado a partir do arquivo dinâmico
Arquivos de internacionalização
Por padrão, são criados dois arquivos de internacionalização para tanto os parâmetros inseridos no temp
quanto para os parâmetros existentes nos blocos de programação, um em
late.properties
português (template_pt.properties) e outro em inglês (template_en.properties) (Figura 2.4.6), mas podem ser adicionados outros, desde que siga a nomenclatura: template_<sigla_do_id
ou (especific
ioma>.properties template_<sigla_do_idioma_sigla_do_país>.properties
ando o país do idioma) - ou seja, caso seja adicionado um arquivo para internacionalização do idioma francês, ele poderia ser template_fr.properties ou template_fr_FR.properties (nesse caso, especificando que o francês é o da França).
Figura 2.4.6 - Arquivo de internacionalização para o idioma português
