1. Home
  2. Desenvolvedores
  3. Introdução da API do desenvolvedor

Introdução da API do desenvolvedor

Introdução

A Blocs a API do desenvolvedor permite que terceiros criem Brics que pode ser usado dentro do Blocs ambiente de design. Os principais componentes de um costume Bric são criados usando HTML, JS e CSS (você pode ler mais sobre dados e estrutura de arquivos SUA PARTICIPAÇÃO FAZ A DIFERENÇA) Existem vários protocolos de API que podem ser acessados ​​por meio de qualquer linguagem baseada em javascript.

Observe: o Blocs A API do desenvolvedor está atualmente em sua fase Alpha inicial, portanto, alguns recursos e documentação podem mudar.

Bric Construtor

Blocs vem com uma ferramenta de desenvolvedor chamada Bric Construtor que é projetado para ajudar no desenvolvimento e criação de Brics. Ele pode ser acessado via Desenvolvedor> Bric Construtor no menu principal. O Bric Builder é a maneira mais fácil de começar a criar Brics, é recomendável que você siga este guia básico para criar seu primeiro Bric.
 

Construindo Interfaces

A interface do usuário para um Bric deve ser criado usando o Bric Ferramenta Builder. Na guia da interface, existem vários campos e controles para adicionar e gerenciar a interface do usuário para o seu bric.

Adicionando um item

Para adicionar um novo componente de interface do usuário, clique no + botão localizado na parte superior direita da árvore da camada de IU e selecione o tipo de componente de interface a ser adicionado.

Reordenando itens

Os itens da interface do usuário podem ser reordenados arrastando e soltando a camada relevante na árvore de camadas.

Duplicando itens

Os itens da interface do usuário podem ser duplicados simplesmente Clique com o botão direito a camada relevante na árvore de camadas e selecionando Duplicar no menu de contexto.

Dica para iniciantes!

Também é possível duplicar todo o custom Brics by Clique com o botão direito que o Bric na lista principal do lado esquerdo do Bric Construtor e seleção Duplicar no menu de contexto.

Componentes de IU disponíveis

Título - Um título é um componente de texto visual que não chama uma função.

Etiqueta Multi-Line - Um rótulo de várias linhas é um componente de texto visual que não chama uma função.

Campo de texto - Um campo de texto passa um valor de string para sua função de edição alocada.

Campo de passo - Um campo de texto com controle de passo passa um valor inteiro para sua função de edição alocada.

Área de texto - Uma área de texto passa um valor de string para sua função de edição alocada.

Imagem Poço - Uma imagem passa bem um caminho de arquivo para sua função de edição alocada.

Menu suspenso - Um menu suspenso passa o índice inteiro selecionado e o valor da string do item para sua função de edição alocada.

Caixa de seleção - Uma caixa de seleção passa um valor bool para sua função de edição alocada.

Botão - Um botão chama sua função de edição alocada quando é clicado.

Seletor de fonte - Um menu suspenso que passa uma seleção de fonte para sua função de edição alocada.

Seletor de página - Um menu suspenso que passa um ID de página, nome, atributo e o índice inteiro do item selecionado para sua função de edição alocada. Os IDs de página são trocados por URLs de página reais na exportação, desde que o ID seja armazenado no atributo de dados dados-blocs-página.

Seletor de ID - Um menu suspenso que passa um ID para sua função de edição alocada. Este menu é preenchido automaticamente com todos os IDs de elemento do pagina atual.

Seletor de campanha publicitária - Um menu suspenso que passa um nome de projeto de campanha publicitária para sua função de edição alocada. Este menu é preenchido automaticamente com todos .hiperesources diretórios adicionados ao projeto atual.

Poço de cor - Uma amostra de cor passa um valor hexadecimal para sua função de edição alocada.

Slider - Um controle deslizante passa um valor inteiro para sua função de edição alocada.

Controle de alinhamento horizontal - Um controle segmentado de alinhamento passa um valor inteiro para sua função de edição alocada (0 = Esquerda | 1 = Centro | 2 = Direita).

Controle de Alinhamento Vertical - Um controle segmentado de alinhamento passa um valor inteiro para sua função de edição alocada (0 = Superior | 1 = Médio | 2 = Inferior).

Controle de alinhamento de texto - Um controle segmentado de alinhamento passa um valor inteiro para sua função de edição alocada (0 = Esquerda | 1 = Centro | 2 = Direita | 3 = Justificar).

Controle de seleção de dispositivo – Um controle segmentado de dispositivo passa um valor inteiro para sua função de edição alocada (1 = Desktop | 2 = Tablet | 3 = Mobile Paisagem | 4 = Mobile).

Controle de Seleção de Borda – Um controle segmentado de seleção de borda passa um valor inteiro para sua função de edição alocada (0 = Esquerda | 1 = Superior | 2 = Direita | 3 = Inferior).

Controle de seleção de direção – Um controle segmentado de direção passa um valor inteiro para sua função de edição alocada (0 = Esquerda | 1 = Acima | 2 = Direita | 3 = Abaixo).

Divisor - Um divisor é um componente visual que não chama uma função.

Atributos de dados do componente de interface do usuário

Cada componente da interface com o usuário possui vários atributos de dados que são usados ​​para definir as principais características de interação, como a função que é chamada quando um componente é interagido ou a dica de ferramenta que é mostrada quando o usuário move o cursor sobre um componente.

Título - O título do elemento de interface. Normalmente exibido no lado esquerdo da barra lateral.

função - O nome da função que é chamada quando há interação com este elemento da interface. Inclua apenas o nome da função, não inclua ().

Atributo - O nome do atributo usado para armazenar o valor dos dados para este elemento de interface.

Valor - O valor inicial dos dados do atributo deste elemento da interface.

tooltip - O texto da dica de ferramenta exibido quando o cursor está sobre o componente.

Funções de escrita

Para manipular o HTML de um custom Bric, primeiro você precisará escrever sua própria funcionalidade de edição (baseada em javascript). Essas funções de edição são destinadas ao uso dentro do Blocs ambiente de design e não são usados ​​quando seu Bric está incluído em um projeto exportado. Essas funções de edição devem ser colocadas em um único arquivo JS que é carregado no cabeçalho do seu Brics index.html Arquivo. As funções de edição são vinculadas a um componente da interface do usuário por meio dos componentes da interface do usuário atributo de dados da função.

Quando um componente da interface do usuário é interagido, ele chama a função de edição designada e passa um valor para ela junto com o atributo de destino ao qual o valor é atribuído. A carga útil de dados para a função de edição dependerá do tipo de componente da interface do usuário que está sendo usado para chamá-la. Uma função de edição deve ser escrita para declarar a variável de carga útil corretamente. No exemplo a seguir, a função de edição usada por uma caixa de seleção é configurada para receber uma carga útil BOOL primeiro e o valor da string de atributo de destino depois.

Exemplo:
function myCheckbox(isChecked,targetAttr)
{
if(isChecked)
{
// checkbox is checked
}
}

Depuração Personalizada Brics

Blocs vem com alguns recursos úteis integrados para ajudar na depuração customizada Brics. Você pode descobrir mais sobre esses recursos de depuração integrados para SUA PARTICIPAÇÃO FAZ A DIFERENÇA.

Atualizado em 23 de janeiro de 2023

Esse artigo foi útil?

Artigos Relacionados