Panoramica dei widget personalizzati

Costruire i propri widget in Tulip utilizzando HTML, CSS e JavaScript

Panoramica dei widget personalizzati

Costruite le vostre funzionalità in Tulip usando HTML, CSS e JavaScript.
I widget della libreria sono disponibili qui: https://tulip.co/library/?query=Widgets

Introduzione

Gli elementi che vengono trascinati nella vostra applicazione sono chiamati "widget". Possono essere pulsanti, immagini, caselle di input e qualsiasi altra cosa disponibile nella barra degli strumenti.

I widget personalizzati consentono di scrivere il proprio codice e di creare i propri widget che possono essere trascinati nell'applicazione e con i quali si può interagire. Questa funzionalità consente agli utenti di Tulip di ampliare i confini di ciò che è possibile fare con Tulip.

In questo articolo vi daremo una rapida panoramica di come funzionano i widget personalizzati.

Nozioni di base sui widget personalizzati

La schermata di gestione dei widget personalizzati si trova nella pagina delle impostazioni dell'account. Qui è possibile creare ed eliminare i widget. L'editor dei widget personalizzati consente di scrivere il codice del widget, creare oggetti di scena ed eventi e visualizzare l'anteprima del widget. Di seguito è riportato un diagramma che descrive cosa sono gli oggetti di scena e gli eventi:

Puntelli: Gli oggetti sono dati condivisi tra i widget personalizzati e le applicazioni Tulip. Gli oggetti saranno esposti nell'editor dell'applicazione e consentiranno agli editor dell'applicazione di selezionare quali variabili, record di tabella o altre informazioni associare all'oggetto.

Eventi: Gli eventi sono segnali che il Widget può inviare all'applicazione. Gli eventi consentono all'applicazione di rispondere con un trigger e possono contenere informazioni.

I widget personalizzati sono accessibili attraverso il selettore Custom down nell'Editor delle applicazioni.

Creare un widget

:::(Attenzione) (Attenzione)
Solo gli utenti con accesso alle impostazioni dell'account (Proprietari dell'account) possono accedere all'interfaccia di modifica dei widget personalizzati.
:::

La schermata dell'editor di widget è suddivisa in quattro sezioni. Il codice scritto nella sezione in basso a sinistra apparirà nella sezione di anteprima una volta fatto clic su di essa. I valori dei prop possono essere modificati direttamente nella sezione di anteprima a scopo di test.

Funzioni speciali per interagire con oggetti di scena ed eventi.

Ottenere il valore degli oggetti di scena

//Ottenere il valore di un oggetto getValue('My Prop');
//Salvataggio del puntello in una variabile let myVariable = getValue('My Prop');

/Fare qualcosa ogni volta che il valore del prop cambia getValue('My Prop', (internalVariable) => { doSomething(internalVariable); });

Impostare il valore di un oggetto

**Impostare il valore di un oggetto** 
setValue('My Prop', *value\_to\_set*); 


/Impostare il valore di un prop di testo a 'ciao!'.
setValue('My Text Prop', 'hello!');


//impostare il valore di un elemento in un oggetto
setValue('My Object Prop', {'Key inside object': 'new value' });

Lanciare un evento

**Lanciare un evento** 
fireEvent('event', *payload*); 


/accendere un evento senza carico utile
fireEvent('My Event');


/accende un evento con carico utile
fireEvent('My Event', myVariable);

Esempio di creazione di un widget video

Importazione/esportazione di applicazioni

Esportazione

1. Nella panoramica dei widget personalizzati, selezionare i 3 punti accanto al widget che si desidera esportare.

{Altezza="" larghezza=""}

1. Selezionare "Esporta".

{Altezza="" Larghezza="800"}

Importazione

1. Dalla schermata di panoramica dei widget personalizzati, selezionare i 3 puntini in alto.

{Selezionare "Importa".}

1. Selezionare "Importa".

{Selezionare "Importa".}

1. Trovare il file .json del widget personalizzato.

Abilitare le librerie esterne

Le librerie esterne estendono ulteriormente le funzionalità dei widget personalizzati. Le librerie esterne gestiscono gran parte del lavoro sporco della scrittura html direttamente in JavaScript. Le librerie esterne devono essere abilitate per ogni widget in cui si desidera utilizzarle.

1. Nel widget, fare clic sul menu a 3 punti nella barra multifunzione.

1. Selezionare "Abilita libreria esterna".

{Selezionare "Abilita libreria esterna".}

1. Selezionare l'estensione che si desidera abilitare.

{Selezionare l'estensione che si desidera abilitare.}

Ecco una descrizione di base di ciò che ciascuna di esse fa; molte di esse eccellono in diverse aree, quindi sentitevi liberi di esplorare.

• jQuery - consente una selezione più snella degli elementi html e la manipolazione degli elementi.
• D3 - Il gold standard per la visualizzazione dei dati, con una curva di apprendimento ripida ma una grande flessibilità.
• Google Visualization - Un ottimo strumento per la visualizzazione, come dice il nome stesso.
• javaascript-Ip-solver - Ip solver è una libreria esterna che può gestire calcoli complessi per risolvere equazioni.
• Lodash - Lodash fornisce un sacco di strumenti che facilitano il lavoro con i tipi di dati javascript.
• ChartJS - La più semplice libreria di grafici possibile, con tonnellate di risorse online.
• Moment - Moment fornisce un sacco di strumenti per lavorare con date e orari.