Introduzione
I Blocs l'API per sviluppatori consente a terze parti di creare file personalizzati Brics che può essere utilizzato all'interno di Blocs ambiente di progettazione. I componenti fondamentali di una consuetudine Bric vengono creati utilizzando HTML, JS e CSS (puoi leggere di più sui dati e sulla struttura dei file qui). Esistono vari protocolli API a cui è possibile accedere tramite qualsiasi linguaggio basato su JavaScript.
Nota: il Blocs L'API per sviluppatori è attualmente nella sua fase Alpha iniziale, quindi alcune funzionalità e documentazione potrebbero cambiare.
Bric Costruttore
Blocs viene fornito con uno strumento per sviluppatori chiamato Bric Builder progettato per aiutare con lo sviluppo e la creazione di custom Brics. È possibile accedervi tramite Sviluppatore> Bric Costruttore nel menu principale. Il Bric Builder è il modo più semplice per iniziare a creare oggetti personalizzati Brics, ti consigliamo di seguire questa guida di base per creare la tua prima personalizzazione Bric.
Costruire interfacce
L'interfaccia utente per un custom Bric dovrebbe essere creato utilizzando il Bric Strumento generatore. Sotto la scheda dell'interfaccia ci sono vari campi e controlli per aggiungere e gestire l'interfaccia utente per la tua personalizzazione bric.
Aggiunta di un elemento
Per aggiungere un nuovo componente dell'interfaccia utente, fare clic su + pulsante situato in alto a destra nella struttura ad albero dei livelli dell'interfaccia utente e selezionare il tipo di componente dell'interfaccia da aggiungere.
Riordino degli articoli
Gli elementi dell'interfaccia utente possono essere riordinati trascinando e rilasciando il livello pertinente nell'albero dei livelli.
Duplicazione di oggetti
Gli elementi dell'interfaccia utente possono essere duplicati semplicemente Clic destro il livello pertinente nell'albero dei livelli e selezionando duplicare dal menu di scelta rapida.
È anche possibile duplicare l'intera personalizzazione Brics by Clic destro , il Bric nell'elenco principale sul lato sinistro del file Bric Costruttore e selezione duplicare dal menu di scelta rapida.
Componenti dell'interfaccia utente disponibili
Titolo - Un titolo è un componente di testo visivo che non chiama una funzione.
Etichetta multilinea - Un'etichetta multilinea è un componente di testo visivo che non chiama una funzione.
Campo di testo - Un campo di testo passa un valore stringa alla funzione di modifica assegnata.
Campo stepper - Un campo di testo con controllo stepper passa un valore intero alla sua funzione di modifica assegnata.
Area di testo - Un'area di testo passa un valore stringa alla funzione di modifica assegnata.
Immagine Bene - Un'immagine passa bene un percorso di file alla sua funzione di modifica assegnata.
Menu a discesa - Un menu a discesa passa l'indice intero selezionato e il valore della stringa dell'elemento alla funzione di modifica assegnata.
casella di controllo - Una casella di controllo passa un valore bool alla sua funzione di modifica assegnata.
Pulsante - Un pulsante chiama la sua funzione di modifica assegnata quando viene cliccato.
Selettore dei caratteri - Un menu a discesa che passa una selezione di font alla funzione di modifica assegnata.
Selettore di pagina - Un menu a discesa che trasmette l'ID della pagina, il nome, l'attributo e l'indice intero dell'elemento selezionato alla funzione di modifica assegnata. Gli ID di pagina vengono scambiati con gli URL di pagina effettivi durante l'esportazione, a condizione che l'ID sia memorizzato nell'attributo data dati-blocs-pagina.
Selettore ID – Un menu a discesa che passa un ID alla funzione di modifica assegnata. Questo menu viene popolato automaticamente con tutti gli ID degli elementi dal pagina corrente.
Selettore di hype - Un menu a discesa che passa il nome di un progetto hype alla sua funzione di modifica assegnata. Questo menu viene popolato automaticamente con all .iperrisorse directory aggiunte al progetto corrente.
Colore bene - Un riquadro di colore trasmette un valore esadecimale alla sua funzione di modifica assegnata.
Slider - Uno slider passa un valore intero alla sua funzione di modifica assegnata.
Controllo allineamento orizzontale - Un controllo segmentato di allineamento passa un valore intero alla sua funzione di modifica allocata (0 = Sinistra | 1 = Centro | 2 = Destra).
Controllo allineamento verticale - Un controllo segmentato di allineamento passa un valore intero alla sua funzione di modifica allocata (0 = Top | 1 = Middle | 2 = Bottom).
Controllo dell'allineamento del testo - Un controllo segmentato di allineamento passa un valore intero alla sua funzione di modifica allocata (0 = Sinistra | 1 = Centro | 2 = Destra | 3 = Giustifica).
Controllo selezione dispositivo – Un controllo segmentato del dispositivo passa un valore intero alla sua funzione di modifica allocata (1 = Desktop | 2 = Tablet | 3 = Mobile Landscape | 4 = Mobile).
Controllo selezione bordo – Un controllo segmentato di selezione del bordo passa un valore intero alla funzione di modifica allocata (0 = Sinistra | 1 = In alto | 2 = Destra | 3 = In basso).
Controllo selezione direzione – Un controllo segmentato di direzione passa un valore intero alla funzione di modifica allocata (0 = Sinistra | 1 = Su | 2 = Destra | 3 = Giù).
Divisore - Un divisore è un componente visivo che non chiama una funzione.
Attributi dei dati dei componenti dell'interfaccia utente
Ogni componente dell'interfaccia utente ha vari attributi di dati che vengono utilizzati per impostare le caratteristiche di interazione chiave come la funzione che viene chiamata quando si interagisce con un componente o la descrizione comando che viene mostrata quando l'utente sposta il cursore su un componente.
Titolo - Il titolo per l'elemento dell'interfaccia. Tipicamente visualizzato sul lato sinistro della barra laterale.
Funzione - Il nome della funzione che viene chiamato quando si interagisce con questo elemento dell'interfaccia. Includere solo il nome della funzione, non includere ().
Attributo - Il nome dell'attributo utilizzato per memorizzare il valore dei dati per questo elemento dell'interfaccia.
Valore - Il valore dei dati dell'attributo iniziale di questo elemento dell'interfaccia.
tooltip - Il testo della descrizione comando visualizzato quando il cursore si trova sopra il componente.
Funzioni di scrittura
Per manipolare l'HTML di un custom Bric, dovrai prima scrivere la tua funzionalità di modifica (basata su javascript). Queste funzioni di modifica sono destinate all'uso all'interno di Blocs ambiente di progettazione e non vengono utilizzati quando personalizzato Bric è incluso in un progetto esportato. Queste funzioni di modifica dovrebbero essere tutte collocate all'interno di un singolo file JS che viene caricato nell'intestazione del tuo custom Brics index.html file. Le funzioni di modifica sono associate a un componente dell'interfaccia utente tramite i componenti dell'interfaccia utente attributo dei dati della funzione.
Quando si interagisce con un componente dell'interfaccia utente, chiamerà la funzione di modifica designata e gli passerà un valore insieme all'attributo di destinazione a cui è assegnato il valore. Il payload dei dati per la funzione di modifica dipenderà dal tipo di componente dell'interfaccia utente utilizzato per chiamarlo. Una funzione di modifica dovrebbe essere scritta in modo che dichiari correttamente la variabile payload. Nell'esempio seguente la funzione di modifica utilizzata da una casella di controllo è impostata per ricevere prima un payload BOOL e poi il valore della stringa dell'attributo di destinazione.
Esempio:
function myCheckbox(isChecked,targetAttr)
{
if(isChecked)
{
// checkbox is checked
}
}
Debug personalizzato Brics
Blocs viene fornito con alcune utili funzionalità integrate per aiutare con il debug personalizzato Brics. Puoi trovare ulteriori informazioni su queste funzionalità di debug integrate per qui.