Przegląd niestandardowych widżetów

Tworzenie własnych widżetów w Tulip przy użyciu HTML, CSS i JavaScript

Elementy przeciągane i upuszczane do aplikacji nazywane są widżetami. Mogą to być przyciski, obrazy, pola wprowadzania i wszystko inne dostępne na pasku narzędzi.

Niestandardowe widgety umożliwiają pisanie własnego kodu i tworzenie własnych widgetów, które można następnie przeciągać i upuszczać w aplikacji i wchodzić z nimi w interakcje. Ta możliwość pozwala użytkownikom Tulip na rozszerzenie granic tego, co jest możliwe w Tulip.

Obejrzyj poniższy film przeglądowy, aby szybko zagłębić się w tę funkcję:

Sprawdź niestandardowe widżety w bibliotece Tulip!

Podstawy widżetów niestandardowych

Ekran zarządzania niestandardowymi widżetami można znaleźć na stronie ustawień konta. To tutaj można tworzyć i usuwać widżety. Edytor niestandardowych widżetów umożliwia pisanie kodu widżetu, tworzenie rekwizytów i zdarzeń oraz wyświetlanie podglądu widżetu. Poniżej znajduje się diagram opisujący, czym są rekwizyty i zdarzenia:

Rekwizyty: Rekwizyty to dane, które są współdzielone między niestandardowymi widżetami i aplikacjami Tulip. Rekwizyty będą dostępne w edytorze aplikacji i pozwolą edytorom aplikacji wybrać zmienne, rekordy tabeli lub inne informacje, które mają być powiązane z rekwizytem.

Zdarzenia: Zdarzenia to sygnały, które Widget może wysyłać do aplikacji. Zdarzenia pozwalają aplikacji reagować za pomocą wyzwalacza i mogą przenosić informacje wraz z nimi.

Niestandardowe widżety są dostępne za pośrednictwem selektora Custom w edytorze aplikacji.

Tworzenie widgetu

Ekran edytora widżetów jest podzielony na cztery sekcje. Kod napisany w lewej dolnej sekcji pojawi się w sekcji podglądu po kliknięciu w sekcję podglądu. Wartości rekwizytów mogą być zmieniane bezpośrednio w sekcji podglądu w celach testowych.

Istnieją specjalne funkcje do interakcji z rekwizytami i zdarzeniami.

Pobieranie wartości rekwizytów

//Pobieranie wartości rekwizytu getValue('Mój rekwizyt``');``//Przechowywanie rekwizytu do zmiennejlet myVariable = getValue('Mój rekwizyt');

Robienie czegoś, gdy rekwizyt się zmienia

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

Ustawianie wartości właściwości

``Ustawianiewartości właściwości setValue('My Prop', value_to_set);

/Ustawienie wartości rekwizytu tekstowego na 'hello!'setValue('My Text Prop', 'hello!');

//ustaw wartość elementu w obiekcie setValue('My Object Prop', { 'Key inside object': 'new value' }); ```

Wywołanie zdarzenia

``Wywołajzdarzenie fireEvent('event', payload);

//wywołanie zdarzenia bez payloadfireEvent('My Event');

//wypal zdarzenie z payloadfireEvent('My Event', myVariable); ```

Poniższy diagram ilustruje przepływ informacji przez niestandardowy widżet w aplikacji. Dane zmiennej wejściowej są przechowywane w rekwizycie. Zmiana wartości sygnalizuje zdarzenie, w którym wyzwalacz zapisuje dane do zmiennej wyjściowej.

Przykładowy film z budową widżetu

Importowanie/eksportowanie aplikacji

Eksport

1. W przeglądzie widżetów niestandardowych wybierz 3 kropki obok widżetu, który chcesz wyeksportować.

1. Wybierz opcję "Eksportuj".

Import

1. Na ekranie przeglądu niestandardowych widżetów wybierz 3 kropki u góry.

1. Wybierz "Importuj".

1. Znajdź plik .json niestandardowego widżetu.

Włączanie bibliotek zewnętrznych

Biblioteki zewnętrzne dodatkowo rozszerzają możliwości niestandardowych widżetów. Biblioteki zewnętrzne wykonują wiele brudnej roboty związanej z pisaniem html bezpośrednio w JavaScript. Biblioteki zewnętrzne muszą być włączone dla każdego widżetu, w którym mają być używane.

1. W widżecie kliknij menu z trzema kropkami na wstążce.

1. Wybierz "Włącz bibliotekę zewnętrzną".

1. Wybierz rozszerzenie, które chcesz włączyć.

Oto podstawowy opis działania każdego z nich, wiele z nich wyróżnia się w wielu obszarach, więc nie krępuj się odkrywać.

• jQuery - umożliwia sprawniejszy wybór elementów html, wraz z manipulacją elementami.
• D3 - złoty standard wizualizacji danych, stroma krzywa uczenia się, ale mnóstwo elastyczności.
• Google Visualization - świetne narzędzie do wizualizacji, jak sama nazwa wskazuje.
• Lodash - Lodash zapewnia mnóstwo narzędzi, które ułatwiają pracę z typami danych javascript.
• ChartJS - najprostsza możliwa biblioteka do tworzenia wykresów z mnóstwem zasobów online.
• Moment - Moment zapewnia mnóstwo narzędzi do pracy z datami i godzinami.