Giriş

Multiview kontrolü web sayfamızın bir kısmında Web alanlarını daha rahat değiştirmemize olanak tanır ve ASP.NET 1.0 ile tanıştığımız panel kontrolüne göre daha etkin kullanımı vardır.

Bu kontrolün yalnız başına kullanımı mevcut değildir. Kullanımı için View kontrolüne de ihtiyaç duyar. Multiview içinde göstereceğimiz farklı dizaynları, Viewlar içine gömerek görüntüleriz. Her View, kod ile aktif hale getirildiği zaman web sayfasının ilgili bölümü dinamik olarak değişecektir. Kullanıcı tarafında aynı anda bir Multiview penceresi içerisinde sadece bir tane View’ın görüntülenmesine izin verilmektedir. Bunun yanında kullanıcı tarafında görüntülenmeyen Viewların web browser’a yüklenmediğini de burada belirtmek isterim.

MULTIVIEW ve VIEW KONTROLÜ

şekil 1

şekil 1 de toolbox üzerinde Multiview ile ilgili kontrol simgeleri işaretlenmiş olarak görülmektedir.

Kontrolün kullanımı için Asp.net sayfasına öncelikle bir Multiview kontrolü eklenerek işe başlanır.

şekil 2

Daha sonraki aşama ise, web sayfamızda dinamik olarak değiştirmek istediğimiz farklı dizayn sayısına karar vermek olacaktır. Bu noktada örnek olarak 3 farklı tasarım düşünüldüyse Multiview penceresinin içine 3 tane view sürüklenmesi gerekir. View’ları sürüklerken genelde yapılan hata iki view’ın iç içe sürüklenmesidir. Bu durumda Multiview hata verir.

şekil 3

Hatalı sürükleme sonucunda Multiview penceresi içerisinde şekil 4’teki gibi bir uyarı görüntülenir.

şekil 4

şekil 3’te üç farklı tasarımı barındırabilecek ve dinamik olarak değişebilecek bir Multiview kontrolünün uygun şekilde tasarlanmış hali görülmektedir. Bu işlemden sonra View’ların içi dizayn edilip kodlama işine geçilir.

VIEW’LARIN DEĞİŞTİRİLMESİ

Örneğin view’larımızın tasarımını şekil 5’te görüldüğü gibi yaptığımızı düşünelim.

şekil 5

Böyle bir tasarımın view’ları arasındaki geçişi aşağıdaki gibi bir kodla kolaylıkla sağlayabiliriz.

Şekil 6

Multiview kontrolü, içinde barındırdığı view’ları ilk eklediğimiz view’ın değeri 0 olacak şekilde sayıyla belirler.

“ActiveViewIndex “ özelliği ile de bu Viewlar aktif edilebilir.

Örnek Çalışma (TAB Kontrolü)

şekil 7

Yukarıda ki tab kontrolünün Viewlarının değiştirilmesi için Menu kontrolü’nden de faydalanacağız. Böylece Menü kontrolü ile Multiview’ın nasıl kontrol edilebileceğini göreceğiz. Bu uygulamamızda son günlerde moda olan AJAX Updatepanel den de faydalanmayı düşündüm. Böylece biraz daha profesyonel bir tab kontrolünün sıfırdan nasıl oluşturulabileceğini göreceğiz. Hem de tasarımımız, bir Win32 Tab kontrolüne oldukça benzer olacaktır.

1. Adım

Öncelikle Ajax Enabled Web sayfanızı Visual Studio 2005 de açmamız gerekir. Burada belirtmek isterimki eğer bilgisayarunuzda Ajax komponentleri yüklü değil ise tasarımınızı AJAX Kullanmadanda yapabilirsiniz.

şekil 8

2. Adım

Web sayfamıza bir AJAX UpdatePanel ve içerisine 2 Satır x 1 Sütunluk bir tablo ekleyelim. Tablomuzun 2.satırının içindeyken sağ tıklayıp STYLE menüsüne girersek tablomuzun alt satırına bir kenarlık vermemiz mümkün olacaktır.

STYLE menüsünün içinden EDGES tabına girdiğimizde,

Ayarları aşağıdaki gibi değiştirelim, isterseniz kenarlık ayarlarını farklı bir formatta ayarlayabilirsiniz. Renk ve tasarım uyumu oluşması açısından ben bu şekilde yapmayı uygun gördüm.

şekil 9

Bu işlemi gerçekleştirdikten sonra tablomuzun 1. satırı içerisine Menu Kontrolünü 2. satırı içine de Multiview kontrolünü ardından Multiview kontrolümüzün içerisine de 3 tane View ekleyelim.

İPUCU:

Tab kontrolümüzün boyutunu ve tutarlılığını eklediğimiz Tablo ile daha rahat kontrol altında tutabileceğiz.

Tasarım görünümümüz şu an için şekil 10’daki gibi olmalı:

şekil 10

Bu işlemleri gerçekleştirdikten sonra Menu kontrolünün biçimlendirilmesi işlemini yapmamız gerekir. Öncelikle Bu kontrolün özelliklerinden “Orientation” özelliğini Vertical yapalım. Ardından ITEMS özelliğine tıklayıp Tab’lara vereceğimiz isimleri girelim. Value değerlerini de 0, 1 ve 2 yapalım.

şekil 11

Bu işlemleri gerçekleştirdikten sonra Menu kontrolümüzü aşağıdaki gibi Otomatik formatlandıracağız.

şekil 12

Tasarım konusunda yapacağımız işlemler bu kadar. Bundan sonra View’ların içini dilediğiniz gibi doldurabilirsiniz. Tasarımımızın son hali aşağıdaki gibi olabilir:

şekil 13

3. Adım

Son adımımız ise kodları girmek olacak. Menu1_MenuItemClick olayının içine aşağıdaki kodu yazalım:

şekil 14

Ve işlemlerimiz bu kadar…

Artık uygulamamızı çalıştırdığınızda aşağıdaki gibi bir TAB kontrolünü görmemeniz için hiçbir engel yok.

şekil 15

Sonuç

Sonuç olarak , Öncelikle Multiview ve View kontrollerinin nasıl kullanılacağını ardından bir WEB sayfasında rahatlıkla kullanılabileceğimiz bir tab kontrolünü AJAX ve Menu kontrolleri ile nasıl oluşturabileceğimizi birkaç basit adımla öğrendik.

Yeniden buluşmak dileğiyle…

---

Makalede kullanılan örnek kodları indirmek için tıklayınız[20.06.2007]