Wykorzystaj w pełni możliwości projektów StyleVision dzięki dynamicznemu doborowi plików CSS

Jedną z największych zalet programu StyleVision jest jego elastyczność. Dzięki StyleVision można projektować wizualnie zaawansowane arkusze stylów i raporty do generowania w wielu formatach, w tym HTML, PDF oraz elektronicznych formularzy. Teraz StyleVision jeszcze bardziej ułatwia dostosowywanie się do różnych wymagań formatowania w ramach jednego projektu, dzięki dynamicznemu doborowi plików CSS – nowej funkcji wprowadzonej w StyleVision 2012.

Chociaż nadal można wykonywać praktycznie wszystkie zadania związane z formatowaniem bezpośrednio w interfejsie StyleVision, dynamiczny wybór plików CSS umożliwia tworzenie pojedynczego szablonu, który można wykorzystywać w różnych sytuacjach. Jako przykład, stworzyliśmy fakturę dla fikcyjnej firmy Nanonull Corporation, w której wygląd zmienia się w zależności od liczby dni, które upłynęły między datą wystawienia faktury a datą płatności. Chociaż moglibyśmy użyć XPath do zmiany formatowania każdego elementu w zależności od liczby upłyniętych dni, w tym przypadku bardziej efektywne jest tworzenie oddzielnych plików CSS, które są stosowane w różnych scenariuszach.

Poniżej znajduje się faktura, którą zaprojektowaliśmy w programie StyleVision. Zauważcie, że poza pogrubionymi nagłówkami, faktura jest prawie pozbawiona formatowania – formatowanie zostanie zastosowane na podstawie liczby dni, które upłynęły między datą wystawienia faktury a datą płatności, za pomocą plików CSS.

Teraz możemy tworzyć nasze pliki CSS w programie XMLSpy, który jest produktem firmy Altova Edytor XML z wbudowanym wsparciem dla edycji CSS2 i CSS3.

Najpierw utworzymy plik CSS dla faktur, których terminy płatności przypadały po dacie wystawienia (czyli faktur, które nie są przeterminowane). W tym przypadku po prostu zdefiniowaliśmy selektor dla elementu body z żółtym tłem, logo firmy Nanonull oraz klasę dla nagłówka.

Teraz stworzymy bardziej rozbudowane style CSS dla faktur przeterminowanych. Wybiernik body będzie zawierał obrazek informujący o przeterminowaniu, wybieżnik paragrafów będzie miał pogrubioną, czerwoną czcionkę o wielkości 20 punktów, a klasy nagłówków i małych nagłówków będą miały pogrubioną, czerwoną czcionkę o różnych rozmiarach.

Teraz możemy przypisać pliki CSS do projektu StyleVision, a następnie przypisać klasy do różnych elementów projektu.

W programie StyleVision, po prostu klikamy opcję "dodaj nowy plik CSS" w sekcji "Przegląd projektu" i przechodzimy do plików CSS, które utworzyliśmy w programie XMLSpy – StyleVision obsługuje wiele plików CSS w ramach jednego projektu.

Nasza aktualna wersja projektu wygląda tak – należy zauważyć, że formatowanie z plików CSSRegular i CSSOverdue zostało zastosowane w widoku projektowania w programie StyleVision.

Chcielibyśmy przypisać plik CSS w zależności od odległości między datą wystawienia faktury a datą płatności. W związku z tym, klikniemy prawym przyciskiem myszy na strzałkę obok pliku CSS w sekcji "Przegląd wyglądu" i wybierzemy opcję "Wybierz jeden plik CSS za pomocą XPath" (poniżej).

To spowoduje wyświetlenie okna dialogowego "Wybierz plik CSS za pomocą XPath" (poniżej). Możemy użyć wyrażeń XPath w tym oknie dialogowym, aby wybrać odpowiedni plik CSS w zależności od dynamicznych danych wejściowych. W tym przypadku skonfigurowaliśmy StyleVision tak, aby używał pliku CSSOverdue.css, jeśli data płatności faktury jest wcześniejsza niż data wystawienia faktury, a w pozostałych przypadkach używał pliku CSSRegular.css.

Oto pełny wyrażenie XPath, które wprowadziliśmy do okna dialogowego "Wybierz plik CSS za pomocą XPath" pokazanego powyżej.

Teraz możemy przypisać klasy zdefiniowane w plikach CSS do poszczególnych elementów projektu w programie StyleVision.

W tym miejscu przypisaliśmy akapit zawierający tekst „Faktura” do klasy „nagłówek” w panelu stylów. Zgodnie z zawartością naszych plików CSS, ten tekst będzie wyświetlany na czerwono, pogrubioną czcionką o wielkości 20 punktów, w przypadku faktur przeterminowanych, a czarnym, pogrubionym fontem o wielkości 20 punktów, w przypadku faktur, których termin płatności przypada w przyszłości.

Podobnie, datę płatności faktury przypiszemy do klasy "mały nagłówek"

Teraz możemy przejrzeć projekt faktury.

Poniżej znajduje się podgląd HTML faktury przeterminowanej – należy zwrócić uwagę, że tekst "Faktura" oraz data płatności są wyświetlane czerwonym, pogrubionym fontem, a w środku znajduje się pieczęć z napisem "Przeterminowana".

Teraz przyjrzyjmy się temu samemu rachunkowi, ale z datą płatności w przyszłości – zwróćcie uwagę na żółte tło, logo Nanonull oraz na to, że słowa „Rachunek” i data płatności są wyświetlane w kolorze czarnym.

Możliwość wyboru pliku CSS w oparciu o dane wejściowe pozwala na wykorzystanie szerokiego zakresu możliwości i sprawia, że projekty tworzone w StyleVision stają się jeszcze bardziej elastyczne. Dzięki tej funkcji można wprowadzać zmiany w formacie w czasie rzeczywistym, korzystając z plików CSS powiązanych z danym projektem – co jest szczególnie przydatne w przypadku projektów zawierających wiele elementów.

Stworzyliście świetny projekt, wykorzystując arkusz stylów StyleVision i narzędzie do projektowania raportów, lub inne narzędzia firmy Altova, i chcielibyście się tym pochwalić? Prosimy podzielcie się swoją historią z innymi użytkownikami Altova, komentując ten wpis na blogu.

Jeśli uważasz, że Twoja historia mogłaby być świetnym przykładem, odwiedź stronę poświęconą studium przypadku firmy Altova – jeśli wykorzystamy Twoją historię, otrzymasz kartę podarunkową Amazon o wartości 200 dolarów. Chcielibyśmy się z Tobą skontaktować!