Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

GEODI içerisinde hazırda ES ( Enterprise Search) ve DA ( Digital Atlas ) başlangıç sorgu sayfaları olarak sunulmaktadır. 

Arayüzlerde html, script ekleyerek özelleştirme yapabilir, ES arayüzü için yeni görünümler hazırlayabilirsiniz.

Html eklenti yazma 

Eklentileri arayüzleri özelleştirmek, Sayfaya html, script eklemek için kullanabilirsiniz.

%appdata%App/GEODI/GUI/Custom/ES/Component veya uygulama yanındaki GUI/Custom/ES/Component altındaki klasörlere atacağınız klasörüne atacağınız html dosyalar ES ve DA arayüzlerine dahil olacaktır. Bu yöntem ile sayfa içeriğindeki tüm olay ve sınıflara erişebilirsiniz. yanına bir jsettings dosyası ekleyerek hangi koşullarda çalışacağını ayarlayabilirsiniz. jsettings uzantılı tanım dosyası yoksa html koşulsuz içeriğe eklenir. 

(warning) jSettings tanım dosyasında ConditionMacro alanında makro kullanılarak istenilen koşullar sağlandığında eklentinin yüklenmesi sağlanabilir. jSettings conditionMakro nesnesi GeodiWorkspace dir.

(warning) jSettings tanım dosyasında ActinTargets  alanına * veya  eklentinin çalışması istenilen proje adları virgül ile ayrılarak yazılabilir.

(warning) Harita arayüzü için component klasörü GUI/Custom/Map/Component, jSettings conditionMakro nesnesi GeodiWorkspace dir.

(warning) Viewer arayüzleri için  component klasörü GUI/Custom/Viewer/Default/Script ve GUI/Custom/Viewer/Default/RightPanel jSettings conditionMakro nesnesi GeodiWorkspace dir.

(warning) HTML Report sayfasında anlatılan sunucu tag'leri kullanılabilir. Html içine Makro data null değerdedir, nesnesi kullanılamaz.


MyComponent.html
<script>
	alert("Component loaded")
</script>
MyComponent.html
<dcc:panel visible='c["geodi"].GetSessionWSName()=="MyProject"'>
<script>
	alert("Component loaded")
</script>
</dcc:panel>

Dashboard hazırlama

%appdata%App/GEODI/GUI/Custom/ES/Dashboard veya uygulama yanındaki GUI/Custom/ES/Dashboard altındaki klasörlere atacağınız klasörüne atacağınız html veya jsettings uzantılı tanım dosyası ile dashboardları hazırlayabilirsiniz. tanım dosyası dahsboard için görüntü adı, yetki gibi özellikleri  belirlemekte kullanılmaktadır. 

Tanım dosyası örnek formata uygun olmalı, __type bilgisi örnekteki gibi kullanılmalıdır. Açıklama satırı içermemeli, kullanılmayacak özellikler içeriğinden silinmelidir.

MyDashboard.jSettings
{
    ID:"MyDashBoard",
	DisplayName:"[$.en:My Dashboard;tr:Benim Panelim]",
	 IconName:"Layer/newspaper",
    __type: "Factory.ActionFactory:HTMLReporter",
	ActionTargets:"*",
	ConditionMacro:'c.HasPermission("DECE.SYSTEMMANAGER")'
}

(warning) Atılacak html dosyanın adı veya yolu jSettings dosyası ile aynı olmayacaksa TemplateFile değeri de json içeriğinde belirtilmelidir. Örnek :   TemplateFile:"%AppData%\\App\\GEODI\\GUI\\Custom\\ES\\DashboardTemplates\\MyDashboard.html"

MyDashboard.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="[=c.GetCurrentLanguage(true)]">
	<head>
		<meta charset="utf-8" />
		<title>GEODI</title>
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/jquery-2.1.3.min.js" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/bootstrap.min.js" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/GeodiQueryJS.js" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/GeodiGenericJS.js" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/PlatformCommunication.js" />
		<dcc:item factoryname="IncludeCssResource" src="~/GUI/css/GeodiStyle.css" />
		<dcc:item factoryname="GeodiSessionInfoHtmlPageItem" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/moment.js" />
		<dcc:CultureInfoWriter formattype="DateTime" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/GeodiHelpManager.js" />
	</head>
	<body>
		<div class=container style="background-color:#fff">
			.....
		</div>
	</body>
</html>


Sorgu Görünümü hazırlama

Eklenen dahboard id değerinin başına "m_" eklendiğinde eklenen dashboard DLV,KLV, Takvim gibi bir görünüm sekmesi olacaktır. Bu senaryoda iframe olarak açılan dahsborad içerisinden parent içerikteki sorgu değişimleri yakalanıp özel düzenlemeler yapılabilir.

MyQueryResult.jSettings
{
    ID:"MyDashBoard",
	DisplayName:"[$.en:My Dashboard;tr:Benim Panelim]",
	 IconName:"Layer/newspaper",
    __type: "Factory.ActionFactory:HTMLReporter",
	ActionTargets:"*",
	ConditionMacro:'c.HasPermission("DECE.SYSTEMMANAGER")'
}

(warning) Atılacak html dosyanın adı veya yolu jSettings dosyası ile aynı olmayacaksa TemplateFile değeri de json içeriğinde belirtilmelidir. Örnek :   TemplateFile:"%AppData%\\App\\GEODI\\GUI\\Custom\\ES\\DashboardTemplates\\MyQueryResult.html"

(warning) GeodiQueryJS içeriğindeki hazır yöntemleri kullanabileceğiniz gibi kendi api çağrılarınızıda yapabilirsiniz.  Template düzenleme için Template ile sonuç gösterimi dokümanını inceleyebilirsiniz. Template hazırlayabileceğiniz  örnek html için tıklayınız.

MyQueryResult.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="[=c.GetCurrentLanguage(true)]">
	<head>
		<meta charset="utf-8" />
		<title>GEODI</title>
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/jquery-2.1.3.min.js" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/bootstrap.min.js" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/GeodiQueryJS.js" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/GeodiGenericJS.js" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/PlatformCommunication.js" />
		<dcc:item factoryname="IncludeCssResource" src="~/GUI/css/GeodiStyle.css" />
		<dcc:item factoryname="GeodiSessionInfoHtmlPageItem" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/moment.js" />
		<dcc:CultureInfoWriter formattype="DateTime" />
		<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/GeodiHelpManager.js" />
	</head>
	<body>
		<div class=container style="background-color:#fff">
			<h1>[$.tr:Dokümanlar;en:Documents]</h1>
			<div id=docList></div>
			<script type="dece-template" id="myTemplate">
				<d:r data="data">
				<li>
					{{ data.DisplayName }}  -  {{ data.AdditionalValues.Date }} <br>
					<span class="SummaryText __textclass geodiFormatable" contentid="{{data.ContentIdentifier}}">{{data.Summary}}</span>
				</li>
				</d:r>
			</script>
			<script>
				window.Aborter = new PostAborter();

				$(window).ready(function () {
					$(window).on("PCCommand",
						   function (e, obj) {
							   if (obj.Command == "ExecutedQuery") //sorgula butonuna basıldı.
							   UpdateQuery(window.parent.CurrentQueryContainer.CurrentQuery);
					   });
					UpdateQuery(window.parent.CurrentQueryContainer.CurrentQuery);

				});

				function UpdateQuery(query) {
					window.Aborter.AbortAll();
					$("#docList").empty();
					RenderDLV({
						Query: query,
						TargetDiv: "#docList",
						Aborter: window.Aborter,
						CurrentWSInfo: window.parent.CurrentQueryContainer.CurrentWSInfo,
						wsName: query.wsName,
						Template:$("#myTemplate"),
						Clear:true
					})
				}
			</script>
		</div>
	</body>
</html>

ES üzerinde yer alan AddStartMenuItem metodu ile daha ileri özellikler ile menü eklenebilir.  Bu işlem için HTML Eklenti hazırlama maddesindeki Component klasörüne bir html atılmalı ve AddStartMenuItem script metodu çağrılarak menü seçeneği eklenmelidir. Menü seçeneğine tıklandığınıda ne yapılacağıda yönetilmelidir. 

Doküman liste sonuçlarını düzenleme

Listedeki jquery olaylarını yakalayarak template değiştirme, data manupliasyon yapabilirsiniz. Bu yolla mevcut html geliştirmedeki özellikleri koruyarak sadece sonuçların görünümünü değiştirebilirsiniz.

  • GUI_DLVOnStarting  : Doküman listesi için istek yapılmadan önce tetiklenen olaydır.
  • GUI_DLVOnStartRender : Doküman listesi alındıktan sonra tetiklenen olaydır.
  • GUI_DLVOnEndRender : Tüm işlemler tamamlandıktan sonra tetiklenen olaydır.

Olaylara parametre olarak iletilen nesne üzerine Template değiştirebilirsiniz. nesneye Cancel=true değeri ekleyerek çalışmayı durdurabilir, tüm işlemleri ele alabilirsiniz. Template düzenleme için Template ile sonuç gösterimi dokümanını inceleyebilirsiniz. Template hazırlayabileceğiniz  örnek html için tıklayınız.

(warning)  Arayüzde dokümanlar birden fazla yerde listelenebilmektedir. Ana ekranda soru sonuçları, dokümana tıklandığında sağda benzer kopya dokümanlar gösterilmektedir. tamamı aynı eventi kullanmaktadır. sağdaki alanlar için args.Options.RenderSub değeri true gelmektedir. ihtiyaç halinde özelleştirilecek bölge için args.targetDom değeride kontrol edilebilir.

<script>
$(document.body).on("GUI_DLVOnStartRender",function(e,args) {
	if(!args.Options.RenderSub)  //benzer dokümanlar gibi özel liste alanları için RenderSub değeri true yapılmaktadır. 
	{
		args.Template="<d:r data='data'><div>{{ data.DisplayName }} </div></d:r>";
	}
})
</script>


TemplateSelector değerini değiştirerek her veri için farklı şablon kullanılmasını sağlayabilirsiniz.

<script type="dece-template" id=myTemplate>
	<div class="list-item pnl-query-item IsDoc DocALL docOpenLinkRoot DocArea" style="padding:5px !important">
		<h4>{{ data.DisplayName }} </h4>
		<hr>
		<a href="{{data.GetHref()}}" target="_blank">
				<img src="{{context.ResolveUrl('~/GeodiJSONService?op=getContentThumbnail&ContentIdentifier=' + data.RedirId + '&wsName=' + HttpUtility.UrlEncode(context.Options.Query.wsName) + '&rnd=' + window.___DomStartDate, false) }}" border=0 title="{{data.DisplayName}}" />
		</a>
	</div>
</script>

<script>
$(document.body).on("GUI_DLVOnStartRender",function(e,args) {
	if(!args.Options.RenderSub)  //benzer dokümanlar gibi özel liste alanları için RenderSub değeri true yapılmaktadır. 
	{
		args.TemplateSelectorOriginal=args.TemplateSelector;
		args.TemplateSelector= function(data,context) {
				if(data.ContentType=="filecontent:.pdf")
					return $("#myTemplate");
				if(args.TemplateSelectorOriginal)
					return args.TemplateSelectorOriginal(data,context);
			}
	}
})
</script>
  • No labels