Introduzione
Le 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 principali di un Bric personalizzato vengono creati utilizzando HTML, JS e CSS (puoi leggere di più sulla struttura dei dati e 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.
Costruttore di mattoni
Blocs viene fornito con uno strumento di sviluppo chiamato Bric Builder che è progettato per aiutare con lo sviluppo e la creazione di contenuti personalizzati Brics. È possibile accedervi tramite Sviluppatore > Bric Builder nel menu principale. Bric Builder è il modo più semplice per iniziare a creare contenuti personalizzati Brics, ti consigliamo di seguire questa guida di base per creare il tuo primo Bric personalizzato.
Costruire interfacce
L'interfaccia utente per un Bric personalizzato dovrebbe essere creata utilizzando Strumento Bric Builder. 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 Bric Builder e selezionando 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ù).
Divider - 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 Bric personalizzato, dovrai prima scrivere la tua funzionalità di modifica (basata su javascript). Queste funzioni di modifica sono pensate per l'uso all'interno di Blocs ambiente di progettazione e non vengono utilizzati quando il tuo Bric personalizzato è incluso in un progetto esportato. Queste funzioni di modifica devono essere tutte inserite in un singolo file JS caricato nell'intestazione del tuo Bric personalizzato. 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.