Chiamate API

Introduzione

I 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 un'usanza BricLe funzioni Javascript, 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 un'usanza Bric è selezionato, la barra laterale popolerà automaticamente i valori dell'interfaccia utente in base al file personalizzato Brics valori correnti. Quando si interagisce con un elemento dell'interfaccia utente della barra laterale, lo stato di tale elemento verrà aggiornato automaticamente, tuttavia, le seguenti chiamate API consentono di manipolare altri elementi dell'interfaccia utente e i relativi valori per quella personalizzata Bric. Ad esempio, selezionare una casella di controllo potrebbe comportare l'aggiunta di un'altra voce di menu a un menu a discesa, deselezionarla potrebbe rimuovere 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 ulteriori risorse a un progetto che contiene la tua personalizzazione Bric. Le seguenti chiamate API consentono di aggiungere ulteriori risorse di progetto.

progettoRisorsa - Aggiungi ulteriore personalizzazione Bric risorse per un progetto. Una volta aggiunti, questi verranno visualizzati negli allegati del progetto nelle impostazioni del progetto. Attualmente sono supportati file JS, CSS, PHP e HTML, così come le directory. I file JS allegati vengono inseriti nella directory export / js, i file CSS vengono inseriti nella directory export / css e i file PHP vengono inseriti nella directory export / includes. All'interno di un codice di pagine le risorse CSS verranno posizionate prima del tag head di chiusura e le risorse JS verranno posizionate prima del tag body di chiusura. Tutte le risorse aggiuntive a cui fa riferimento la tua abitudine Bric, dovrebbe essere incluso nella tua abitudine Brics directory delle risorse.

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

Nota per principianti

I progettoRisorsa La chiamata api deve essere utilizzata solo per aggiungere file aggiuntivi a un progetto. Tutto tuo Brics codice essenziale (necessario per creare il file Bric funzione dopo l'esportazione), dovrebbe essere inserito nel file Brics include directory.

Chiamate di pagina

Ci sono momenti in cui dovrai aggiungere ulteriori risorse a una pagina che contiene la tua personalizzazione Bric. Le seguenti chiamate API consentono di aggiungere ulteriori risorse di pagina e controllare un suffisso di esportazione delle pagine.

risorsa - Aggiungi ulteriore personalizzazione Bric risorse a una pagina. Una volta aggiunti, questi verranno visualizzati negli allegati della pagina nelle impostazioni della pagina. I file JS, CSS e PHP sono attualmente supportati. I file JS allegati vengono inseriti nella directory export / js, i file CSS vengono inseriti nella directory export / css e i file PHP vengono inseriti nella directory export / includes. Tutte le risorse a cui fa riferimento la tua abitudine Bric, dovrebbe essere incluso nella tua abitudine 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.

negozioCustomBricTemplateVal - Memorizza un valore definito dall'utente che verrà incluso all'interno di una personalizzazione Bric file modello. I file modello possono essere CSS, JS, JSON e PHP e devono essere aggiunti al file personalizzato Bric contenuto 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:
I negozioCustomBricTemplateVal 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 del DOM al custom Bric situato sulla principale 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.

Suggerimento per principianti

Il protocollo di sincronizzazione viene in genere utilizzato dopo che un utente ha interagito con un file personalizzato Bric causando una modifica nell'HTML. Evitare di utilizzare questa chiamata nel file init(bricVersion,framework) funzione a meno che non si stia eseguendo un'attività specifica come l'aggiornamento dell'HTML di un file personalizzato Bric per supportare una funzionalità appena introdotta.

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

Chiamate di feedback

Ci sono momenti in cui è importante fornire informazioni all'utente in base alle modifiche che stanno apportando a un'abitudine Bric. Le chiamate seguenti offrono diversi 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!');

Aggiornato il 16 novembre 2023

questo articolo è stato utile?

Articoli Correlati