Etape 16 : gestion des ressources

Cette étape décrit et explique comment gérer les ressources utilisées par un composant.

Les ressources comprennent des composants et des composants personnalisés dont Oracle Content Management doit avoir connaissance pour gérer le cycle de vie des ressources.

Dossier content d'Oracle Content Management

Chaque site créé dans Oracle Content Management contient son propre dossier content. Il s'agit d'un dossier masqué qui n'est habituellement pas visible. Lorsque le site est publié, tous les fichiers du dossier content sont également publiés vers le système de fichiers.

Par exemple, lorsque vous sélectionnez une image à l'aide du composant d'image, Oracle Content Management copie l'image sélectionnée et la place dans le dossier content. Votre URL pointe toujours vers la version copiée de l'image. Ainsi, votre site ne sera pas interrompu si vous supprimez l'image d'origine. Il en va de même pour les autres composants fournis par Oracle Content Management : galerie, grille de galerie, document, barre Social, téléchargement de fichier en local, ainsi que les images d'arrière-plan pour slots et componentGroups.

Pour qu'un composant personnalisé prenne part à ce cycle de vie de ressource, il doit indiquer à Oracle Content Management toutes les ressources que le service doit gérer en son nom. Puisque cette opération implique la copie de la ressource, le composant personnalisé doit également utiliser les API Oracle Content Management pour sélectionner la ressource afin de savoir comment la gérer.

Gestion des URL

L'URL d'une ressource change en fonction d'un certain nombre de critères.

L'URL d'exécution d'un composant est différente de l'URL de générateur de site du composant.
Si vous copiez une page, Oracle Content Management copie également toutes les ressources référencées dans le dossier content afin de ne jamais avoir deux composants pointant vers la même ressource dans ce dossier.
Si vous faites glisser un élément componentGroup vers la page, toutes les ressources référencées par les composants de l'élément componentGroup sont à nouveau copiées.

Par ailleurs, si une URL relative peut fonctionner correctement pour un composant local, les composants distants requièrent quant à eux une URL qualifiée complète vers toutes les ressources qu'Oracle Content Management doit gérer en votre nom afin d'afficher leur cadre incorporé avec l'URL complète.

Puisque vous ne pouvez pas vous appuyer sur une URL statique, vous devez uniquement inclure les références à l'ID de la ressource dans votre code et extraire l'URL de la ressource lorsque vous voulez l'afficher.

Gestion des ressources

Les API de kit SDK Sites suivantes sont disponibles pour la gestion des ressources.

SitesSDK.getProperty('componentAssets', callback);

Cette API obtient le tableau des ressources actuelles.
Chaque entrée de ressource est constituée des éléments suivants :
- id : ID unique de la ressource.
- title : métadonnées de titre Oracle Content Management.
- description : métadonnées de description Oracle Content Management.
- fileName : nom d'origine du fichier sélectionné. Utile à des fins d'affichage dans le panneau des paramètres pour votre composant personnalisé afin que les utilisateurs sachent quel fichier ils ont sélectionné. Il ne s'agit pas du nom du fichier copié vers le dossier de contenu.
- source : URL de la ressource prenant en charge les macros. Cette valeur change au fil du temps et ne doit pas être référencée par votre composant, mais elle doit être enregistrée en tant que partie de la ressource.
- url : URL qualifiée complète de la ressource dépendant du contexte dans lequel getPropert() a été appelée.

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

Appelez cette API pour enregistrer toutes les ressources qu'Oracle Content Management doit gérer en votre nom.
Si vous ne l'appelez pas, aucune ressource ne sera enregistrée.
Toutes les ressources qui ne se trouvent pas dans ce tableau seront supprimées lors de la publication du site.
Le paramètre assets est un tableau de ressources dont le format est le même que celui renvoyé par getProperty et également par filePicker.

Remarque :
Aucune valeur url n'est stockée. La valeur est créée dynamiquement lorsque vous demandez les ressources.

SitesSDK.filePicker(options, callback);

API qui permet d'afficher le sélecteur de fichier afin de sélectionner la liste des ressources.
Elle appelle le callback lors de la sélection des ressources et transmet le tableau des ressources sélectionnées.
A ce stade, aucun élément n'est enregistré et c'est au composant d'appeler setProperty('componentAssets', [assets]); pour enregistrer les éléments de cette sélection et toute autre ressource à enregistrer.

Exemple de sélection de ressource

Cette section vous indique comment sélectionner une ressource, stocker son ID et extraire à nouveau les valeurs réelles à partir des ressources stockées.

Modifiez le fichier settings.html.

Modifiez l'objet de modèle pour inclure 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>

Modifiez viewModel pour ajouter un élément observable afin de stocker l'ID de la ressource sélectionnée.
```
self.imageID = ko.observable();
```

Modifiez viewModel pour gérer la sélection de la ressource en affichant le sélecteur de fichiers et en affichant le nom de la ressource sélectionnée.

//
// 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);

Mettez à jour viewModel pour extraire les ressources dans un premier temps, puis obtenir customSettingsData. Ce code engendre également l'appel de self.imageName lorsque l'élément observable self.ImageID() est modifié.

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;
    });
});

Enfin, mettez à jour la fonction save pour enregistrer imageID et veillez à mettre à jour componentAssets avec la liste des ressources référencées.

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);

Vérification des résultats de la sélection de ressource

Actualisez la page de votre site pour que le générateur de site puisse récupérer les modifications apportées au composant.
Passez la page en mode de modification.
Faites glisser le composant vers la page.
Affichez le panneau des paramètres.
Cliquez sur le bouton Sélectionner une image.
Accédez à l'image (ou téléchargez-la vers le serveur), puis sélectionnez-la.

Le nom de l'image est stocké en affichant l'image sélectionnée.
Fermez le panneau des paramètres.
Affichez à nouveau le panneau des paramètres.

Le nom de l'image apparaît à nouveau.

Exemple d'affichage de ressource

Cette section vous indique comment extraire les ressources et les afficher dans votre composant. Elle explique également comment faire en sorte que le composant se mette à jour dynamiquement lorsque les valeurs sont modifiées dans le panneau des paramètres.

Remarque :

Cet exemple utilise un composant local dans un cadre incorporé sur la page, mais un code similaire fonctionnera également avec les composants affichés de façon incorporée sur la page.

Modifiez le fichier render.html.

Mettez à jour le modèle pour inclure votre ressource.

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

Dans viewModel, créez deux éléments observables afin d'obtenir imageID à partir de customSetttingsData et stockez imageURL extrait de la liste stockée des ressources.
```
self.imageID = ko.observable();
self.imageURL = ko.observable();
```

Mettez à jour viewModel de sorte que si imageID est modifié, il obtient l'URL de ressource d'image correspondante.

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;
            }
        }
    });
});

Mettez à jour viewModel pour extraire l'ID à partir de customSettingsData.

Vérification des résultats de l'affichage de ressource

Actualisez la page de votre site pour que le générateur de site puisse récupérer les modifications apportées au composant.
Passez la page en mode de modification.
Faites glisser le composant vers la page.
Affichez le panneau des paramètres.
Cliquez sur le bouton Sélectionner une image.
Accédez à l'image (ou téléchargez-la vers le serveur), puis sélectionnez-la.

Le nom de l'image est stocké en affichant l'image sélectionnée.
Fermez le panneau des paramètres.

A ce stade, vous devriez voir l'image sélectionnée affichée dans le composant.

Passez à Récapitulatif du tutoriel.