Kompozycje

Edycja w trybie z połączeniem
Kompozycja składa się z zestawu definicji kompozycji, dynamicznych arkuszy stylów i wygenerowanego arkusza CSS, które można zastosować do automatyzacji przepływu pracy lub biblioteki narzędziowej.

Definicja kompozycji jest zbiorem zmiennych kompozycji i ich wartości. Na przykład definicja kompozycji może zawierać zmienną tło i wartość white (białe). Widok może mieć dynamiczny arkusz stylów, który używa zmiennych z definicji kompozycji. Jeśli kilka widoków używa tej samej definicji kompozycji, można uzyskać zestaw widoków o spójnym wyglądzie. Ponadto w tych widokach można łatwo wprowadzić zmianę globalną dotyczącą wyglądu — w tym celu wystarczy zmienić wartości zmiennych kompozycji (bez ingerowania w definicje widoku). Definicje kompozycji i dynamiczne arkusze stylów obsługują język arkuszy stylów Less, dzięki czemu można rozszerzać niestandardowe widoki przy użyciu składni i funkcji tego języka.

Widok korzysta z definicji kompozycji kontekstu działającego, która jest automatyzacją przepływu pracy lub biblioteką narzędziową, która obecnie korzysta z widoku. Za pomocą tej funkcji można korzystać z widoków w jednej automatyzacji przepływu pracy w jeden sposób, a te same widoki w innej automatyzacji przepływu pracy styli się w inny sposób. Podczas gdy dwa zestawy widoków mają te same dynamiczne arkusze stylów, arkusze stylów korzystają z definicji kompozycji, które mają różne wartości.

Definicje kompozycji i dynamiczne arkusze stylów są łączone w celu automatycznego wygenerowania zestawu plików .CSS. Gdy automatyzacja przepływu pracy wyświetla stronę, używa ona tych plików CSS do stylu widoków, które są zawarte na stronie. Wygenerowanie arkusza CSS zajmuje trochę czasu, dlatego w przypadku wyświetlania automatyzacji przepływu pracy w programie projektant mogą być wyświetlane widoki na stronie, w których używane są domyślne lub stare wartości kompozycji, aż do momentu, gdy nowy arkusz CSS będzie dostępny. W czasie wykonywania arkusz CSS jest już generowany dla wdrożonego automatyzacji przepływu pracy , a opóźnienie nie jest wykonywane.

Gdy projektant wyświetla widok, korzysta z kompozycji aktualnie otwartej automatyzacji przepływu pracy lub przybornika do widoków stylu w układzie. Ta opcja oznacza, że ten sam widok może wyglądać inaczej w projektancie, w zależności od tego, która automatyzacja przepływu pracy lub biblioteka narzędziowa została otwarta. Kompozycja Carbon w bibliotece narzędziowej Dane systemowe jest domyślną kompozycją dla nowszej automatyzacji przepływu pracy, która udostępnia definicje kompozycji dla widoków. Kompozycja Carbon udostępnia zasoby wizualne (kolory, ikony, kroje pisma itp.), które wyrównują interakcje oraz wygląd i zachowanie automatyzacji przepływu pracy i widoki z wytycznymi systemu IBM Design System. Więcej informacji na ten temat zawiera sekcja System projektowania CO2.

Możesz również zastosować kompozycję z niestandardowej biblioteki narzędziowej. Można na przykład utworzyć typ widoku przycisku w dostosowanej bibliotece narzędziowej. W bibliotece narzędziowej w komponencie Designer kompozycja zastosowana do biblioteki narzędziowej ustawia styl przycisku na niebieski. Automatyzacja przepływu pracy zawiera bibliotekę narzędziową jako zależność. Jednak automatyzacja przepływu pracy zawiera kompozycję, która służy do tworzenia stylów dla przycisku w kolorze pomarańczowym. Dlatego kolor przycisku jest wyznaczony przez kontekst, w jakim jest wyświetlany przycisk:
  • Jeśli przybornik zostanie otwarty w komponencie Designer, a przycisk zostanie dodany do strony lub widoku, w układzie zostanie wyświetlony przycisk jako niebieski.
  • Jeśli użytkownik otworzy automatyzację przepływu pracy w projektancie i doda przycisk do strony lub widoku, układ będzie wyświetlany jako pomarańczowy.
  • Jeśli zostanie uruchomiona automatyzacja przepływu pracy, w przeglądarce zostanie wyświetlony przycisk jako pomarańczowy.
Oprócz stylizacji, które można zastosować poprzez kompozycję, można również zastosować stylizacje na inne sposoby w projektancie. Na poniższej liści figurują różne sposoby określania stylu widoku (wartości znajdujące się wyżej na liście przesłaniają te, które są niżej):
  1. Klasy i atrybuty dodane na stronie Atrybuty HTML właściwości układu widoku.
  2. Style zawarte we wstawianym arkuszu CSS zachowania widoku. W celu uniknięcia kolizji nazw klas należy użyć wstawianego arkusza CSS, aby tymczasowo opracować style CSS. Po opracowaniu stylów należy je umieścić w dołączonym skrypcie.
  3. Kod CSS w dołączonych skryptach zachowania widoku.
  4. Definicje stylów ustawione podczas dynamicznego określania stylów zachowania widoku.
  5. Definicje CSS ustawione na podstawie kompozycji automatyzacji przepływu pracy lub biblioteki narzędziowej.
Istnieje również hierarchia, której można użyć do ustawiania stylów poszczególnych widoków. Wartości stylu widoku w kontenerze przesłaniają wartości stylu ustawione przez kontener. Na przykład automatyzacja przepływu pracy zawiera kompozycję, która umożliwia styl wszystkich widoków, w których ma być używany kolor podstawowy (niebieski). Jeśli jednak instancja przycisku zostanie wystylizowana na stronie w tej automatyzacji przepływu pracy , aby użyć koloru sukcesu (zielony), to ten przycisk jest zielony. Elementy sterujące w bibliotece narzędziowej Interfejs użytkownika udostępniają ten sposób określania stylu instancji za pośrednictwem opcji konfiguracyjnych.