Informacja zwrotna wizualna w aplikacjach mobilnych

W aplikacjach mobilnych, wizualne elementy interakcji zapewniają przyjemniejsze doświadczenie użytkownika, a aplikacje, z których korzystanie sprawia przyjemność, są częściej udostępniane niż aplikacje statyczne i nudne. MobileTogether szybkie tworzenie aplikacji mobilnych Framework RMAD firmy Altova łączy w sobie wszystkie narzędzia potrzebne do tworzenia aplikacji mobilnych działających na różnych platformach, oferując jednocześnie atrakcyjne funkcje wizualne.

Paleta elementów sterujących, którą można przeciągać i upuszczać w programie MobileTogether Designer, zawiera przycisk, który automatycznie zmienia swój wygląd po kliknięciu. Można również zdefiniować warunki, które dodają lub zmieniają tekst, obrazy lub inne elementy dowolnego przycisku podczas działania aplikacji.

Dodatkowo, można zdefiniować wiele innych elementów sterujących, które będą działać jak przyciski, wykonując jedną lub więcej akcji po kliknięciu. Wcześniej pisaliśmy o wykorzystywaniu ikon jako przycisków narzędzi w aplikacjach mobilnych, aby stworzyć stylowe i eleganckie menu narzędzi. W tym artykule dodamy interaktywność do naszych obrazów narzędzi, aby zapewnić atrakcyjne wizualne powiadomienia o każdym kliknięciu.

Poniższy zrzut ekranu przedstawia stronę z aplikacji "Where Am I", którą stworzyliśmy, aby zademonstrować wykorzystanie obrazów jako przycisków.

Każdy niebieski przycisk w dolnej części ekranu to narzędzie, które ma na celu dostarczenie dodatkowych informacji o danym miejscu, albo poprzez pobranie danych za pomocą interfejsu API, albo poprzez otwarcie zewnętrznej strony internetowej. Krótkie kliknięcie przycisku wykonuje przypisaną mu funkcję, natomiast długie kliknięcie otwiera okno z informacją o danym przycisku

Przycisk pogody, znajdujący się w lewym dolnym rogu zrzutu ekranu, jest podświetlony, co wskazuje, że został kliknięty. Po krótkim kliknięciu, obraz jest na krótko podświetlany, zanim zostanie wykonana odpowiednia operacja.

Po krótkim kliknięciu przycisku pogodowego, generowane jest żądanie do API OpenWeather, a następnie otwiera się podstrona wyświetlająca dane pogodowe w formie wykresów i tekstów

Definiowanie wizualnych informacji zwrotnych w aplikacjach mobilnych

Informacja wizualna o kliknięciu przez użytkownika na dowolnym obrazku jest realizowana poprzez krótkotrwałą zmianę koloru tła za przyciskiem z obrazkiem. Obrazy w naszej aplikacji są ułożone w tabelach, jak widać na tym fragmencie interfejsu programu MobileTogether Designer:

Każda komórka tabeli posiada zestaw właściwości, które można definiować indywidualnie, w tym kolor tła komórki. Każdy obraz również ma unikalną definicję akcji, które są wykonywane po kliknięciu obrazu.

Możemy zapisać numer indeksu w elemencie o nazwie "userButton" w momencie kliknięcia obrazu prognozy pogody. Następnie możemy zmieniać kolor tła komórki w zależności od zawartości elementu "userButton", zgodnie z wyrażeniem XQuery zdefiniowanym w właściwości "Kolor tła".

Oto lista dostępnych funkcji narzędzia do prognozowania pogody:

Najpierw aktualizowana jest wartość elementu o nazwie "userButton".

Następnie wykonywane są działania, które faktycznie zmieniają wygląd obrazu. Ponieważ te działania będą potrzebne za każdym razem, gdy zostanie kliknięty jakikolwiek obraz, są one przechowywane w dedykowanej grupie akcji o nazwie "Button Flash".

MobileTogether automatycznie wykonuje akcję "Aktualizuj wyświetlacz" raz, na końcu każdej sekwencji akcji. Aby zapewnić wizualne powiadomienie, chcemy wykonać akcję "Aktualizuj wyświetlacz" na początku sekwencji, aby zmienić kolor tła, na chwilę wstrzymać działanie, zresetować wartość przycisku użytkownika, a następnie ponownie wykonać akcję "Aktualizuj wyświetlacz", aby usunąć kolor tła.

Funkcja sleep() w XQuery ustawia czas przerwy w milisekundach. Po mignięciu przycisku, wykonanie kontynuuje się z grupą akcji "Pobierz prognozę pogody". Ta grupa akcji generuje zapytanie do API prognoz pogody, aby uzyskać prognozę na 5 dni dla dowolnej szerokości i długości geograficznej, a następnie otwiera podstronę z prognozą pogody, jak pokazano powyżej.

Chcemy również uzyskać wizualne potwierdzenie po długim naciśnięciu dowolnego obrazu. Dzięki MobileTogether możemy zdefiniować różne akcje dla długiego naciśnięcia, jak widać tutaj:

Wynik długiego naciśnięcia jest pokazany na drugim zrzucie ekranu powyżej, gdzie okno z wiadomością opisuje funkcję przycisku "Pobierz prognozę pogody".

Dla długiego kliknięcia potrzebujemy tylko jednej funkcji "Aktualizuj wyświetlacz", aby zmienić kolor tła, a nie potrzebujemy funkcji "pauza" do celów przerwy. Akcja "Aktualizuj wyświetlacz" jest wykonywana automatycznie, gdy użytkownik zamyka okno wiadomości, więc tło obrazu zostanie przywrócone.

Informacja wizualna w aplikacjach mobilnych, w których tabele zawierają powtarzające się wiersze

Nie możemy używać tej samej metody indeksowania do identyfikowania ikon narzędzi na stronach, na których prezentujemy listy oparte na danych otrzymanych z zapytań do API. Na przykład, zrzut ekranu poniżej pokazuje wyniki wyszukiwania hoteli i moteli w pobliżu określonej lokalizacji:

Podobne strony są prezentowane dla informacji o ruchu drogowym oraz wydarzeniach kulturalnych w pobliżu, a chcemy, aby dla każdego elementu wyświetlały się wizualne podglądy obrazów użytych w narzędziu, jak widać tutaj, gdzie po długim kliknięciu na jednym z obrazów telefonu pojawia się takie podgląd:

Każdy zestaw wyników dla tych stron jest definiowany jako tabela z możliwością przewijania, zawierająca powtarzające się wiersze, w której wyświetlamy informacje pobrane z zapytań do API:

MobileTogether zawiera funkcję rozszerzenia XQuery o nazwie mt-rowgroup-index(), która oferuje eleganckie rozwiązanie do identyfikowania obrazów w każdym wierszu. Możemy połączyć tę funkcję z wartością, aby zidentyfikować kolumnę w tabeli i manipulować każdym obrazem indywidualnie. Obraz telefonu, który został wcześniej wyróżniony, ma następujące ustawienie koloru tła:

Pierwsze działania wykonywane po kliknięciu przez użytkownika ikony telefonu, niezależnie od konkretnego wyniku, to aktualizacja wartości elementu "userButton" oraz uruchomienie grupy akcji "Button Flash":

Dodaliśmy 300 do indeksu grupy wierszy, aby wskazać trzecią kolumnę obrazów w danym wierszu. Nasze zapytanie do API wyszukiwania zwraca maksymalnie 50 wyników. W związku z tym, w zależności od numeru wiersza wybranego wyniku, wartość elementu "userButton" dla tego obrazu może wynosić od 301 do 350. Informacja wizualna jest wyświetlana tylko dla tego konkretnego obrazu, zgodnie z definicją koloru tła komórki tabeli, a konkretnie funkcją mt-rowgroup-index().

MobileTogether zawiera wiele innych funkcji funkcje rozszerzające które można wykorzystać w wyrażeniach XPath/XQuery, co zwalnia programistów z konieczności tworzenia własnych funkcji w celu rozszerzenia standardowych bibliotek XPath, XQuery i XSLT, co jest często wymagane w aplikacjach mobilnych do wykonywania powszechnie używanych zadań.

Dowiedz się więcej i wypróbuj to samodzielnie

Jeśli jesteście gotowi, aby zacząć dodawać elementy wizualne w aplikacjach mobilnych, wystarczy pobrać bezpłatny program MobileTogether Designer. Pamiętajcie również, aby odwiedzić stronę MobileTogether Demos, gdzie znajdziecie linki do filmów, samouczków i dodatkowych aplikacji demonstracyjnych. Możecie zapoznać się z aplikacją opisaną w tym artykule, pobierając ją z GitHub w tym repozytorium.