Databinding | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar databinding

MSP Webinar Serisi, Universal Windows Platform – MVVM ve Databinding, Mart 2016

04 March 2016 Yorum yapılmamış

03 Mart 2016 tarihinde, Microsoft MSP öğrencilere özel Universal Windows Platform – MVVM ve Databinding webinar‘i gerçekleştirdim.

Bu etkinliğin videosunu Youtube (UWP MVVM ve Databinding) üzerinden veya Channel 9 (MSP Webinar 2016 UWP MVVM ve Databinding) üzerinden izleyebilirsiniz.

Windows 10 UWP uygulamasında Log için Slack kullanmak

22 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding makalesini okumanızı tavsiye ederim.

Slack, http://www.slack.com adresinde hizmet veren, son yılların en başarılı uygulamalarından birisi. Kendi sitelerinde yazana göre;

Slack is a messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive

Geçen hafta aldığım çok ilginç bir email‘de bir uygulamada loglama için Slack kullanabilir miyiz? sorusu vardı.

Bu makalede Windows 10 UWP uygulamasında Slack entegrasyonu yapacağız, fakat aynı yöntemler ile rahatlıkla bir web uygulamasında veya web service‘inde aynı entegrasyon kurulabilir.

Öncelikle Slack üzerinde ücretsiz olarak bir hesap, hesabı oluşturduktan sonra yeni bir Channel oluşturmamız gerekiyor. Örneğin SlackLoggerApp-Logs isimli bir channel oluşturmak için;

Yeni bir public channel oluşturunca Slack sayfasında aşağıdaki gibi bir mesaj gözükmeli;

Got it! butonuna tıkladığımızda bizi channel‘in sayfasına yönlendirmeli;

https://{hesap}.slack.com/apps/build/custom-integration adresine giderek yazacağımız uygulamanın entegre olacağı Slack web servisini oluşturuyoruz. Bunun için Incoming WebHooks seçeneğini seçerek ilerlememiz lazım;

Gelen ekranda uygulamamızı geliştirirken ihtiyaç duyacağımız tüm bilgiler yer alıyor. Özellikle Webhook URL ve Sending Messages alanındaki bilgilere kesinlikle ihtiyacımız olacak;

Bu noktaya geldikten sonra Visual Studio‘yu açalım ve yeni bir Blank App (Universal App) projesi oluşturalım;

Projeyi oluşturduktan sonra MainPage.xaml dosyasını açalım ve aşağıdaki kodları yazalım;

<Page
	x:Class="SlackLogger.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SlackLogger">

	<StackPanel Background="#1abc9c" Padding="10">
		<TextBox Header="Adınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind FirstName, Mode=TwoWay}" />
		<TextBox Header="Soyadınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind LastName, Mode=TwoWay}" />
		<TextBox Header="EMail Adresiniz" Margin="5" BorderBrush="Transparent" Text="{x:Bind EMail, Mode=TwoWay}" />
		<TextBox Header="Mesajınız" Margin="5" Height="300" BorderBrush="Transparent" Text="{x:Bind MessageBody, Mode=TwoWay}" />
		<Button Content="Gönder" Margin="5" Height="40" HorizontalAlignment="Stretch" Click="{x:Bind Send}" />
	</StackPanel>

</Page>

Önce bir StackPanel nesnesi oluşturduk, içerisine 4 adet Textbox 1 adet Button nesnesi ekledik.

Textbox nesnelerinin Header özelliklerine verdiğimiz değerler ile birer başlığa sahip olmalarını sağladık.

BorderBrush özelliklerine verdiğimiz Transparent değer sayesinde çerçevelerin gözükmemesini sağladık.

Son olarak, Text özelliklerine ve Click olayına {x:Bind} tipinde değerler vererek Databinding yapıyoruz. Burada önemli olan nokta, Textbox‘ların Text özelliklerine yaptığımız Databinding‘de Mode özelliğine TwoWay değerini vererek, iki yönlü Databinding yapmak. Böylece ekranda bir değer değiştirildiği zaman Databinding yapıldığı property‘nin değeri otomatik olarak güncellenecek.

Böylece çalıştırdığımızda aşağıdaki gibi gözüken bir uygulama elde edeceğiz;

Databinding için FirstName, LastName, EMail ve MessageBody property‘lerini, ayrıca Send() methodunu yazmamız lazım. MainPage.xaml.cs dosyasını açalım ve aşağıdaki kodları ekleyelim;

public string FirstName { get; set; }
public string LastName { get; set; }
public string EMail { get; set; }
public string MessageBody { get; set; }

private async void Send()
{
	var client = new HttpClient();

	var payload = "{\"text\": \"" + FirstName + " " + LastName + "(" + EMail + ") : " + MessageBody + "\"}";

	await client.PostAsync(new Uri("https://hooks.slack.com/services/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"), new HttpStringContent(payload));
}

Böylece Gönder butonuna basıldığında Slack‘te oluşturduğumuz public channel‘ın web service‘ine istediğimiz bilgiyi gönderebileceğiz. Bu makaledeki örnekte Ad Soyad (EMail) : Message formatında bilgiyi Windows.Web.Http namespace‘i altında yeralan HttpClient sınıfının PostAsync() methoduna HttpStringContent tipinde gönderiyoruz.

Gönder butonuna bastığımızda, Slack, aşağıdaki notification‘ı gösterecek;

Eğer Slack‘teki public channel‘ın sayfasını açacak olursak, orada da mesajı görebileceğiz;

Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding

02 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Windows 10 UWP uygulamasında Page.Resources içinde Style kullanmak makalesini okumanızı tavsiye ederim.

En son geliştirdiğimiz hali ile ekranımız aşağıdaki şekilde gözüküyor olmalı;

Databinding yapabilmek için öncelikle MainPage.xaml.cs dosyasını açıp, binding yapacağımız property‘leri ve varsa varsayılan değerlerini tanımlıyoruz.

Bu örnekte saat, dakika ve saniyenin her hanesini ayrı gösterebilmek için Hour1, Hour2, Minute1, Minute2, Second1 ve Second2 property’lerini aşağıdaki gibi tanımladım;

public string Hour1 { get; set; } = "0";

public string Hour2 { get; set; } = "0";

public string Minute1 { get; set; } = "0";

public string Minute2 { get; set; } = "0";

public string Second1 { get; set; } = "0";

public string Second2 { get; set; } = "0";

Artık ekrandaki Textblock nesnelerini güncelleyebiliriz, RefreshDisplay() methodunu tanımlayıp, içerisinde yukarıda tanımladığımız property‘lere değer ataması yapıyoruz;

private void RefreshDisplays()
{
	var now = DateTime.Now;

	var hour = now.Hour.ToString("00");
	var minute = now.Minute.ToString("00");
	var second = now.Second.ToString("00");

	Hour1 = hour.Substring(0, 1);
	Hour2 = hour.Substring(1, 1);

	Minute1 = minute.Substring(0, 1);
	Minute2 = minute.Substring(1, 1);

	Second1 = second.Substring(0, 1);
	Second2 = second.Substring(1, 1);
}

Sayfa açıldığında RefreshDisplays() methodunu çağırabilmek için sayfanın açıldığı anı bilmemiz ve tam orada RefreshDisplays() methodunu çağırmamız lazım.

Windows 10 UWP uygulamalarında bir sayfanın açıldığı anı Page sınıfında tanımlı olan OnNavigatedTo() methodunda yakalayabiliyoruz.

MainPage sınıfımızın base class‘ı olan Page sınıfında tanımlı olan OnNavigatedTo() methodunda kod çalıştırabilmek için OnNavigatedTo methodunu override etmemiz lazım;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
	base.OnNavigatedTo(e);

	RefreshDisplays();
}

override ettiğimiz OnNavigatedTo() methodunun içerisinde RefreshDisplays() methodunu çağırıyoruz.

Databinding için code-behind tarafında yapmamız gereken tüm hazırlıkları yaptık, şimdi MainPage.xaml dosyasını açarak binding kodlarını tamamlayalım.

MainPage.xaml dosyasında yeralan nesnelerden binding yapmak istediklerimizin, binding yapmak istediğimiz property‘lerine değer olarak {x:Bind} ataması yapmalıyız.

Bu örnekte, Textblock nesnelerinin Text property‘lerine binding yapmak istiyoruz, MainPage.xaml dosyasındaki Grid elementini aşağıdaki kodlara dönüştürüyoruz;

<Grid>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="Auto" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="Auto" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>

	<Border Grid.Column="0">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{x:Bind Hour1}" />
			<TextBlock Text="{x:Bind Hour2}" />
		</StackPanel>
	</Border>
	<Border Grid.Column="1">
		<TextBlock Text=":" />
	</Border>
	<Border Grid.Column="2">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{x:Bind Minute1}" />
			<TextBlock Text="{x:Bind Minute2}" />
		</StackPanel>
	</Border>
	<Border Grid.Column="3">
		<TextBlock Text=":" />
	</Border>
	<Border Grid.Column="4">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{x:Bind Second1}" />
			<TextBlock Text="{x:Bind Second2}" />
		</StackPanel>
	</Border>

</Grid>

MainPage.xaml dosyasında sayfamızın ön izlemesi aşağıdaki gibi gözükmeli;

Eğer uygulamayı çalıştıracak olursak zaman bilgisi aşağıdaki şekilde ekranda gözüküyor olmalı;