Kullanıcı Kılavuzu İptal

Özel Bileşenler oluşturma: Örnekler

 

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.

  1. 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

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

mycomponents klasörü içindeki dizin yapısı
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

Components.js kodu
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.

Kategori ayrıntıları
Kategori ayrıntıları

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.

Simge alanı değeri
Simge alanı değeri

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);
(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);
(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

Çıkarılan içeriğin yapısı
Çıkarılan içeriğin yapısı

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. 

Components.js kodu
Components.js

İ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.

Ana kaynak dosya: src/datepicker.js.
Ana kaynak dosya: src/datepicker.js.

Örnekten farklı bölümler

  1. 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.

  2. 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.

  3. 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.

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?