Gul YURDAKUL

1990 doğumlu Gül Yurdakul, Eskişehir Osmangazi Üniversitesi 3. sınıf öğrencisidir. Bir çok projede çalışmıştır. Özel bir yazılım firmasında mobil yazılım üzerine çalışmış olup şu an kendini geliştirmekte ve part-time iş aramaktadır. Uzmanlaşmış olduğu alanlar: C, C++, Visual C#, Android, Sql 2008, Object Oriented, JavaScript.

Kısacası layout için kullanıcı arayüzü diyebiliriz. Xml ie oluşturulur. Layoutları 6 ana grupta toplayabiliriz.  AbsoluteLayout,  FrameLayout, LinearLayout, TableLayout, RelativeLayout, ScrollView.

Absolute Layout

Absolute Layout’dan başlayalım anlatmaya. Absolute layout son derece basittir. Tek amacı, layout içerisindeki kullanılan nesnenin özel pozisyonunu belirterek yani x ve y koordinatlarını vererek kullanmaktır. Yani, kullanılacak olan nesnelerin yerlerini örneğin tek tek (piksel piksel) belirlemek istiyorsanız bu layoutu kullanabilirsiniz. Şimdi bu konuyla ilgili basit bir uygulama yapalım.

Uygulamamızda Ad ve Soyad kısmının girileceği iki tane Edittext ve Gönder butonu kullandık .  Bunların işlevleri şuan için önemli değil. Bizim için konumları önemli. Konumlarını belirlemek için de layout_x ve layout_y özelliklerini kullanıyoruz.  Diğer layoutları ileriki makalelerde bulabilrsiniz.

Windows Phone 7’de kullanıcı arayüzü oluşturmak için XAML kullanıyoruz. XAML, biraz HTML’e benziyor, fakat daha güçlü yapısı var. Bazı kuralları da XML’den geliyor. XAML ile animasyon oluşturabiliriz, video gömebiliriz, verileri bağlayabiliriz. Bu uygulamamızda basit bir animasyon oluşturacağız.

XAML:

C#:

Animasyonda oluşturduğumuz kodları teker teker açıklayalım. Animasyonları, Storyboard ile zamanlara bölerek oluşturuyoruz. Elips’in aşağı doğru uzaması için Storyboard’ın özelliğini “Height” yaptık. İsterseniz ” Width ” yaparak nasıl bir değişiklik olduğunu görebilirsiniz. LinearDoubleKeyFrame, elipsin düzgün bir şekilde hareket etmesini sağlar. Üzerine tıklayabilmemiz kadar görülebilmesi için başlangıç değerini “30″ verdik. SplineDoubleKeyFrame, uygulamamızda bir ivme oluşturabilmek için (belirli bir hızla başlayıp daha sonra yavaşlaması gibi) kullanıyoruz. KeySpline özelliğinde, başlangıç, bitiş ve iki kontrol noktası vardır. Bu noktalar 0 ve 1 arasında bir değer alır ve animasyonun değişme hızını belirler. 0.8 saniye içerisinde aşağı doğru değeri 300 olana kadar ilerleyecek ve daha sonra 200 oluncaya kadar yukarı çıkcak. Bu şekilde 2 kez bu hareket işlemini yapacak. Oluşturduğumuz elipsin click event’inde animasyonu başlatarak uygulamamızı yapmış olduk.

Çıktı:

Gül Yurdakul

gulyurdakul.com

İlk önce bu linkten Windows Pone 7 SDK kurulumunu yapıyoruz. Kodlamaya kolay bir giriş için bu adresten Microsft Small Basic indirip kuruyoruz. Tabi bunları yapabilmemiz için bilgisayarımızda Visual Studio 2010 kurulu olmadı gerekiyor. Gerekli hazırlıkları tamamladıktan sonra yeni bir proje oluşturalım.

  • Solda Visual C#->Silverlight for Windows Phone seçin.
  • Ortada bulunan Windows Phone Application seçin.
  • Projenin ismini de HelloWorld diyerek OK butonuna tıklayınız

Böylelikle yeni bir proje oluşturmuş olduk. Oluşturduğumuz sayfa 3 bölüme ayrılmış; soldaki tasarım için device görüntüsü, ortadaki XAML görüntüsü, sağdaki ise Solution Explorer görüntüsüdür. MainPage.xaml, uygulamalar için kullanıcı arayüzü oluşturur.

TextBlock Ekleme

Basit bir “TextBlock” ekleyerek “HelloWorld” yazdıralım. Toolboxtan TextBlock seçip sürükle bırak yapıyoruz. Daha sonra Properties kısmından text özelliğini “Hello World” yapıyoruz. Fontsize : 50, Height: 70 Tasarım şu şekilde oluyor;

Grafik Ekleme

Toolboxtan dikdörtgen, elips gibi şekiller seçip ekleyebiliriz. Biz elips seçelim ve özellikleri şöyle olsun;
1. TextBlock’ un altında olsun.
2. Mavi renkli, içi dolu, Height = 150, Width = 300 olsun.
Bunları Properties kısmından da değiştirebiliriz fakat XAML kısmından değiştirmemiz bizim öğrenmemiz açısından ve ileriki zor konularda elimizin çabuklaşmasını sağlayacaktır.
XAML:

<Ellipse Height=”150″ Fill=”Blue” Name=”ellipse1″ Width=”300″ />

Bu kodu yukarıda yazdığımız TextBlock’un altına yazalım ve çalıştıralım.

Buton Ekleme

Toolboxtan buton seçip ekliyoruz. Daha sonra XAML’den özelliklerini şu şekilde yapıyoruz:
XAML:

<Button Height = “150″

Width=”300″

Name=”FirstButton”

Content=”Click” />

Daha Sonra Buton’un Click Event’ine gidip orada şu işlemleri yapıyoruz:
private void button1_Click(object sender, RoutedEventArgs e)
{
if (button1.Content as string == “Click”)
{
button1.Content = “Again Click”;
}
else
{
button1.Content = “Click”;
}
}
Bu işlemle buton tıklanmadığında “Click”, tıklandığında ise “Again Click” yazıyor.

Animasyon Ekleme

Animasyon Eklemek için 3 şey gereklidir:
1. StoryBoard oluşturma,
2. Animasyon oluşturma,
3. Animasyonun başlaması için kod ekleme.

XAML:

<StackPanel>

<StackPanel.Resources>

<Storyboard x:Name=”FirstStoryBoard”>

<DoubleAnimation Storyboard.TargetName=”FirstEllipse”

Storyboard.TargetProperty=”Width”

To=”1″ AutoReverse=”True”

Duration=”00:00:01″ />

</Storyboard>

</StackPanel.Resources>

<TextBlock FontSize=”50″ Text=”Hello, World!” />

<Ellipse Fill=”Blue” Height=”150″ Width=”300″

Name=”FirstEllipse” />

<Button Height=”150″

Width=”300″

Name=”FirstButton”

Content=”Click”

Click=”FirstButton_Click” />

</StackPanel>

XAML kodunda, elipsin dönme hareketi yer alıyor. To, animasyon yapılacak değeri gösteriyor.  AutoReverse, tekrar edip etmeyeceğini,  duration ne kadar zaman süreceğini gösteriyor.

Animasyonun başlaması için kodda bir değişiklik yapmak gerekiyor.

private void FirstButton_Click(object sender, RoutedEventArgs e)

{

if (FirstButton.Content as string == “Tap”)

{

FirstButton.Content = “Tap Again”

}

else

{

FirstButton.Content = “Tap”;

}

FirstStoryBoard.Begin();

}

Gül Yurdakul

gulyurdakul.com

İlk önce JavaScript’i öğrenmemiz için gerekli ön bilgileri öğrenelim. İlk olarak javascriptin tanımından bahsedelim. JavaScript, web sayfanızın etkileşimli olmasını sağlar. Bu etkileşim, web sayfanızın daha çok insan tarafından beğenilmesini sağlar.

JavaScript dosyaları, web sayfalarında yer alır ve tarayıcılar tarafından çalıştırılıp yorumlanır. Önemli bir hatırlatma yapalım. JavaScript, Javadan farklıdır. Java başka bir programlama dilidir.

Peki JavaScript ile neler yapabiliriz?

  • Aktif bir kullanıcı arayüzü oluşturabiliriz,
  • Daha hızlı cevap veren ve kullanışlı bir site oluşturabiliriz,
  • Özelleştirilmiş html sayfaları oluşturabiliriz.
  • Tarayıcıdan kontrol edebiliriz.

JavaScript ile neler yapamayız?

  • Veri tabanıyla bağlantı kurulamaz,
  • Dosyaya veri yazılamaz,
  • Sayaç tutamaz,
  • Var olan durum bilgisini saklayamaz.
Ajax, javascript ile birlikte kullanılır. Ajax, Asynchronous Javascript and XML sözcüklerinin baş harflerinden oluşmuştur. Ajax, etkileşimli uygulamalar geliştirmemizi sağlayan yaklaşımdır. Kısaca Ajax, programlama dili, program veya geliştirme ortamı değildir, bir yaklaşımdır. Web teknolojileri ve standartları ortak kullanımıdır ve etkileşimli web arayüzleri oluşmasına olanak sağlar.
Şimdi JavaScript’in iş akış diyagramını görelim. Örneğin, bir html dosyasını Chrome ile açtıktan sonra, Araçlar sekmesinden “JavaScript konsolunu” seçiyoruz. Karşımıza çıkan ekran ile javascript kodlama, hataları görme gibi işlemler yapabiliriz. Bir javaScript dosyasının uzantısı js’ dir. Tıpkı css dosyaları gibi html kodu içerisinde tanımlanır.
Gül Yurdakul

Android, mobil işletim sistemi olup, IOS’a rakip olmuştur. Açık kaynaklı olduğundan geliştirilmasi daha kolay ve hızlıdır. Son dönemde giderek popülerleşmiştir. Apple, ipad, ipod ve iphone için IOS’u kullanırken Android açık kaynaklı olduğu için bir çok yerde kullanılmaktadır. Android Market üzerinden uygulamalara ulaşabilir ve yapılan uygulamaları da orada yayınlayabilirsiniz. O zaman uygulamaları geliştirmeye başlayabiliriz. Başlamak için öncelikle yapmamız gerekenler var. Bunlar:

1- Android de program geliştirmek için java yazılım dilini kullanacağız. Java içinde Eclipse IDE’sini kullanacağız. Bilgisayarınıza uygun olan sürümünü buradan indirebilirsiniz. Bir paket dosya inecektir. Bu paket dosyayı winrardan açıp program dosyalarına atabilirsiniz. Attıktan sonra dosyaya girip içindeki kısayolu masaüstüne gönderebilirsiniz. Bu şekilde eclipse’nin kurulumunu tamamlamış olduk.

2- Eclipse’nin çalışabilmesi için bilgisayarınızda java bulunması gerekiyor. Javayı buradan indirebilirsiniz. Aşağıda gösterilen resimde işaretli yeri seçiyoruz. Ardından gelen sayfada uygun sürümü seçtikten sonra javayı bilgisayarımıza kuruyoruz.

3- Android SDK’i bilgisayarımıza indiriyoruz. Buradan en son sürümünü indirebilirsiniz. İndirdikten sonra bunun da kurulumunu basit bir şekilde yapabilirsiniz.

Bütün dosyaları indirdikten sonra, öncelikle SDK Manager’ı açıyoruz. Aşağıdaki resimde bu şekilde bir işaretleme yapmamız gerekiyor.

Ardından Install Packages->Update All ya da refresh kısmını tıklayarak burayı güncellemeniz gerekiyor. Bunu yaptıktan sonra hangi paketi kurmak istediğini seçiyorsunuz. Daha sonra da install Selected diyerek indirme işlemi yapabilirsiniz. Kurulup kurulmadığını anlamak için Install Packages bölümüne giriyoruz. Eğer bir sorun oluşmuşsa tekrar yükleme yapınız. Android SDK manager da yeni bir cihaz kurulumu yapacağız. Bunun içinde Virtual Devices bölümüne geliyoruz. New butonuna tıklayarak gerekli yerleri doldurarak android cihazımızı oluşturmuş olduk. Yapmamız gereken son bir adım daha var. Eclipse’yi çalıştırıp Window->Preferences->Android->Browse diyerek Android SDKyi nereye kurmuşsanız orayı seçerek Apply butonuna basıldığında altta görünmesi gerekiyor. Bu işle bittikten sonra Help->Install New Software diyerek Work with kısmına bu sayfadaki https://dl-ssl.google.com/android/eclipse/ copy paste yapıyoruz. Add diyerek herhangi bir isim giriyoruz.Alttaki kutucuklara tick atıyoruz. İşlemi ilerleterek kurulumu tamamlamış oluyoruz. Bundan sonraki derslerde kod yazmaya başlayacağız.

Gül Yurdakul

www.gulyurdakul.com

© 2010 bilyaz.com , Programlama Makaleleri, Yazılım Makaleleri , Örnek Kodlar , Eğitim Videoları , C#,ASP.NET,SQL,PHP Suffusion WordPress theme by Sayontan Sinha