Adım 13: Bileşeni Satır İçi Çerçevede Görüntüleme

Satır İçi Çerçeve ve Satır İçi Olmayan Çerçeve Bileşenler Arasındaki Benzerlikler

Ayarlar Paneli

Ayarlar paneli sayfaya her zaman bir satır içi çerçevede yerleştirildiğinden, bileşenin satır içi çerçeve kullanıp kullanmaması fark etmeksizin Ayarlar panelinin kodu değişmez. İki kullanım senaryosu için de aynı Ayarlar paneli kodunu oluşturursunuz.

Siteler Yazılım Geliştirme Kiti Uygulama Programı Arabirimi

Yazılım Geliştirme Kiti Uygulama Programı Arabirimi iki kullanım senaryosu için de aynıdır. Tetikleyicileri başlatmak, eylemleri izlemek ve nitelik değerlerini alıp ayarlamak için aynı kodu kullanırsınız. Belirli nitelikler her iki durumda uygulanabilir olmayabilir (örneğin satır içi çerçeve kullanmayan bir bileşenin "height" niteliği), ancak uygulama programı arabirimi aynı kalır. Dolayısıyla kodu bu iki bileşen tipi arasında kopyalayabilirsiniz ve bu eğitim programında verilen örnek kod her iki durumda çalışır.

Satır İçi Çerçeve ve Satır İçi Olmayan Çerçeve Bileşenler Arasındaki Farklar

Dosya Yapısı ve Bağımlılıklar

<component name>
    assets
        css
            app-styles.css
        js
            jquery.mn.js
            knockout.mn.js
            sites.min.js
        render.html
        settings.html
    appinfo.json
    _folder_icon.jpg

Bu dosyalar, bileşeninizi sayfada hemen satır içi bir çerçevede çalıştırmanıza izin vermek için oluşturulur. Bu yapı ile standart bir yerel bileşenin yapısı arasındaki temel farklar şunlardır:

• JavaScript bağımlılıkları:

  • Bu dosyaların tam kopyasını aldığınızdan bileşen çalışır. Örnek satır içi çerçeve bileşeninin çalışması için bu dosyalar gereklidir. Gereksinimlerinize bağlı olarak bu dizinin içeriğini ekleyebilir ve kaldırabilirsiniz.

  • Bileşeniniz yayımlandığında bileşenin assets dizinindeki her şey genel bir siteye aktarıldığından, js dizinindeki her şey hem Site Builder'da hem de çalıştırma zamanında kullanılabilir olur.

  • Not: Bu dosyalar kullanım kolaylığı için oluşturulur. Her satır içi çerçeve bileşeniniz için bu dosyaların ayrı sürümlerini oluşturmak yerine dosyaları temada veya başka bir genel konumda birleştirmeyi dikkate almalısınız.

• render.html:

  • Bu, standart bileşenlere yönelik render.js dosyasının (AMD modülüdür) aksine tam bir HTML dokümanıdır.

Bileşen "Yükseklik" Yönetimi

Satır içi çerçeve kullanımının sorunlarından biri, satır içi çerçevenin yükseklik yönetimidir. Bu yanlış olursa sayfada bileşen için kaydırma çubukları görürsünüz. Bu istemeyeceğiniz bir şey olabilir.

Satır içi çerçevenin yüksekliğini yönetmek için bileşenin sayfaya satır içi çerçevenin ne kadar uzun olacağını belirtmesi gerekir. Uzak bileşenlerde çapraz etki alanı sorunlarıyla uğraşıyor olabilirsiniz. Bu nedenle bileşen sayfada görüntülendikten sonra sayfadan satır içi çerçevenin gerekli yüksekliğini belirlemesini istemek için Siteler Yazılım Geliştirme Kiti mesajlaşmasını kullanmalısınız. Bu SitesSDK.setProperty('height', {value}) uygulama programı arabirimi kullanılarak yapılır. (Bkz.Oracle İçerik ve Deneyim Yazılım Geliştirme Kitleri.)

Örneğin, setHeight fonksiyonunu ve özel bir bağlama işleyicisi oluşturup bileşen sayfada görüntülendiğinde bunu çağırın.

• Yükseklik fonksiyonunu güncelleyin:

  // set the height of the iFrame for this App
  self.setHeight = function () {
  // use the default calculation or supply your own height value as a second parameter
  SitesSDK.setProperty('height');
  };

• Bileşen sayfada her görüntülendiğinde veya bir nitelik her değiştiğinde setHeight öğesini çağıran Knockout özel bağlama işleyicisi:

  ko.bindingHandlers.sampleAppSetAppHeight = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
      // create dependencies on any observables so this handler is called whenever it changes
      var imageWidth = viewModel.imageWidth(),
          imageUrl = viewModel.imageUrl(),
          titleText = viewModel.titleText(),
          userText = viewModel.userText();
  
    // re-size the iFrame in the Sites page now the template has rendered
    // Note: If you still see scrollbars in the iframe after this, it is likely that CSS styling in your app is the issue
    viewModel.setHeight();
   }
  };

• Bağlama işleyicisini çağıran şablon güncellemesi:

  <div data-bind="sampleAppSetAppHeight: true"></div>

Tetikleyici ve Eylem Kaydı

Satır içi çerçevelerde olmayan bileşenler için tetikleyici/eylem kaydı appinfo.json dosyasında yer alır, ancak satır içi çerçeve bileşenleri için bileşenin kendisi bu bilgiyi sağlamaktan sorumludur. Bu işlem şu iki uygulama programı arabirimi kullanılarak yapılır:

SitesSDK.subscribe('GET_ACTIONS', self.getAppActions);
SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);

Aşağıda bu uygulama programı arabirimlerinin kullanımına örnek verilmiştir.

    // Register TRIGGERS meta-data
    SampleAppViewModel.prototype.getAppTriggers = function (args) {
      var triggers = [{
        "triggerName": "imageClicked",
        "triggerDescription": "Image clicked",
        "triggerPayload": [{
          "name": "payloadData",
          "displayName": "Trigger Payload Data"
        }]
      }];

      return triggers;
    };

    // Register ACTIONS meta-data
    SampleAppViewModel.prototype.getAppActions = function (args) {
      var actions = [{
        "actionName": "setImageWidth",
        "actionDescription": "Update the image width",
        "actionPayload": [{
          "name": "imageWidth",
          "description": "Image Width in pixels",
          "type": {
            "ojComponent": {
            "component": "ojInputText"
            }
          },
          "value": ""
        }]
      }];

      return actions;
    };

Tema Stillerine Erişme

Bileşen satır içi çerçevede görüntülendiğinden temadaki stillere erişemez. Siteler Yazılım Geliştirme Kiti, stillerin satır içi çerçeve içindeki öğeler uygulanabilmesi amacıyla bu stilleri almak için bir uygulama programı arabirimi sağlar.

Bu konu Adım 14: Bileşen Satır İçi Çerçevede Görüntülenirken Özel Stilleri Kullanma bölümünde daha detaylı ele alınmaktadır.

Karma HTTPS - HTTP Protokolü Karşılaştırması

Oracle Content Management HTTPS protokolünü kullandığından, sayfada referans gösterilen tüm kaynaklar da HTTPS kullanmalıdır. Kaynaklar satır içi çerçevede görüntülenen temel .html dosyasını ve onun referans gösterdiği tüm dosyaları içerir.

Bu kaynak gereksinimi çoğunlukla uzak bileşenler için geçerlidir, ancak bu kısıtlamanın farkında olmanız gerekir. Satır içi çerçeveler kullanan yerel bileşenlere yönelik kaynaklar Oracle Content Management sunucusu tarafından sağlanır, dolayısıyla bileşenler halihazırda eşleşen bir protokol kullanır.

Adım 14: Bileşen Satır İçi Çerçevede Görüntülenirken Özel Stilleri Kullanma bölümüne devam edin.