- Wydrukować
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
Tylko użytkownicy z dostępem do ustawień konta (Account Owners) mogą uzyskać dostęp do interfejsu edycji widżetów niestandardowych.
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
- Z przeglądu widżetów niestandardowych wybierz 3 kropki obok widżetu, który chcesz wyeksportować.
- Wybierz "Eksportuj".
Importuj
- Na ekranie przeglądu widżetów niestandardowych wybierz 3 kropki u góry.
- Wybierz "Importuj".
- 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ć.
- Będąc w swoim widżecie, kliknij na 3-kropkowe menu na wstążce.
- Wybierz "Włącz bibliotekę zewnętrzną".
- 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.