Adım 10: Satır İçi Düzenleme ile İç İçe Yerleştirilmiş Bileşenler Kullanma

Oracle Content Management bileşenleri, KnockoutJS bileşen mimarisi kullanılarak uygulanır. Bu, bileşenlerinizi uygulamak için KnockoutJS kullanmanız durumunda Oracle Content Management yerleşik bileşenlerini doğrudan şablonunuza dahil edebileceğiniz anlamına gelir.

Not:

Oracle Content Management yerleşik bileşenleri sadece Oracle Content Management sayfasında çalışabileceğinden, bileşeniniz bir satır içi çerçevede görüntüleniyorsa iç içe yerleştirilmiş bileşenler kullanamazsınız.

İç içe yerleştirilmiş bileşenlerden yararlanmak için:

  1. Bileşeninizi KnockoutJS kullanarak uygulayın.

  2. Bileşeninizi dahil etmek için RequireJS kullanın ve Oracle Content Management tarafından oluşturulan Knockout "ko" an değişkenini kullanın.

    Oracle Content Management Knockout'u bileşenlerle birlikte sunduğundan ve bu bileşenler kendi KnockoutJS anınızı kullanmanız durumunda kullanılamayacağından bu gereklidir.

Bu adımda, Oracle Content Management Görüntü, Paragraf ve Başlık bileşenlerinin özel bileşeninizde nasıl görüntülendiğini gözden geçireceksiniz. Bir kullanıcı bunu doğrudan sayfa içinde düzenleyebilir ve iç içe yerleştirilmiş bileşene yönelik Ayarlar paneline erişebilir.

Bu bileşenlerin şablonunuza nasıl dahil edildiğini görmek için render.js dosyasını düzenleyin ve sampleComponentTemplate nesnesine bakın. Görüntülenen bölüm öndeğeri burada gösterilir:

'<!-- ko if: alignImage() !== \'right\' -->' +
'<div style="display:flex;">' +
'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData } }"></scs-image>' +
'</div>' +
'<div data-bind="attr: {style: paragraphStyle}">' +
'<scs-title params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'titleId\', \'data\': titleData } }"></scs-title>' +
'<scs-paragraph params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'paragraphId\', \'data\': paragraphData } }"></scs-paragraph>' +
'</div>' +
'</div>' +
'<!-- /ko -->' +

<scs-image> iç içe yerleştirilmiş bileşenine baktığınızda şu girişi göreceksiniz:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
params şablon bağlamasına iletilen scsComponent verileri aşağıdakileri içerir:

  • renderMode: Site Builder'ın modunu belirtir. Bunu kullanarak özellikleri etkinleştirebilir ve devre dışı bırakabilirsiniz. Örneğin, <scs-title> bileşeni tarafından kullanıldığında edit modunda çalışırken zengin metin düzenleyicisini ekler.

  • parentId: Oracle Content Management bileşeninin iç içe yerleştirilmiş bir bileşen olarak görüntülendiğini bilmesi için bu gereklidir. İç içe yerleştirilmiş bileşende yapılan tüm değişiklikler özel bileşene yönelik verilere kaydedilir.

  • id: İç içe yerleştirilmiş bileşen için benzersiz no. Bunun için özel bileşenin no'su tarafından ad alanı oluşturulur.

  • data: İç içe yerleştirilmiş bileşene yönelik başlangıç verileri. Bileşen daha fazla değiştirilmezse bu başlangıç verileriyle görüntülenir.

Referans gösterilen id ve mode değerleri SampleComponentViewModel nesnesinde özel bileşeninize iletilir, böylece bu değerleri almak için nesneyi değiştirmeniz gerekmez:

// Store the args
self.mode = args.viewMode;
self.id = args.id;

Desteklenen tüm diğer iç içe yerleştirilmiş bileşenlere yönelik sözdizimi <scs-paragraph> için olanla aynı düzeni izler. Örneğin: <scs-image>, <scs-title>, <scs-button>.

Adım 10'un 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. Bileşeninizdeki As a page author, you can edit. . . metnine tıklayın ve zengin metin düzenleyicisini kullanarak açıklamayı güncelleyin.

  5. Güncellemenizi görmek için Önizleme moduna geçin.

  6. Düzenleme moduna geri dönün.

  7. Ayarlar panelini bileşeninizin karşısına getirin.

  8. İç içe yerleştirilmiş bileşeninizi bulduğu için Bileşenler bağlantısı artık görünür.

  9. Bulduğu iç içe yerleştirilmiş bileşen olan Paragraf'a tıklayın.

Artık nitelikleri bileşeninizdeki Paragraf bileşenine göre güncelleyebilirsiniz.

Not:

Bileşen eski haline getirilene kadar Oracle Content Management şablonda mevcut olabilecek iç içe yerleştirilmiş bileşenleri fark etmez. Oracle Content Management'i gizli iç içe yerleştirilmiş bileşenler hakkında bilgilendirmek için SitesSDK.setProperty('visibleNestedComponents', []); uygulama programı arabirimini kullanabilirsiniz. Gizli iç içe yerleştirilmiş bileşenlerin öndeğer olarak görünmelerini sağlamak için bileşen kaydında "nestedComponents": [] dizisini güncellemeniz gerekir.

Adım 11: Farklı Yerleşimleri Destekleme bölümüne devam edin.