ViewEngine

ViewEngine static bir sınıftır. Uygulamadaki tüm View ve bileşenleri yönetmek için kullanılır.

class ViewEngine {
}

Functions

View/Bileşen Yükleme

public static loadView(_args: LoadViewArgs) ;

getViewPath

Verilen adresi belirtlen parametrelerle birlikte tam adresi verir.

public static getViewPath(route: string, routeParams: IKeyValuePair[] = null);

Destroy

public static destroy(componentInstance, args: LoadViewArgs = null);

getViewInstance

public static getViewInstance(args: LoadViewArgs): any;

bindActionsAndRules

Bir View yüklendikten sonra Click, Change ve benzer Event bağlantılarını kurar. Plugin tanımlarını yapar. UIKit nesnelerini yükler. LoadView metodu bu işlemi kendiliğinden yapar. Eğer klasik yöntemlerle manuel bir içerik oluturuyorsanız bu metodu çağırıp ViewEngine kurallarını işletebilirsiniz.

public static bindActionsAndRules(target: string, instanceVariable: string) ;
}

Koşullu Yükleme

public static executeRule_If(target: string, instanceVariable: string);

/*****/

Uzantılar ve Injection

ViewEngine’de bazı işlemler öncesinde araya girecek kodların çalışmasını sağlayabilirsiniz. Bunun için EJect sınıfları kulanılır.

ViewEngine için belirli işlemler öncesinde kullanılmak istenen sınıfların çağrılması içindir. Angular’daki Guard gibi çalışır.

public static registerExtensions(extensions: IViewEngineExtensions): void;

/****/

Model İşlemleri

public static setModel(data: any) {
ViewEngine._model = data;
}

public static getModel() {
return ViewEngine._model;
}

Validations

public static valdor($trigger) {
var validationTarget = $trigger.attr("data-val-target");

var customValidationFunction = $trigger.attr("data-val-function");

}
return isValid;
}//end valdor

Custom Validation

var customValidationFunction = $trigger.attr(“data-val-function”);

Field and Properties

data-outlet='master'

public static runningInstances: any = {};

public static config: AppConfig;
public static culture: BaseCulture;
public static UI: UIHelper;

Attributes

Events

Click

ng-click

Double Click

dbl-click

Change

ng-change

Kurallar

IF Rule

Bu kural ile ViewEngine.loadView fonksiyonuyla yüklenen bir view’da yer alan alanlar, kural True değer verdiğinde doğrudan silinir ve çalışma zamanında geri getirilemez. Yani içerik yüklenirken koşul sağlandığında gösterilir, diğer durumda html nesnesi doğrudan kaldırılır/silinir.

Angular’da olduğu gibi değişken değeri değiştiğinde tekrar render edilmez.

Bu kuralı sayfa yüklenirken ve bir defa kontrol edilmek istenen statik ekranlarda kullanmak daha doğru olacaktır.

data-view-if

Örnek
Aktif View’da bir alanı kullanıcının yetkisine bağlı olarak gösterip/göstermemek için aşağıdaki kod bloğu kullanılır. Kullanıcının yetkisi yoksa ilgili div bloğu View yüklenirken silinecektir.

<div data-view-if="_co.hasAnyRight">
   some html contents
<div>

Bu örnekte ise, kullanıcının silme yetkisi yoksa sil butonu ekrandan kaldırılıyor.

<button type="button" data-view-if="_co.hasDeleteRight">{res:Delete}<div>

Show Rule

Bu kural ile ViewEngine.loadView fonksiyonuyla yüklenen bir view’da yer alan alanlar, kural True değer verdiğinde gösterilir diğer durumda gizlenir. Kullanıcı davranışına göre gizlenip gösterilecek alanlar için tercih etmek doğrudur.
Çalışma zamanında yaptığı HTML element’in CSS değeriyle oynamaktır. Örneğin display:none veya display:block.

data-view-show

Örnek
Aktif View’da bir alanı, model nesnesinin durumuna göre gizleyip göstermek için aşağıdaki kod bloğu kullanılır. Eğer model nesnesi null değilse div görünür olacak, null olduğunda ise görünmeyecek.

<div data-view-show="model != null">
   some html contents
<div>

Bu örnekte ise, model.Id değeri 0’dan büyükse sil butonu görünür, değilse görünmez.

<button type="button" data-view-show="model.Id>0">{res:Delete}<div>