Paso 14: Usar los estilos personalizados cuando el componente se representa en un marco en línea.

Los componentes que se representan en un marco en línea no tienen acceso directo al archivo design.css. En su lugar, hay un paso adicional para obtener la URL para el design.css de su componente y agregarlo a la página. Debe actualizar el componente para reflejar el estilo seleccionado por el usuario.

Para incluir y usar el archivo design.css en su componente, es necesario hacer cambios en el archivo render.html:

Busque e incluya la URL en el archivo design.css.
Obtenga el valor de la clase de estilo de selección siempre que cambie.
Actualice la plantilla para reflejar el valor styleClass seleccionado.
Refleje los cambios en la clase de estilo seleccionada del componente.
Asegúrese de que cambia el tamaño del marco en línea cuando se modifique el estilo.

Estas son las instrucciones detalladas para editar el archivo render.html:

Busque e incluya la URL en el archivo design.css.

Agregue dinámicamente el archivo design.css a la sección <head> de la página. Una vez que se haya cargado, defina la altura del marco en línea, puesto que es posible que se haya visto alterada al aplicar los estilos.

Agregue el siguiente código al objeto viewModel:

// Dynamically add any theme design URL to the <head> of the page
self.loadStyleSheet = function (url) {
    var $style,
        styleSheetDeferred = new $.Deferred(),
        attempts = 100,
        numAttempts = 0,
        interval = 50,
        pollFunction = function () {
            // try to locate the style sheet
            for (var i = 0; i < document.styleSheets.length; i++) {
                try {
                    // locate the @import sheet that has an href based on our expected URL
                    var sheet = document.styleSheets[i],
                        rules = sheet && sheet.cssRules,
                        rule = rules && rules[0];
                    // check whether style sheet has been loaded
                    if (rule && (rule.href === url)) {
                        styleSheetDeferred.resolve();
                        return;
                    }
                } catch (e) {}
            }
            if (numAttempts < attempts) {
                numAttempts++;
                setTimeout(pollFunction, interval);
            } else {
                // didn't find style sheet so complete anyway
                styleSheetDeferred.resolve();
            }
        };
 
    // add the themeDesign stylesheet to <head>
    // use @import to avoid cross domain security issues when determining when the stylesheet is loaded
    $style = $('<style type="text/css">@import url("' + url + '")</style>');
    $style.appendTo('head');
 
    // kickoff the polling
    pollFunction();
 
    // return the promise
    return styleSheetDeferred.promise();
};
 
// update with the design.css from the Sites Page
SitesSDK.getSiteProperty('themeDesign', function (data) {
    if (data && data.themeDesign && typeof data.themeDesign === 'string') {
        // load the style sheet and then set the height
        self.loadStyleSheet(data.themeDesign).done(self.setHeight);
    }
});

Obtenga el valor de la clase de estilo de selección siempre que cambie.

Cree un observable para realizar el seguimiento de los cambios en la propiedad styleClass:

self.selectedStyleClass = ko.observable();

Tenga en cuenta que no es posible representarlo hasta que no tengamos la clase de estilo. Cambie este código:

self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized();
}, self);

Use este código en su lugar:

self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);

Obtenga el valor inicial de la clase de estilo seleccionada agregando:

self.updateStyleClass = function (styleClass) {
    self.selectedStyleClass((typeof styleClass === 'string') ? styleClass : 'hello-world-default-style'); // note that this 'hello-world' prefix is based on the app name
    self.styleClassInitialized(true);
};
SitesSDK.getProperty('styleClass', self.updateStyleClass);

Actualice la plantilla para reflejar el valor styleClass. Cambie este código:

<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>

Use este código en su lugar:

<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>

Refleje los cambios en la clase de estilo seleccionada del componente. Cambie este código:

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}

Use este código en su lugar:

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
    self.updateStyleClass(settings.value);
}

Asegúrese de que cambia el tamaño del marco en línea cuando se modifique el estilo. Cambie este código:

// create dependencies on any observables so this handler is called whenever it changes
var imageWidth = viewModel.imageWidth(),
      imageUrl = viewModel.imageUrl(),
      titleText = viewModel.titleText(),
      userText = viewModel.userText();

Use este código en su lugar:

// create dependencies on any observables so this handler is called whenever it changes
var imageWidth = viewModel.imageWidth(),
      imageUrl = viewModel.imageUrl(),
      titleText = viewModel.titleText(),
      userText = viewModel.userText(),
      selectedStyleClass = viewModel.selectedStyleClass();

Guarde y sincronice sus archivos en el servidor de instancias de Oracle Content Management.

Compruebe los resultados del paso 14

Refresque la página del sitio para que el creador de sitios pueda seleccionar los cambios del componente.
Cambie la página al modo de edición.
Arrastre y suelte el componente en la página.
Abra el panel de configuración del componente.
Vaya al separador Estilo.
Cambie entre los estilos Gótico y Sin formato definidos en el archivo design.json.

Observará que el tamaño de la fuente del componente se ajusta para reflejar los cambios conforme cambia la clase CSS aplicada para cada selección.

Continúe con Paso 15: Integración con el comportamiento Deshacer y Rehacer página.