Bu yazımızda mobil web kontrollerine giriş yapacağız. İki dil(Türkçe ve İngilizce) destekleyen küçük bir uygulama üzerinde Form, ObjectList, TextView ve Command kullanımını göreceğiz. Visual Studio 2003″ten bir tane Mobil Web Application projesi yaratıyoruz. veritabanından çektiğimiz tabloları DataTable olarak saklarken nasıl onları daha efektif kullanabileceğimizi göreceğiz.

I) Öncelikle bir Mobile Web Application uygulaması yaratalım ve açılan döküman üzerindeki formumuzun üzerine bir tane ObjectList ve bir tane Command ve de bir tane de Selection ekleyelim. Eklediğimiz ObjectList veritabanından gelen verileri gösterecek ve Command ise seçili dili değiştirmede Post etkisi yaratmada, SelectionList ise dilleri göstermede kullanılacak. ObjectList “imize sağ tıklayıp açılan PopUp menüden Templating Options seçeneğini seçelim. Templating Options özelliği, sunucuya istek yapan tarayıcı türüne göre uygun çıktı formatı yapmamızı sağlıyor. Çıkan dialog penceresinden Applied Device Filter özelliği None olarak geliyor ve dropdownlist içerisinde başka herhangi bir seçenek olmuyor. Bu henüz tarayıcıya özel bir çıktı ayarlanmadığı anlamına geliyor. Bu pencerede Edit tuşuna basıyoruz.

II) Açılan yeni pencere bize uygulamamızda desteklediğimiz tarayıcı türlerini gösteriyor. Buradan isHTML32″yi seçiyoruz ve Add To List diyerek formatlama yapılacak türler listesine ekliyoruz. Ve açılan pencerelerimizi sırayla onayladıktan sonra kapatıyoruz. Bu sayede HTML formatlaması yapacağımızı belirtiyoruz.

III) ObjectList”imize tekrar sağ tıklayıp Item Templates”i seçiyoruz bu sefer. ObjectList”lerde, Web DataGrid”lerinden farklı olarak sadece tek bir kolon gösterebildikleri için Item Templates seçeneği de bu yüzden tek gelmektedir. Açılan pencere artık tanıdık gelmekte. Buraya bir tane HTML tablosu ve bu tablonun içerisine de iki tane Link koyuyoruz ve Link”lerin DataBindings özelliğinden Text ve NavigateUrl özelliklerini bağlıyoruz. NavigateUrl özelliğini ise seçilen satırın detaylarını göstereceğimiz sayfaya ilgili parametre ile yönlendirmek için kullanacağız.

// Text özeliğine aşağıdaki gibi RegionID”yi bağlıyoruz.
DataBinder.Eval(((ObjectListItem)Container).DataItem, “RegionID”)
// NavigateUrl özelliğinde ise aynı sayfaya parametre ile yönlendirme
// yapıyoruz.
“MobileWebForm1.aspx?RegionID=”+DataBinder.Eval(((ObjectListItem)Container).DataItem, “RegionID”)

IV) Sonra ObjectListimizin Header”ına bir tane Label ekliyoruz ve ikinci formumuza iki tane TextView ve bir tane de Command ekliyoruz. Command geri tuşu işlevini görecek.TextView”ler ise paramerte olarak gelen değerin detay sahalarını gösterecekler.

V) Uygulamamızın önyüzleriyle ilgili yapacaklarımız sona erdi. Şimdi de arkaplandaki işi yapacak olan kod kısmımıza geçelim. Öncelikle, ObjectListimizde gösterilen sahaların açıklamalarını tutarken hem ingilizce hem de türkçe desteği vermek için myListTr ve myListEn adlı iki tane ArrayList yaratalım. Verileri tutmak için ise bir tane DataTable tanımlayalım.

public ArrayList myListTr = new ArrayList();
public ArrayList myListEn = new ArrayList();
DataTable dt = new DataTable();

VI) Sayfanın ilk yünlendiği Page_Load metodunda ise

//ObjectListimizdeki sahaların başlıklarını ArrayListe atıyoruz.
//Türkçe ve ingilizce için ayrı birer ArrayListimiz var.
myListTr.Add(”Bölge No”);
myListTr.Add(”Bölge Adı”);

myListEn.Add(”Region ID”);
myListEn.Add(”Region Description”);

if(Request.Params["RegionID"]!=null)
{
string regionID=string.Empty;
string regionDescription = string.Empty;
int dil = (int)Session["Dil"] ;
//Dil değeri 0 ise İngilizce
//Dil değeri 1 ise Türkçe olsun.
if(dil==0)
{
regionID = myListTr[0].ToString();
regionDescription = myListTr[1].ToString();
}
else if(dil==1)
{
regionID = myListEn[0].ToString();
regionDescription = myListEn[1].ToString();
}

ActiveForm = FormDetay;
dt=(DataTable)Session["dt"];
DataRow dr = FindRow(int.Parse(Request.Params["RegionID"]));

TextView1.Text=regionID +” : ” +dr["RegionID"].ToString();
TextView2.Text=regionDescription +” : ” + dr["RegionDescription"].ToString();
}

if(!IsPostBack)
{
if(Form1.Visible)
{
//Dil değeri 0 ise İngilizce
//Dil değeri 1 ise Türkçe olsun.
Session.Add(”Dil”,0);
//Önce Datalarımızı ve ObjectListimizi dolduralım.
BindData();
int dil = (int)Session["Dil"];
//Dil Değiştirme metodu ile Object Listimizin başlıklarını dile göre değiştirelim.
ChangeLanguage(dil);
}

VII) Page_Load metodunda çağırdığımız BindData ve ChangeLanguage metodlarını açıklayalım şimdi de;

private void BindData()
{
// Önce SelectionList”imizi dolduruyoruz.
//Dil değeri 0 ise Türkçe
//Dil değeri 1 ise İngilizce olsun.
MobileListItem li = new MobileListItem(”Türkçe”,”0″);
SelectionList1.Items.Add(li);
li = new MobileListItem(”İngilizce”,”1″);
SelectionList1.Items.Add(li);

if(Session["Dil"]==null)
{
Session.Add(”Dil”,0);
SelectionList1.Items[0].Selected = true;
}
else
{
// Session”dan daha önce seçili olan dilin değerini alıyoruz.
int dil = (int)Session["Dil"];
// Daha önceden seçilmiş olan dile göre Selection”ımızın ilgili item”ını
// seçili yapıyoruz. Burada indeks değerleri ile value değerleri aynı
// verildiği için bu şekilde basit bir atama yapılabilmektedir.
SelectionList1.Items[dil].Selected = true;
}
BindObjectList();
}
private void BindObjectList()
{
// Eğer Session”da “dt” adlı nesne yoksa
if(Session["dt"]==null)
{
// conn adında Sql Bağlantısı yarat
SqlConnection conn = new SqlConnection(”server=localhost;database=Northwind;Trusted_Connection=true”);
// da adında SqlDataAdapter oluştur
SqlDataAdapter da = new SqlDataAdapter(”select * from Region”,conn);
// Yaratılan SqlDataAdapter vasıtasıyla dt adlı DataTable”ı doldur
da.Fill(dt);
// dt adlı DataTable”ı Session”da sakla
Session.Add(”dt”,dt);
}
else// Eğer Session”da “dt” adlı nesne varsa
dt = (DataTable)Session["dt"];
// dt adlı DataTable”ı kullanarak ObjectList”i doldur.
ObjectList1.DataSource=dt;
ObjectList1.DataBind();
}
private void ChangeLanguage(int dil)
{
//Gönderilen dil değerinin tersini hem Session”a atıyor
// hem de buna göre dil değiştirme tuşu ile ObjectList”in başlıklarını atıyor.

System.Web.UI.MobileControls.Link lnkButton=null;
System.Web.UI.MobileControls.Label lblControl=null;
// ObjectList içerisinde Command ve Label”ımızı arıyoruz.
// Bu objeler ItemTemplate içinde oldukları için direk
// ObjectList”te aramak yerine TemplateContainer”da arıyoruz.
foreach (MobileControl ctrl in ObjectList1.Controls)
{
if (ctrl is TemplateContainer)
{
if(lblControl==null)
lblControl = ctrl.FindControl(”Label2″) as System.Web.UI.MobileControls.Label;

if(lnkButton == null)
lnkButton = ctrl.FindControl(”Link1″) as System.Web.UI.MobileControls.Link;
// Detaylar linkinin metinlerini seçilmiş olan dile göre yüklüyoruz
if(lnkButton!=null)
{
if(dil==0)
{
lnkButton.Text=”Detaylar”;
}
else if(dil==1)
{
lnkButton.Text=”Details”;
}
lnkButton = null;
}
}
}

// Gelen dil değeri 0 ise Türkçe seçilmiş demektir
// Eğer dil değeri 1 ise İngilizce seçilmiş demektir.
if(dil==0)
{
cmdChangeLanguage.Text=”Değiştir”;
ObjectList1.MoreText = “Detaylar”;

if(lblControl!=null)
lblControl.Text = myListTr[0].ToString();
}
else if(dil==1)
{
cmdChangeLanguage.Text=”Change”;
ObjectList1.MoreText = “Details”;

if(lblControl!=null)
lblControl.Text = myListEn[0].ToString();
}
}

VIII) Dil değiştirme işlevini yerine getirecek olan Command”ımıza tıklandığında çalışacak olan kod parçası ise;

private void cmdChangeLanguage_Click(object sender, System.EventArgs e)
{
string strDil = SelectionList1.Selection.Value;
// Session”a dil değeri kaydediliyor.
int dil = int.Parse(strDil);
Session.Add(”Dil”,dil);
// Gidip veritabanından ilgili dille ilgili
// sahaların çekileceği varsayılarak BindData
// metodu çağırılıyor.
BindObjectList();
// Dil değiştiği zaman ekrandaki diğer
// Komponentler üzerinde de değişiklik yapılacak.
ChangeLanguage(dil);
}

Bu yazımızda Mobil Web Kontorollerinden Command, ObjectList, SelectionList, Link ve TextView kullanarak basit bir uygulama yaptık. Bir sonraki yazımızda daha detaylı ve daha farklı kontrolleri kullanmayı öğreneceğiz. Burada örnek gösterilen uygulamanın tamamını indirmek için tıklayınız.