Görünümlerin tasarım zamanı görünümünü yapılandırma

• Görünümünüz için simge olarak kullanılacak bir resim dosyası belirtin.
• Görünümin diğer görünümlerin değil, HTML ya da JavaScript kodunun sonucu olan bir UI 'si varsa, tasarım sırasında tuvalde görüntülenecek bir düzen resmi belirtin.
• Görünüm için tasarım sırasında bir web dosyasına bağ tanımlamak istiyorsanız URL bağ tanımını kullanöğesini seçin. Örneğin, resim görünümleri, tuvalde bağlı oldukları resmi görüntülemek için bu ayarı kullanır.
• Görünümünüz bir etiketi destekliyorsa, Önizleme etiketi konumunubelirterek etiketin tuval üzerindeki konumunu ayarlayabilirsiniz.
  Genellikle, düğmeler gibi UI öğeleri için orta etiket konumunu kullanırsınız.

  1. Bir düzen resmi belirttiyseniz ve önizleme etiketi konumunu Centerolarak ayarladıysanız, düzen resmi etiket metnine sığacak şekilde uzatılır. Varsayılan olarak, görüntünün tamamı uzatılır.
  2. Düşük kodlu tasarımcıyı kullanıyorsanız ve bir HTML kod parçacığı dosyası ya da Helper JS dosyası (ya da her ikisini) belirttiyseniz, bu dosyalardaki etiketi konumlayan herhangi bir kod, Önizleme etiketi konumuiçin belirtilen değeri geçersiz kılar.

İş uygulamalarınızı ve görünümlerinizi oluştururken, düşük kodlu tasarımcı görünümlerinizin tasarım zamanı görünümünü yapılandırmak için daha gelişmiş seçenekler sunar. HTML ve JavaScript kodunu kullanarak görünümleriniz, görünümün çalıştırma zamanı görünümüne daha yakından benzeyen bir tasarım zamanı görünümüne sahip olabilir ve bu, arabirim geliştiricilerine görünümlerinin uygulama kullanıcılarına nasıl görüneceğine ilişkin daha doğru bir fikir verir. Bazı durumlarda, sayfa tuvalinde çalıştırma zamanı görünümü için kullanılan kodun aynısından yararlanılabilir.

• Çalıştırma zamanı görünümünü doğru şekilde yansıtan görünümler için tasarım zamanı görünümü sağlamanın en basit yolu bir HTML parçacığı aracılığıyla sağlanır. HTML parçacığı bir web dosyası olarak karşıya yüklenir, daha sonra görünüm düzenleyicisindeki gelişmiş önizleme bölümünde seçilir. Bu dosya, görünümü gösteren bir parçacık içeren bir HTML dosyası olmalıdır.
  1. Bir HTML parçacığı oluşturun.
     Bu dosya, görünümü gösteren bir parçacık içeren bir HTML dosyası olmalıdır. Örneğin:

     <div>
     <button class="DesignLabel"></button>
     </div>

     HTML parçacığı, içerik kutularının ve etiketlerin uygun şekilde yerleştirilmesini sağlayan bazı özelliklere sahiptir.

     Class: DesignLabel

     Görünüm bir etiketi destekliyorsa, bu sınıf etiketi gösteren HTML öğesine yerleştirilir. Düzenleyici etiket dizgisini bu öğenin iç HTML içeriği olarak yerleştirir. Bir parçacık birden çok etikete sahip olabilir ve etiket uygulanır ve tüm öğelere güncellenir.

     Class: DesignContentBox

     Bu sınıf, bildirilmiş bir içerik kutusunun önizlemede nerede bulunması gerektiğini belirtmek için kullanılır. Bu sınıf kullanılırsa, öğenin data-designContentBoxID özniteliği de tanımlanmış olmalıdır. Bu öznitelik, bildirilen içerik kutusunun denetim tanıtıcısına ayarlanmalıdır. Birden çok içerik kutusu bildirildiyse, her biri HTML önizlemesinde benzersiz olarak yerleştirilebilir. Görünümün yerleşim düzeninde bir içerik kutusu bildirildiyse, ancak HTML şablonunda DesignContentBox sınıfı ve eşleşen data-designContentBoxIDolan bir bölüm yoksa, düzenleyici içerik kutusu eşgörünümünü görünümün sonuna yerleştirir.

     Not: Design* sınıf adları düzenleyici tarafından ayrılır. Parçacıklar bu kalıpla eşleşen sınıfları kullanmamalıdır. Benzer şekilde, data-design* öznitelik adlarından da kaçınılmalıdır.

     Aşağıda örnek bir HTML parçacığı verilmiştir:

     <div>
     <h2 class="DesignLabel"></h2>
     <div class="DesignContentBox" data-designContentBoxID="ContentBox1">
     </div>

  2. Uygulama projenize ya da araç takımınıza dış dosyalar ekleyin.
  3. Genel Bakış ' a geçin ve Gelişmiş önizleme altında HTML parçacığını içeren dosyayı seçin.
• Tek başına bir HTML parçacığı istediğiniz tasarım zamanı önizleme deneyimini sağlayamıyorsa, JavaScript işleyicisini içeren bir web dosyası da belirtebilirsiniz.

  JavaScript işleyicisi, model değişikliklerine tepki olarak tasarım süresi DOM ' unun işlenmesini sağlar. JavaScript işleyicisi bir HTML parçacığı ile birlikte çalışabilir ya da önizlemenin tamamını işleyebilir.

  JavaScript işleyicisi, mixObject tanımlı bir JavaScript dosyasından oluşur. mixObject , düzenleyicinin düzenleyici yaşam çevrimi sırasında çağırdığı bir ya da daha çok işlevi uygulayabilir. Ek işlevler de tanımlayabilirsiniz, ancak adlara coachViewImplöneki eklenmelidir; örneğin, coachViewImpl_calcValue(). thisüzerinde ek bilgi saklamak istiyorsanız, bu bilgiler this.context.coachViewData nesnesine yerleştirilmelidir. Ürünün gelecekteki sürümlerinde çakışmaları önlemek için hem işlev adlandırma kuralı hem de eşgörünüm değişkeni depolama konumu kullanılır.

  Aşağıda, bir düğme görünümü için önizleme etiketi ve resmi sağlayan basit bir JavaScript işleyicisi örneği verilmiştir.

  var mixObject = {
  	createPreview:function(containingDiv, labelText, callback){
  		require([ "dojo/dom-construct"], this.lang.hitch(this, function(domConstruct){
  			var buttonDiv = domConstruct.create("div");
  			domConstruct.place(buttonDiv, containingDiv);
  			var button = domConstruct.create("button");
  
  			domConstruct.place(button, buttonDiv);
  			this.context.coachViewData.labelTextDom = document.createTextNode(labelText);
  			button.appendChild(this.labelTextDom);
  			callback();
  		}));
  	},
  	propertyChanged:function(propertyName, propertyValue){
  		if(propertyName=="@label" && this.context.coachViewData.labelTextDom){
  			this.context.coachViewData.labelTextDom.data = propertyValue;
  		}
  	},
  };