Formatklasser för komponenter

Du kan skapa en definierad lista över format som kan tillämpas på komponenten av användare.

Användningen av en fördefinierad lista över format för komponenten följer samma modell som när du definierar formatklasser för komponenter tillhandahållna av Oracle Content Management genom ett temas designfiler. Du namnger de anpassade formatklasserna i filen appinfo.json för komponenten.

Du definierar ytterligare format i filerna design.css och design.json. Filen json tillhandahåller en mappning från det namn som ska visas i användargränssnittet till det faktiska underliggande css-klassnamnet, och css-filen anger detaljerna för varje formatklass.

Filen design.json har följande struktur för komponenter:

{
    "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": []
        }
    }
}

Var och en av "styles":[]-posterna kan innehålla en lista över format för just den komponenten. "name" kan vara antingen en referens till en inbyggd språkanpassad sträng eller ett angivet värde som ska användas. Titelkomponenten anger till exempel följande standardformat:

{    
    "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"
               }
]
}

Namnvärdena mappas till de faktiska ord som ska visas i användargränssnittet, på följande sätt:

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

css-filen tillhandahåller definitionerna för klassvärdena:

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

Exempel: I filen design.json för temat kan du lägga till poster för komponenten baserat på det värde för initialData.compomentId som du definierar i filen components.json:

"componentId": "news-article"

Motsvarande poster i filen design.json skulle vara följande:

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

Motsvarande poster i filen design.css skulle vara följande:

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