Przegląd widżetów niestandardowych

Zbuduj własne widżety w Tulipie za pomocą HTML, CSS i JavaScript

Przegląd widżetów niestandardowych

Zbuduj własne funkcje w Tulipie używając HTML, CSS i JavaScript.
Widżety biblioteczne dostępne tutaj: https://tulip.co/library/?query=Widgets

Wprowadzenie

Elementy, które przeciągasz i upuszczasz do swojej aplikacji nazywane są "Widżetami". Mogą to być przyciski, obrazki, pola wejściowe i wszystko inne dostępne z paska narzędzi.

Widżety niestandardowe pozwalają na pisanie własnego kodu i tworzenie własnych widżetów, które można następnie przeciągnąć i upuścić na swoją aplikację i wejść z nimi w interakcję. Ta możliwość pozwala użytkownikom Tulipa rozciągnąć granice tego, co jest możliwe w Tulipie.

W tym artykule, damy Ci szybki przegląd tego, jak działają niestandardowe widżety.

Podstawy Widżetów Własnych

Ekran zarządzania widgetami znajduje się na stronie ustawień konta. To tutaj możesz tworzyć i usuwać widżety. Edytor niestandardowych widgetów pozwala na napisanie kodu widgetu, stworzenie rekwizytów i zdarzeń oraz podgląd widgetu. Poniżej znajduje się diagram opisujący, czym są rekwizyty i zdarzenia:

Props: Props to dane, które są współdzielone pomiędzy niestandardowymi widgetami i aplikacjami Tulip. Rekwizyty będą widoczne w edytorze aplikacji i pozwolą redaktorom aplikacji wybrać zmienne, rekordy tabeli lub inne informacje, które mają być powiązane z rekwizytem.

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

Widżety niestandardowe są dostępne poprzez selektor Custom down w App Editor.

Tworzenie widgetu

Ekran edytora widgetów jest podzielony na cztery sekcje. Kod, który napiszesz w lewej dolnej sekcji, pojawi się w sekcji podglądu po kliknięciu w sekcję podglądu. Wartości prop można zmieniać bezpośrednio w sekcji podglądu w celach testowych.

Specjalne funkcje do interakcji z Rekwizytami i Wydarzeniami.

Uzyskiwanie wartości rekwizytów

//Uzyskanie wartości rekwizytu getValue('Mój Rekwizyt');
//Przechowujemy rekwizyt do zmiennej let myVariable = getValue('Mój Rekwizyt');

/Zrób coś za każdym razem, gdy wartość rekwizytu się zmieni getValue('Mój Prop', (internalVariable) => { doSomething(internalVariable); });

Ustawianie wartości rekwizytu

**Ustawianie** wartości rekwizytu 
setValue('Mój Prop', *wartość\_do\_set*); 


/Ustawienie wartości rekwizytu tekstowego na 'hello!'
setValue('Mój Prop tekstowy', 'hello!');


//ustawienie wartości elementu w obiekcie
setValue('My Object Prop', { 'Klucz wewnątrz obiektu': 'nowa wartość' });

Odpalenie zdarzenia

Odpalamy**zdarzenie** 
fireEvent('event', *payload*); 


//wypal zdarzenie bez ładunku
fireEvent('Moje zdarzenie');


//wypal zdarzenie z ładunkiem
fireEvent('Moje zdarzenie', myVariable);

Przykładowy widget build video

Importowanie/eksportowanie aplikacji

Eksport

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

1. Wybierz "Eksportuj".

Importuj

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

1. Wybierz "Importuj".

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

Włączanie bibliotek zewnętrznych

Biblioteki zewnętrzne jeszcze bardziej rozszerzają możliwości widżetów niestandardowych. 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 chcesz ich używać.

1. Będąc w swoim widżecie, kliknij na 3-kropkowe menu na wstążce.

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

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

Oto podstawowy opis tego, co robi każdy z nich, wiele z nich wyróżnia się w wielu obszarach, więc nie krępuj się zbadać.

• jQuery - umożliwia bardziej usprawniony wybór elementów html, wraz z manipulacją elementów.
• D3 - Złoty standard wizualizacji danych, stroma krzywa uczenia się, ale tony elastyczności.
• Google Visualization - Świetne narzędzie do robienia jak sama nazwa wskazuje, wizualizacji.
• javaascript-Ip-solver - Ip solver jest zewnętrzną biblioteką, która może obsługiwać złożone obliczenia w celu rozwiązania równań.
• Lodash - Lodash dostarcza tony narzędzi, które ułatwiają pracę z datatypami javascript.
• ChartJS - Najprostsza możliwa biblioteka do tworzenia wykresów z mnóstwem zasobów online.
• Moment - M oment dostarcza mnóstwo narzędzi do pracy z datami i czasami.