Creare layout di contenuto con Oracle Content Management

Creare un layout di contenuto per definire il layout dei campi in un elemento di contenuto visualizzato in una pagina del sito. Quando viene aggiunto a una pagina, il elemento di contenuto utilizzerà il layout di contenuto scelto.

Un utente enterprise può creare e usare elementi di contenuto in base ai tipi di contenuto e ai layout forniti dagli sviluppatori. È possibile creare nuovi layout di contenuto dal layout predefinito. L'associazione di più layout di contenuto al tipo di contenuto consente al progettista del sito di visualizzare gli elementi di contenuto in contesti diversi senza modificare il contenuto.

Se si utilizza un layout di contenuto in un componente Lista di contenuti, il layout di contenuto verrà ripetuto una volta per ogni elemento di contenuto. I layout di contenuto verranno quindi disposti per layout sezione.

È possibile esportare un layout di contenuto per modificarlo in modalità non in linea, quindi importarlo per sostituire il layout di contenuto esistente.

Per creare un layout di contenuto, effettuare le operazioni riportate di seguito.

Nella home page di Oracle Content Management fare clic su Sviluppatore nel menu di navigazione laterale.
Viene visualizzata la pagina Sviluppatore.
Fare clic su Visualizza tutti i componenti.
Nel menu a discesa Crea disponibile a destra scegliere Crea layout di contenuto.
Nella finestra di dialogo Crea layout di contenuto selezionare i tipi di contenuto che utilizzeranno il layout, scegliere i campi da visualizzare e abilitare Aggiungere il supporto per le impostazioni personalizzate quando utilizzate in Sites se si desidera che gli autori dei siti possano aggiungere impostazioni e stili personalizzati quando si aggiungono i componenti elemento di contenuto e lista contenuto a una pagina.
Fornire un nome e una descrizione per il componente layout di contenuto e fare clic su Crea.

Il layout di contenuto viene aggiunto ai componenti personali esistenti.

Nota:
Nei titoli dei layout di contenuto sono validi solo i caratteri alfanumerici, i trattini e i caratteri di sottolineatura.
Per esportare il layout di contenuto per la modifica, selezionarlo e fare clic su Esporta nel menu di scelta rapida oppure fare clic su nella barra delle azioni.
1. Andare a una cartella esistente oppure selezionare Crea, quindi Cartella per creare una nuova cartella e fornire un nome e, se necessario, una descrizione.
2. Selezionare la casella di controllo accanto alla cartella e fare clic su OK.
3. Fare clic sull'icona o sul nome della cartella per aprirla.
Nella cartella selezionata viene creato il file package del layout, con il nome del layout di contenuto e l'estensione .zip. Scaricare il file nell'ambiente di sviluppo per modificare i file.

Questi file controllano il layout dei campi negli elementi di contenuto che utilizzano il layout di contenuto Employee-Card. Se è stata abilitata l'opzione Aggiungere il supporto per le impostazioni personalizzate quando utilizzate in Sites, viene creato anche un file aggiuntivo denominato settings.html che fornisce una visualizzazione predefinita di un singolo elemento di contenuto. In questo modo, è possibile visualizzarlo.

Descrizione dell'illustrazione GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png

Modificare i file design.css, layout.html e render.js per ottenere il layout di contenuto desiderato.

Ad esempio, i file riportati di seguito specificano il layout di contenuto Employee-Card.

Modificare il file design.css:

.scs-tile-layout {
    font-family: 'Helvetica Neue', 'Segoe UI', sans-serif-regular, Helvetica, Arial;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    font-style: normal;
    color: #333;
}

.scs-tile-layout li {
    list-style: none;
    font-size: 14px;
    font-style: normal;
    font-variant-caps: normal;
    font-weight: 200;
    margin: 0px;
}

.scs-tile-layout-img-container {
    height: 150px;
    width: 100px;
    float: left;
    margin: 0em 0.5em 0em 0em;
    padding: 0px;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.scs-tile-layout-img {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    height: 100%;
    min-width: 100%;
}

.scs-tile-layout p {
    margin: 0px;
}

Modificare il file layout.html:

{{#data.employee_profile_pictureURL}}
<div class="scs-tile-layout-img-container">
    <img class="scs-tile-layout-img" src="{{data.employee_profile_pictureURL}}" />
</div>
{{/data.employee_profile_pictureURL}}
<ul class="scs-tile-layout">
    <li>
        <p><b>{{name}}</b></p>
    </li>
    <li>&nbsp;</li>
    <li>
        <p>{{data.employee_job_title}}</p>
        <p>{{data.employee_location}}</p>
        <p><b>Phone: </b>{{data.employee_phone}}</p>
    </li>
    {{#scsData.detailPageLink}}
    <li>
        <a href="{{scsData.detailPageLink}}" title="Go to detail page"><span class="detail-page">Profile</span></a>
    </li>
    {{/scsData.detailPageLink}}
</ul>

Modificare il file render.js:

/* globals define */

define([
    'jquery',
    'mustache',
    'text!./layout.html',
    'css!./design.css'
], function($, Mustache, templateHtml, css) {
    'use strict';

    function ContentLayout(params) {
        this.contentItemData = params.contentItemData || {};
        this.scsData = params.scsData;
        this.contentClient = params.contentClient || (params.scsData ? params.scsData.contentClient : null);
        // retrieve the custom settings
        this.customSettiings = this.scsData.customSettingsData
        || {};
    }

    ContentLayout.prototype = {

        render: function(parentObj) {
            var template,
                content = $.extend({}, this.contentItemData),
                contentClient = this.contentClient,
                contentType,
                secureContent = false;

            if (this.scsData) {
                content = $.extend(content, { 'scsData': this.scsData });
                contentType = content.scsData.showPublishedContent === true ? 'published' : 'draft';
                secureContent = content.scsData.secureContent;
            }

            if (contentClient) {
                var params = {
                    'itemGUID': typeof content.data.employee_profile_picture === 'string' ?
                        content.data.employee_profile_picture : content.data.employee_profile_picture.id,
                    'contentType': contentType,
                    'secureContent': secureContent
                };
                content.data.employee_profile_pictureURL = contentClient.getRenditionURL(params);
            }

            console.log(content);

            try {
                // Mustache
                template = Mustache.render(templateHtml, content);

                if (template) {
                    $(parentObj).append(template);
                }
            } catch (e) {
                console.error(e.stack);
            }
        }
    };

    return ContentLayout;
});

Per informazioni sulla modifica del file render.js e degli altri file, vedere Sviluppare i componenti.

Importare i file modificati per sostituire il layout di contenuto esistente.
1. Nella home page fare clic su Documenti.
2. Caricare il layout di contenuto modificato in una cartella, in un file con estensione .zip che includa la stessa cartella e i nomi file esportati.
  Se si desidera importare il layout come nuovo layout di contenuto, è necessario modificare il GUID del layout di contenuto in _folder.json.
3. Nella home page fare clic su Sviluppatore.
  Viene visualizzata la pagina Sviluppatore.
4. Fare clic su Visualizza tutti i componenti.
5. Nel menu Crea scegliere Importa componente.
6. Selezionare la casella di controllo accanto al file zip caricato che contiene il componente modificato, quindi fare clic su OK.
Il layout di contenuto modificato viene importato in Componenti.

È inoltre possibile esportare un layout di contenuto per copiarlo o spostarlo in un'altra istanza di Oracle Content Management ed eseguirne l'importazione dalla destinazione.