Wraz z rozwojem technologii urządzenia przenośne takie jak tablety i smartphony stają się coraz bardziej integralną częścią naszego życia. Zależność ta przechodzi także na nasze życie zawodowe i sposób, w jaki prowadzona jest działalność gospodarcza.
Z tego względu z roku na rok klienci coraz bardziej preferują przeglądanie danych i raportów na urządzeniach przenośnych. Nie powinno to z resztą nikogo dziwić – praktycznie każdy z nas nie rozstaję się z swoim telefonem, dzięki czemu raporty mogą być odczytywane w każdym miejscu, o każdej porze, jeszcze szybciej i lepiej wspierając decyzje biznesowe.
Jednakże korzystanie z urządzeń przenośnych wiąże się z pewnymi limitami, takimi jak np. zdecydowanie mniejszy ekran i rozdzielczość w porównaniu ze zwykłym komputerem. Czynniki te mogą także mocno odbiegać od siebie w zależności od modelu smartphonu. Tym sposobem przygotowanie aplikacji, która wyświetlałaby wszystkie niezbędne dane, a jednocześnie byłaby czytelna i intuicyjna, może stać się sporym wyzwaniem. W niniejszym artykule zaprezentujemy jeden ze sposobów na radzenie sobie z tym problemem.
Nasze założenie – utworzenie responsywnej struktury aplikacji w SAP Lumira Designer która zmienia się w zależności od orientacji (pionowa/pozioma) i rozdzielczości urządzenia. Jako że wbudowany w Lumirze język skryptowy nie obsługuje jeszcze wykrycia zmiany w rozdzielczości ekranu, do osiągnięcia celu skorzystamy z skryptów CSS.
Krok 1 – Stwórz nową aplikację opartą o pusty szablon.
Krok 2 – Dodaj dwa panele do aplikacji i rozciągnij je na cały ekran (przycisk Maximize Selected Component). W jednym z nich umieść wykres, w drugim tabelę. Obydwa elementy również rozciągnij na cały ekran tak, aby nachodziły na siebie (jak na ilustracji).
Krok 3 – Utwórz nowy nowy plik CSS dla aplikacji
Krok 4 – Utwórz odpowiednie reguły CSS
Korzystając z reguły @media możemy stworzyć właściwości CSS, które zostaną dodane po spełnieniu podanych warunków.
Zaczniemy od prostej reguły sprawdzającej, czy orientacja ekranu jest pozioma (landscape).
@media screen and (orientation:landscape)
{
}
W klamry wpisujemy właściwości CSS, które mają być aktywowane po spełnieniu warunku. Schowamy teraz jeden z obiektów (dla przypomnienia, w przykładzie korzystamy z obiektu typu Panel).
@media screen and (orientation:landscape)
{
#PANEL_1_panel1 { display: none;}
}
Słowo wyjaśnienia : „PANEL_1” to nazwa naszego panelu w Lumira Designer.
„PANEL_1_panel1” to identyfikator panelu odczytywany przez CSS
{ display: none; } – reguła CSS która ukrywa dany element.
Dodamy teraz drugą regułę @media które ukryje drugi panel przy orientacji pionowej (portrait).
@media screen and (orientation:landscape)
{
#PANEL_1_panel1 { display: none;}
}
@media screen and (orientation:portrait)
{
#PANEL_2_panel1 { display: none;}
}
Krok 5 – Zapisz zmiany i uruchom aplikację. Jeśli wszystkie kroki wykonaliśmy poprawnie w danej chwili na urządzeniach przenośnych i ich symulacji powinien być widoczny tylko jeden panel.
To w jakiej pozycji znajduje się danej chwili urządzenie jest ustalana na podstawie aktualnej rozdzielczości (Jeśli szerokość jest większa niż wysokość, np. 1980 na 1020, ustawiana orientacja to „Landscape”). Jeśli zależy nam na bardziej konkretnych przypadkach użycia, korzystając z reguł @media możemy także definiować dokładne rozdzielczości ekranu.
Dla przykładu, jeśli właściwości mają być aktywowane gdy wysokość ekranu jest w zakresie 375-413 pikseli, a wysokość ekranu jest mniejsza od jego szerokości, możemy skorzystać z poniższej reguły:
@media screen and (min-height: 375px) and (max-height: 413px) and (orientation:landscape)
{
#PANEL_1_panel1 { display: none;}
}
W internecie możemy znaleźć mnóstwo szablonów na konkretne modele telefonów. Mam nadzieję że powyższy artykuł okazał się być przydatny. Powodzenia!
