Chiamate API

Introduzione

Le Blocs L'API per sviluppatori fornisce una serie di routine e protocolli che possono essere utilizzati per interagire con un file Brics interfaccia utente, output HTML e vari altri aspetti di Blocs ambiente di progettazione.

Le chiamate vengono effettuate tramite funzioni Javascript Bric's personalizzate; le funzioni possono essere scritte in qualsiasi formato JS, jQuery 2, jQuery 3 ecc.

Tutte le chiamate API vengono elaborate utilizzando il Gestore messaggi WebKit e dovrebbe passare un singolo set di dati sotto forma di un dizionario JSON o una stringa. Un valore di dati delle chiamate API deve essere posizionato all'interno del file Pubblica messaggio parentesi.

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

Chiamate dall'interfaccia utente

Quando viene selezionato un Bric personalizzato, la barra laterale popolerà automaticamente i valori dell'interfaccia utente in base al valore personalizzato Brics valori correnti. Quando si interagisce con un elemento UI della barra laterale, lo stato di quell'elemento verrà automaticamente aggiornato, tuttavia, le seguenti chiamate API consentono di manipolare altri elementi UI e i loro valori per quel Bric personalizzato. Ad esempio, selezionando una casella di controllo potrebbe essere aggiunto un altro elemento di menu a un menu a discesa, deselezionandolo, potrebbe essere rimosso l'elemento aggiuntivo dal menu a discesa.

Le chiamate API dell'interfaccia utente richiedono un dizionario JSON che specifichi l'attributo e il valore dell'elemento dell'interfaccia utente di destinazione.

setUIVal - Imposta il valore per un elemento dell'interfaccia utente della barra laterale. Tutti i valori devono essere passati come stringhe, inclusi interi e bool.

Esempio di menu a discesa:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"dropdown-data","value":"1","sync":"false"}');

Esempio di casella di controllo:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"checkbox-data","value":"1","sync":"false"}');

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

Esempio di controllo dell'allineamento:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"align-data","value":"2","sync":"false"}');

setUIStato - Imposta lo stato (abilitato / disabilitato) di un elemento dell'interfaccia utente della barra laterale.

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

setUIModificabile - Imposta se il contenuto di un elemento dell'interfaccia utente può essere modificato.

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

setUINascosto - Imposta se un elemento dell'interfaccia utente è nascosto.

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

popUIMenu - Popolare una voce di menu a discesa con le opzioni.

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

Chiamate di progetto

Ci sono momenti in cui dovrai aggiungere risorse aggiuntive a un progetto che contiene il tuo Bric personalizzato. Le seguenti chiamate API ti consentono di aggiungere risorse di progetto aggiuntive.

progettoRisorsa – Aggiungi risorse Bric personalizzate aggiuntive a un progetto. Una volta aggiunte, queste verranno visualizzate negli allegati del progetto nelle impostazioni del progetto. I file JS, CSS, PHP e HTML sono attualmente supportati, così come le directory. I file JS allegati vengono posizionati nella directory export /js, i file CSS vengono posizionati nella directory export /css e i file PHP vengono posizionati nella directory export /includes. All'interno del codice di una pagina, le risorse CSS verranno posizionate prima del tag di chiusura head e le risorse JS verranno posizionate prima del tag di chiusura body. Tutte le risorse aggiuntive a cui fa riferimento il tuo Bric personalizzato, devono essere incluse nel tuo Brics directory delle risorse.

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

Chiamate di pagina

Ci sono momenti in cui dovrai aggiungere risorse aggiuntive a una pagina che contiene il tuo Bric personalizzato. Le seguenti chiamate API ti consentono di aggiungere risorse di pagina aggiuntive e controllare il suffisso di esportazione di una pagina.

risorsa – Aggiungi risorse Bric personalizzate aggiuntive a una pagina. Una volta aggiunte, queste verranno mostrate negli allegati della pagina nelle impostazioni della pagina. I file JS, CSS e PHP sono attualmente supportati. I file JS allegati vengono posizionati nella directory export /js, i file CSS vengono posizionati nella directory export /css e i file PHP vengono posizionati nella directory export /includes. Tutte le risorse a cui fa riferimento il tuo Bric personalizzato devono essere incluse nel tuo Bric personalizzato. Brics directory delle risorse.

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

pageSuffisso - Imposta il suffisso della pagina corrente, ad esempio HTML, PHP.

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

Chiamate modello

In alcuni casi potrebbe essere necessario includere valori definiti dall'utente all'interno di file aggiuntivi inclusi nel sito esportato. La seguente chiamata API ti consente di farlo.

storeCustomBricTemplateVal – Memorizza un valore definito dall'utente che verrà incluso in un file modello Bric personalizzato. I file modello possono essere CSS, JS, JSON e PHP e devono essere aggiunti ai contenuti Bric personalizzati in una directory denominata modelli.

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

Valori chiave:
Le storeCustomBricTemplateVal La chiamata API dovrebbe includere i seguenti valori chiave:

attra - Il valore dell'attributo viene utilizzato per identificare le aree che verranno sostituite nel file modello al momento dell'esportazione. Quando questo attributo viene utilizzato all'interno di un file modello, dovrebbe essere racchiuso in% eg% my-attr%.
APPREZZIAMO - Il valore che sostituirà l'attributo nel file modello.
modello - Il nome del file modello. Questo file dovrebbe trovarsi in una directory denominata modelli dentro il tuo Brics contenuto.
forza-nuovofile - Se due Brics con valori diversi scrive nello stesso file modello e questo è impostato su SÌ, verrà creato un altro file modello, ad es.bric-js-1.js.

Codici brevi
Vale anche la pena notare questo codici brevi può essere utilizzato anche nei file modello.

Modifiche al DOM

Custom Brics vengono manipolati al di fuori dell'ambiente di progettazione principale, questo metodo offre agli sviluppatori la completa libertà di manipolare l'abitudine Brics 'DOM' (Document Object Model) in qualsiasi modo, con qualsiasi tipo di linguaggio basato su JS. Dopo che una funzione ha apportato modifiche al file custom Brics DOM, dovrà chiamare il sync protocollo per sincronizzare le modifiche DOM al Bric personalizzato situato sul main Blocs tela di design.

sync - Dopo la manipolazione del DOM, la chiamata API di sincronizzazione sincronizzerà le modifiche al file main Blocs tela di progettazione. Non c'è pre-elaborazione o rendering durante la sincronizzazione, tutto avviene istantaneamente. È anche importante considerare che il sync creerà anche uno stato di annullamento nel documento corrente, quindi utilizza questa chiamata solo se sono state apportate modifiche, altrimenti verranno creati stati di annullamento non necessari.

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

Chiamate di feedback

Ci sono momenti in cui è importante restituire informazioni all'utente in base alle modifiche che sta apportando a un Bric personalizzato. Le seguenti chiamate offrono una varietà di modi per farlo.

notifica - Mostra una notifica in-app che non lo fa block accesso completo all'interfaccia utente. Ogni tipo di notifica dovrebbe avere il proprio valore ID poiché una volta che un ID di notifica viene ignorato dall'utente, non verrà visualizzato nuovamente se viene chiamato.

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

È anche possibile resettare una notifica utilizzando l'attributo reset, l'attributo ID può essere utilizzato per inviare un singolo ID o una serie di ID di notifica.

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

allarme - Pubblica un avviso (blocInterfaccia utente completa delle app ks fino a quando non viene chiusa).

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

avviso di richiamata - Pubblica un avviso (blocInterfaccia utente completa delle app ks fino a quando non viene chiusa) che richiede all'utente di effettuare una scelta. La scelta dell'utente verrà restituita alla funzione come valore BOOL.

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

openURL - Apri un URL nel browser web degli utenti.

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

Varie

Chiamate varie utilizzate per lo sviluppo.

mettere a punto - Pubblica un messaggio di debug che verrà visualizzato nel file finestra della console dello sviluppatore.

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