---
title: "Elastyczny projekt interfejsu aplikacji z wykorzystaniem wielopoziomowych arkuszy stylów"
date: "2016-12-06"
categories: 
  - "applications"
  - "development"
  - "mobile"
tags: 
  - "app-design"
  - "app-development"
  - "app-ui"
  - "app-ux"
  - "mobiletogether"
description: Odkryj, jak arkusze stylów wielopoziomowych w MobileTogether ulepszają projekt interfejsu użytkownika aplikacji, umożliwiając dynamiczną personalizację na różnych platformach, przy jednoczesnym zachowaniu natywnego wyglądu.
---
Status: #blog

Tags:  #app-design #app-development #app-ui #app-ux #mobiletogether

Categories:  [low-code+no-code](/blog/pl/category/low-codeno-code.md) | [mobile-development](/blog/pl/category/mobile-development.md)
# Elastyczny projekt interfejsu aplikacji z wykorzystaniem wielopoziomowych arkuszy stylów

Wykorzystanie platformy do tworzenia aplikacji mobilnych działającej na różnych systemach, takiej jak MobileTogether, to doskonały wybór do [tworzenia natywnych aplikacji](https://www.altova.com/pl/mobiletogether.html), ponieważ środowisko projektowe dba o prawidłowe renderowanie interfejsu aplikacji, wykorzystując natywny wygląd i styl każdego systemu operacyjnego. Wystarczy stworzyć jeden projekt.

To daje programistom aplikacji możliwość szybkiego tworzenia zaawansowanych aplikacji, opartych na danych, dla wszystkich użytkowników. Aby ułatwić tę pracę, MobileTogether wykorzystuje podejście RMAD, a także oferuje elastyczne opcje projektowania atrakcyjnego interfejsu użytkownika. Szczególnie w tym ostatnim aspekcie pomocne są wielopoziomowe arkusze stylów, które pozwalają na dostosowywanie i stosowanie stylów – statycznie lub dynamicznie – na różnych poziomach projektu interfejsu aplikacji, przy użyciu zaledwie kilku kliknięć.

![Oglądanie aplikacji mobilnej](/blog/images/shutterstock_2341179701.jpg)

<!--more-->

## Zaprojektuj piękny interfejs użytkownika

Wersje 3.0 platformy [MobileTogether](https://www.altova.com/pl/mobiletogether/new-features.asp) po raz pierwszy wprowadzono arkusze stylów wielopoziomowych, które umożliwiają programistom aplikacji definiowanie globalnych stylów, które można zastosować na poziomie projektu, strony, tabeli i elementu sterowania. Dzięki temu można stworzyć centralne repozytorium stylów, które można wykorzystać na różnych poziomach w projekcie tworzenia aplikacji.

Dlaczego warto dostosowywać style? Przede wszystkim, chcę podkreślić, że jest to opcjonalne. MobileTogether automatycznie stosuje domyślne style, wygląd przycisków i inne elementy dla każdego systemu operacyjnego (iOS, Android, Windows, itp.), co pozwala na tworzenie czytelnego i funkcjonalnego interfejsu bez konieczności wprowadzania zmian. Jednak czasami konieczne jest dostosowanie stylów, aby spełnić wymagania firmowych wytycznych, zaimplementować specjalne funkcje lub po prostu wykorzystać kreatywność. Nowe, wielopoziomowe arkusze stylów w MobileTogether zostały zaprojektowane, aby ułatwić i przyspieszyć ten proces.

Aby rozpocząć, otwórz okno dialogowe "Arkusz stylów" z menu "Projekt". Pozwala to na tworzenie dwóch rodzajów arkuszy stylów: arkuszy stylów projektu oraz arkuszy stylów tworzonych przez użytkownika.

Arkusz stylów projektu służy do definiowania podstawowych ustawień personalizacji. Style zdefiniowane w tym miejscu będą automatycznie stosowane w całym projekcie. Jest to idealne rozwiązanie, jeśli chcemy wprowadzić zmiany dotyczące wyglądu wszystkich przycisków w całym projekcie, zdefiniować rozmiar czcionki dla wszystkich elementów tekstowych lub kontrolować kolory tła na poziomie całego projektu.

 

![Arkusz stylów obowiązujący dla całego projektu](/blog/images/app-project-stylesheet.png)

 

Drugi typ to arkusze stylów tworzone przez użytkownika, które są nazywane przez programistę i mogą być stosowane w razie potrzeby do poszczególnych stron, tabel i elementów sterujących. Innymi słowy, te style nie są stosowane w całym projekcie. Na poniższym zrzucie ekranu znajduje się arkusz stylów stworzony przez użytkownika, który nazwałem „MyStyles”, i który definiuje pewne style dla przycisków, wykresów i etykiet.

Podczas definiowania stylów w prawym panelu okna dialogowego "Arkusz stylów", można wybrać lub wprowadzić statyczną wartość właściwości, lub wprowadzić wyrażenie [XPath](https://www.altova.com/pl/xpath-intro.html), które oblicza wartość właściwości. Przykładem dynamicznego przypisania jest ustawienie wartości właściwości w zależności od jakiegoś kryterium, takiego jak szerokość ekranu urządzenia mobilnego użytkownika końcowego, lub od preferencji użytkownika, na przykład umożliwienie użytkownikowi dostosowania rozmiaru czcionki za pomocą jednej strony ustawień w aplikacji, a następnie zastosowanie tego rozmiaru czcionki do wszystkich elementów tekstowych.

W arkuszu stylów MyStyles, który znajduje się poniżej, wykorzystałem wyrażenia XPath, aby dynamicznie dostosowywać wysokość i szerokość wykresów do urządzenia, z którego korzysta użytkownik.

 

![Styl arkusza stylów aplikacji tworzony przez użytkownika](/blog/images/app-stylesheet.png)

 

Można zdefiniować dowolną liczbę tych arkuszy stylów tworzonych przez użytkownika, aby zapewnić opcje formatowania różnych elementów.

Podczas tworzenia aplikacji, zastosowanie arkusza stylów stworzonego przez użytkownika do elementu interfejsu jest tak proste, jak wybranie nazwy tego arkusza stylów w oknie "Style i właściwości".

 

![Wybierz arkusz stylów dla urządzeń mobilnych](/blog/images/select-mobile-stylesheet.png)

Można również dynamicznie określać wybór arkusza stylów za pomocą wyrażenia XPath, na przykład, aby uczynić wybór arkusza stylów zależnym od typu aktualnie używanego urządzenia mobilnego. Dużą zaletą używania wyrażenia XPath do wyboru arkusza stylów utworzonego przez użytkownika jest to, że wybór może być warunkowy i zależeć od dynamicznych kryteriów środowiskowych. Na przykład, jeśli chcemy określić jeden arkusz stylów dla urządzeń iOS, a inny dla wszystkich pozostałych urządzeń, można użyć następującego wyrażenia XPath: jeśli ($MT_iOS=true()) to 'iOSStyleSheet', w przeciwnym razie 'GeneralStyleSheet'.

Kiedy zdefiniujesz własny arkusz stylów dla konkretnej strony lub elementu, on zastąpi odpowiadające mu ustawienia w głównym arkuszu stylów projektu. Dzięki temu możesz wprowadzać zarówno ogólne, jak i szczegółowe zmiany.

 

Arkusze stylów wielopoziomowych pozwalają zaoszczędzić ogromną ilość czasu, oferując niezrównaną elastyczność w dostosowywaniu wyglądu aplikacji na wszystkich platformach. Na przykład, jak wspomniałem we wstępie, jeśli chcemy, aby wszystkie przyciski w aplikacji wyglądały identycznie na systemach iOS, Android i Windows (czyli zamiast korzystać z natywnych stylów przycisków), teraz możemy zdefiniować to raz dla całego projektu (lub na dowolnym innym poziomie, w zależności od potrzeb).

**Zapoznaj się z tą funkcjonalnością, tworząc aplikację w bezpłatnym programie MobileTogether Designer (link: https://www.altova.com/download/mobiletogether.html).**