Adım 3: Yerel Bileşen Ayarlarının Yapısını Gözden Geçirme

Bu adımda yerel bir bileşen için belirlenen ayarların yapısını gözden geçireceğiz.

/assets dizinindeki render.js dosyasına benzer şekilde aynı dizinde önceden oluşturulmuş bir settings.html dosyası vardır. settings.html dosyası bileşeninize yönelik özel ayar verilerini işler. Uygulama öndeğerinde, özel ayar verilerinde tek bir imageWidth niteliği vardır.

Yerel bileşeninizin yapısını gözden geçirmek için:

1. Oracle Content Management masaüstü senkronizasyonu istemcisini kullanarak bileşeninizi bulun ve dosya sistemiyle eşzamanlı kılın.

   Masaüstü senkronizasyonu istemciniz yoksa, Oracle Content Management web arayüzünün Bileşenler sekmesinde bileşeni seçip detaya giderek dosyaları görebilirsiniz.

2. Bileşen altındaki dosyaları listelerseniz şu dosyaları görürsünüz:

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

/assets dizinindeki settings.html dosyasını açın ve içeriği gözden geçirin. render.js dosyasının aksine, settings.html dosyası Site Builder'daki Ayarlar panelinde bir satır içi çerçeve kullanır. Bu nedenle satır içi çerçeve içinde doğru şekilde görüntülenmesi için destek dosyalara da erişebilmesi gerekir. Sitenizi yönetmek için Site Builder gereklidir. JavaScript kodunuzdaki hatalar Site Builder'dan ayrılabilir. settings.html bu nedenle bir satır içi çerçeve kullanır.

settings.html dosyasının ana alanları şunlardır:

• Ayarlar panelini görüntülemeye yönelik Knockout Şablonu.

  <!-- ko if: initialized() -->
  <div class="scs-component-settings">
    <div>
      <!-- Width -->
      <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
      <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
    </div>
  </div>
  <div data-bind="setSettingsHeight: true"></div>
  <!-- /ko -->

• Ayarlar paneli görüntülendikten sonra satır içi çerçevenin yüksekliğini ayarlamaya yönelik Özel Bağlama İşleyicisi.

  ko.bindingHandlers.scsCompComponentImpl

• Knockout Şablonuna uygulanacak bir Knockout ViewModel.

  SettingsViewModel

SettingsViewModel öğesinin ana öğeleri şunlardır:

• Bileşen yaşam döngüsü abonelikleri.

• Bileşen başlatma:

  • Tüm veriler getirilene kadar bileşenin görüntülenmediğine emin olun. Bu işlem Knockout gözlemlenebilir öğeleri ile yapılır.

    self.initialized = ko.observable(false);

  • Hazır olana kadar verileri güncellemeye çalışmadığınıza emin olun.

    self.saveData = false;

  • Gerekli nitelikler için başlangıç değerlerini alın. Bu işlem veriyi almak için geri çağırmalar tarafından yapılır.

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

• Özel ayar verilerinde yapılan nitelik değişikliklerini kaydedin.

      self.save = ko.computed(function () {
        var saveconfig = {
          'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
        };
  
        // save data in page
        if (self.saveData) {
          SitesSDK.setProperty('customSettingsData', saveconfig);
        }
      }, self);

Yakalamak istediğiniz başka bir niteliği eklemek için birkaç adım gereklidir:

1. Yeni değeri görüntülemek için kullanıcı arayüzünü güncelleyin.

2. Değeri bileşen için saklanan geçerli değere başlatın.

3. Değerde yapılan değişiklikleri bileşene kaydedin.

Özel bileşeninize başka bir nitelik eklemek için settings.html dosyasında şu değişiklikleri yapın:

1. Yeni niteliği idare edecek başka bir gözlemlenebilir öğe ekleyin. Şu kodu değiştirin:

   self.width = ko.observable();

   Onun yerine şu kodu kullanın:

   self.width = ko.observable();
   self.imageBannerText = ko.observable();

2. Ayarlar paneli ilk kez görüntülendiğinde yeni nitelik için geçerli değeri alın. Şu kodu değiştirin:

   self.width(data.width);

   Onun yerine şu kodu kullanın:

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. Bu yeni nitelikteki değişiklikleri kaydedin. Şu kodu değiştirin:

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

   Onun yerine şu kodu kullanın:

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. Yeni alanı görüntülemek için bir kullanıcı arayüzü ekleyin. Şu kodu değiştirin:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

   Onun yerine şu kodu kullanın:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
   
   <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
   <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

5. settings.html dosyasını senkronize edin veya yükleyin.

Bunu şimdi çalıştırırsanız alan görüntülenir. Bununla birlikte Ayarlar panelinin boyutu otomatik olarak değişmez. Panelin boyutunu artırdığınızdan components.json kayıt girişini de yeni boyutla güncellemeniz gerekir.

1. Bileşeniniz için assets/ diziniyle aynı düzeyde olan appinfo.json dosyasını indirin ve ayarlar panelinin boyutunu güncelleyin. Şu kodu değiştirin:

   "settingsHeight": 90,

   Onun yerine şu kodu kullanın:

   "settingsHeight": 160,

2. appinfo.json dosyasını senkronize edin veya yükleyin.