Definiowanie stylu aplikacji web
Platforma VSoft archITekt umożliwia zdefiniowanie własnego motywu aplikacji wynikowej. Definiowanie odbywa się bezpośrednio w przeglądarce na dowolnym z ekranów aplikacji WWW.
Funkcjonalność daje możliwość modyfikacji takich aspektów stylowania aplikacji WWW jak kolory, czcionki, marginesy, obramowania dla różnych klas komponentów – zarówno całej strony, kontenerów, nagłówków, menu.
Możesz zdefiniować kilka motywów aplikacji i przełączać się pomiędzy nimi.
Styl domyślny nie może być zmodyfikowany.
KROK 1 Dodawanie pliku stylu aplikacji do serwera wersji
- Dodaj plik Styl aplikacji web do serwera wersji. W tym pliku przechowywana będzie definicja motywu aplikacji, który stworzysz.
KROK 2 Definiowanie wybranego motywu aplikacji w konfiguracji
- Wybierz z menu głównego Narzędzia opcję Konfiguracja aplikacji.
- Dodaj nowy motyw dla aplikacji wynikowej z listy Dostępne motywy. W tym miejscu wskaż plik, który utworzyłeś w poprzednim kroku, w którym znajduje się definicja motywu/stylu aplikacji.
- Wybierz, który motyw ma być domyślny dla aplikacji i naciśnij Ustaw domyślny.
- Jeżeli wybierzesz z listy kilka motywów, wówczas wszystkie będą dostępne w aplikacji wynikowej na stronie www, gdzie użytkownik będzie mógł przełączać się pomiędzy motywami.
- Zapisz dane.
Zawsze możesz powrócić do ustawień domyślnych motywu, który jest wbudowany w platformie wybierając opcję Default.theme.
KROK 3 Definiowanie motywu aplikacji
- Przejdź do aplikacji web wyświetlając jakikolwiek formularz lub stronę startową systemu.
- Rozwiń panel z prawej strony ekranu.
Teraz możesz definiować styl aplikacji w takich obszarach jak:
- Kolory podstawowe - zdefiniowane są tutaj podstawowe kolory wykorzystywane między innymi do koloru wyświetlanych komunikatów w systemie czy kolorów wykorzystywanych we wbudowanych opcjach ustawiania tła dla kontenerów oraz tło aplikacji.
Pamiętaj, że jeżeli zmienisz coś w opcjach kolorów podstawowych, zmiana ta zostanie wykorzystana we wszystkich elementach aplikacji bazujących na podstawowych kolorach.
Dla przykładu:
- Dla określenia tła kontenera wykorzystany został wbudowany kolor Pozytywny (Kolor sukcesu). Kolor ten wykorzystywany jest także do wyświetlania komunikatów w systemie.
- Jeżeli zmienisz kolor, wówczas zmiana ta zostanie zastosowana zarówno do kontenera, bazującego na tym kolorze jaki i do komunikatu.
- Tekst - możesz wybrać inną czcionkę i dostosować jej rozmiar, grubość, kolor itp.
- Układ strony - możliwość zmiany koloru tła stron i maksymalnej szerokości.
- Kontenery - w tej sekcji zmiana koloru zostanie zastosowana dla tych kontenerów, które w opcjach mają wybrane jako kolor tła Dodatkowy.
- Pola - możliwość konfigurowania sposobu wyświetlania pól w zakresie koloru tła, koloru po najechaniu, obramowania i zaokrąglenia krawędzi.
- Przyciski - podobnie jak w przypadku kontenerów tutaj także zmiana zostanie zastosowana dla tych przycisków, dla których nie został wybrany jeden z kolorów wbudowanych (podstawowych).
- Pasek nawigacji i Menu główne - możliwość definiowania koloru tekstu i tła dla menu pierwszego poziomu i poziomów podrzędnych.
- Stopka - możliwość definiowania tła oraz rozmiary i koloru czcionki.
Panel edycji stylów jest widoczny zawsze w przypadku pracy lokalnej na środowisku zainstalowanym za pomocą VSoft archITekt Launcher.
W przypadku środowiska produkcyjnego, instalowanego za pomocą skryptów, panel nie powinien się pojawiać.
KROK 4 Przełączanie się pomiędzy różnymi motywami w aplikacji www
- Jeżeli dodałeś kilka motywów aplikacji w pliku konfiguracyjnym w archITekt Studio, to bez względu na to, który motyw jest ustawiony jako domyślny, możliwe jest przełączanie się pomiędzy motywami i definiowanie parametrów dla każdego z nich.
- Po rozwinięciu panelu z definicją motywu, w górnej części okna możesz wybrać z listy rozwijalnej motyw w kontekście którego chcesz wprowadzać konfigurację.
- Przełączanie się pomiędzy motywami możliwe jest także z poziomu panelu użytkownika.
Zobacz również
Definiowanie i użycie parametrów na liście