Chamadas API

Introdução

A 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 funções Javascript personalizadas do Bric. As funções 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 Bric personalizado é selecionado, a barra lateral preencherá automaticamente os valores da IU com base no Bric personalizado. Brics valores atuais. Quando um item da IU 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 IU e seus valores para esse Bric personalizado. Por exemplo, marcar uma caixa de seleção pode resultar na adição de outro item de menu a um menu suspenso, desmarcá-la 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 personalizado. As seguintes chamadas de API permitem que você adicione recursos adicionais ao projeto.

projetoRecurso – Adicione recursos Bric personalizados adicionais a um projeto. Uma vez adicionados, eles serão exibidos nos anexos do projeto nas configurações do projeto. Arquivos JS, CSS, PHP e HTML são suportados atualmente, assim como diretórios. Arquivos JS anexados são colocados no diretório export /js, arquivos CSS são colocados no diretório export /css e arquivos PHP são colocados no diretório export /includes. Dentro do código de uma página, os recursos CSS serão colocados antes da tag head de fechamento e os recursos JS serão colocados antes da tag body de fechamento. Todos os recursos adicionais referenciados pelo seu Bric personalizado devem ser incluídos no 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 personalizado. As seguintes chamadas de API permitem que você adicione recursos de página adicionais e controle um sufixo de exportação de páginas.

recurso – Adicione recursos Bric personalizados adicionais a uma página. Uma vez adicionados, eles serão exibidos nos anexos da página em configurações da página. Arquivos JS, CSS e PHP são suportados atualmente. Arquivos JS anexados são colocados no diretório export /js, arquivos CSS são colocados no diretório export /css e arquivos PHP são colocados no diretório export /includes. Todos os recursos referenciados pelo seu Bric personalizado devem ser incluídos no 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.

armazenarCustomBricTemplateVal – Armazena um valor definido pelo usuário que será incluído em um arquivo de modelo Bric personalizado. Os arquivos de modelo podem ser CSS, JS, JSON e PHP e devem ser adicionados ao conteúdo Bric personalizado 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:
A armazenarCustomBricTemplateVal 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 para sincronizar as alterações do DOM no Bric personalizado 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. Também é importante considerar que sincronizar O protocolo também criará um estado de desfazer no documento atual; portanto, use esta chamada somente se alterações tiverem sido feitas, caso contrário, serão criados estados de desfazer desnecessários.

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

Chamadas de feedback

Há momentos em que é importante fornecer informações de volta ao usuário com base nas alterações que ele está fazendo em um Bric personalizado. As chamadas a seguir oferecem uma variedade de 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!');