16. lépés: Forrásanyagok kezelése

Az Oracle Content Management content mappája

Az Oracle Content Management szolgáltatásban létrehozott minden webhelyhez tartozik egy saját content mappa. Ez rejtett mappa, amelyet a felhasználó nem lát. A webhely közzétételekor a content mappában lévő összes fájlt is közzéteszi a rendszer a fájlrendszerben.

Például amikor a kép összetevő használatával kijelöl egy képet, az Oracle Content Management elkészíti a kijelölt kép másolatát, és elhelyezi azt a content mappában. URL-címe mindig a kép másolt változatára mutat, így az eredeti kép törlése nem érinti a webhely működését. Ez érvényes az Oracle Content Management többi összetevőjére is: galéria, galériarács, dokumentum, közösségi sáv, fájlletöltés, valamint a rekeszek és a componentGroup objektumok háttérképeire.

Ha egy egyéni összetevő részt kíván venni a forrásanyag életciklusában, az egyéni összetevőnek be kell jelentenie az Oracle Content Management szolgáltatásnak minden olyan forrásanyagot, amelynek kezelését a szolgáltatásra kívánja bízni. Mivel ez a forrásanyag másolatának elkészítésével jár, az egyéni összetevőnek is az Oracle Content Management API felületeit kell használnia a forrásanyag kijelöléséhez, hogy a rendszer ismerje kezelésének módját.

URL-címek kezelése

A forrásanyagra mutató URL-cím számos feltételtől függően változik.

• Az összetevőre mutató futásidejű URL-cím eltér az összetevőre mutató Site Builder szerkesztőbeli URL-címtől

• Ha oldalt másol, az Oracle Content Management is elkészíti a content mappában lévő összes hivatkozott forrásanyag másolatát, így sohasem lesz két olyan összetevő, amely a content mappában lévő ugyanazon forrásanyagra mutat

• Egy componentGroup oldalra való húzása új másolatokat készít az ebben lévő összetevők által hivatkozott minden forrásanyagról

Bár a relatív URL-cím megfelelő lehet a helyi összetevőknél, a távoli összetevők esetében teljesen megadott URL-cím szükséges minden olyan forrásanyagnál, amelynek kezelését az Oracle Content Management szolgáltatásra kívánja bízni, hogy a teljes URL-címmel meg tudják jeleníteni beágyazott keretük tartalmát.

Mivel nem számíthat arra, hogy az URL-cím statikus marad, csak a forrásanyag kódban lévő azonosítójára mutató hivatkozásokat kell megtartania, és le kell kérnie a forrásanyag URL-címét, amikor meg kívánja jeleníteni a forrásanyagot.

Forrásanyagok kezelése

A forrásanyagok kezeléséhez a következő Sites SDK API felületek állnak rendelkezésre.

SitesSDK.getProperty('componentAssets', callback);

• Ez az aktuális forrásanyagok tömbjét olvassa be

• Minden forrásanyag-bejegyzés a következőket tartalmazza:

  • id: a forrásanyag egyedi azonosítója.

  • title: az Oracle Content Management cím metaadata.

  • description: az Oracle Content Management leírás metaadata.

  • fileName: a kijelölt fájl eredeti neve. Egyéni összetevőjénél a Beállítások panelen való megjelenítésnél hasznos, így a felhasználók tudni fogják, hogy melyik fájlt jelölték ki. Ez nem a content mappába másolt fájl neve.

  • source: a forrásanyagra mutató makróbarát URL-cím. Ez az érték idővel változni fog, és összetevőjének nem szabad hivatkoznia erre, de a forrásanyag részeként menteni kell.

  • url: a forrásanyagra mutató teljesen megadott URL-cím a getPropert() hívási környezete alapján.

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

• Ennek hívásával mentheti az összes olyan forrásanyagot, amelynek kezelését az Oracle Content Management szolgáltatásra kívánja bízni.

• Ha nem hívja a felületet, nem ment forrásanyagot a rendszer.

• Az ebben a tömbben nem szereplő forrásanyagok törölve lesznek a webhely közzétételekor.

• Az assets paraméter forrásanyagok tömbje a getProperty által visszaadott formátumban, és ezt adja vissza a filePicker is.

  Megjegyzés:

  Az url értékét nem tárolja a rendszer. Ezt dinamikusan hozza létre a forrásanyagok lekérésekor.

SitesSDK.filePicker(options, callback);

• API felület a fájlválasztó megnyitásához a forrásanyagok listájának kijelöléséhez.

• Forrásanyagok sikeres kijelölésekor a callback hívása a kijelölt forrásanyagok tömbjének átadásához.

• Ekkor semmit sem ment a rendszer, és az összetevőtől függ a setProperty('componentAssets', [assets]); hívása a kijelölésből elemek mentéséhez más menteni kívánt forrásanyagokkal egyesítve.

Példa forrásanyag kijelölésére

Ebben a szakaszban a következő műveleteket ismerheti meg: forrásanyagok kijelölés, azonosítójuk tárolása és a tényleges értékek újbóli behívása a tárolt forrásanyagokból.

1. Szerkessze a settings.html fájlt.

2. Módosítsa a sablon objektumot egy Image selection szakasz felvételével.

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

3. Módosítsa a viewModel objektumot egy observable (megfigyelhető) elem hozzáadásával a kijelölt forrásanyag azonosítójának tárolásához.

   self.imageID = ko.observable();

4. Módosítsa a viewModel objektumot a forrásanyag kijelölésének kezeléséhez a fájlválasztó megnyitásával és a kijelölt forrásanyag nevének megjelenítésével.

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

5. Módosítsa a viewModel objektumot úgy, hogy a customSettingsData beolvasása előtt kérje le a forrásanyagokat. Ez a kód egyúttal a self.imageName hívását eredményezi, amikor a self.ImageID() observable elem megváltozik.

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

6. Végül módosítsa a save függvényt úgy, hogy mentse az imageID azonosítót, és a hivatkozott forrásanyagok listájával frissítse a componentAssets paramétert.

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

A forrásanyag kijelölése eredményeinek ellenőrzése

1. Frissítse az oldalt webhelyén, így a Site Builder át tudja venni az összetevő módosításait.

2. Jelenítse meg az oldalt szerkesztési módban.

3. Húzza át összetevőjét az oldalra.

4. Nyissa meg a Beállítások panelt.

5. Kattintson a Select image gombra.

6. Tallózás (vagy feltöltés) után jelöljön ki egy képet.

   Figyelje meg, hogy a kép neve tárolva van a kijelölt kép megjelenítésénél.

7. Zárja be a Beállítások panelt.

8. Nyissa meg újra a Beállítások panelt.

   Figyelje meg, hogy a kép neve ismét megfelelő.

Példa forrásanyag megjelenítésére

Ebben a szakaszban a következő műveleteket ismerheti meg: összetevők lekérése és megjelenítésük az összetevőben, az összetevő dinamikus frissítése, amikor az értékek megváltoznak a beállítási panelen.

1. Szerkessze a render.html fájlt.

2. Módosítsa a sablont forrásanyag felvételével:

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

3. A viewModel objektumban hozzon létre két observable elemet a imageID beolvasásához a customSetttingsData adataiból és a forrásanyagok tárolt listájából lekért imageURL tárolásához.

   self.imageID = ko.observable();
   self.imageURL = ko.observable();

4. Módosítsa a viewModel objektumot úgy, hogy amikor az imageID megváltozik, beolvassa a megfelelő kép forrásanyag URL-címét.

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

5. Módosítsa a viewModel objektumot úgy, hogy lekérje az azonosítót a customSettingsData adataiból.

A forrásanyag megjelenítése eredményeinek ellenőrzése

1. Frissítse az oldalt webhelyén, így a Site Builder át tudja venni az összetevő módosításait.

2. Jelenítse meg az oldalt szerkesztési módban.

3. Húzza át összetevőjét az oldalra.

4. Nyissa meg a Beállítások panelt.

5. Kattintson a Select image gombra.

6. Tallózás (vagy feltöltés) után jelöljön ki egy képet.

   Figyelje meg, hogy a kép neve tárolva van a kijelölt kép megjelenítésénél.

7. Zárja be a Beállítások panelt.

   Ekkor az összetevőben megjelenítve kell látnia a kijelölt képet.

A következő témakör: Az oktatóanyag áttekintése.