Szablony projektowe dla aplikacji mobilnych

W jednym z wcześniejszych wpisów pisaliśmy o wykorzystaniu szablonów projektowych oprogramowania do tworzenia aplikacji mobilnych, aby ułatwić ponowne wykorzystanie elementów projektowych i umożliwić tworzenie wydajnych i elastycznych rozwiązań, dostosowanych do różnych wymagań aplikacji. Opisaliśmy przykład szablonu kontrolki, który został zaprojektowany do prezentowania wielu poziomów danych hierarchicznych, w zależności od wyboru użytkownika w czasie działania programu.

Naszym przykładem jest aplikacja stworzona przy użyciu MobileTogether, narzędzia RMAD (Rapid Mobile App Development) firmy Altova, które ma ułatwić pracę programistom tworzenie aplikacji działających na różnych platformach które zapewniają dynamiczne i zaawansowane działanie aplikacji, co przekłada się na zadowolenie użytkowników.

Można również tworzyć szablony kontroli dla aplikacji mobilnych działających na różnych platformach, łącząc wiele elementów sterujących w jedną, większą całość, podobnie jak złożony podzespół zbudowany z pojedynczych części. Dzięki temu powstają szablony projektowe dla aplikacji mobilnych, które można łatwo wstawiać w dowolnym miejscu, co przyspiesza proces tworzenia i zapewnia spójność.

MobileTogether Designer, narzędzie firmy Altova do tworzenia aplikacji mobilnych działających na różnych platformach, które łączy wizualne narzędzia do układu interfejsu użytkownika z technikami programowania funkcyjnego, zawiera przykładowe aplikacje ilustrujące różne możliwości. Aplikacja CompanySales pobiera dane z bazy zamówień, aby generować raport sprzedaży w czasie rzeczywistym, przeznaczony dla kadry zarządzającej fikcyjnej firmy. Raport zawiera informacje o ogólnej sprzedaży, a także sprzedaży według produktu, regionu lub poszczególnych przedstawicieli handlowych. Użytkownik może wybrać zakres dat raportu oraz porównać go z poprzednimi okresami.

Poniżej znajdują się obrazy strony podsumowującej, prezentującej dane o sprzedaży w czasie rzeczywistym z dnia 15 lutego, oraz strony "Sprzedaż według produktu", która przedstawia szczegółowe dane o sprzedaży poszczególnych produktów w tym dniu.

Każda strona w aplikacji zawiera funkcje wyboru daty, dzięki czemu użytkownicy mogą przejrzeć historyczne dane sprzedażowe, wybierając dowolną datę z przeszłości.

W głównym oknie układu projektowania można zauważyć, że funkcje wyboru daty zostały zaimplementowane poprzez połączenie trzech przycisków oraz jednego elementu do wyboru daty

Element interfejsu użytkownika do wyboru daty wyświetla datę raportu i umożliwia użytkownikowi wybranie dowolnej daty z przeszłości. Przyciski strzałek po lewej i prawej stronie pozwalają przejść do dnia poprzedniego lub następnego, a naciśnięcie przycisku "Dzisiaj" wybiera aktualną datę.

Kiedy raport jest ustawiony na bieżącą datę, przyciski "Dzisiaj" i strzałka w prawo są wyłączone.

Szablony projektowania interfejsu użytkownika dla aplikacji mobilnych

Najpierw należy dodać szablon kontroli w oknie pomocniczym "Strony", zanim zostaną utworzone kontrolki wyświetlone powyżej. Nowe strony i szablony kontroli można dodać, klikając zielony przycisk "+" znajdujący się w lewym górnym rogu

Alternatywnie, można utworzyć szablon kontrolki, wybierając istniejące kontrolki na dowolnej stronie i korzystając z menu kontekstowego, które pojawia się po kliknięciu prawym przyciskiem myszy

W rozbudowanym kalendarzu dat, działania wykonywane przez przycisk "Dzisiaj", przyciski strzałek oraz kontrolka wyboru dat są również zdefiniowane w szablonie kontrolki. Poniżej przedstawiono działania przypisane do przycisku "Dzisiaj" oraz lewego przycisku strzałki:

Nie chcemy, aby przycisk "Dzisiaj" był aktywny, gdy wybrana data to data bieżąca, a także nie chcemy, aby użytkownik mógł przesuwać się w przyszłość. Możemy zdefiniować, kiedy te przyciski są aktywne, w oknie pomocniczym "Style i właściwości". Poniżej znajduje się fragment ustawień dla przycisku "Dzisiaj":

Przycisk "Dzisiaj" jest wyłączony, gdy wybrana data raportu jest ustawiona na bieżącą datę. Dodatkowo, zdefiniowaliśmy różne kolory, aby wskazać, czy przycisk jest aktywny (można go kliknąć) czy nie.

Definicje kolorów są opcjonalne. Jednym z wymagań aplikacji CompanySales było wyświetlanie tych samych kolorów na wszystkich urządzeniach, aby naśladować spójność wizerunku korporacyjnego. Jeśli pozostawicie pola definicji kolorów puste, MobileTogether automatycznie użyje domyślnych kolorów dla każdej platformy: Android, iOS, Windows 10, itp.

Dodawanie szablonu kontroli do strony

Szablon zaawansowanego kontrolera wyboru daty jest używany na stronie raportu sprzedaży dla kadry zarządzającej oraz na trzech z czterech podstron aplikacji. Po prostu przeciągnęliśmy ten zaawansowany kontroler wyboru daty z okna pomocniczego "Strony" na każdą stronę, gdzie był potrzebny. To oszczędza kilka kroków, ponieważ szablon jest automatycznie tworzony w kontrolerze zastępczym, jak widać tutaj:

Modyfikacja działania szablonów projektowych dla aplikacji mobilnych

Mamy jeszcze jeden aspekt do rozważenia. Kiedy użytkownik wybiera nową datę raportu, chcemy, aby aplikacja automatycznie przeszukiwała bazę danych sprzedaży, aby wyświetlać unikalne raporty i wykresy dla każdej strony. Dotychczas zdefiniowane funkcje w rozbudowanym selektorze dat służą jedynie do wyboru daty.

Mamy trzy możliwości dalszej obróbki dowolnego szablonu kontroli: zastosować wyłącznie akcje zdefiniowane w samym szablonie kontroli, zastąpić akcje z szablonu kontroli wszystkimi nowymi akcjami zdefiniowanymi w miejscu zastępczym (placeholder), lub połączyć akcje szablonu kontroli z dodatkowymi akcjami zdefiniowanymi w miejscu zastępczym.

Nasza aplikacja "Sales" wykorzystuje trzecią opcję. Ulepszony wybór dat umożliwia użytkownikowi wybranie daty. Dodatkowo, elementy pomocnicze (placeholder) na każdej stronie dodają unikalne funkcje, które pozwalają na wykonywanie zapytań do bazy danych i aktualizowanie wykresów, co jest odpowiednie dla danej strony.

Dodaliśmy możliwość nadpisywania ustawień wydarzeń do elementu sterującego szablonem na każdej stronie, korzystając z menu kontekstowego, które pojawia się po kliknięciu prawym przyciskiem myszy

Otwiera to okno dialogowe "Akcje". Poniżej znajduje się zestaw akcji dostępnych na stronie "Sprzedaż według produktu".

Pierwsza akcja to specjalna, wbudowana grupa akcji o nazwie "Wywołanie zdarzenia szablonu". Dodanie "Wywołania zdarzenia szablonu" oznacza, że wszystkie akcje zdefiniowane w szablonie kontrolki "Rozszerzony wybór daty" są wykonywane jako pierwsze, a następnie wykonywane są dodatkowe akcje zdefiniowane w miejscu zastępczym (placeholder).

Ostatnia grupa akcji na powyższym obrazku została rozszerzona, aby wyświetlić akcje "Odśwież", które aktualizują raport sprzedaży według produktu. Dwie pierwsze akcje "Odśwież" wykonują zapytania do bazy danych, a dwie ostatnie akcje "Odśwież" rysują wykresy na podstawie wyników tych zapytań.

Wypróbuj to sam

Można bezpłatnie pobrać program MobileTogether Designer i otworzyć przykładową aplikację CompanySales, aby dokładniej zapoznać się z szablonami projektowania aplikacji mobilnych w tym narzędziu demonstracyjnym do raportowania sprzedaży. Alternatywnie, można pobrać aplikację mobilną i uruchomić aplikację CompanySales na własnym urządzeniu mobilnym. Obsługa szablonów projektowania w aplikacjach mobilnych to tylko jedna z wielu funkcji programu MobileTogether, która umożliwia programistom tworzenie zaawansowanych, natywnych aplikacji przy użyciu podejścia o niskim poziomie kodowania, które jest szybkie i łatwe.