Tworzenie układów zawartości za pomocą Oracle Content Management

Można utworzyć układ zawartości służący do układania pól w elemencie zawartości wyświetlanym na stronie serwisu. Jeśli element zawartości zostanie dodany do strony, będzie on używał wybranego układu zawartości.

Użytkownik firmowy może tworzyć i korzystać z elementów zawartości na podstawie udostępnionych przez programistę typów zawartości i układów. Można tworzyć nowe układy zawartości z układu domyślnego. Wiele układów zawartości powiązanych z określonym typem zawartości umożliwia projektantowi serwisów wyświetlanie elementów zawartości w różnych kontekstach, bez zmieniania zawartości.

Jeśli zostanie użyty układ zawartości ze składnika "lista zawartości", układ ten zostanie powtórzony raz na element zawartości. Układy zawartości są następnie rozmieszczane przez układ sekcji.

Układ zawartości można wyeksportować i zmodyfikować offline, a następnie zaimportować go jako zamiennik istniejącego układu zawartości.

Aby utworzyć układ zawartości, należy:

Na stronie startowej Oracle Content Management nacisnąć przycisk Programista (boczna nawigacja).
Zostanie wyświetlona strona Programista.
Nacisnąć przycisk Wyświetl wszystkie składniki.
Z rozwijanego menu Utwórz (po prawej stronie) wybrać opcję Utwórz układ zawartości.
W oknie dialogowym Tworzenie układu zawartości wybrać typy zawartości, które będą używały tego układu, wybrać wyświetlane pola oraz włączyć opcję Dodaj obsługę ustawień niestandardowych, gdy są one używane w serwisach (aby w kreatorach serwisów można było — podczas dodawania składników "element zawartości" i "lista zawartości" do strony — dodawać niestandardowe ustawienia i style).
Podać nazwę i opis składnika "układ zawartości", po czym nacisnąć przycisk Utwórz.

Układ zawartości zostanie dodany do składników.

Uwaga:
Tytuły układów zawartości mogą zawierać tylko znaki alfanumeryczne, łączniki i znaki podkreślenia.
Aby wyeksportować układ zawartości do edycji, wybrać go, po czym wybrać z menu podręcznego opcję Eksportuj albo kliknąć na ikonie (na pasku czynności).
1. Przejść do istniejącego folderu albo utworzyć nowy folder: wybrać kolejno opcje Utwórz i Folder, a następnie podać nazwę i opcjonalny opis.
2. Zaznaczyć pole wyboru obok folderu, po czym nacisnąć przycisk OK.
3. Aby otworzyć folder, kliknąć na jego ikonie lub nazwie.
W wybranym folderze zostanie utworzony plik pakietu układu mający nazwę układu zawartości i rozszerzenie .zip. Aby można było edytować pliki, należy pobrać plik do swojego środowiska programistycznego.

Pliki te kontrolują układ pól w elementach zawartości używających układu zawartości "Employee-Card". Jeśli zostanie włączona opcja Dodaj obsługę ustawień niestandardowych, gdy są one używane w serwisach, zostanie także utworzony dodatkowy plik o nazwie settings.html, udostępniający domyślny sposób renderowania elementu zawartości, dzięki czemu może być on wyświetlany.

Opis rysunku "GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png"

Edytować pliki design.css, layout.html i render.js, tak aby uzyskać odpowiedni układ zawartości.

Na przykład poniższe pliki określają układ zawartości "Employee-Card":

Edytować plik 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;
}

Edytować plik 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>

Edytować plik 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;
});

Informacje o edytowaniu pliku render.js i innych plików są dostępne pod hasłem Tworzenie składników.

Aby zastąpić istniejący układ zawartości, zaimportować zmodyfikowane pliki.
1. Na stronie startowej wybrać opcję Dokumenty.
2. Wysłać zmodyfikowany układ zawartości do folderu (plik z rozszerzeniem .zip), zawierającego te same nazwy folderów i plików, które zostały wyeksportowane.
  Aby zaimportować układ zawartości jako nowy, trzeba w pliku _folder.json zmienić GUID układu zawartości.
3. Na stronie startowej wybrać opcję Programista.
  Zostanie wyświetlona strona Programista.
4. Nacisnąć przycisk Wyświetl wszystkie składniki.
5. Z menu Utwórz wybrać opcję Importuj składnik.
6. Zaznaczyć pole wyboru obok przesłanego pliku zip, zawierającego zmodyfikowany składnik, po czym nacisnąć przycisk OK.
Zmodyfikowany układ zawartości zostanie zaimportowany do składników.

Można także wyeksportować układ zawartości, aby skopiować go lub przenieść (zaimportować) do innej instancji Oracle Content Management.