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 Advanced Screens

Yorum bırakın


Daha önce geliştirdiğimiz ilk LightSwitch uygulamamıza kaldığımız yerden devam ediyoruz. Önceki makalemizde(Visual Studio Lightswitch – Create Editable Grid Screens Using Chinook Database) LightSwitch’e giriş yaptık. Ekranları ve menülerden bahsettik. CodePlex’ten indirdiğimiz Chinook veri tabanını bağlayarak kullandık. Üç adet ekran hazırladık. Bu ekranların kullanımını inceledik. Bize sunduğu avantajlardan yararlanarak neler elde edebileceğimizi gördük.

Öncelikle şunu belirtmek istiyorum Visual Studio LightSwitch şuan Beta 1 aşamasında bu sebeple ileride Release olduğunda doğabilecek değişikliklerde uygulamalarınızda bazı sorunlar çıkabilir. Şu aşamada eğer basit işler için kullanırsanız daha sağlıklı olacağını düşünüyorum.

Bu uyarıdan sonra bu makalemizdeki amacımıza konuyu getirmek istiyorum. Yukarıdaki link’ten erişebileceğiniz makalemize kaldığımız yerden devam ediyoruz. Chinook veri tabanının üç tablosunu kullanarak(Artist, Album, Track) oluşturduğumuz üç ekranı(Screen: Artistler, Albümler, Şarkılar) tek bir ekranda nasıl oluşturabileceğimizi ve yerleşimlerini ayarlayabileceğimizi inceliyor olacağız. Aslında bir nevi gelişmiş bir ekran oluşturacağız.

En son projemizin durumu ve görünümü şu şekildeydi.

img1

Uygulamayı çalıştırdığımızda şu ekranları görebiliyorduk.

img2

img3

img4

Burada yeni bir ekran oluşturarak bu üç ekranı tek bir ekranda toplayalım. Bunun için VisualStudio ‘da design görünümüne geri dönüyorum ve “Screen” ekle düğmesi ile yeni bir ekran oluşturma sihirbazını çalıştırıyorum.

img5

Editable Grid Screen” şablonunu seçiyorum ve sağ taraftaki “Screen Data” kısmından “Artist” tablosunu seçiyoruz.

img6

Karşımıza “Artistler” ekranını yaparken gelen ekranın aynısı geliyor(Önceki makale de). Burada ekran üzerindeki kontrollerin “Document Outline” olarak gösterimi bulunmaktadır. Önceki makalemizde bu kısımlara dokunmadan ekranlarımızı oluşturmuştuk. Bu sefer artık işin detayına giriyoruz..

img7

Sol tarafta “ArtistCollection” ile belirtildiği üzere ekran üzerinde “Artist” tablosundan gelen verilerin “Artist” nesnesi olarak nesneleştirilmesi ve “ArtistCollection” olarak koleksiyon haline getirilip Data Grid üzerinde gösterileceği anlaşılmaktadır. Hemen altında “Selected Item” , yani seçilen (Artist nesnesinin) özellikleri görünmektedir. Bu özellikler Artist tablosundaki kolonlara karşılık gelmektedir.

img8

Selected Item” özelliklerinde en altta “Albums” özelliğini ekleyebileceğiniz bir link bulunmaktadır. Bu link gri renkte soluk olarak görünmektedir(“+ Add Albums” ) Bu link’in orada olmasının sebebi “Artist” tablosunun “Album” tablosu ile ilişkili olmasından dolayı orada görünmesidir. Bu link’e tıklayarak “selected Item” nesnesinin Album koleksiyonunu ‘da yüklemesi sağlanıyor.

img9

Böylece Artist’e ait olan Albümlerin koleksiyonunu “Selected Items” nesnesi içinde özellik olarak bağlamış olduk. Seçili Album nesnesinin özellikleri de “AlbumsCollection” altındaki “Selected Item” altında özelliklerde görünmektedir. Aynı şekilde AlbumsCollection bölümü altında “+ Add Tracks” link’ine tıklayarak Albüm’e ait şarkıların koleksiyonunun nesneye bağlanmasını sağlayalım. Bu link, Album tablosunun Track tablosu ile ilişkili olmasından dolayı görünmektedir.

img10

TracksCollection” altındaki nesnelerin özelliklerini de görebiliyorsunuz. Böylece Artist nesnemizin Album ve Track koleksiyonlarını bağlamış olduk. Design ekranında sağ tarafta kontrol hiyerarşisi üzerinde bu bağladığımız ekranları yerleştirmek için gerekli ayarları yapmaya başlayabiliriz. Ben bu işlemi uygulama çalışırken yapmayı tercih ediyorum. Çünkü böylece görsel olarak ön izleme mevcut olduğundan daha kolay ve ne yaptığınızı görerek ekranları oluşturabiliyorsunuz. “Save” ederek uygulamayı çalıştırıyorum(“F5”).

ArtistDetayları” ekranına geçiyorum. Bu ekranın “Artistler” ekranından farklı olmadığını görüyorsunuz. Bu ekran ‘ın sağ üst köşesindeki “Customize Screen” düğmesi ile bu ekranı özelleştirebileceğim ekrana geçiyorum.

img11

Bizi aşağıdaki ekran karşılıyor. Bu ekranı kısaca açıklamak gerekirse, Sol tarafta Visual Studio içindeki Design ekranını aynısını görüyorsunuz(Kontrol hiyerarşisi bulunuyor-DocumentOutline). En sol tarafta ise “olay” , “grup paneli” , “kontrol silme” , “yukarı-aşağı yerini değiştirme” , “içerdiği alanları resetleme” gibi işlemleri yapabileceğiniz bir menü bulunmaktadır. Sağ tarafta altta yine visual studio ‘da design ekranında iken sağ tarafta bulunan “properties” sekmesinin aynısı görünmektedir. Bu görünümün üstünde ise ön izleme ekranı bulunmaktadır. En yukarıda ise yaptığımız değişiklikleri kaydedeceğimiz ya da iptal ederek özelleştirme ekranından çıkabilmemizi sağlayacak olan düğmeler bulunmaktadır.

img12

Öncelikle yapacağımız görünümü bir gözümüzde canlandıralım. Artist listesi ekranımızda amacımız bu listenin hemen altında iki kolonlu bir tablo gibi sol tarafta albümlerin listelenmesini sağlamak ve bu albümlerin listesinin sağında da seçilen albüme ait şarkıların listelenmesini sağlamak istiyorum.

Bunun için “Add” düğmesinden “New Group” ‘u seçiyorum.

 img13

Bana bir adet “Vertical Stack” getiriyor. Fakat bu bizim istediğimiz değil. Bize “Horizontal Stack” yada “Two Column” gibi bir şey lazım. Hemen yeni eklediğim “Vertical Stack” kontrolünün üzerine geliyorum ve tıklayarak listenin açılmasını sağlıyorum. Açılan listeyi incelerseniz birçok alternatif seçeneğimiz olduğunu görebilirsiniz. (Biliyorum hayal gücünüz bir anda atağa geçti.) Buradan “Horizontal Stack” seçiyoruz.

 img14

Ardından “Horizontal Stack” altındaki “Add” düğmesini kullanarak “AlbumsCollection” ‘ı bu Horizontal Stack içine ekliyoruz.

 img15

Ön izleme kısmında albümlerimizin nasıl geldiğine dikkat edin. Ardından “Add” düğmesi ise “TracksColleciton” ‘ı ekliyoruz.

 img16

Oluşan ekranımızı ön izleme kısmından takip ediyoruz.

 img17

İstediğimiz oldu gibi ama ön izlemede görüyoruz ki pek istediğimiz gibi olmadı. Son eklediğimiz “TrackCollection” neden kalan alana tam olarak yayılmadı? Şimdi bu sorunu çözelim. LightSwicth ile çoğu şey düşünülmüş, ekranları ince ayarına kadar tasarlayabiliyorsunuz. Eklediğimiz “Horizontal Stack” ‘ın bu iş için uygun olmadığını düşünüyoruz ve Horizontal Stack üzerine gelip, listeyi açarak “Two Columns” seçiyoruz.

 img18

Tabii yaptığımız eklemeler gidiyor. “Left Column” ve “Right Columns” seçeneklerinin yanındaki “Choose Content” yazısının üzerine geldiğiniz de düğme görünümü almaktadır. “Choose Content” ‘ den “Left Column” için “AlbumsCollection” ’ı , “Right Column” için “TracksCollection” ‘ı seçiyoruz.

 

img19

 img20

Ön izlemeden uygulamamızın son haline bakıyoruz. İstediğimiz görüntünün oluştuğunu görüyoruz.

 img21

Bizi neden uğraştırıyorsun baştan yaptırsana böyle demeyin. Böylece Horizontal Stack’in sadece seçilen koleksiyonların oluşturduğu kontrolleri yan yana belli bir genişlikte sıraladığını öğrenmiş olduk. Şimdi sağ üst köşedeki “Save” düğmesi ile yaptığımız değişiklikleri kaydederek uygulamamıza bakıyoruz.

 img22

Böylece amacımıza ulaşmış olduk. Denediğinizde, seçilen artist’e ait albümler listelendiği gibi seçilen artist’e ait albümlerinden seçine albüm’e ait şarkılar listelenmektedir.

NOT : Uygulama çalışırken yaptığımız “Customize Screen” işlemi sonucu elde ettiğimiz ekran ayarları otomatik olarak Visual Studio içinde de geçerli olur.

 img23

Şunu belirtmek istiyorum. Her listedeki yeni kayıt ekleme, düzenleme, silme, excel’e aktarma, arama yapma işlemleri çalışmaktadır. Süper di mi !

Gelelim basit düzenlemelere.. Evettt işimiz daha bitmedi. Çalışan uygulamamıza geri dönüyoruz ve tekrar “Customize Screen” düğmesi ile özelleştirme ekranına geri dönüyoruz.

Sol taraftaki kontrol listesinde “ArtistCollection” yanındaki “DataGrid” üzerine gelip tıkladığımız da açılan menüden “List” seçiyoruz. Böylece öz izleme de Artist’lerin listesi kısmında, kullanıcı için gereksiz olan “ArtistId” kolonu ekrandan kaldırılıyor. Kontrol olarak da DataGrid, Listbox’a dönüştürülüyor.

 img24

NOT : Ön izleme ekranında bile uygulama kullanılabiliyor.

 

Ardından “ArtistCollection” ‘ın List’i seçili iken “properties” ekranından “Display Name” ve açıklamayı değiştiriyorum. Gördüğünüz gibi burada başka özelliklerde mevcuttur.

img25

Albüm ve şarkı tablolarını liste yapmıyorum. Çünkü liste yaparsam, bir albüm’ün artist’ini değiştirerek güncelleyemem. İsterseniz deneyerek görebilirsiniz. Sırası ile “AlbumCollection” ‘ı ve “TracksCollection” ‘ı seçiyorum ve onlarında “Properties” kısmından özelliklerini güncelliyorum.

img26

img27

Gördüğünüz gibi çok hoş oynuyoruz. Şimdi gelelim biraz daha derine inmeye, Album listesinde ön izlemeden görebiliyoruz ki kullanıcının işine yaramayacak “AlbumId ” kolonu mevcut. Bu kolonun kullanıcıya görünmemesini istiyoruz. Bunun için kontrol listesinden Albüm’ü listeleyen kontrolün(TwoColumn -> Left Column) altında “DataGridRow” node’ını açıyoruz ve “AlbumId” ‘yi gösteren Label’ı seçiyoruz. Gördüğünüz gibi bu kontrolleri bile değiştirebiliyoruz. Label’ı seçip “Properties” kısmından “IsVisible” işaretini kaldırıyorum.

img28

Ön izlemeye baktığımızda kolonun hala durduğunu görüyoruz. Fakat değerleri artık görünmüyor. Buradan anlıyoruz ki bu özellik bize sadece kolonun içindeki Label’ı görünmez yapıyor. Kolonu görünmez yapmıyor. Eğer kolonun bile görünmemesini istiyorsak, Kontrol hiyerarşisinin solundaki menü’den “X” düğmesine basarak Label’ı içeren node’ı hiyerarşiden kaldırmalıyız.

img29

Böylece ön izlemede artık görünmediğini görüyoruz. Burada “Title” ve “Artist” ’i içeren kolonları da hiyerarşiden seçerek “Properties” ekranından özelliklerinde değişiklikler yapabiliriz.

img30

Aynı şekilde şarkılar listesindeki “DataGridRow” ‘u da açarak istemediğimiz kolonları kaldırıyoruz. İstediklerimizin özellikleri ile oynuyoruz.

img31

Böylece uygulamamız şu şekilde görünüyor.

img32

Aynen listelerin kolonlarını düzenlediğimiz gibi “DataGridRow” ‘un üzerindeki “Command Bar” kısmından düğmelerin isimleri ile de oynayabiliriz.

img33

Son olarak ufak bir ayar daha yaparak ekran özelleştirme işlemini bitiriyoruz. Ekranımızın son hali aşağıda ve bu görünümde bir ufak değişiklik yapacağız.

img34

Burada göreceğiniz gibi şarkılar listesi ekranın sağ alt köşesinde sıkışmış görünüyor. Halbu ki Albümler o kadar çok içeriğe sahip bir liste değil ve boş alanları var. O zaman albüm alanından biraz şarkı listesine verebiliriz.

Özelleştirme ekranında “TwoColumns” seçiyoruz. “Properties” ekranında “Selection Size” özelliğindeki Track bar’ı sol a doğru ön izlemeden kontrol ederek çekiyoruz.

img35

img37

Böylece artık programımız istediğimiz gibi görünüyor. Kullanıma hazır.

img38

Bir sonraki makalede 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