Adım 2: Yerel Bileşen Görüntülemenizin Yapısını Gözden Geçirme

Bu adımda yerel bir bileşen için oluşturulan dosya öndeğerlerinin yapısını gözden geçireceğiz.

Basit bir Hello World örneği için dört JavaScript nesnesi ve kodun satır sayısı çok fazla gibi görünebilir, ancak bu sayede size daha karmaşık bileşenler oluşturmak ve ayrıca Oracle Bulut Siteler Hizmeti sayfa yaşam döngüsüyle kurulan etkileşimi yönetmek için bir temel sağlanır.

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

1. Oracle Content Management giriş sayfasında Geliştirici'ye tıklayın.

   Geliştirici sayfası görüntülenir.

2. Tüm Bileşenleri Görüntüle'ye tıklayın.

3. Menüden Yerel Bileşen Oluştur'u seçin.

4. Bileşen için bir ad girin. Örneğin, A_Local_Component.

5. İsteğe bağlı bir açıklama girin.

6. Oluştur'a tıklayın.

   Bunu yaptıktan sonra bileşen listenizde A_Local_Component adlı bir bileşen göreceksiniz.

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

   Masaüstü istemciniz yoksa, tüm bileşenleri görüntüleyebilir ve Oracle Content Management arayüzünün Bileşen sayfasında bileşeni seçebilir ve 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

3. /assets dizini altındaki render.js dosyasını açın.

   render.js dosyasının önemli noktaları:

   • Sayfada "gerekli" olabilmesi için bir JavaScript AMD modülü olarak yapılandırılmıştır.

   • Oracle Content Management sayfasının parçası olarak halihazırda yüklenmiş KnockoutJS ve JQuery referansları da içerir.

render.js dosyasının yapısını dikkate alın.

render.js dosyasının içeriğinde, gerekli Oracle Content Management bileşeni uygulama programı arabirimlerini uygulayan iki JavaScript nesnesi vardır: sampleComponentFactory ve SampleComponentImpl. Bu nesneler, KnockoutJS tabanlı bileşenlerin oluşturulması için bir uygulama örneğidir. Bu nesnelerin uygulanması, kullandığınız teknolojiye bağlı olarak değişiklik gösterir.

• sampleComponentFactory

  • Bu nesne render.js AMD modülü tarafından döndürülür.

  • Bu çok basit bir Fabrika nesnesidir ve tek createComponent() arayüzünü uygular.

  • Daha karmaşık uygulamalar, viewMode parametresine bağlı olarak bileşenin farklı uygulamalarını döndürmek için iletilen args değerini kullanabilir. Bu, Site Builder'a kıyasla çalıştırma zamanı için bileşenin önemli ölçüde daha hafif bir uygulamasına sahip olmanızı sağlar.

• SampleComponentImpl

  • Bu nesne içindeki ana fonksiyon, bileşeni sayfada görüntülemek için kullanılan render fonksiyonudur.

    Knockout bileşenini sayfada görüntülemek için render fonksiyonu şablonu dinamik olarak sayfaya ekler ve ardından şablona viewModel bağlamalarını uygular.

  • Uygulamanın geri kalanı viewModel parametresinin ve şablonun başlatılmasıyla ilgilenir ve sayfa ile bileşen arasındaki mesajlaşmayı idare eder.

render.js dosyasındaki son iki nesne (sampleComponentTemplate ve SampleComponentViewModel) bileşen için özel bir uygulama sağlar. Bunların uygulanması gereksinimlerinize göre değişiklik gösterir.

• sampleComponentTemplate

  • Bu nesne KnockoutJS şablonunun oluşturulmasını sağlar. Herhangi bir şey görüntülemeden önce bileşende tüm verilerin başlatılmasını bekler.

• SampleComponentViewModel

  • viewModel, Oracle Content Management uygulamasında bileşen adına saklanan bilgileri alır, ardından verilere göre bileşenin nasıl doğru şekilde yerleştirileceğini seçer

  • Bileşen adına saklanan meta veriye erişimi idare etmek için şablon tarafından kullanılan genel Knockout gözlemlenebilir öğeleri:

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • Tetikleyici ve eylem entegrasyonu:

    Tetikleyici: Bileşenden sayfadaki diğer bileşenlerin eylemlerine bağlanabilen bir Oracle Content Management tetikleyicisi başlatan bir fonksiyondur.

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

    Eylem: Bileşene belirli bir veri yüküyle bir eylem yürütmesi söylendiğinde geri çağırmayı idare eden fonksiyondur.

        self.executeActionsListener = function (args) {
          // get action and payload
          var payload = args.payload,
          action = args.action;
    
          // handle 'setImageWidth' actions
          if (action && action.actionName === 'setImageWidth') {
            $.each(payload, function(index, data) {
              if (data.name === 'imageWidth') {
                self.imageWidth(data.value);
              }
            });
          }
        };

    Talebe bağlı olarak kayıtlı eylemleri yürütmek için geri çağırma yapın.

    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
    $.proxy(self.executeActionsListener, self));

  • 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.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(false);

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

      SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • Meta veri güncellemeleri: Bileşen adına saklanan bileşen meta verileri değiştiğinde geri çağırın. Örneğin, kullanıcı Ayarlar panelini çağırıp verileri güncellediğinde.

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));