Tworzone składniki są traktowane jak wszelkie inne w plikach design.json
i design.css
, zawartych w motywie używanym dla serwisu.
Aby dodać swój własny styl dla składnika niestandardowego, należy potwierdzić wartość id
, użytą podczas rejestrowania składnika. W pliku appinfo.json
było to "id": "hello-world"
.
Używając tej wartości, otworzyć plik design.json
do edycji, po czym dodać nowe style, które mają być obsługiwane dla tej wartości id
. Na przykład otworzyć do edycji plik /designs/default/design.json
ze swojego motywu, po czym dodać następujący kod:
"hello-world": { "styles": [{ "name": "Plain", "class": "hello-world-default-style" }, { "name": "Gothic", "class": "hello-world-gothic-style" }] },
Jeśli zostanie wywołany panel "Ustawienia" składnika, to na karcie "Styl" powinny być widoczne dwie opcje: Plain (default) i Gothic. Przełączanie się między tymi opcjami niczego jednak nie zmieni, dopóki nie zostaną zdefiniowane klasy wyszczególnione w pliku design.css
.
Otworzyć plik design.css
do edycji, po czym dodać klasy CSS swojego stylu. Na przykład otworzyć do edycji plik /designs/default/design.css
ze swojego motywu, po czym dodać następujący kod:
.hello-world-default-style .scs-component-content { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; } .hello-world-gothic-style .scs-component-content { font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; font-size: 32px; font-weight: bold; }
Zapisać, po czym zsynchronizować pliki z serwerem instancji Oracle Content Management.
Sprawdzanie wyników dla etapu 12
Aby konstruktor serwisów mógł pobrać zmiany do składnika, odświeżyć stronę serwisu.
Przełączyć stronę do trybu edycji.
Przeciągnąć składnik na stronę.
Wyświetlić panel "Ustawienia" składnika.
Przejść do karty "Styl".
Przełączać się między stylami Gothic i Plain, zdefiniowanymi w pliku design.json
.
Można zaobserwować zmianę rozmiaru czcionki w składniku, spowodowaną przełączaniem stosowanej klasy CSS.
Kontynuacja: Etap 13: Renderowanie składnika w ramce wstawkowej.