Siebel OpenUI Presentation Model ve Physical Renderer Yapısı
Siebel OpenUI Presentation Model ve Physical Renderer Yapısı
Selamlar bu yazı ekip arkadaşım Rıdvan Elitemiz tarafından yazılmış olup ayrıca medium üzerinden de paylaşılmıştır.
Siebel OpenUI’da Presentation Model ve Physical Renderer, Siebel uygulamalarında kullanıcı arayüzü tasarımını ve görünümünü kontrol eden iki önemli bileşendir.
Presentation Model:
Presentation Model, Siebel uygulamalarında kullanıcı arayüzünün mantıksal tasarımını sağlar.
Veritabanından gelen verilerin işlenmesine ve kullanıcı arayüzüne nasıl aktarılacağına karar verir.
Bu model, kullanıcı etkileşimlerini yönetir ve veri manipülasyonu ile ilgilenir.
Siebel uygulamasındaki formlar, listeler ve diğer kullanıcı arayüzü öğeleri bu modele dayanır.
Physical Renderer:
Physical Renderer, Presentation Model tarafından üretilen mantıksal temsili fiziksel bir görünüme dönüştürür.
Kullanıcı arayüzünün nasıl görüneceği, hangi renklerin kullanılacağı, metin stilinin belirlenmesi gibi görsel özellikleri kontrol eder.
HTML, CSS ve JavaScript gibi web teknolojilerini kullanarak kullanıcı arayüzünü tarayıcıda render eder.
Kullanıcının uygulama ile etkileşimde bulunduğu yer burasıdır. Kullanıcı bir butona tıkladığında veya bir form gönderdiğinde, bu etkileşim Physical Renderer tarafından işlenir.
Çalışma Mantığı:
Kullanıcı bir eylem gerçekleştirdiğinde (örneğin, bir formu doldurduğunda veya bir düğmeye tıkladığında), bu eylem Presentation Model tarafından işlenir. Veritabanından gelen veriler bu aşamada işlenir ve mantıksal bir temsil oluşturulur.
Oluşturulan mantıksal temsil daha sonra Physical Renderer’a iletilir.
Physical Renderer, bu mantıksal temsili kullanarak kullanıcı arayüzünü oluşturur. HTML, CSS ve JavaScript gibi teknolojileri kullanarak sayfa düzenini ve görünümünü belirler.
Kullanıcı, render edilen sayfa üzerinde etkileşimde bulunur.
Bu etkileşimler tekrar Presentation Model tarafından işlenir ve gerektiğinde veritabanında güncellemeler yapılır.
Aşağıdaki örnekte bir kontrolün değerine göre ekrandaki diğer kontrolleri gizleyen/gösteren PM/PR dosyalarını görebilirsiniz.
//Presentation Model
if( typeof( SiebelAppFacade.HideControlsConditionallyPM ) === "undefined" ){
SiebelJS.Namespace( "SiebelAppFacade.HideControlsConditionallyPM" );
define("siebel/custom/HideControlsConditionallyPM", [], function () {
SiebelAppFacade.HideControlsConditionallyPM = ( function(){
function HideControlsConditionallyPM( proxy ){
SiebelAppFacade.HideControlsConditionallyPM.superclass.constructor.call( this, proxy );
}
SiebelJS.Extend( HideControlsConditionallyPM, SiebelAppFacade.PresentationModel );
HideControlsConditionallyPM.prototype.Init = function(){
SiebelAppFacade.HideControlsConditionallyPM.superclass.Init.call( this );
this.AddProperty( "ShowCondition", "" );
this.AddMethod( "ShowSelection", SelectionChange, { sequence : false, scope : this } );
this.AddMethod( "FieldChange", OnFieldChange, { sequence : false, scope: this } );
};
function SelectionChange(){
var controls = this.Get( "GetControls" );
var control = controls[ "ShowInfo" ];
var value = this.ExecuteMethod( "GetFieldValue", control );
this.SetProperty( "ShowCondition", ( value ? true: false ) );
}
function OnFieldChange( control, value ){
if( control.GetName() === "ShowInfo" ){
this.SetProperty( "ShowCondition", ( value ? true: false ) );
}
}
return HideControlsConditionallyPM;
} ());
return "SiebelAppFacade.HideControlsConditionallyPM";
});
}
//Pyhsical Renderer
if (typeof (SiebelAppFacade.HideControlsConditionallyPR) === "undefined") {
SiebelJS.Namespace("SiebelAppFacade.HideControlsConditionallyPR");
define("siebel/custom/HideControlsConditionallyPR", ["order!3rdParty/jquery.signaturepad.min", "order!siebel/phyrenderer"], function () {
SiebelAppFacade.HideControlsConditionallyPR = (function () {
function HideControlsConditionallyPR(pm) {
SiebelAppFacade.HideControlsConditionallyPR.superclass.constructor.call(this, pm);
}
SiebelJS.Extend(HideControlsConditionallyPR, SiebelAppFacade.PhysicalRenderer);
HideControlsConditionallyPR.prototype.Init = function () {
SiebelAppFacade.HideControlsConditionallyPR.superclass.Init.call(this);
this.AttachPMBinding("FieldChange", FieldChange);
};
HideControlsConditionallyPR.prototype.ShowUI = function () {
SiebelAppFacade.HideControlsConditionallyPR.superclass.ShowUI.apply(this, arguments);
var controls = this.GetPM().Get("GetControls");
var control = controls["ShowInfo"];
var value = this.GetPM().ExecuteMethod("GetFieldValue", control);
var showControls = (value ? true : false);
var Control1 = controls["Control1"];
var Control2 = controls["Control2"];
if (showControls) {
$("#Control1_Label").parent().show();
$("[name='" + Control1.GetInputName() + "']").parent().show();
$("#Control2_Label").parent().show();
$("[name='" + Control2.GetInputName() + "']").parent().show();
} else {
$("#Control1_Label").parent().hide();
$("[name='" + Control1.GetInputName() + "']").parent().hide();
$("#Control2_Label").parent().hide();
$("[name='" + Control2.GetInputName() + "']").parent().hide();
}
}
function ShowHideControl() {
var controls = this.GetPM().Get("GetControls");
var control = controls["ShowInfo"];
var value = this.GetPM().ExecuteMethod("GetFieldValue", control);
var showControls = (value ? true : false);
var Control1 = controls["Control1"];
var Control2 = controls["Control2"];
if (showControls) {
$("#Control1_Label").parent().show();
$("[name='" + Control1.GetInputName() + "']").parent().show();
$("#Control2_Label").parent().show();
$("[name='" + Control2.GetInputName() + "']").parent().show();
} else {
$("#Control1_Label").parent().hide();
$("[name='" + Control1.GetInputName() + "']").parent().hide();
$("#Control2_Label").parent().hide();
$("[name='" + Control2.GetInputName() + "']").parent().hide();
}
}
function FieldChange(control, value, index) {
if (control.GetName() === "ShowInfo") {
ShowHideControl.call(this);
}
}
HideControlsConditionallyPR.prototype.ShowSelection = function (index) {
SiebelAppFacade.HideControlsConditionallyPR.superclass.ShowSelection.call(this, index);
ShowHideControl.call(this);
};
return HideControlsConditionallyPR;
}());
return "SiebelAppFacade.HideControlsConditionallyPR";
});
}
PM/PR dosyalarının ortama kurulumu için,
1. Scriptler “siebel/web/public/”lang_id”/”app_version”/scripts/siebel/custom/ klasörüne atılır.
2. Sitemap — Administration Application — Manifest Files ekranına dosyalar eklenir. (Şekil 1)
Yorumlar
Yorum Gönder