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 CC ile sağlanan) açıklanır. İkinci örnekte, herhangi bir varolan kullanıcı arabirimi bileşeninin (jQueryUI gibi) nasıl sarılacağı ve Animate CC 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ı

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

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.

Not:

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

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

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($) {    

// Register a component with the className: my.Image,
	// and prototype with the following overrides 
	// getCreateOptions
	// getCreateString
	// getProperties
	// getAttributes
   	$.anwidget("my.Image", {
        	options: {
			'visible': true,
			'position': 'absolute'
        	},
		_props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
		
_attrs: ["id", "src", "alt", "class", "border"],
		
// Return a unique ID with the prefix image
		// _widgetID is a global declared in anwidget
		// This id is used only if the user has not set any instance ID for the component in Animate CC
		// Otherwise the user configured name is used
		getCreateOptions: function() {
			return $.extend(this.options, { 'id': "image" + _widgetID++ });
		},
		
// Return the string for creating the DOM element
		// For image we just need to create the <img> tag
		getCreateString: function() {
			return "<img>";
		},
		
// Set of configurable properties
		getProperties: function() {
			return this._props;
		},
		
// Set of configurable attributes
		getAttributes: function() {
			return this._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 CC'de nasıl kullanılacağı açıklanır. Aynı konseptler, başka bir kullanıcı arabirimi çerçevesinden başka bir varolan bileşeni sarmak için de kullanılabilir.

Şimdi Animate CC 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ı

jquery-ui-1.12.0 adlı klasör, herhangi bir diğer HTML5 Bileşeni gibi sarıp Animate CC'de 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

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

Ö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 CC'ye 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.

    Not:

    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.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi