Twórz aplikacje mobilne, które automatycznie obsługują tryb ciemny

Urządzenia mobilne z systemem Android i Apple oferują opcję wyświetlania o nazwie "Tryb ciemny", którą można traktować jako niemal odwrócony obraz standardowego wyświetlacza. W trybie "Tryb ciemny" biel jest czernią, czerń jest bielą, a ogólna intensywność kolorów jest dostosowywana. Tryb ciemny zmniejsza zużycie energii, co może wydłużyć czas pracy na jednym ładowaniu baterii, a także może być łatwiejszy do odczytania w słabym oświetleniu.

Altova MobileTogether oferuje funkcje, które pozwalają programistom tworzyć aplikacje mobilne, automatycznie obsługujące tryb ciemny, poprzez wykrywanie ustawień użytkownika podczas uruchamiania aplikacji.

Spójrzmy na przykład:

Poniżej przedstawiono dwa widoki aplikacji mobilnej działającej na tym samym urządzeniu mobilnym, w trybie jasnym i w trybie ciemnym.

Ta aplikacja umożliwia użytkownikom rejestrowanie produkcji energii przez panele słoneczne oraz zużycie energii elektrycznej na podstawie odczytów z licznika, a także generuje wykresy, które wizualizują dane i pozwalają śledzić nadwyżki energii w czasie.

Wiele systemów wytwarzania energii słonecznej w budynkach mieszkalnych jest podłączonych do sieci energetycznej i wykorzystuje system rozliczeń typu "net-zero", czyli bilansowanie zużycia i produkcji. Panele słoneczne zamontowane na dachu dostarczają energię do domu tylko wtedy, gdy świeci słońce. W nocy lub w sytuacjach, gdy zapotrzebowanie na energię jest większe niż produkcja, energia jest pobierana z sieci. Kiedy system wytwarza więcej energii niż zużywa dom, nadwyżka jest oddawana do sieci, uzupełniając moce wytwórcze dostawcy energii.

Altova MobileTogether ułatwia pracę programistom tworzącym aplikacje mobilne, umożliwiając im Tworzenie aplikacji mobilnych działających na różnych platformach w programie MobileTogether Designer, który łączy w sobie narzędzia do projektowania interfejsu użytkownika oparte na przeciąganiu i upuszczaniu, potężny język wizualnego programowania Action Tree do obsługi zdarzeń oraz standaryzowane podejście do programowania funkcyjnego do wyboru i przetwarzania danych.

Każdy element aplikacji jest wysoce konfigurowalny, ale domyślnie elementy takie jak kolory tekstu, przycisków, reguły, obramowania, a nawet tła okien, są ustawiane zgodnie z domyślnymi ustawieniami systemu dla każdego urządzenia. Narzędzie MobileTogether Designer zawiera okno pomocnicze "Style", w którym programiści mogą określić ogólne ustawienia projektu, w tym opcję wyboru motywu jasnego lub ciemnego.

Opcje dotyczące motywu to: "Użyj ustawień systemowych", "Wymuś jasny motyw" lub "Wymuś ciemny motyw". Domyślnie ustawione jest "Użyj ustawień systemowych", dzięki czemu programiści mogą automatycznie obsługiwać ciemny motyw, bez konieczności wprowadzania żadnych specjalnych zmian.

Automatyczne wsparcie dla trybu ciemnego w wykresach, z możliwością użycia niestandardowych kolorów

Niektóre elementy mogą wymagać indywidualnego ustawienia kolorów, a programiści mogą określić alternatywne ustawienia dla trybu jasnego i trybu ciemnego. Pierwszym krokiem jest wykrycie, które ustawienia użytkownika są aktualnie aktywne.

MobileTogether zawiera zmienne globalne, które umożliwiają programistom wykrywanie ustawień urządzenia użytkownika w czasie działania programu i programowanie odpowiednich akcji w zależności od funkcjonalności urządzenia. Okno dialogowe "Zmienne globalne" w programie MobileTogether Designer wyświetla wszystkie zmienne globalne oraz ich wartości dla wybranego urządzenia symulacyjnego.

Domyślny kolor tła strony dla danego telefonu z systemem Android jest podany powyżej. Ta wartość zmienia się, jeśli urządzenie korzysta z trybu ciemnego. Niższa wartość w formacie szesnastkowym oznacza ciemniejszy odcień, a wyższa wartość oznacza jaśniejszy odcień.

Wartość szesnastkowa #808080 odpowiada odcieniowi szarości o jasności 50%. Możemy utworzyć wyrażenie XPath, które w czasie działania programu sprawdzi tę wartość. Możemy założyć, że każdy domyślny kolor tła ciemniejszy niż 50% szarości oznacza, że urządzenie działa w trybie ciemnego motywu. Narzędzie do oceny wyrażeń XPath w oknie symulacji projektowania jest przydatne do przetestowania i dopracowania dokładnej składni wyrażenia:

To wyrażenie konwertuje ciąg znaków szesnastkowych na liczbę całkowitą, porównuje ją z wartością odpowiadającą 50% szarości i, w zależności od wyniku, wybiera wartość ciągu znaków reprezentującą kolor czarny lub biały. Jest to przydatne wyrażenie do automatycznego wyboru koloru tekstu w zależności od motywu – jasnego lub ciemnego – więc zastosujmy je w funkcji użytkownika:

MobileTogether oferuje funkcje umożliwiające łatwe tworzenie zaawansowanych wykresów i diagramów, które wyglądają identycznie na wszystkich platformach. Aplikacja Solar Tool, której przykład jest pokazany na górze, wykorzystuje wykres słupkowy do zobrazowania dziennej produkcji energii słonecznej, nakładając go na wykres obszarowy, który pokazuje zużycie energii elektrycznej. Programiści wybierają ustawienia dla tych wykresów za pomocą serii okien dialogowych, takich jak okno dialogowe "Zmień wygląd", pokazane tutaj:

Wiele z tych ustawień dialogowych definiuje kolory, takie jak kolor tła i kolor obramowania, jak w tym przykładzie. Jednakże, mamy pełną kontrolę nad możliwością zmiany tych domyślnych ustawień, opierając się na dynamicznych ustawieniach XPath, które są obliczane na urządzeniu klienta w czasie działania programu.

Kliknięcie tego przycisku otwiera okno dialogowe, w którym można ustawić wartość XPath lub wyrażenie dla każdego elementu wykresu. Na poniższym obrazku ustawiliśmy wartości dla wszystkich elementów, które w oknach dialogowych ustawień wykresu są oznaczone jako czarne lub białe. Ustawiliśmy elementy początkowo białe jako domyślny kolor tła, a elementy czarne, takie jak tekst i obramowania, skonfigurowaliśmy do korzystania z naszej funkcji AutoTextColor().

Ustawiliśmy inne elementy, takie jak linie siatki dla każdej osi, w oknach ustawień tworzenia, tak aby miały jasnoszary kolor, który pasuje do obu motywów. Dla każdej warstwy każdego wykresu istnieje oddzielne okno ustawień dynamicznych ścieżek XPath, ale po ich edycji konfiguracja jest zakończona. Wykresy zostaną automatycznie utworzone poprawnie zarówno dla jasnego, jak i ciemnego motywu.

Oto zdjęcie telefonu z systemem Android, na którym wyświetlone są wykresy pokazujące skumulowany nadwyżkę, zarówno w trybie ciemnym, jak i w trybie jasnym:

Jeśli jesteście gotowi do tworzenia przyjaznych dla użytkownika aplikacji mobilnych, które automatycznie obsługują tryb ciemny w oparciu o ustawienia użytkownika, 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.