Steg 12: Definiera anpassade format

Komponenter som du skapar behandlas som alla andra komponenter i filerna design.json och design.css i det tema som används för webbplatsen.

Om du vill lägga till ett eget format för den anpassade komponenten ska du bekräfta det id-värde som du använde när du registrerade komponenten. I filen appinfo.json var det här "id": "hello-world".

Använd det värdet för att redigera temats design.json-fil och lägga till de nya format som du vill stödja mot detta id. Du kan till exempel redigera filen /designs/default/design.json i temat och lägga till följande kod:

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

Om du öppnar panelen Inställningar mot komponenten bör du nu se Normal (standard) och Gotiska som de två alternativ som listas på fliken Format. Men inget händer när du växlar mellan dessa alternativ förrän du faktiskt definierar de formatklasser som listas i filen design.css.

Redigera temats design.css-fil och lägg till formatmallsklasserna (CSS-klasserna) för formatet. Du kan till exempel redigera filen /designs/default/design.css i temat och lägga till följande 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; }

Spara och synkronisera filerna till servern för instansen av Oracle Content Management.