Paso 16: Gestionar archivos

En este paso, se describe y se explica cómo gestionar los activos que usa un componente.

Los activos incluyen componentes y componentes personalizados que Oracle Content Management debe conocer para gestionar el ciclo de vida de los activos.

Carpeta de contenido de Oracle Content Management

Cada sitio que crea en Oracle Content Management posee su propia carpeta content. Esta es una carpeta oculta que no verá normalmente. Cuando se publica el sitio, todos los archivos de la carpeta content se publican también en el sistema de archivos.

Por ejemplo, cuando selecciona una imagen mediante el componente de imagen, Oracle Content Management copia la imagen seleccionada y la coloca en la carpeta de contenido. La URL siempre apunta a esta versión copiada de la imagen, por lo que si borra la imagen original, el sitio no dejará de funcionar. Esto también es aplicable a los demás componentes proporcionados por Oracle Content Management: galería, cuadrícula de galería, documento, barra social, descarga de archivos, imágenes de fondo para espacios y grupos de componentes.

Para que un componente personalizado tome parte en el ciclo de vida de este activo, dicho componente debe indicar a Oracle Content Management los activos que desea que el servicio gestione en su lugar. Al ser necesario hacer una copia del activo, el componente personalizado también debe usar las API de Oracle Content Management para seleccionar el activo y que sepamos cómo gestionarlo.

Gestionar URL

La URL de un activo cambia en función de ciertos criterios.

La URL de tiempo de ejecución a un componente es diferente a la URL del creador de sitios al componente.
Si copia una página, Oracle Content Management también hace una copia de todos los activos a los que se hace referencia en la carpeta de contenido para no tener dos componentes apuntando al mismo activo en la carpeta de contenido.
Al soltar un componentGroup en la página, se hacen copias nuevas para cualquiera de los activos a los que un componente hace referencia en componentGroup.

Además, mientras que una URL relativa es correcta para un componente local, los componentes remotos requieren una URL totalmente completa para cualquier activo que desee que Oracle Content Management gestione en su nombre, de forma que puedan representar el contenido del marco en línea con la URL completa.

Debe retener referencias al ID del activo en el código y recuperar la URL del activo cuando desee representarlo, puesto que es posible que la URL no permanezca estática.

Gestión de activos

Las API del SDK de Sites están disponibles para la gestión de activos.

SitesSDK.getProperty('componentAssets', callback);

Permite obtener la matriz de los activos actuales.
Cada entrada del activo consta de:
- id: ID único para el activo.
- title: metadatos del título de Oracle Content Management.
- description: metadatos de la descripción de Oracle Content Management.
- fileName: nombre original del archivo seleccionado. Útil para mostrarlo en el panel de configuración del componente personalizado y que los usuarios conozcan qué archivo han seleccionado. Este no es el nombre del archivo copiado en la carpeta de contenido.
- source: URL con macros para el activo. Este valor cambiará con el tiempo y puede que el componente no haga referencia a él, sin embargo, debe guardarse como parte del activo.
- url: URL totalmente cualificada para el activo basada en el contexto en el que se llamó a getPropert().

SitesSDK.setProperty('componentAssets', [assets]);

Llame a esto para guardar todos los activos que desea que Oracle Content Management gestione en su nombre.
Si no lo llama, no se guardarán los activos.
Todos los activos que no estén en esta matriz se suprimirán cuando se publique el sitio.
El parámetro assets es una matriz de activos con el mismo formato que devuelve getProperty y que también devuelve filePicker.

Nota:
No se ha almacenado ningún valor url. Ese valor se crea dinámicamente cuando solicita los activos.

SitesSDK.filePicker(options, callback);

API para abrir el selector de archivos y seleccionar la lista de activos.
Llama a la devolución de llamada en la selección de activos correcta transfiriendo la matriz de los activos seleccionados.
En este punto, no se guarda nada y depende del componente que llame a setProperty('componentAssets', [assets]); para guardar los elementos de esta selección junto con otros activos que haya que guardar.

Ejemplo de selección de activos

En esta sección se muestra cómo seleccionar un activo, almacenar su ID y recuperar los valores actuales de los activos almacenados.

Edite el archivo settings.html.

Cambie el objeto de la platilla para incluir Image selection.

<div>
    <!-- Image selection -->
    <label id="imageLabel" for="imageAsset" class="settings-heading" data-bind="text: 'Image'"></label>
    <input id="imageAsset" data-bind="value: imageName" readonly class="settings-text-box">
    <button id="imageSelect" type="button" class="selectbutton" data-bind="click: showFilePicker">Select Image</button>
</div>

Cambie viewModel para agregar un observable que almacene la ID del activo seleccionado.
```
self.imageID = ko.observable();
```

Cambie viewModel para gestionar la selección de activos mediante el seleccionador de archivos y mostrando el nombre del activo seleccionado.

//
// handle component assets
//
self.assets = []
 
// bring up a file picker to select the assets
self.showFilePicker = function () {
    // select an image
    SitesSDK.filePicker({
        'multiSelect': false,
        'supportedFileExtensions': ['jpg', 'png']
    }, function (result) {
        if (result.length === 1) {
            // update the array of assets
            self.assets = result;
 
            // update the image in customSettingsData
            self.imageID(result[0].id);
        }
    });
};
 
// update the display name based on the assets
self.imageName = ko.computed(function () {
    var imageName = '',
        imageID = self.imageID();
    for (var i = 0; i < self.assets.length; i++) {
        if (self.assets[i].id === imageID) {
            imageName = self.assets[i].fileName;
            break;
        }
    }
 
    return imageName
}, self);

Actualice viewModel para recuperar los activos antes de obtener customSettingsData. Este código también llamará a self.imageName cuando el observable self.ImageID() cambie.

SitesSDK.getProperty('componentAssets', function (assets) {
    self.assets = assets;
    SitesSDK.getProperty('customSettingsData', function (data) {
        //update observable
        self.imageWidth(data.imageWidth);
        self.imageID(data.imageID);
        self.titleText(data.titleText);
        self.userText(data.userText);
 
        // note that viewModel is initialized and can start saving data
        self.initialized(true);
        self.saveData = true;
    });
});

Por último, actualice la función save para guardar imageID y asegúrese de que actualiza componentAssets con la lista de activos a los que se hace referencia.

self.save = ko.computed(function () {
    var saveconfig = {
        'imageWidth': isNaN(self.imageWidth()) ? self.imageWidth() : self.imageWidth() + 'px',
        'imageID': self.imageID(),
        'titleText': self.titleText(),
        'userText': self.userText()
    };
 
    // store the selected asset and update custom settings
    if (self.saveData) {
        SitesSDK.setProperty('componentAssets', self.assets);
        SitesSDK.setProperty('customSettingsData', saveconfig);
    }
}, self);

Compruebe los resultados de la selección de activos

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.
Haga clic en el botón Seleccionar imagen.
Busque (o cargue) y seleccione una imagen.

Tenga en cuenta que el nombre de la imagen se almacena mostrando la imagen seleccionada.
Cierre el panel de configuración.
Vuelva a abrir el panel de configuración.

Tenga en cuenta que el nombre de la imagen vuelve a reflejarse.

Ejemplo de representación de activos

En esta sección se muestra cómo recuperar los activos y representarlos en el componente, además de actualizar el componente dinámicamente cuando cambien los valores en el panel de configuración.

Nota:

A pesar de que se muestra un ejemplo para un componente local que está en un marco en línea en la página, un código similar también funciona para los componentes representados en línea en la página.

Edite el archivo render.html.

Actualice la plantilla para incluir el activo.

<!-- ko if: imageURL -->
<div style="flex-shrink:0;">
    <img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" />
</div>
<!-- /ko -->

En viewModel, cree dos observables para obtener el valor imageID de customSetttingsData y almacenar imageURL, recuperada de la lista de activos almacenada.
```
self.imageID = ko.observable();
self.imageURL = ko.observable();
```

Actualice viewModel para que siempre que cambie imageID, obtenga la URL de activo de imagen correspondiente.

self.imageID.subscribe(function (imageID) {
    // whenever the image changes get the updated referenced asset
    SitesSDK.getProperty('componentAssets', function (assets) {
        for (var i = 0; i < assets.length; i++) {
            if (assets[i].id === imageID) {
                self.imageURL(assets[i].url);
                break;
            }
        }
    });
});

Actualice viewModel para recuperar la ID de customSettingsData.

Compruebe los resultados de la representación de activos

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.
Haga clic en el botón Seleccionar imagen.
Busque (o cargue) y seleccione una imagen.

Tenga en cuenta que el nombre de la imagen se almacena mostrando la imagen seleccionada.
Cierre el panel de configuración.

En este punto, debería ver la imagen que ha seleccionado representada en el componente.

Continúe con Revisión del tutorial.