Telerik Demos – Przeglądarka wszystkich kontrolek i implementacja

Telerik Demos, czyli demonstracyjne wersje aplikacji z zaimplementowanymi kontrolkami. Ten wpis kończy już krótki rozdział, w którym prezentuje możliwości tego producenta. Podczas instalacji domyślnie zaznaczone są wersje demonstracyjne. Jeśli ich nie odznaczyłeś to po zakończeniu pracy kreatora na pulpicie powinny pojawić się poniższe ikony.

Telerik Demos - Skróty do poszczególnych aplikacji demonstracyjnych

Telerik, podobnie zresztą jak inni, oferuje możliwość przejrzenia swoich zestawów w praktycznych projektach wraz z podglądem kodu. Dzięki temu zobaczysz jak prezentują się w określonych sytuacjach, jak działają animacje czy dobierzesz odpowiedni wygląd. Każda taka aplikacja posiada utworzony i zapisany na dysku rozwiązanie, które można otworzyć w Visual Studio. Zobaczysz w ten sposób jak wygląda kod, czyli implementacja danej kontrolki i na tej podstawie będziesz mógł stworzyć ją u siebie. Pokażę Ci teraz jak to wygląda w praktyce. Zacznę od WinForms, a później przejdę do innych technologii.

Telerik Demos – Demonstracyjna wersja projektu WinForms

Kliknij w odpowiednią ikonę – Demos Telerik UI for WinForms R2 2021 SP1, aby wywołać aplikację. Pełni ona rolę prezentera wszystkich kontrolek, które dostępne są w tej technologii. Dla przykładu wybiorę TextBox.

Strona startowa aplikacji demonstracyjnej dla WinForms

Obszar po środku natychmiast wypełni się kontrolkami z polem tekstowym. Od razu prezentowane są odpowiednie warianty jakie można skonfigurować. Po prawej w czasie rzeczywistym można ustawić dla nich kolorystykę. Do pól tekstowych mogę wprowadzać tekst i sprawdzić ich zachowanie.

Przykład pola tekstowego wykonanego w Telerik

W prawym górnym rogu z kolei mogę podejrzeć kod. Oczywiście w przypadku WinForms zobaczymy tylko oprogramowane zdarzenia. Odpowiednie przyciski na górze wskażą Ci, gdzie znajduje się ten projekt lub pozwoli na skopiowanie kodu.

Kod źródłowy TextBox w Telerik

Dla przykładu wybrałem jeszcze GridView, czyli siatkę danych w ciemnym motywie. Podobnie jak polem tekstowym tutaj również można dowolnie wprowadzać dane i sprawdzać zachowanie.

Siatka danych w Telerik

Jak widać narzędzie nie jest skomplikowane, a dużo pomaga. Szczególnie wtedy kiedy masz pierwszy raz do czynienia z kontrolkami Telerik. Teraz pokażę przykład dla technologii WPF.

Demo dla Windows Presentation Foundation

Technologia WPF ma trochę więcej do zaoferowania niż WinForms. Pokażę Ci teraz jakie nietypowe interfejsy aplikacji można utworzyć. Uruchom projekt demonstracyjny dla WPF, a następnie wybierz po lewej stronie Diagrams.

Kontrolka wyświetlająca diagram

Pierwszy wariant kontrolki, która pozwala stworzyć diagram przepływu (Flow Chart). Po prawej są dostępne również inne jak Cycle Diagram, Decision Flowchart, Beizer Diagram, Linear Process Diagram czy Floor plan. Wszystko to znajdzie po prawej stronie.

Kod źródłowy kontrolki diagramu wykonany w Telerik

Kod takiego diagramu nie jest skomplikowany. Przynajmniej na początku, ale zwróć uwagę, że składa się on z kilku plików, które również znajdziesz po prawej stronie. Klikając w nie podejrzysz kod każdego z nich. Teraz dla przykładu wybiorę widok wykresów (Chart View).

Kontrolki wykresów Telerik

Tutaj już pojawia się kilka kontrolek na jednej planszy. Głównie dlatego, aby zaprezentować ideę panelów kontrolnych, do których Telerik jest używany. Tak, analityka danych to główny powód dla której jest wybierany.

Przeglądanie webowych kontrolek

Na koniec jeszcze przegląd tradycyjnych kontrolek internetowych tworzone z myślą o obsłudze platformy ASP.NET. Tym razem jednak mamy tutaj dwa sposoby na ich przeglądanie. Albo na stronie producenta, albo uruchamiając własny lokalny serwer na IIS Express. Ikona wywołująca tą dokumentację domyślnie uruchamia drugi sposób. Dzięki temu wszystko można przeglądać offline.

Strona główna dokumentacji kontrolek webowych

Jest wbudowana wyszukiwarka, a poniżej lista wszystkich kontrolek jakie oferuje Telerik. Kliknięcie w którąś z nich doprowadzi Cię do jej prezentacji i szczegółowej implementacji.

Lista dostępnych kontrolek webowych Telerik

Dla przykładu wybrałem Gauge z kategorii Data Visualization. Jest to rozbudowany graficznie licznik prezentujący jakąś wartość lub wartości. W tym przypadku ciśnienie, temperaturę i procent wilgotności powietrza. Wkomponowany w odpowiedni styl wizualny.

Prezentacja kontrolki Gauge

A tutaj pole tekstowe. Użyte na przykładzie formularza kontaktowego. Strona prezentująca posiada odpowiednią strukturę, gdzie w pierwszej kolejności jest wyświetlana kontrolka, a poniżej jej opis wraz z przykładowym kodem. Tego typu dokumentację również znajdziesz na stronie producenta.

Prezentacja kontrolki webowej TextBox

Po lewej stronie są dodatkowe szczegóły związane między innymi z implementacją po stronie klienta lub serwera. Stylizowanie oraz funkcjonalności. Przełączając je kontrolka będzie renderowana zgodnie z tematem jaki wybierzesz.

Dokumentacja Client-side API

Dokumentacja zarówno kontrolek desktopowych jak i internetowych jest bardzo bogata w przydatne informacje czyniąc Telerika łatwiejszym w obsłudze. Tymi słowami kończę cykl wpisów omawiających ten zestaw. Mam nadzieję, że chociaż w mniejszym stopniu przybliżyłem Ci jak w praktyce działają i czy warto brać je pod uwagę.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *