Szablony projektowania oprogramowania w projektach rozwoju aplikacji mobilnych

Szablony projektowania oprogramowania upraszczają proces tworzenia aplikacji mobilnych poprzez eliminację konieczności wielokrotnego wdrażania tych samych elementów. Tworzenie szablonu projektowania również ułatwia wprowadzanie zmian i aktualizacje, ponieważ zmiana w szablonie może być automatycznie zastosowana do całego projektu.

MobileTogether oferuje szablony projektowania oprogramowania dla elementów interfejsu użytkownika w aplikacjach mobilnych działających na różnych platformach, co ułatwia ponowne wykorzystanie elementów projektowych i pozwala na łatwe tworzenie efektywnych i elastycznych rozwiązań, dostosowanych do różnych wymagań aplikacji.

Szablon kontroli w MobileTogether to element projektowy, który umożliwia programistom definiowanie i grupowanie elementów interfejsu użytkownika w sposób ułatwiający ich ponowne wykorzystanie. Szablony kontroli obsługują parametry, a każdy szablon może być dostosowywany w czasie działania na podstawie wartości tych parametrów.

Spójrzmy na przykład.

Program MobileTogether Designer zawiera kilka przykładowych projektów, które demonstrują wykorzystanie szablonów kontroli. Opiszemy aplikację Cities4-DynamicSelection. Zrzut ekranu poniżej przedstawia fragment działania aplikacji na telefonie z systemem Android:

Ta aplikacja ilustruje typowy problem, który pojawia się podczas prezentacji danych hierarchicznych. Ostatecznym celem aplikacji jest umożliwienie użytkownikowi wybrania miasta. Aby to było bardziej efektywne, pełna lista miast jest zorganizowana według kontynentów, prezentowana w formie listy rozwijanej, a następnie filtrowana według krajów znajdujących się na wybranym kontynencie, wyświetlanych w postaci zestawu przycisków radiowych. Następnie, w drugim zestawie przycisków radiowych, prezentowane są miasta znajdujące się w danym kraju.

W trybie poziomym przyciski radiowe są wyświetlane poziomo (jak na powyższym obrazku), a w trybie pionowym – pionowo

Tworzenie takiej aplikacji byłoby bardzo skomplikowane, gdybyśmy musieli ręcznie tworzyć elementy sterujące typu "przycisk radiowy" dla każdej możliwej kombinacji wyborów użytkownika. Dodatkowo, nazwy krajów i miast znajdują się w pliku źródłowym XML, i chcemy mieć możliwość aktualizacji aplikacji poprzez prostą edycję tego pliku.

Otwierając aplikację w programie MobileTogether Designer, widzimy układ strony w głównym oknie projektowania.

Na początku strony znajduje się element sterujący typu "lista rozwijana" służący do wyboru kontynentu. Poniżej znajdują się dwie tabele zawierające wbudowane elementy sterujące typu "placeholder". Podczas działania programu, pierwsza tabela i element "placeholder" będą generować listę krajów, a druga – listę miast.

Program MobileTogether Designer zawiera okno pomocnicze, które wyświetla strukturę wszystkich stron, podstron oraz szablonów elementów sterujących w danej aplikacji. W tym przykładzie każdy szablon przyjmuje dwa parametry, które będą przekazywane przez element zastępczy podczas działania.

Wybór jednego z szablonów sterowania wyświetla jego elementy w głównym panelu projektowania.

W wersji pionowej szablon wykorzystuje tabelę z dynamicznymi wierszami, a w wersji poziomej – tabelę z dynamicznymi kolumnami. W każdym przypadku tabela generowana przez szablon będzie umieszczona wewnątrz pojedynczej komórki tabeli nadrzędnej, zdefiniowanej na pierwszej stronie. Dzięki temu pole wyboru sortowania jest centralnie umieszczane w dowolnej kolumnie przycisków radiowych, niezależnie od liczby wierszy.

Placeholder definiuje położenie szablonu kontrolki na stronie. Okno pomocnicze "Style i właściwości" dla Placeholder'a wskazuje, który szablon kontrolki jest używany i dostarcza wartości parametrów. Placeholder dla listy krajów definiuje obie te właściwości jako wyrażenia XQuery:

Nawet przy częściowym podglądzie, możemy zauważyć, że konkretny szablon kontrolki umieszczony na stronie zostanie określony przez orientację urządzenia w czasie działania programu.

Możemy użyć symulatora MobileTogether do analizy szablonów projektowania oprogramowania podczas jego działania oraz obserwować działanie elementów zastępczych i szablonów sterowania. Na poniższych zrzutach ekranu używamy iPhone'a w orientacji poziomej jako urządzenie podglądowe. Ponieważ aplikacja nie zawiera żadnych funkcji specyficznych dla konkretnego urządzenia ani systemu operacyjnego, dokładny model urządzenia podglądowego jest nieistotny.

Użytkownik może samodzielnie wybrać kontynent, kraj i miasto w aplikacji, bez żadnych wstępnie ustawionych wartości. Dlatego na początku działania aplikacji widzimy jedynie nagłówek strony oraz puste pole wyboru (combobox) do wyboru kontynentu

Okno "Wiadomości" wyświetla listę operacji, które zostały wykonane podczas wyboru kontynentu, a obszar odpowiadający wybranemu kontynentowi jest zaznaczony na zielono, jak pokazano poniżej:

Okno symulacji teraz wyświetla odpowiednią listę krajów dla Europy, ale nie zawiera żadnych nazw miast

W tym momencie aplikacja oczekuje, aż użytkownik wybierze kraj. Zamiast kontynuować, możemy otworzyć edytor XQuery wewnątrz symulatora i sprawdzić, jakie parametry zostały przekazane przez pierwszy element zastępczy do szablonu kontrolki. Po prostu kopiujemy wyrażenie "Parametry szablonu" z okna "Style i właściwości" i wklejamy je do okna XQuery. To wyrażenie zwraca tablicę zawierającą listę krajów w Europie oraz informację o kolejności sortowania:

Ale dlaczego aplikacja nie wyświetla żadnej listy miast na symulowanej stronie? Możemy sprawdzić wyrażenie parametru przekazywane przez drugi placeholder dla miast:

Wyrażenie otrzymało pustą listę nazw miast. Ponieważ przyciski radiowe dotyczące miast znajdują się w tabeli z dynamicznymi kolumnami, nie została wyrenderowana żadna kolumna!

Kontrolka "checkbox" służąca do wyboru opcji sortowania nie znajduje się w kolumnie dynamicznej, ale również nie jest wyświetlana. Właściwość widoczności tej kontrolki jest zdefiniowana jako "$PERSISTENT/Root/@Country != ''", co oznacza, że checkbox i etykieta tekstowa nie będą widoczne, dopóki użytkownik nie wybierze miasta.

Podsumowując, przykład Cities4-DynamicSelection pokazuje, jak można połączyć kilka elementów sterujących w niestandardowe szablony projektowe oprogramowania i umieścić je w projekcie aplikacji mobilnej, aby stworzyć eleganckie rozwiązanie, które wyświetla prawidłowy wynik w zależności od wyborów użytkownika w czasie rzeczywistym lub innych czynników zewnętrznych. Aplikacja demonstracyjna oraz plik z danymi źródłowymi są dołączone do programu MobileTogether Designer, dzięki czemu można śledzić opisane powyżej kroki lub nawet pójść dalej i samodzielnie eksperymentować.

MobileTogether Designer to bezpłatne narzędzie, które umożliwia Szybko tworzy aplikacje mobilne działające na różnych platformach, bazując na jednym projekcie graficznym. Oglądaj Prezentacje wideo aby zobaczyć, jakie aplikacje użytkownicy platformy MobileTogether tworzą każdego dnia, i Pobierz instalator Aby zacząć korzystać z szablonów do projektowania oprogramowania!