Kullanıcı Kılavuzu İptal

Özel Bileşenler oluşturma: Örnekler

Ara

Son güncelleme: 25 May 2023

Bir HTML5 özel bileşeni örneğini anlamak için bu makaleden yararlanın.

Bu makale, özel bileşenlerin nasıl oluşturulduğunu açıklar. Birinci örnekte, geliştirme kapsamındaki adımları ve çerçeveyi anlamaya yönelik olarak süreç ve görüntü bileşeni (aynı zamanda Animate ile sağlanan) açıklanır. İkinci örnekte, herhangi bir var olan kullanıcı arabirimi bileşeninin (jQueryUI gibi) nasıl sarılacağı ve Animate içinde nasıl içe aktarılacağı açıklanır.

DOM görüntü bileşeni oluşturma

My Components adında bir kategori oluşturun.

a. İlk aşamada <HTML5Components> klasörü altında mycomponents adlı bir klasör oluşturun

b. Ekteki myimage.zip dosyasını indirin ve

mycomponents klasörü altındaki

İndir

Dosyayı alın
myimage.zip dosyasını indirmek için burayı tıklatın.

c. Animate'i yeniden başlatın.

mycomponents klasörü içindeki dizin yapısı

Bileşenler klasöründe şimdi "My Components" adında yeni bir kategori ve altında My Image adında yeni bir bileşen göreceksiniz. Bunu sahne alanına sürükleyip bırakabilir, görüntü kaynak özelliğini ayarlayabilir ve özel bileşeni eylem halinde görmek için filmi yayınlayabilirsiniz.

Bileşen Meta Verileri - components.js

Lütfen kategorinin CATEGORY_MY_COMPONENTS olarak ayarlandığına dikkat edin. Her bir özelliğin adı da benzer anahtarlar kullanır. Bu, kategori adı için yerelleştirilmiş dizeye yönelik anahtardır. Yerel klasörden strings.json dosyasını açarsanız aşağıdaki girişleri göreceksiniz.

Bu dosyayı düzenlerken yapılan en yaygın hata, dizideki son öğeyi izleyen gereksiz bir virgül kullanmaktır.

Simge alanının değeri, Sp_Image_Sm olarak ayarlanır. Varlıklar klasörüne gittiğinizde aşağıdaki Sp_Image_Sm ön ekli iki adet png dosyasını göreceksiniz.

Bunlar, koyu ve açık renkli kullanıcı arabirimlerinin simgeleridir.

components.json dosyasında "source" alanının değeri, "src/myimage.js" olarak ayarlanmıştır.

(function($) {    

// my.Image ile bir bileşen kaydetme: ,
 // ve şu geçersiz kılmalarla bir prototip kaydetme 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// Ön ekli görüntü ile benzersiz bir kimlik döndürme
  // _widgetID, anwidget'ta global olarak tanımlanır
  // Bu kimlik yalnızca kullanıcı Animate'teki içerikte bileşene yönelik herhangi bir örnek kimlik ayarlamadığında kullanılır
  // Aksi takdirde kullanıcı tarafından yapılandırılan ad kullanılır
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// DOM öğesi oluşturmak için dizeyi geri döndürme
  // Görüntü için yalnızca şunları oluşturmamız gerekir <img> tag
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Yapılandırılabilir özellikler grubu
  getProperties: function() {
   bunu döndürür._props;
  },
  
// Yapılandırılabilir nitelikler grubu
  getAttributes: function() {
   bunu döndürür._attrs;
  }    
 });   
})(jQuery);

Kolay anlamak için koddaki yorumları takip edebilirsiniz.

Lütfen Animate ile sağlanan diğer bileşenlerin kaynağını incelemekten çekinmeyin. Çoğu durumda bunlardan birini başlangıç noktası olarak kullanabilir, ardından kendi gereksinimleriniz doğrultusunda yapılandırabilirsiniz.

Bir jQuery-UI bileşenini sarma

Bu bölümde, bir jQuery-UI gerecinin nasıl sarılacağı ve Animate'te nasıl kullanılacağı açıklanır. Aynı konseptler, başka bir kullanıcı arabirimi çerçevesinden başka bir var olan bileşeni sarmak için de kullanılabilir.

Şimdi Animate paketine dahil edilen ve bir jQuery-UI gereci olan DatePicker bileşenini inceleyelim. Aşağıdaki arşivi indirip içeriğini çıkarın ve bunu referans olarak kullanın.

İndir

Dosyayı alın

datepicker.zip dosyasını indirmek için burayı tıklatın.

jquery-ui-1.12.0 adlı klasör, herhangi bir diğer HTML5 Bileşeni gibi sarıp Animate'te kullanmak için orijinal DatePicker gerecini ve bunun görüntüler ve css gibi kaynaklarını içeren jQuery UI çerçevesinin kaynağıdır. Bu yalnızca, Yayınlama ayarlarında "barındırılan kütüphaneleri" kullandığınızda ve bağımlı kaynakları indirmek için cdn'yi kullanma seçeneğine sahip olduğunuzda yerel önizleme için gereklidir.

İki varsayılan bağımlılık vardır: jQuery ve anwidget.js. anwidget.js CDN'de olmadığından bunun için herhangi bir CDN girişi yoktur.

Sonraki giriş kümesi, jquery ui'dan datepicker gerecini yüklemek için gereken diğer kaynaklara yöneliktir. Başka bir kütüphaneden bir gereç sarıyorsanız bunun için bağımlılıklar kümesini benzer şekilde belirleyebilirsiniz. Bu bağımlılıklar, bileşen başlatılmadan önce indirilir.

Özellikler bölümünde yalnızca, label (etiket) olarak adlandırılan ve date-picker bileşeni için etiket özelliğine bağlı olan bir adet özelliği açığa çıkardık. Benzer şekilde, Animate geliştirme ortamında kullanıcının yapılandırabilmesini istediğimiz diğer özellikleri de açığa çıkarabiliriz. Çalışma zamanında, bunların her biri, örnek için options (seçenekler) dizisinde bir anahtar-değer çifti olarak kullanılabilir olacaktır. Yapılandırılan değeri, çalışma zamanında çıkarabilir ve uygulayabiliriz.

Örnekten farklı bölümler

getCreateString:

jQuery-UI'dan alınan datepicker gereci, bu giriş metni öğesini alır ve çalışma zamanında bir date-picker öğesine dönüştürür. Bu nedenle, DOM'yi uygun şekilde başlatırız.
attach:

Bu gereç için bu işlevi geçersiz kılmamız gerekir. Öğe DOM'ye her eklendiğinde bu API çağrılır. Ancak, temel alınan çalışma zamanının çalışma şekli (bu durumda createjs) nedeniyle bu API, bir kare yayılma alanı boyunca birden fazla kez çağrılabilir.

Temel alınan öğenin eklenme durumunu hatırlar ve ardından temel sınıfın ekli API'sini çağırırız (this._superApply(arguments) kullanarak). Öğeyi üst DOM'ye ilk defa ekliyorsak bileşenimizin DOM'sini bir datepicker'a dönüştürmek için, temel alınan jQuery-UI gerecinin çağrısını kullanırız. Bkz. - https://jqueryui.com/datepicker/

Javascript gereçlerinin çoğu benzer şekilde çalışır. Seçtiğiniz herhangi bir bileşeni sarmak ve aynı şekilde Animate'e getirmek için de aynı tekniği kullanabilirsiniz.
Güncelle: Güncellemeyi geçersiz kılar, css özelliklerini kapsayıcı div'e, nitelikleri ise gerçek DOM öğesine uygularız.

Attach (ekle), detach (ayır), update (güncelle) gibi API'leri geçersiz kılarken temel sınıfın varsayılan uygulamasını değerlendirin ve temel uygulamayı uygun zamanda çağırın; aksi takdirde, öğe başlatılamayabilir.