Adım 16: Varlık Yönetimi

Bu adımda bir bileşen tarafından kullanılan varlıkların nasıl yönetileceği açıklanır.

Varlıklar, Oracle Content Management uygulamasının varlıkların yaşam döngüsünü yönetmek için bilmesi gereken bileşenleri ve özel bileşenleri kapsar.

Oracle Content Management içerik Klasörü

Oracle Content Management uygulamasında oluşturduğunuz her site kendi content klasörüne sahiptir. Bu normalde görmeyeceğiniz gizli bir klasördür. Site yayımlandığında, content klasöründeki tüm dosyalar dosya sisteminde yayımlanır.

Örneğin, Görüntü bileşenini kullanarak bir görüntü seçtiğinizde, Oracle Content Management seçtiğiniz görüntünün bir kopyasını oluşturur ve onu content klasörüne yerleştirir. Orijinal görüntüyü sildiğinizde sitenizin bozulmaması için URL'niz her zaman görüntünün bu kopyalanan sürümüne gider. Bu, Oracle Content Management tarafından sağlanan diğer bileşenler için de geçerlidir: Galeri, Galeri Grid'i, Doküman, Sosyal Ağ Çubuğu, Dosya İndirme, yuvalara yönelik arka plan görüntüleri ve componentGroups.

Bir özel bileşenin varlık yaşam döngüsüne dahil olması için özel bileşenin Oracle Content Management uygulamasına kendi yerine hizmetin yönetmesini istediği varlıkları bildirmesi gerekir. Bu işlem varlığın bir kopyasını oluşturmayı içerdiğinden, nasıl yönetileceğini bilmemiz için varlığı seçmek üzere özel bileşenin Oracle Content Management uygulama programı arabirimlerini de kullanması gerekir.

URL'leri Yönetme

Bir varlığın URL'si birtakım ölçütlere göre değişir.

  • Bir bileşenin çalıştırma zamanı URL'si, bileşenin Site Builder URL'sinden farklıdır.

  • Bir sayfayı kopyalarsanız, content klasöründe aynı varlığa işaret eden iki bileşeniniz olmaması için Oracle Content Management content klasöründe referans gösterilen tüm varlıkların bir kopyasını oluşturur.

  • Sayfaya bir componentGroup sürüklendiğinde, componentGroup'taki bir bileşen tarafından referans gösterilen varlıklar için yeni kopyalar oluşturulur.

Ayrıca, yerel bileşen için görece URL yeterli olsa da uzak bileşenler, Oracle Content Management uygulamasının sizin adınıza yönetmesini istediğiniz varlıkların tam URL ile satır içi çerçeve içeriklerinde görüntülenebilmeleri için uzak bileşenler bu varlıkların tam nitelenmiş URL'lerini gerektirir.

URL'nin statik kalacağı kesin olmadığından sadece kodunuzdaki varlıkların no'suna yönelik referansları tutmalı ve varlığı görüntülemek istediğinizde varlığın URL'sini almalısınız.

Varlıkları Yönetme

Varlıkları yönetmek için bu Siteler Yazılım Geliştirme Kiti Uygulama Programı Arabirimleri kullanılabilir.

SitesSDK.getProperty('componentAssets', callback);

  • Geçerli varlıkların dizisini alır

  • Her varlık girişi şunlardan oluşur:

    • id: Varlığın benzersiz tanımlayıcısı.

    • başlık: Oracle Content Management başlık meta verisi.

    • açıklama: Oracle Content Management açıklama meta verisi.

    • fileName: Seçili dosyanın orijinal adı. Kullanıcıların hangi dosyayı seçtiklerini bilmeleri amacıyla özel bileşeninizin Ayarlar panelinde görüntülemek için yararlıdır. Bu, content klasörüne kopyalanan dosyanın adı değildir.

    • source: Varlığın makro etkin URL'si. Bu değer zaman içinde değişir ve bileşeniniz tarafından referans gösterilmemelidir, ancak varlığın parçası olarak kaydedilmelidir.

    • url: getPropert() yönteminin çağrıldığı bağlama göre varlığın tam nitelenmiş URL'si.

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

  • Oracle Content Management uygulamasının adınıza yönetmesini istediğiniz tüm varlıkları kaydetmek için bunu çağırın.

  • Bunu çağırmazsanız hiçbir varlık kaydedilmez.

  • Site yayımlandığında bu dizide olmayan tüm varlıklar silinir.

  • assets parametresi, getProperty ve filePicker tarafından döndürülenle aynı formatta bir varlık dizisidir.

    Not:

    Hiçbir url değeri saklanmaz. Bu değer, varlık istediğinizde dinamik olarak oluşturulur.

SitesSDK.filePicker(options, callback);

  • Varlık listesini seçmek için dosya seçiciyi açan bir uygulama programı arabirimi.

  • Başarıyla seçilen varlıklarda geri çağırmayı çağırır ve seçili varlıkların dizisini iletir.

  • Bu aşamada hiçbir şey kaydedilmez ve kaydedilecek diğer varlıklarla birlikte bu seçimdeki öğeleri kaydetmek için setProperty('componentAssets', [assets]); öğesini çağırmak bileşenin kararıdır.

Varlık Seçme Örneği

Bu bölümde varlık seçimi, varlığın no'sunu saklama ve saklanan varlıklardan fiili değerleri yeniden getirme konuları gösterilir.

  1. settings.html dosyasını düzenleyin.

  2. Şablon nesnesini Image selection içerecek şekilde değiştirin.

    <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. Seçili varlığın no'sunu saklamak için bir gözlemlenebilir öğe eklemek üzere viewModel'ı değiştirin.

    self.imageID = ko.observable();

  4. Dosya seçiciyi açıp seçili varlığın adını görüntüleyerek varlığın seçimini yönetmek için viewModel'ı değiştirin.

    //
// 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. customSettingsData öğesini almadan önce varlıkları almak için viewModel'ı güncelleyin. Bu kod, self.ImageID() gözlemlenebilir öğesi değiştiğinde self.imageName öğesinin çağrılmasına da neden olur.

    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. Son olarak, imageID öğesini kaydetmek için save fonksiyonunu güncelleyin ve componentAssets öğesini referans gösterilen varlıklarınızın listesiyle güncellediğinize emin olun.

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

Varlık Seçimi Sonuçlarını Kontrol Edin

  1. Site Builder'ın bileşendeki değişiklikleri alabilmesi için sitenizde sayfanızı yenileyin.

  2. Sayfayı Düzenleme moduna alın.

  3. Bileşeninizi sayfaya sürükleyin.

  4. Ayarlar panelini açın.

  5. Görüntü seç düğmesine tıklayın.

  6. Gözatın (veya karşıya yükleyin) ve bir görüntü seçin.

    Görüntünün adının, seçili görüntüyü gösterecek şekilde saklandığına dikkat edin.

  7. Ayarlar panelini kapatın.

  8. Ayarlar panelini yeniden açın.

    Görüntünün adının yeniden yansıtıldığına dikkat edin.

Varlık Görüntüleme Örneği

Bu bölümde, varlıkları alma ve bileşeninizde görüntülemenin yanı sıra ayarlar panelinizde değerler her değiştiğinde bileşenin dinamik olarak güncellenmesi açıklanır.

Not:

Bu, sayfada satır içi çerçevede bulunan bir yerel bileşene yönelik bir örnek gösterse de, sayfada satır içi görüntülenen bileşenler için benzer bir kod çalışacaktır.

  1. render.html dosyasını düzenleyin.

  2. Şablonu varlığınızı içerecek şekilde güncelleyin:

    <!-- 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. viewModel'da, customSetttingsData'dan imageID'yi almak için iki gözlemlenebilir öğe oluşturun saklanan varlıklar listesinden alınan imageURL'i saklayın.

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

  4. imageID her değiştiğinde ilgili görüntü varlığı URL'sini alması için viewModel'ı güncelleyin.

    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. customSettingsData'dan no'yu almak için viewModel'ı güncelleyin.

Varlık Görüntüleme Sonuçlarını Kontrol Edin

  1. Site Builder'ın bileşendeki değişiklikleri alabilmesi için sitenizde sayfanızı yenileyin.

  2. Sayfayı Düzenleme moduna alın.

  3. Bileşeninizi sayfaya sürükleyin.

  4. Ayarlar panelini açın.

  5. Görüntü seç düğmesine tıklayın.

  6. Gözatın (veya karşıya yükleyin) ve bir görüntü seçin.

    Görüntünün adının, seçili görüntüyü gösterecek şekilde saklandığına dikkat edin.

  7. Ayarlar panelini kapatın.

    Bu aşamada, seçtiğiniz görüntünün bileşende görüntülendiğini görmelisiniz.

Eğitim Programı Değerlendirmesi bölümüne devam edin.