KMRT BSRN

"Hiç kimsenin ilgisine ihtiyaç duymadığın gün olgunlaşırsın. Hiç kimseden beklentiye girmediğin gün yara almazsın. Ve hiç kimseye bağımlı kalmazsan kazanırsın." OSHO

Visual Studio Lightswitch – Create Editable Grid Screens Using Chinook Database

Yorum bırakın


Evet sonunda bunuda mı görecektim. Her geçen gün yazılımcıya ihtiyaç azalıyor gibi mi? Acaba? Tabii ki hayır ! 🙂 Bu araçlar yazılımcıların yerini alması için değil, yazılımcıların kullanıcıların ihtiyaçlarına daha hızlı yanıt vermesi ve daha hızlı, daha hatasız çözüm getirmesi için geliştiriliyor. Sonuçta siz tek başınıza yazılım geliştiren bir geliştirici olabilirsiniz. Böyle durumları düşündüğünüzde sizi tasarım yapmaktan, user experience vs gibi kavramlardan kurtaran çözümler olarak yerlerini alıyorlar. Hatta yazılımcıları geliştirici yönlerini de unutmamak gerekiyor. Tüm bunları düşündüğünüzde artıları eksilerinden çok daha fazla oluyor.

img1

Sözü fazla uzatmadan LightSwitch nedir? Ne değildir? Ne sağlıyor ki bize bunları anlatıyorsun bu konulara gelelim. Aslında bu konuları burada uzun uzadıya yazmayacağım. Çünkü zaten yazan arkadaşlar var. Sizi onların sayfasına yönlendirerek oradan giriş yapmanızı isteyeceğim. Sonrasında da yazımıza kaldığınız yerden devam edip LightSwitch ile güzel bir uygulama geliştireceğiz.

Öncelikle LightSwitch ‘in resmi sitesine buradan ulaşabilirsiniz. Videolarını izleyerek gerekli yüklemeleri buradan yapabilirsiniz..

LightSwitch ‘e giriş için Mehmet Sencer Karadayı arkadaşımızın sitesindeki yazıyı öncelikle okumanızı öneririm. Buradan ulaşabilirsiniz.

Şimdi tüm bu işlemler tamam ise, artık LightSwitch hakkında bilinçli, ne olduğunu bilen, vayyy bee adamlar neler yapmış, ne güzel şeylerle uğraşıyorlar, peki ben nasıl bunu kullanabilirim diyorsanız olayımıza başlayabiliriz.

Öncelikle örnek bir veritabanı ihtiyacım olduğundan internetten Chinook Database’ini indirdim. Ufak ve basit bir veritabanı yapısı, içinde verilerde bulunuyor. Ben yapacağım örnek uygulamada bu veritabanını kullanacağım. Buradan indirebilirsiniz..

img2

Veritabanı şemasını da yukarıda görebilirsiniz. Bu veritabanın ‘daki 3 tabloyu kullanarak uygulamamızı geliştireceğiz. Bu tablolar; “Artist” , “Album” , “Track” olacak.

Amacımızı maddeleyerek devam edelim;

· Artist tablosundaki artist’leri listelemek.

· Seçilen artist’e ait albüm’leri listelemek.

· Seçilen albüm’e ait şarkıları(Track) listelemek.

· Bu üç liste(Artist, albüm, şarkı listeleri) üzerinde veri ekleyebilme.

· Bu üç liste(Artist, albüm, şarkı listeleri) üzerinde veri düzenleyebilme.

· Bu üç liste(Artist, albüm, şarkı listeleri) üzerinde veri silebilme.

· Bu üç liste(Artist, albüm, şarkı listeleri) üzerinde arama yapabilme.

· Bu üç liste(Artist, albüm, şarkı listeleri) üzerinde excel export yapabilme.

Bu işlemler yaparsak zaten kocaman, elimizde hazır bir program oluyor. Ben bunu satarım bile diyebilirsiniz. Neden olmasın

Size şunu desem aklınıza ilk ne gelir? Tüm bu saydıklarımı kod yazmadan yapabileceğimiz. Üstelik bu programın hem Windows hem web’de çalışabileceği hatta LightSwitch Release olduktan sonra(şu an Beta 1 aşamasın da) Cloud üzerinde de çalıştırabileceğiz desem. Bir yazılımcı olarak aklınıza “geliştirici olma yönünden” ne gelir? “Süper para kazanırım” diye tabii ki gelir ama onu kastetmiyorum. Bir uygulamayı geliştirirken artık en önemli safhanın neresi olacağını düşünürsünüz? Veritabanı.. Benim aklıma ilk bu geldi. Demek ki artık ne ara yüzü nasıl yapacağımı ne arama işlemini nasıl yapacağımı, ne excel aktarma işlemini nasıl yapacağımı, ne de nasıl hem Windows hem web’de çalışabilir diye düşünmeme gerek yok. Veritabanını çok iyi kurgularsam. Ekranları çok rahat ve çok düzenli bir şekilde oluşturabilir ve kullanıcıların eline temel bir uygulama verebilirim. Bu gerçekten veritabanının önemini bir kere daha ortaya koyuyor. Veritabanını çok iyi kurgulamanın geliştiriciyi ve kullanıcıyı ne kadar memnun ettiğini ve rahatlatabileceğini ortaya koyuyor.

Neyse bu kadar konuşmak yeter. Artık yap şu örneği diyor olabilirsiniz. Hemen geçiyorum.

İndirdiğiniz Chinook veritabanı dosyasını sıkıştırılmış klasöründen çıkardığınızda “SqlServer” klasöründeki “create.bat” isimli dosyayı çalıştırarak SQL Express kullanarak sisteminize ekleyebilirsiniz..

LightSwitch ‘in resmi sitesinden, LightSwitch ‘i indirip kurduysanız. Tüm malzemelerimiz hazır demektir. Yemeğimizi yapmaya başlayabiliriz.

LightSwitch kurulumundan sonra Visual Studio 2010 ‘u açtığımızda aşağıdaki ekranı görebilir hale geleceksiniz.

img3

Sol tarafta “LightSwitch” template’ini seçtiğinizde “VB” ve “C#” ile bir proje açabilirsiniz.. Ben Visual Basic ‘i seçmişim. Siz C#’ da seçebilirsiniz. Çünkü belirttiğim gibi bu yazımızda kod yazmayacağız. Kod yazmadan olayı bitireceğiz. Aşağıdaki ekran bizi karşılayacaktır.

img4

Burada iki seçeneğimiz bulunuyor. “Create New Table” ile yeni bir tablo oluşturmak. Ya da “Attach to external database” ifadesi ile varolan bir veritabanını geliştireceğimiz uygulama için projemize bağlamak. Biz “Attach to external database” seçiyoruz.(Chinook ‘u boşuna mı yükledik)

Adımları takip ediyoruz. Bu arada “LightSwitch” in ne tür veritabanları ile çalışabildiğini de bizzat görebiliyoruz.

img5

img6

img7

Yukarıda, senaryomuzda bahsettiğim gibi 3 tabloyu kullanacağız. (Album, Artist, Track)

img8

“Finish” işleminden sonra projemizde durumlar şu şekilde değişiyor..

img9

Şimdi bizim için neler yapıldığını bir inceleyelim. Solution içerisinde oluşturduğumuz veritabanı bağlantısı için “DataSources” klasörü altına bir “ChinookData” yapısı oluşturuldu. Onun altına da seçtiğimiz tablolar için yapılar oluşturuldu. Yani bukadar mı? 3-4 parça bir şey mi eklendi. Aslında hayır ! Çünkü durum şu şekilde, solution içinde gördüğünüz görünüm, özelleştirilmiş bir görünümdür. Aslında gerçek proje class’larını görmek istiyorsanız.. “Solution Explorer” ekranının üst tarafında en sağ taraftaki dropdown buton ‘dan “File View” seçeneğini seçmelisiniz..

img10

img11

İşte bu görünümde aslında neyle uğraştığınızı daha iyi görebilirsiniz..  Çok güzel dimi !?

Biz devam edelim. Tekrar “Logical View” seçerek görünümü değiştiriyorum. Böylesi daha hoş görünüyor.

Birazda sol taraftaki tasarım alanından bahsedelim. Burada tablolarınızın kolonlarını ve bu kolonların özelliklerini görebilirsiniz. Biz var olan bir veritabanı kullandığımız için otomatik olarak bu tanımlamalar okunuyor ve yapılıyor. Zaten değiştiremiyorsunuz da, çünkü varolan bir veritabanına bağlı olarak çalışıyorsunuz. Eğer ilk ekranda ki kendi tablomuzu oluşturarak devam etseydik buralarla oynayabilirdik.

img12

Bu ekranda bazı konulara değinmek istiyorum. “String” veri tipinde tanımlı kolonlar ile ilgili bazı özel durumlar söz konusu. Yukarıdaki resimde dikkat ettiyseniz kolon tipinde “EmailAddress” , “PhoneNumber” gibi alışık olduğumuz veritabanı tiplerinden farklı formatlar var. Normalde veritabanı tiplerinden başka tipe kolonu atayamıyorsunuz fakat burada görüldüğü gibi bu iki format’ı seçerek verilerin o formatta düzenlenmesini sağlayabiliyorsunuz. Bu da sizi kod yazmadan kurtaran bir yöntem olarak aklımızın bir kenarında duruyor.

Bu ekranda tablolarınızın arasındaki ilişkiler ve bu ilişkilerin sonucu oluşturulmuş bazı “Collection” ‘ları görebiliyorsunuz. Mesela “Album” tablonuz “Artist” ve “Track” ile nasıl ilişkili olduğunu görebildiğiniz gibi aşağıdaki resimde de görebildiğiniz bu tablolarla arasındaki ilişki neticesinde ilgili kolon’larının tiplerinde nesnesel bir tipleme söz konusu. “Many-to-one” olan kolon ilişkilerinde sadece bir nesne olarak tipleme söz konusu iken “One-to-many” olan kolon ilişkilerinde tipe ait bir “Collection” tiplemesi söz konusu.

img13

Şimdi buraya kadar açıklamalarımızı yaptığımıza göre artık, elimizde bir otomatik oluşturulmuş yapı var. Peki ekranlarımızı nasıl hazırlayacağız. Design ekranında bir tabloyu seçtiğimizde “Properties” de bu tablo ile ilgili özellikleri görebiliyoruz.

img14

Burada daha önce oluşturulduysa varsayılan ekranının ne olacağı(ekran konusuna geleceğiz.), Çoğul isminin(Plural Name) ne olacağı, arama yapılabilir olup olmayacağı(Is Searchable), isminin(Name) ne olacağı, açıklama(Description), Görünen isminin(Display Name), bir özet durumu varsa bunun hangi kolon olacağı(Summary Property) gibi özelliklerini ayarlayabiliyoruz. Burada birkaç özellik ile oynayalım.

Display Name : Albüm

Description : Artiste ait albüm listesini içerir.

Şeklinde değiştirdim. Sonra Design ekranında “Artist” tablosuna çift tıklıyorum. Artist tablosu ekranın ortasına geliyor ve burada da diğer tabloda yapabildiğimiz şeyler mümkündür.

img15

Özelliklerini şu şekilde değiştirdim.

img16

Track” tablosunun da özelliklerini şu şekilde değiştiriyorum.

img17

Bu işlemlerden sonra “Artist” tablosuna geliyoruz.

img18

Design ekranında üst tarafında görünen bar’da “Relationship..”, “Computed Property”, “Query”, “Screen…”, “Write Code” … gibi işlemlerle sorgu oluşturma, ilişki oluşturma, ekran oluşturma, kod yazma gibi seçeneklerimiz mevcut. Biz burada “Screen” tıklayarak bu tablo ile ilgili bir ekran oluşturacağız.

img19

Gelen ekranda sol tarafta ekran şablonları mevcuttur. Bu şablonlara tek tek bakarsanız ekranın ortasında nasıl bir görünüm oluşturulacağı da gösterilmektedir. Biz buradan “Editable Grid Screen” şablonunu seçiyoruz(Daha sonra diğer şablonları incelemenizi öneririm). Sağ taraftan Artist tablosunu seçiyorum. “Screen Name” olarak da “Artistler” yazıyorum. OK düğmesine basıyorum.

img20

Öncelikle Solution içindeki “Screens” klasöründe “Artistler” ekranımız otomatik oluşuyor. Sol tarafta ise “Document Outline” formatında bu ekrandaki kontrollerin hiyerarşisini görebilmekteyiz. Öncelikle uygulamamızı “F5” ile bu haliyle çalıştırıyoruz.. Ne oldu bir görelim. Bu arada eğer uygulamanız çalışmazsa ve SQL Express ile ilgili bir hata alırsanız(Bende servisi çalıştırmamışımJ). Uygulamanın SQL Express ‘i bilgisayarınızda kurulu olmasını ve çalışıyor olmasını istediğini belirtmek istiyorum.

img21

Gördüğünüz gibi çok şık bir ekran bizi karşılıyor. Hem de gördüğünüz her şey çalışıyor.  Yani öncelikle sol taraf da ekranımızın listelendiğini görebilirsiniz. Üst tarafta “Save”(kaydet), “Refresh”(Yenile) düğmelerini ve sağ tarafta verilerimizin listelendiğini görebiliyoruz. Çekinmeyin biraz oynayın tıklayın.  Ardından arama yapılabildiğini, Excel ‘e aktarma yapılabildiğini ve listenin hemen üstünde “Add…”(Yeni veri ekleme), “Edit…”(Düzenleme), “Delete”(Silme), “Refresh”(Yenileme) yapabildiğinizi görmek güzel.  Ayrıca Grid üzerinde sayfalama yapılması da harika. Şu anda bu tablo üzerinde yaptığınız her şey çalışacaktır. Şaşırabilirsiniz..  Evet şu an bir ekran hazırladık. Program hazır. Üstelik uygulama penceresinin sağ yukarısında bulunan turuncu düğme ile “Customize Screen” ekrandaki kontrolleri kaldırmanız ya da yerini değiştirmeniz mümkün. Bu değişiklikler otomatik olarak Visual Studio içindeki projemize de yansıyor. Şimdi ekranı kapatıp diğer ekranlarımızı da oluşturalım. Solution Explorer’da “Albums” kaynağına çift tıklıyoruz. Design kısmındaki menü’den “Screen” düğmesine tıklıyoruz.

img22

img23

OK’e basıyorum. Aynı işlemleri “Track” tablosu içinde yapıyoruz..

img24

OK’e basıyoruz. Kaydediyoruz ve uygulamayı tekrar çalıştırıyoruz.

image

Sol taraftaki ekran listenizden tüm ekranları sırası ile çift tıkladığınızda çok şık bir şekilde Tab’lar ile her ekranı açtığını görebilirsiniz. Çok hoş dimi? Şu an tüm tablolarda işlem yapabiliyorsunuz. Enfes… Harika..

image

Hatta dikkatinizi çekmek istediğim bir yer var. Ekranlarda listelenen verilerde ilişkili kolonların üzerine gelindiğinde yukarıdaki ekran görüntüsünde görüldüğü bir Browse(Gözat) düğmesi bize sunuluyor. Buradan aşağıdaki ekran görüntüsündeki gibi bize ilişkili tablonun verileri listeleniyor ve seçilmesine imkan veriyor. Bu da çok harika bir özellik..

image

Yapılan işlemler ile ilgili ekranda bazı görünüm değişikliği söz konusu oluyor. Aşağıdaki ekran görüntüsünde “Edit…”(Düzenleme) yapılan satırların başına yıldız(*) işareti geliyor ve sarı renkte gösteriliyor. “Delete”(Silme) yapılan satırların başına kırmızı bir çarpı işareti geliyor ve sarı renkte gösteriliyor.

img27

Add…”(Yeni) eklenen kayıtlarda ise en alt satırda, satır başında yıldız(*) işareti geliyor ve sarı renkte gösteriliyor. Ayrıca Tab ‘ın sol köşesinde de yıldız(*) işareti gösteriliyor. Aynı zamanda “Save”(Kaydet) butonu da aktifleşiyor. Kaydet düğmesine basmadığınız sürece yapılan işlemler kaydedilmiyor.

img28

Buraya kadar yaptıklarımız ile amacımıza ulaşmış oluyoruz. Makalemizin yukarılarında sıraladığımız amacımıza ulaşmış oluyoruz.

Burada bazı sorularınız ve küçümsemeleriniz olabilir. Bunu mu yani yapıyordu? Ben böyle bir şey zaten geliştirdim? Ne var ki bun da? Diyebilirsiniz. Fakat emin olun bu daha buz dağını görünen kısmıdır. Uygulamayı kapattığınızda Visual Studio ‘nun design ekranında göreceğiniz üzere ekranda gördüğünüz bütün kontrolleri hiyerarşik görünümden değiştirebiliyorsunuz. DataGrid yerine Listbox kullanabiliyorsunuz. Butonları silebiliyor, kolonları kaldırabiliyor. Çok ince detaylar bile yapabiliyorsunuz. Bu gibi işlemlere diğer yazımızda kaldığımız yerden devam edeceğiz.

Hatta daha güzel bir şey yaparak, bu 3 ekranı tek ekranda nasıl toplayacağınızı ve bir artist seçildiğinde nasıl albümlerinin otomatik listeleneceğini, seçilen albümünün nasıl şarkılarının listeleneceğini göstereceğim. Şimdiden güzel bir ödev kokusunda bir amacımız oldu.

Görüşmek üzere,

Herkese iyi çalışmalar..

Reklamlar

Yazar: K. Murat BAŞEREN, MBA, MCP

I am a senior software developer, MCP, consultant, blogger, former chemist and software trainer. My interests range from software developer to technology. I am also interested in web development, education, and coffee.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s