--- title: "Stwórz mobilny panel kontrolny, który zrobi wrażenie na każdym dyrektorze" date: "2017-03-16" categories: - "development" - "mobile" - "software" tags: - "mobile-dashboards" - "mobile-development" - "mobiletogether" description: Oto instrukcja, jak stworzyć estetyczny i funkcjonalny panel mobilny w programie Altova MobileTogether. --- Status: #blog Tags: #mobile-dashboards #mobile-development #mobiletogether Categories: [mobile-development](/blog/pl/category/mobile-development.md) | [low-code+no-code](/blog/pl/category/low-codeno-code.md) # Stwórz mobilny panel kontrolny, który zrobi wrażenie na każdym dyrektorze W wcześniejszym wpisie na temat [Tworzenie eleganckich aplikacji mobilnych](https://www.altova.com/blog/build-an-elegant-mobile-app-that-delights-end-users/), Zaprezentowaliśmy przykłady prostej aplikacji oraz kompletnego panelu mobilnego, działającego na różnych urządzeniach mobilnych. Twórcy aplikacji mobilnych mogą również zadowolić użytkowników, dając im możliwość personalizacji doświadczenia korzystania z aplikacji. MobileTogether umożliwia programistom dostosowywanie aplikacji działających na różnych platformach do specyfiki każdej z nich **i** Umożliwiamy użytkownikom dostosowanie rozmiaru tekstu za pomocą prostego i intuicyjnego interfejsu. Umożliwienie każdemu użytkownikowi ustawienia preferowanego rozmiaru tekstu, dostosowanego do warunków oglądania i urządzenia, jest zarówno wyrazem szacunku dla użytkowników, jak i odciąża programistów od zadania ustalania odpowiedniego rozmiaru tekstu, który będzie poprawnie wyświetlany na wszystkich urządzeniach. ![](/blog/images/MT_text_size1.jpg) ### Pozwól użytkownikom wybrać rozmiar tekstu Można użyć albo dwóch oddzielnych przycisków, albo suwaka, aby umożliwić użytkownikom ustawienie rozmiaru tekstu wyświetlanego w aplikacji mobilnej. ### Dwa przyciski do zmiany rozmiaru tekstu Aplikacja do raportowania sprzedaży firmowej, o której wspomnieliśmy we wcześniejszym wpisie, wykorzystuje technikę z dwoma przyciskami. ![Aplikacja MobileTogether Sales Report – wersja na Androida](/blog/images/Android-Landscape.png) Dolny rząd elementów sterujących zawiera dwa przyciski do zmiany rozmiaru tekstu, opatrzonych intuicyjnymi etykietami: ![Przyciski zmiany rozmiaru czcionki w aplikacji MobileTogether](/blog/images/Android-Bottom-Row.png) Te przyciski zwiększają lub zmniejszają wartość elementu danych o nazwie "textSize", w zakresie od 10 do 50. Oto akcja, która jest przypisana do przycisku zmniejszania: ![MobileTogether: Akcja zwiększająca rozmiar tekstu](/blog/images/decrease-text-size.png) A teraz akcja związana z przyciskiem zwiększania: ![MobileTogether: Akcja zwiększająca rozmiar tekstu](/blog/images/increase-text-size.png) Element `textSize` jest używany w prostej funkcji użytkownika w systemie MobileTogether do tworzenia poprawnego ciągu znaków, który zostanie przypisany do rozmiaru tekstu: ![Definicja funkcji użytkownika w MobileTogether, umożliwiającej zmianę rozmiaru tekstu](/blog/images/set-text-size-function.png) Na koniec, rozmiar tekstu dla każdego elementu tekstowego w aplikacji jest ustawiany za pomocą wyrażenia XPath, a nie za pomocą rozwijanej listy rozmiarów w oknie właściwości ![Właściwości elementu tekstowego, które można dostosować w trybie mobilnym](/blog/images/text-size-property.png) Ponieważ element `textSize` jest zdefiniowany w strukturze danych przechowywanych trwale, wybór rozmiaru tekstu dokonany przez użytkownika jest zapamiętywany i przywracany przy kolejnym uruchomieniu aplikacji na tym urządzeniu. Ta metoda z dwoma przyciskami sprawdza się dobrze w przypadku aplikacji z niewielką liczbą głównych stron, takich jak raport sprzedaży firmy, ponieważ użytkownik od razu widzi wynik i może dostosować rozmiar do swoich preferencji. Poniżej znajdują się przykłady raportu sprzedaży firmy z tekstem o małej i dużej wielkości: ![Aplikacja MobileTogether z małą czcionką](/blog/images/small-text-sample.png) ![Aplikacja MobileTogether z dużą czcionką](/blog/images/large-text-sample.png) Należy zauważyć, że nagłówek jest większy niż główna treść. Jest to osiągnięte dzięki dodatkowej funkcji dla użytkownika, która dotyczy tekstu nagłówków i ustala relację między wielkością tekstu nagłówka i głównej treści: ![Funkcja MobileTogether umożliwiająca ustawienie rozmiaru tekstu nagłówka](/blog/images/headline-text-function.png) ### Przesuwnik rozmiaru tekstu Kolejnym sposobem umożliwienia użytkownikowi kontrolowania rozmiaru tekstu jest użycie suwaka. Programiści nadal będą chcieli utworzyć element danych, który będzie przechowywał informacje o rozmiarze tekstu, stworzyć funkcje umożliwiające użytkownikowi ustawiania rozmiaru tekstu oraz przypisać właściwość rozmiaru tekstu jako wyrażenie XPath, zgodnie z opisem powyżej. Czasami na ekranie po prostu nie ma wystarczająco dużo miejsca, aby umieścić dwa przyciski do zmiany rozmiaru tekstu. W takim przypadku można użyć jednego przycisku, który otworzy suwak umożliwiający regulację. Aplikacja mobilna "Panel sprzedaży" (widoczna poniżej) prezentuje dane sprzedażowe dla dowolnego dnia w różnych formach graficznych. Wiersz elementów sterujących na górze oferuje różne opcje szybkiego wyboru dat, jednak pozostaje tylko miejsce na jeden dodatkowy przycisk do zmiany rozmiaru tekstu. ![Aplikacja mobilna MobileTogether – wersja na system Android](/blog/images/Dashboard-app-Android.png) W tej aplikacji, przycisk A± otwiera podstronę zawierającą suwak, który pozwala użytkownikom dostosować wartość elementu "textSize": ![Suwak do zmiany rozmiaru tekstu w aplikacji mobilnej do wyświetlania danych](/blog/images/resize-slider.png) Przykładowy tekst wyświetlany w górnym wierszu jest dynamicznie zmieniany pod względem rozmiaru, w miarę jak użytkownik przesuwa suwak. Po kliknięciu przycisku "wstecz", główna strona jest ponownie wyświetlana, a elementy tekstowe mają zmieniony rozmiar. Podobnie jak w przypadku metody z dwoma przyciskami, wartość elementu "textSize" jest przechowywana jako dane trwałe, a wybór użytkownika zostanie przywrócony przy kolejnym uruchomieniu aplikacji. Niektóre aplikacje będą zawierać elementy, które warto zapisać jako ustawienia użytkownika, takie jak jednostki miary (cale vs. centymetry), waluty (dolar vs. euro) lub domyślny adres lub nazwa pliku obrazu. W takim przypadku, programiści mogą stworzyć jedną stronę z ustawieniami, która pozwoli użytkownikowi zobaczyć i modyfikować wszystkie trwałe ustawienia w jednym miejscu. MobileTogether Designer to bezpłatne narzędzie, które umożliwia szybkie wdrożenie zaawansowanych funkcji dla aplikacji działających na różnych platformach, takich jak Android, iOS, Windows 8, Windows 10, Windows Phone 8 oraz w przeglądarce internetowej (HTML-5). [Pobierz kopię](https://www.altova.com/pl/download/mobiletogether.html) i zacznij pracę już dziś!