Oracle APEX – wykorzystanie jQuery ThemeRoller w internetowych aplikacjach mobilnych

blog_wycinka_grafik

Od wersji 4.2 Oracle APEX umożliwia wytwarzanie internetowych aplikacji mobilnych z wykorzystaniem jQuery Mobile. Aplikacje te mogą być uruchamiane na wszystkich systemach operacyjnych oraz są alternatywą dla aplikacji natywnych. Proces wytwarzania takich aplikacji nie różni się od standardowych aplikacji Oracle APEX. Zwykle wygląd aplikacji mobilnych konfigurowany jest za pomocą tematów oraz statycznych plików styli CSS, których przygotowanie jest bardzo czasochłonne. Dużym ułatwieniem w procesie dostosowania wyglądu aplikacji jest wykorzystaniem generatora CSS jakim jest jQuery ThemeRoller. W swoim artykule przedstawię proces zmiany wyglądu internetowej aplikacji mobilnej z wykorzystaniem jQuery ThemeRoller.

Internetowe aplikacje mobilne

Internetowe aplikacje mobilne stają się coraz popularniejszą metodą prezentacji danych na urządzeniach mobilnych. Poniżej przedstawiam kilka wad i zalet wykorzystania internetowych aplikacji mobilnych.

Zalety Wady
Możliwość uruchomienia na wszystkich systemach operacyjnych Wymagają stałego podłączenia do internetu oraz wykorzystania przeglądarki
Brak konieczności umieszczania w sklepach aplikacji Słabsza wydajność
Szybki czas wytwarzania oraz prosty sposób aktualizacji Ograniczony dostęp do peryferii urządzenia takich jak GPS, kamera
Wytwarzanie nie wymaga znajomości dedykowanego dla systemu języka programowania

jQuery ThemeRoller

ThemeRoller dla jQuery Mobile jest darmowym generatorem styli dla aplikacji wykonanych w tej technologii. W związku z tym, że Oracle APEX do wytwarzania aplikacji mobilnych wykorzystuje jQuery Mobile, możemy z niego skorzystać. ThemeRoller pozwala na generację styli zawierających do 26 różnych ekranów oznaczonych literami od A do Z.

Przykładowa aplikacja

W celu zaprezentowania działania mechanizmu zmiany styli stworzyłem prostą aplikację mobilną prezentującą dane pracowników.
Przykładowa Aplikacja

W aplikacji umieściłem raport prezentujący dane pracowników na podstawie zadeklarowanych filtrów. Filtry definiowane są przez 2 kontrolki: wybór oddziału oraz dolny próg zarobków pracowników. Dodatkowo dodałem przycisk zatwierdzający wyżej wymienione filtry.

Dostosowanie wyglądu

Proces dostosowania wyglądu rozpoczynamy od wygenerowania tematu za pomocą ThemeRoller. Generator dostępny jest online pod adresem
http://jquerymobile.com/themeroller/index.php

ThemeRoller

ThemeRoller pozwala na wygenerowanie tematu z maksymalnie 26 wyglądami ekranów „Swatch“, jednak zalecane jest wykorzystywanie 3 wyglądów ekranów w aplikacjach mobilnych. Ekrany oznaczone są literami od A do Z, a ich wybór odbywa się poprzez ustawienie atrybutu „data_theme“ w deklaracji HTML elementu.
Proces zmiany wyglądu aplikacji przedsatawiam w punktach poniżej :

  1. konfigurujemy oczekiwany wygląd aplikacji , wykorzystując ThemeRoller;
    Stworzyłem 3 różne wyglądy ekranów.
    ThemeRoller
  2. pobieramy skonfigurowany temat;
    Podczas pobierania tematów otrzymujemy również wskazówkę, jak wykorzystać je w naszych aplikacjach.
    ThemeRoller

  3. Po rozpakowaniu pobranego archiwum przenosimy zawartość katalogu „themes“ do plików statycznych apex na serwerze („/i/“);
    W plikach *.css należy zwrócić uwagę na ścieżki do plików ikon, które znajdują się w pobranym katalogu „images“.
  4. W konsoli deweloperskiej APEX z widoku naszej aplikacji przechodzimy do „Shared Components“ -> „Templates“ -> „Page“.
  5. W bloku „Cascading Style Sheet“ w polu „File URL’s“ dodajemy link do naszego pliku styli, w moim przypadku „#IMAGE_PREFIX#themes/theme_50/css/temat.css“;
    ThemeRoller
  6. W bloku „Body“ konfigurujemy, jaki wygląd ekranu ma zostać wykorzystany
    data-theme=“c“
    region
  7. W kolejnym kroku musimy sprawdzić, czy wykorzystane przez nas kontrolki i regiony nie nadpisują wyglądu ekranu np. „Region (With Title)“
    1
    2
    3
    4
    5
    6
    <div id="#REGION_STATIC_ID#" class="#REGION_CSS_CLASSES#" data-theme="c" #REGION_ATTRIBUTES#>
    <h3>#TITLE#</h3>
    #BODY#
    #SUB_REGIONS#
    #EDIT#
    </div>

    W przypadku, gdy wykorzystane przez nas elementy nadpisują temat, musimy w ich konfiguracji ustawić literę oczekiwanego wyglądu.

Wygląd aplikacji

Po poprawnym zainstalowaniu styli nasza aplikacja wygląda tak, jak wygenerowaliśmy w ThemeRoller.
Aplikacja

Podsumowanie

ThemeRoller przyspiesza proces dostosowywania wyglądu internetowych aplikacji mobilnych oraz standaryzuje ich wygląd. Tematy wygenerowane przez ThemeRoller mogą być współdzielone przez wiele aplikacji. Praca z generatorem nie wymaga znajomości CSS, co sprawia, że dostosowanie wyglądu aplikacji nie wymaga pracy webmastera. Pomimo braku możliwości dostosowania za pomocą generatora wyglądu wszystkich elementów dostępnych w APEX np. kalendarza, warto wykorzystać go w realizowanych projektach.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *