Klasy stylów składników

Można utworzyć zdefiniowaną listę stylów, które mogą być stosowane przez użytkowników do składników.

Utrzymywanie predefiniowanej listy stylów dla składnika opiera się na tym samym modelu, co definiowanie klas stylów dla składników dostarczanych przez Oracle Content Management przy użyciu plików projektu motywu. Klasy stylów niestandardowych określa się w pliku appinfo.json dla składnika.

Dodatkowe style definiuje się w plikach design.css i design.json. Plik json zawiera odwzorowania nazwy, która pojawi się w interfejsie użytkownika, na faktycznie używaną nazwę klasy css, zaś plik css dostarcza szczegóły poszczególnych klas.

Plik design.json ma następującą strukturę dla składników:

{
    "componentStyles": {
        "scs-image": {
            "styles": []
        },
        "scs-map": {
            "styles": []
        },
        "scs-title": {
            "styles": []
        },
        "scs-paragraph": {
            "styles": []
        },
        "scs-txt": {
            "styles": []
        },
        "scs-divider": {
            "styles": []
        },
        "scs-button": {
            "styles": []
        },
        "scs-app": {
            "styles": []
        },
        "scs-spacer": {
        },
        "scs-gallery": {
            "styles": []
        },
        "scs-youtube": {
            "styles": []
        },
        "scs-socialbar": {
            "styles": []
        },
        "scs-document": {
            "styles": []
        }
    }
}

Każdy z wpisów "styles":[] może zawierać listę stylów dla konkretnego składnika. Wpis "name" może się odwoływać do wbudowanego zlokalizowanego napisu lub do określonej wartości, która ma zostać użyta. Na przykład składnik "tytuł" udostępnia następujące style domyślne:

{    
    "styles": [{
                    "name": "COMP_STYLE_FLAT",
                    "class": "scs-title-default-style"
               },
               {
                     "name": "COMP_STYLE_HIGHLIGHT",
                     "class": "scs-title-style-2"
               },
               {
                     "name": "COMP_STYLE_DIVIDER",
                     "class": "scs-title-style-3"
               }
]
}

Wartości "name" są odwzorowywane na wyrazy wyświetlane w interfejsie użytkownika, jak poniżej:

    "COMP_STYLE_FLAT": "Flat",
    "COMP_STYLE_HIGHLIGHT": "Highlight",
    "COMP_STYLE_DIVIDER": "Divider",

Plik css udostępnia definicje wartości "class".

    .scs-title-default-style {
      color: #333333;
      display: block;
      font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size: 24px;
      font-weight: normal;
                             }

Na przykład w plikudesign.json motywu można dodać wpisy dla składnika, oparte na wartości initialData.compomentId zdefiniowanej w pliku components.json:

"componentId": "news-article"

Odpowiadającymi wpisami w pliku design.json mogą być następujące:

"componentStyles": {
        "news-article": {
                "styles": [{
                          "name": "News Article 1",
                          "class": "news-article-default-style"
                  },
                  {
                          "name": "News Article 2",
                          "class": "news-article-style-1"
                  }]
        },

Odpowiadającymi wpisami w pliku design.css mogą być następujące:

.news-article-default-style .scs-image {…}
.news-article-style-1 .scs-image {…}