iphone Eğitimi

Sınıf ortamında iphone programlama eğitimi için:

http://iphonedesigner.blogspot.com/p/iphone-egitimi-2829mays2011.html

8. MVC ( Model-View-Controller )

MVC modeli uygulamanızı oluştururken size kolaylık sağlayacak bir dizayn tipi sunmaktadır. Bu modeli iyi kavrayıp alışkanlık haline getirdiğinizde yazdığınız program sizin için hiçbir zaman içinden çıkılmaz bir hal almayacaktır.

Parçalara ayırıp inceleyelim.

Model: Uygulamanızın kullandığı dataları temsil eder. Bir çağrı merkezi uygulamasında şirketin tüm müşterileri, bu müşterilerin satın aldığı ürünler sizin datanızı oluşturur. Uygulamanızda bu dataya ulaşan, datayı güncelleyen, silen ya da yaratan parçaya Model adı verilir.

View: Uygulamanızın kullanıcıya bakan yüzüdür. Bir diğer deyişle kullanıcının gördüğü ara yüze View denir. Bunlar renkler, veri alanları, butonlar, drop-downlar vs. olabilir. Uygulamanın görselini oluşturan her bir parça View elemanıdır.

Controller: Controller, Model ile View arasında iletişimi sağlayan katmandır. View'dan gelen kullanıcı taleplerinin Model objesine gönderilmesi ve Model'den gelen datanın View'da gösterilmesi görevini Controller üstlenir.

Konuyu daha iyi anlatabilmek için bir senaryo üzerinden gidelim. Elimizde kullanıcıdan bir şehir adını input olarak alıp o şehrin hava durumu raporunu bir web servisten alıp kullanıcıya gösteren bir aplikasyon düşünelim. Tüm bu sürecin MVC'ye göre nasıl işlediğini şu şekilde özetleyebiliriz.

1. Kullanıcı bir şehir seçip ilgili butona basar. Bu event Controller'a gönderilir.

2. Controller model'e kullanıcı input'unu gönderip ilgili veriyi ister.

3. Model, web servisi çağırıp şehir için hava tahmini verisini alır.

4. Model veriyi aldığında Controller objesine haber verir.

5. Controller son olarak veriyi alıp View'a yönlendirir.

Model veriyi farklı şekillerde elde edebilir. Database bağlantısı kurup sql ile veri çekebilir, web servis çağırıp xml parse edebilir, dosyadan okuyabilir ya da hard-coded değerler tutabilir.

Konunun anlaşıldığını düşünüyorum. Bir sonraki modulde MVC modeline uygun ufak bir uygulama hazırlayacağız. Kullanıcı buton'a basacak, bu aksiyon Controller'a gidecek. Controller da Model'e gidip hardcoded tutulan değerleri View'a ulaştıracak. Basit ama öğretici... 

7. Objective-C : Ders 1

Şu ana kadar yaptıklarımız çok detaya girmeden Xcode ortamının çok karışık bir yapıya sahip olmadığını göstermeyi hedefliyordu.

Bu bölümde Objective-C kapsamında önemli kavramları anlamaya çalışacağız.

outlet: Kodlarken yarattığınız değişkenleri xib dosyanızdaki IB elemanlara bağlayan yapıdır. Bir önceki bölümde yaptığımız gibi IB üzerinde yarattığınız bir label değerini değiştirmek istiyorsanız Xcode'da bir outlet tanımalayıp bunu IB üzerinden UILabel kontrolüne bağlamanız gerekir. Aşağıdaki IBOutlet anahtar kelimesi lbl_sayi değişkeninin IB üzerindeki UILabel tipli bir elemana bağlanacağını anlatıyor.

@property (nonatomic, retain) IBOutlet UILabel *lbl_sayi;

action: UI üzerinde tanımladığınız objelerin bir method çağırmasını istiyorsanız action türünde methodlar tanımlamanız gerekir. Bu işlevi compiler'a anlatan anahtar kelime ise IBAction.

-(IBAction) sayiArtir;

property/synthesize: Bu iki keyword ile tanımladığınız değişkenlerin setter/getter fonksiyonlarını kapalı olarak yaratmış oluyorsunuz. Alışılagelmiş programlama tekniklerinde class içinde tanımlanmış değişkenlere get/set fonksiyonları da ekleyip dışardan erişimi sağlarken Objective-C'nin size sunduğu bu yapıyı kullanarak kolaylıkla accessors/mutators yani getter/setter methodlarını kapalı bir şekilde tanımlamış olursunuz.

property tanımını .h dosyalarında yapıp, synthesize tanımını .m dosyasında belirtiyorsunuz.

#import "HelloWorldViewController.h"
@synthesize lbl_sayi;

#import "HelloWorldViewController.m"
@property (nonatomic, retain) IBOutlet UILabel *lbl_sayi;

 

6. iPhone üzerindeki kontrolleri kod ile yönetmek

Bu bölümde bir önceki bölümde yaratmış olduğunuz Buton ve Label kontrollerini yazacağınız kodun yardımı ile yönetmeyi öğreneceksiniz.

Basit olarak butona basıldığında Label kontrolünde yazılı olan sayı değeri bir artacak. Bunun iPhone Xcode ortamında nasıl yapıldığını önce özetlemek isterim.

IB ile yarattığınız kontroller ( view, buton, label vs.) diğer SDK'larda olduğu gibi arka planda otomatik kodlar oluşturmaz. Yani siz .NET ortamında görsel editör ile bir buton yarattığınızda bunun kodsal karşılığı .NET tarafından ilgili class'a yazılır. Xcode'un davranışı bu şekilde değildir. Yarattığınız kontrollerin tanımları xib ( xml interface builder ) dosyasına yazılır. Bu kontrolleri yönetebilmek için Xcode'a gidip ilgili değişkenleri yaratmanız ve bu değişkenleri IB ile yarattığınız kontrollere bağlamanız gerekmektedir. 

Şimdi bu adımları Xcode ve IB kullanarak birlikte yapalım:

1. HelloWorld projenize gidip HelloWorldViewController.h dosyasını açın.

2. Aşağıda koyu ile belirtilen yerleri ekleyin.

@interface HelloWorldViewController : UIViewController {

    // UILabel tipinde bir değişken tanımlıyoruz.

    UILabel *lbl_sayi;
    NSInteger sayi;

}

// IBOutlet tanımı ile lbl_sayi değişkeninin UI'a bağlanabilecek bir kontrol olduğunu 

// belirtiyoruz. 

@property (nonatomic, retain) IBOutlet UILabel *lbl_sayi;

// Butona tıkladığımızda çalışacak olan methodun deklerasyonunu yapıyoruz.
// IBAction tanımlanan fonksiyonun Interface Builder(IB)'den çağıralabileceğini gösteriyor. 

-(IBAction) sayiArtir;

3. HelloWorldViewController.m dosyasını açın.

#import "HelloWorldViewController.h"

@implementation HelloWorldViewController

// lbl_sayi değişkeninin getter/setter methodlarını bu şekilde yaratıyoruz.

@synthesize lbl_sayi;

4. Yaptığınız değişiklikleri kaydettikten sonra HelloWorldViewController.xib dosyasına çift tıklayarak IB editörünü açın. Önceki bölümlerde anlatılan Library dışındaki üç ekranı da açın. Inspector ekranında üst tarafta yer alan soldan ikinci tab'ı yani Connection bölümünü tıklayın. Aynı zamanda HelloWorldViewController.xib ekranında da File's Owner satırına tıklayın. Bu noktada Inspector ekranında bir önceki adımda yarattığınız lbl_sayi ve sayiArtir tanımlarını aşağıdaki gibi görüyor olmalısınız.

Şimdi lbl_sayi kontrolünü View'daki Label ile sayiArtir fonksiyonunu da View'daki buton ile aşağıdaki gibi eşleştireceğiz.

Yaptığımız bu işlemler sonucunda UI kontrolleri ile kod bağlantısını gerçekleştirmiş olduk. Bir sonraki adımda butona bağladığımız sayıArtir fonksiyonunun kodlarını yazacağız.

5. HelloWorldViewController.m dosyasını açıp aşağıdaki satırları ekleyin.

-(IBAction) sayiArtir

{

// UILabel kontrolündeki değeri NSInteger'a çeviriyoruz.

sayi = [lbl_sayi.text integerValue];

// Sayi değerini 1 artır

sayi++;

// NSInteger tipini NSString tipine çevirip View üzerindeki UILabel kontrolüne atıyoruz.

lbl_sayi.text  = [NSString stringWithFormat:@"%ld",(long)sayi ];

}

6. Tüm projeyi kaydettikten cmd+R tuş kombinasyonuna basıp simülatörde yazdığınız kodu test edin. Simülatörü XCode ekranındaki "Build and Run" butonunu tıklayarak da çalıştırabilirsiniz.

5. IB ile UIButton ve UILabel eklemek

UI editör kapsamındaki bir önceli yazıda anlattığım 4 pencereyi de açın. Library penceresinden birer adet Round Rect Button ve Label kontrollerini View penceresinin üstüne sürükleyip bırakın. Label kontrolünü çift tıklayarak text değerini 0 sayısı olarak girin. Buton kontrolünü çift tıklayarak buton adını +1 olarak değiştirin. Sonuç itibariyle aşaıdaki View görüntüsüne ulaşmanız gerekiyor.

4. Interface Builder (IB)

Bu bölümde IB editörünü tanıyacağız.

IB tam anlamıyla size görsel tasarımınızı yapmanızı sağlayacak olan editördür. Uygulamanızın kullanıcıya nasıl görüneceğini burda belirler, görsel öğeler ile kodlarınız arasıdaki bağlantıyı bu ekranda dekleratif olarak tanımlarsınız.

IB dört farklı ekrandan oluşur :

Soldan sağa;

1.Pencere .xib dosyasının görselini oluşturmaktadır. Uygulamanızdaki View objesine ait görsel öğe hiyerarşini .xib penceresinden takip edebilirsiniz. Mesela uygulamanıza bir buton eklediğinizde bu butonun tanımı .xib penceresine eklenir.

2.Pencere View penceresidir. Bu pencere uygulamanızın iPhone cihazında nasıl görüneceğini bu pencereden takip edebilirsiniz.

3.Pencere View penceresinin ve View objesine bağlı olan diğer buton vs. gibi objelerin görsel ve davranışsal özelliklerini takip edebileceğiniz ve değiştirebileceğiniz penceredir. Örneğin bir butonun boyutunu, arkaplan rengini bu pencereden güncelleyebileceksiniz.

4.Pencere uygulamanızda kullanabileceğiniz hazır görsel objeleri seçip View objenize sürüklemenize imkan veren penceredir.

Şimdi 2, 3 ve 4.pencereleri kapatıp .xib penceresini kullanarak kapattığımız pencereleri nasıl tekrar geri açabiliriz görelim.

Pencereleri kapattıktan sonra .xib penceresindeki "View" adlı objeye çift tıklayın. View penceresinin açıldığını göreceksiniz.

.xib penceresindeki "Inspector" adlı objeye tıklayın. 3.pencerenin açıldığını göreceksiniz.

.xib penceresindeki "Library" adlı objeye tıklayın. 4.pencerenin açıldığını göreceksiniz.

  

3. Xcode ile ilk Projemiz

Bu bölümde Xcode ile yeni bir proje yaratacağız. Projeye herhangi bir kod eklemeden Simülatörde çalıştıracağız. Buna rağmen default olarak oluşturulan class'lar sayesinde Simülatörde çalışan bir pencere ve içinde bir view göreceksiniz. Sonrasında Xcode kullanarak iPhone uygulamalarındaki temel elemanları inceleyeceğiz.

Öncelikle Xcode'u çalıştırıp ekrandan "Create a new Xcode project" seçeneğine tıklayın. Yeni açılan ekranda iOS altında Application seçeneğini seçin ve sağ üstte açılan penceden "View-based Application" tipini tıklayın.

Son olarak "Choose" butonuna tıklayıp açılan ekranda Projenize isim olarak "HelloWorld" verin. Şu anda önünüzde Xcode ekranı aşağıdaki gibi açılmış olması lazım.

Bu ekranda "Build and Run" butonuna tıklayıp Simulatörün açılmasını bekleyin. Ve karşınızda ilk iphone uygulamanız!

Şimdi Simülatörü kapatıp XCode'a geri dönelim. Konsolun sol tarafında bulunan Classes klasörü içindeki Objective-C sınıflarına göz atalım:

HelloWorldAppDelegate: Bir uygulama çalışmaya başladığında program döngüsünün içine girmiş demektir. Bu döngüde sistemden gelen temel mesajların yorumlanıp ona göre bir davranış sergileme görevini bu class üstlenmiştir. Örneğin iPhone çıkış tuşuna basıldığında akışı düzenleyen bu sınıftır.

HelloWorldViewController: Bu class uygulamanızdaki görsel elemanların kullanıcıya gösterilmesi görevini üstlenmiştir. 

Şimdi de Resources klasörü altındaki dosyaları inceleyelim.

MainWindow.xib : Her iPhone uygulamasında bir adet window vardır. Bu pencere tüm view elemanlarını üstünde barındırır. 

HelloWorldViewController.xib : Uygulamanızın ana view elemanı budur. Geliştirmeler sırasında bu dosyayı açıp önüne gelen Interface Builder (IB) ekranında gerekli görsel değişiklikleri "drag and drop" yöntemi ile gerçekletireceksiniz. View yapınıza buton, yazı ya da image ekleyip arkaplan rengini değiştirebileceksiniz. HelloWorldViewContoller sınıfı sayesinde de oluşturduğunuz her bir view elemanının kodlar ile yönetilmesini sağlayacaksınız. 

Bundan sonraki adımda IB editörünü açıp ekrana bir imaj, bir label ve buton ekleyeceğiz. Sonraki adımlarda ise bu elemanların arkasına ufak kodlar yazıp UI ile kodlar arasındaki bağlantıyı nasıl sağlıyoruz bunu göreceğiz...