Chamadas API

Introdução

O Blocs A API do desenvolvedor fornece um conjunto de rotinas e protocolos que podem ser usados ​​para interagir com um Brics interface do usuário, saída HTML e vários outros aspectos do Blocs ambiente de design.

As chamadas são feitas por meio de um BricAs funções Javascript podem ser escritas em qualquer formato JS, jQuery 2, jQuery 3 etc.

Todas as chamadas de API são processadas usando o Manipulador de mensagens do WebKit e deve passar um único conjunto de dados na forma de um dicionário JSON ou uma string. Um valor de dados de chamadas de API deve ser colocado dentro do Postar mensagem colchetes.

Exemplo:
window.webkit.messageHandlers.API_CALL.postMessage("VALUE");

Chamadas de interface do usuário

Quando um costume Bric for selecionado, a barra lateral preencherá automaticamente os valores da interface do usuário com base no Brics valores atuais. Quando um item da interface do usuário da barra lateral é interagido, o estado desse item será atualizado automaticamente, no entanto, as seguintes chamadas de API permitem que você manipule outros itens da interface do usuário e seus valores para aquele Bric. Por exemplo, marcar uma caixa de seleção pode resultar na adição de outro item de menu a um menu suspenso, desmarcá-lo pode remover o item adicional do menu suspenso.

As chamadas de API da interface do usuário requerem um dicionário JSON que especifica o atributo e valor do item de IU de destino.

setUIVal - Defina o valor para um item da interface do usuário da barra lateral. Todos os valores devem ser passados ​​como strings, incluindo inteiros e bools.

Exemplo de lista suspensa:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"dropdown-data","value":"1","sync":"false"}');

Exemplo de caixa de seleção:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"checkbox-data","value":"1","sync":"false"}');

Exemplo de campo de entrada:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"field-data","value":"Hello World","sync":"false"}');

Exemplo de controle de alinhamento:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"align-data","value":"2","sync":"false"}');

setUIState - Defina o estado (ativado / desativado) de um item da interface do usuário da barra lateral.

Exemplo:
window.webkit.messageHandlers.setUIState.postMessage('{"attr":"my-name-data","enable":"false"}');

setUIEditável - Defina se o conteúdo de um item de IU pode ser editado.

Exemplo: window.webkit.messageHandlers.setUIEditable.postMessage('{"attr":"my-name-data","editable":"true"}');

setUIHidden - Defina se um item de IU está oculto.

Exemplo: window.webkit.messageHandlers.setUIHidden.postMessage('{"attr":"my-name-data","hidden":"true"}');

popUIMenu - Preencher um item de menu suspenso com opções.

Exemplo:
window.webkit.messageHandlers.popUIMenu.postMessage('{"attr":"dropdown-data","items":"item 1,item 2,*seperator*,item 3", "value":"0"}');

Chamadas de Projeto

Há momentos em que você precisará adicionar recursos adicionais a um projeto que contém seu Bric. As seguintes chamadas de API permitem que você adicione recursos de projeto adicionais.

projetoRecurso - Adicionar personalizado adicional Bric recursos para um projeto. Depois de adicionados, eles serão exibidos nos anexos do projeto nas configurações do projeto. Arquivos JS, CSS, PHP e HTML são atualmente suportados, bem como diretórios. Os arquivos JS anexados são colocados no diretório export / js, os arquivos CSS são colocados no diretório export / css e os arquivos PHP são colocados no diretório export / includes. Em um código de páginas, os recursos CSS serão colocados antes da tag de fechamento do cabeçalho e os recursos JS serão colocados antes da tag de fechamento do corpo. Todos os recursos adicionais referenciados por seu cliente Bric, deve ser incluído em seu Brics diretório de recursos.

Exemplo:
window.webkit.messageHandlers.projectResource.postMessage('{"action":"add","name":"my-brics-assets-folder"}');

Chamadas de página

Há momentos em que você precisará adicionar recursos adicionais a uma página que contém seu Bric. As chamadas de API a seguir permitem adicionar recursos de página adicionais e controlar um sufixo de exportação de páginas.

recurso - Adicionar personalizado adicional Bric recursos para uma página. Depois de adicionados, eles serão exibidos nos anexos da página nas configurações da página. Arquivos JS, CSS e PHP são atualmente suportados. Os arquivos JS anexados são colocados no diretório export / js, os arquivos CSS são colocados no diretório export / css e os arquivos PHP são colocados no diretório export / includes. Todos os recursos referenciados por seu cliente Bric, deve ser incluído em seu Brics diretório de recursos.

Exemplo:
window.webkit.messageHandlers.resource.postMessage('{"action":"add","name":"my-custom-resource.js"}');

sufixo de página - Defina o sufixo da página atual, por exemplo, HTML, PHP.

Exemplo:
window.webkit.messageHandlers.pageSuffix.postMessage("php");

Chamadas de modelo

Há momentos em que você pode precisar incluir valores definidos pelo usuário em arquivos adicionais que estão incluídos no site exportado. A seguinte chamada de API permite que você faça isso.

lojaPersonalizadaBricModeloVal - Armazene um valor definido pelo usuário que será incluído em um padrão Bric arquivo de modelo. Os arquivos de modelo podem ser CSS, JS, JSON e PHP e devem ser adicionados ao Bric conteúdo em um diretório chamado modelos.

Exemplo:
window.webkit.messageHandlers.storeCustomBricTemplateVal.postMessage('{"attr":"my-attr","value":"Hello World","template":"custom-bric-js.js","force-newfile":"no"}');

Valores-chave:
O lojaPersonalizadaBricModeloVal A chamada de API deve incluir os seguintes valores-chave:

atr - O valor do atributo é usado para identificar as áreas que serão substituídas no arquivo de modelo na exportação. Quando este atributo é usado em um arquivo de modelo, ele deve ser agrupado em% eg% my-attr%.
valor - O valor que substituirá o atributo no arquivo de modelo.
modelo - O nome do arquivo de modelo. Este arquivo deve estar localizado em um diretório chamado modelos dentro do seu Brics conteúdos.
forçar novo arquivo - Se dois Brics com valores diferentes, escrever no mesmo arquivo de modelo e isso for definido como SIM, outro arquivo de modelo será criado, por exemplo, custom-bric-js-1.js.

Códigos curtos
É importante notar também que códigos curtos também pode ser usado em arquivos de modelo.

Alterações DOM

Personalizadas Brics são manipulados fora do ambiente de design principal, este método dá aos desenvolvedores total liberdade para manipular o Brics 'DOM' (Document Object Model) de qualquer forma, com qualquer tipo de linguagem baseada em JS. Depois que uma função fez alterações no padrão Brics DOM, será necessário chamar o sincronizar protocolo, a fim de sincronizar as alterações do DOM para o personalizado Bric localizado no principal Blocs tela de design.

sincronizar - Após a manipulação do DOM, a chamada da API de sincronização sincronizará as alterações para o principal Blocs tela de design. Não há pré-processamento ou renderização durante a sincronização, tudo acontece instantaneamente.

Exemplo:
window.webkit.messageHandlers.sync.postMessage("changes");

Chamadas de feedback

Há momentos em que é importante fornecer informações ao usuário com base nas alterações que ele está fazendo em um Bric. As ligações a seguir oferecem várias maneiras de fazer isso.

notificação - Mostrar uma notificação no aplicativo que não block acesso total à interface do usuário. Cada tipo de notificação deve ter seu próprio valor de ID, pois assim que um ID de notificação for descartado pelo usuário, ele não será exibido novamente se for chamado.

Exemplo:
window.webkit.messageHandlers.notification.postMessage('{"message":"Hey, this is a notification.","id":"my-bric-notification"}');

Também é possível redefinir uma notificação usando o atributo reset, o atributo ID pode ser usado para enviar um único ID ou uma matriz de IDs de notificação.

Exemplo:
window.webkit.messageHandlers.notification.postMessage('{"reset":"true","id":"my-bric-notification-1,my-bric-notification-2"}');

alerta - Postar um alerta (blocks apps full UI até dispensado).

Exemplo:
window.webkit.messageHandlers.alert.postMessage('This is a basic alert');

Alerta de retorno de chamada - Postar um alerta (blocks apps full UI até dispensado) que exige que o usuário faça uma escolha. A escolha do usuário será passada de volta para a função como um valor BOOL.

Exemplo:
window.webkit.messageHandlers.callbackAlert.postMessage('{"message":"Do you want to get a pizza?","function":"pizzaFunction"}');

Abrir URL - Abra uma URL no navegador da web do usuário.

Exemplo:
window.webkit.messageHandlers.openURL.postMessage('https://blocsapp.com/');

misc

Chamadas diversas usadas para o desenvolvimento.

depurar - Publique uma mensagem de depuração que será exibida no janela do console do desenvolvedor.

Exemplo:
window.webkit.messageHandlers.debug.postMessage('Hello World!');