Egyéni widgetek áttekintése

Saját widgetek készítése a Tulipban HTML, CSS és JavaScript használatával

Azokat az elemeket, amelyeket az alkalmazásába húzva és eldobva helyez el, Widgeteknek nevezzük. Ezek lehetnek gombok, képek, beviteli mezők és bármi más, ami az eszköztárból elérhető.

Az egyéni widgetek lehetővé teszik, hogy saját kódot írjon, és saját widgeteket hozzon létre, amelyeket aztán az alkalmazásba húzva és eldobva interakcióba hozhat. Ez a képesség lehetővé teszi a Tulip felhasználók számára, hogy kitágítsák a Tulipban lehetséges lehetőségek határait.

Nézze meg az alábbi áttekintő videót, amely egy gyors, mélyreható betekintést nyújt ebbe a funkcióba:

Nézze meg az egyéni widgeteket a Tulip könyvtárban!

Egyéni widgetek alapjai

Az egyéni widgetek kezelési képernyője a fiókbeállítások oldalon található. Itt hozhat létre és törölhet widgeteket. Az egyéni widgetszerkesztő lehetővé teszi a widget kódjának megírását, kellékek és események létrehozását, valamint a widget előnézetét. Az alábbiakban egy ábra ismerteti, hogy mik azok a kellékek és események:

Kellékek: A kellékek az egyéni widgetek és a Tulip alkalmazások között megosztott adatok. A kellékek az alkalmazásszerkesztőben lesznek láthatóak, és lehetővé teszik az alkalmazásszerkesztők számára, hogy kiválasszák, hogy mely változókat, táblázatrekordokat vagy egyéb információkat társítsanak a kellékhez.

Események: Az események olyan jelek, amelyeket a Widget küldhet az alkalmazásnak. Az események lehetővé teszik, hogy az alkalmazásod egy kiváltó okkal reagáljon, és információt hordozhatnak magukkal.

Az egyéni widgetek az alkalmazásszerkesztőben az Egyéni lefelé választón keresztül érhetők el.

Widget létrehozása

A Widget-szerkesztő képernyő négy részre oszlik. A bal alsó részbe írt kód a bal alsó részbe kattintva megjelenik az előnézeti részben. A prop értékek közvetlenül az előnézeti szakaszban módosíthatók tesztelési célokra.

Vannak speciális funkciók a kellékekkel és eseményekkel való interakcióra.

A kellékek értékének lekérdezése

//Egy támasz értékének lekérdezése getValue('My Prop');``//A támasz tárolása egy változóbaelet myVariable = getValue('My Prop');

Valamit tenni, amikor egy támasz megváltozik

//Do something anytime anytime a prop value changesgetValue('My Prop', (internalVariable) => { doSomething(internalVariable);});

Egy prop értékének beállítása

```Egy prop értékének beállítása setValue('My Prop', value_to_set);

//Szöveges prop értékének beállítása 'hello!'setValue('My Text Prop', 'hello!');

//Egy objektumban lévő elem értékének beállításasetValue('My Object Prop', { 'Key inside object': 'new value' });```

Esemény tüzelése

```Egy esemény tüzelése fireEvent('event', payload);

//gyújtunk egy eseményt payload nélkülfireEvent('My Event');

//gyújtsuk meg az eseményt payloadtalfireEvent('My Event', myVariable);````

A következő ábra az információáramlást szemlélteti egy alkalmazásban egy egyéni widgeten keresztül. A bemeneti változó adatai a prop. Az értékváltozás jelez egy eseményt, ahol egy trigger ezután adatokat tárol a kimeneti változóba.

Példa widget építési videó

Alkalmazások importálása/exportálása

Exportálás

1. Az egyéni widgetek áttekintéséből válassza ki az exportálni kívánt widget mellett a 3 pontot.

1. Válassza az "Exportálás" lehetőséget.

Importálás

1. Az egyéni widgetek áttekintő képernyőjén válassza ki a 3 pontot a tetején.

1. Válassza az "Importálás" lehetőséget.

1. Keresse meg a .json egyedi widget fájlt.

Külső könyvtárak engedélyezése

A külső könyvtárak tovább bővítik az egyéni widgetek lehetőségeit. A külső könyvtárak sok olyan piszkos munkát végeznek el, amit a html írása közvetlenül JavaScriptben jelent. A külső könyvtárakat minden olyan widget esetében engedélyezni kell, ahol használni szeretné őket.

1. Miközben a Widgetben van, kattintson a szalag 3 pontos menüjére.

1. Válassza ki a "Külső könyvtár engedélyezése" lehetőséget.

1. Válassza ki az engedélyezni kívánt bővítményt.

Itt van egy alapvető leírás arról, hogy ezek mindegyike mit csinál, sokan közülük több területen is jeleskednek, úgyhogy bátran fedezd fel őket.

• jQuery - lehetővé teszi a html-elemek áramvonalasabb kiválasztását, valamint az elemek manipulálását.
• D3 - Az adatok vizualizációjának arany standardja, meredek tanulási görbe, de rengeteg rugalmasság.
• Google Visualization - Egy nagyszerű eszköz arra, amit a neve is sugall, a vizualizációra.
• Lodash - A Lodash rengeteg eszközt biztosít, amelyek megkönnyítik a javascript adattípusokkal való munkát.
• ChartJS - Körülbelül a lehető legegyszerűbb grafikus könyvtár, rengeteg online forrással.
• Moment - A Moment rengeteg eszközt biztosít a dátumokkal és időpontokkal való munkához.