Bu yazımda Visual Studio 2008 ile gelen web tarafındaki yeniliklere değineceğiz. Orcas ile özellikle web geliştiricileri yakından ilgilendirecek yeni özellikler ve iyileştirmeler geliyor. Bu özellikler ve yenilikler hem Visual Studio 2008 hem de Visual Web Developer 2008'de web geliştiricilerin kullanımına açılmış durumda.
Özelliklerin bazıları web tasarımını kolaylaştıracak yenilikleri kapsarken, bazıları da Visual Studio 2008'den önceki sürümlerde yaşadığımız bazı sorunların iyileştirilmesini içeriyor. En önemli özelliklerden bir tanesi geliştirilmiş ve yenilenmiş yeni tasarım aracı. Web programcılarının sıklıkla kullandığı CSS özelliklerinin daha kolay ve hızlı bir şekilde uygulanması için yeni CSS araçları da yine Orcas ile beraber geliyor. Ayrıca ASP.NET 2.0 ile gelen iç içe geçmiş master sayfaların (Nested Master Pages) tasarım desteğinin Visual Studio 2005'de olmaması ve bu yeni sürümde bu desteğin eklenmesi de web geliştirme tarafındaki yeniliklerden bir tanesi. Bir web tasarımcısının özellikle Frontpage ve Dreamweaver gibi WYSIWYG editörlerde sık kullandığı Split View tasarımı; kaynak kod ile tasarımın beraber yapılabildiği parçalanmış tasarımı yine Visual Studio 2008 ile geliyor.
Visual Studio 2008 ile gelen yeni web tasarım aracı, Expression Web ile aynı web tasarım aracını kullanıyor. Web geliştiricisine daha gelişmiş ve hızlı bir tasarım sağlayan araç Visual Studio 2005 ve Visual Web Developer 2005'te kullanılan araçtan daha hızlı.
Önceki sürümlerde, Visual Studio'da web tasarımı yapmak zordu. Tasarım için Expression Web ya da Dreamweaver gibi html editörleri kullanıyorduk. Web tasarımınu bu araçlarla yaptıktan sonra, arka taraftaki kodlamayı Visual Studio ile yapıyorduk. Dreamweaver ya da Expression Web'de tasarladığımız sitenin kodlarını Visual Studio'ya kopyaladığımız zaman bazen de tasarım ile ilgili problemler ile karşılaşıyorduk. Özellikle Dreamweaver da gelişmiş ASP.NET kontrollerinin olmaması da bir sıkıntı idi bizim için. Expression Web'deki web tasarım aracının Visual Studio'ya entegre edilmesiyle artık kolay ve rahat bir şekilde entegrasyon sıkıntısı olmadan web tasarımını yapabiliyoruz.
Dikkat çeken yenilikler ve iyileştirmeler;
-
Design-view ile source-view geçişleri arasındaki performans iyileştirmesi (daha hızlı)
-
Source-view'da ASP.NETve HTML kontrollerinin özelliklerinin "Properties" penceresinden kolaylıkla düzenlenebilmesi (Örneğin, ASP.NET Button kontrolünün OnClick event'i için design-view'a gidip çift tıklamak yerine source-view'da "Properties" penceresinden event handler'ını set edebilir ya da çift tıklayıp code-behind'a geçiş yapabilirsiniz.)
- Ruler ve Grid desteği.
Geçen hafta, Visual Studio 2008'in web tarafındaki özellikle designer için bir hot-fix çıkarıldı. Bu hot-fix designer tarafındaki yavaşlıkların iyileştirilmesini içeriyor. Detaylı bilgi için bu konudaki yazıma bakabilirsiniz.
Web designer tarafındaki en önemli özelliklerden bir taneside CSS için geliştirilmiş yeni araçların eklenmesi. Bu araçlar;
- Manage Styles
- Apply Styles
- CSS Properties Window
Manage Styles
Çalıştığınız sayfadaki mevcut stilleri gösterir ve bu stiller üzerinde değişiklik yapabilmenizi sağlar. Bu stiller, sayfada tanımlanmış gömülü stiller olabileceği gibi (inline), eksternal bir .css dosyasındaki stillerde (external) olabilir. Aktif etmek için menüden View-> Manage Styles'ı seçin.
External bir .css dosyası eklemek için "Attach Style Sheet"'e basarak, solution içinden .css dosyasını ekleyebilirsiniz.
Stillerin etrafındaki daire, o stilin sayfadaki bir nesne tarafından kullanıldığını ifade eder. Yani kısaca bu stil bu sayfada kullanılıyor demektir. Kullanılan stile sağ tıkladığınız zaman "Select All x# instance(s)" menü öğesinin aktif olduğunu ve o stili kullanan instance'ları seçebileceğinizi gösterir. Eğer daire olmayan bir stile sağ tıklarsanız, "Select All;Not Currently Used" menü öğesinin aktif olmadığını göreceksiniz, yani o stili kullanan bir nesne bulunmuyor. Tasarım zamanında gerçekten detaylı bir şekilde CSS desteğinin olduğu görülüyor.
Stillerin 3 farklı rengi "Manage Styles" penceresinde görünecektir. Bunlar yeşil, kırmızı ve mavidir.
Yeşiller; id tabanlı stiller
Maviler; element tabanlı stiller
Kırmızılar; Sınıf (class) tabanlı stilleri ifade ederler.
Style Builder
Seçtiğiniz stile sağ tıklayıp, "Modify" dediğiniz zaman, Style Builder karşınıza çıkar. Çok detaylı bir arabirime sahip olan bu araçla CSS kodlama bilmeden, CSS stilleri oluşturabilir ya da var olan stillerinizi değiştirebilirsiniz. Yaptığınız değişiklikleri kaydetmeden "Preview"'dan önizlemesini yapabilirsiniz.
Bu değişiklikleri isterseniz CSS dosyasına giderekte yapabilirsiniz. Elementin üzerine sağ tıklayıp "Build Style" dediğinizde Style Builder açılır ve tek satır kod yazmadan css kaynak dosyasından değişiklik yapabilirsiniz. CSS dosyasında sağ tıklayıp "Add Style Rule" dediğimiz zaman, yeni bir CSS stilini belirli bir kural dahilinde hiyerarşik bir şekilde oluşturabiliriz. Bu CSS stilini ister html element, ister sınıf, istersek de id tabanlı olarak oluşturabiliriz.
İsterseniz CSS dosyasında, isterseniz "Manage Styles" kullanarak iki farklı yoldan CSS stillerinizi çok kolay bir şekilde oluşturabilirsiniz. Burada amaç üretkenlik olduğu için nereden yaptığınız önemli değil, önemli olan farklı yerlerden de yapılsa aynı ürünü kolay bir şekilde ortaya çıkarmak.
CSS dosyasında kod yazarken intellisense desteğinin olduğunu göreceksiniz. CSS'deki özelliklerin hepsini bilmeye gerek kalmadan, bu intellisense desteği size hızlı ve kolay bir şekilde stiller oluşturmanızı sağlıyor. HTML ya da ASP.NET kontrollerinde, kontrollere CSS sınıfı ya da ID ataması yaparkende intellisense desteğinin olduğunu göreceksiniz.
Apply Styles
Apply Styles aracı ile hem inline hem de external css stillerin gerçek zamanlı olarak nasıl göründüğüne bakabilir ve bu stilleri html elementlerine tek bir tıklamayla uygulayabilirsiniz. Aktif etmek için menüden View-> Apply Styles'ı seçin.
External bir .css dosyası eklemek için "Attach Style Sheet"'e basarak, solution içinden .css dosyasını ekleyebilirsiniz.
CSS Properties Windows
CSS Properties aracı ile sayfadaki herhangi bir HTML elementinin ya da ASP.NET kontrolünün CSS özelliklerini görebilir ve değiştirebilirsiniz. Sayfada uygulanan tüm css kurallarını (rules) görebilir ve seçilen kontrol ya da element için uygulanan css kuralını görebilirsiniz.
CSS Properties'in temelde iki önemli özelliği var. Birincisi yukarda da bahsettiğim, ASP.NET kontrollerinin ve HTML elementlerinin css özelliklerini property grid'den ayarlamak. Diğeri ise o sayfada uygulanan kuralların ve seçilen kontrol için uygulanan kuralın gösterilmesi. CSS ile uğraşanların çoğu zaman şöyle bir derdi vardır. CSS'den ayarlanan özelliklerin istenen/beklenen sonucu üretmemesi. Mesela bir button kontrolünün CSS dosyasında background renginin mavi olarak ayarlanmasına rağmen renginin kırmızı çıkması gibi. Aslında bu birkaç nedenden olabilir. En belirgin neden ise; kullanılan external css dosyasındaki css özelliğinin, inline bir css özelliği tarafından ezilmesidir. (Override) Visual Studio bu sorunu aşmak için güzel bir mekanizma geliştirmiş. Ezilen CSS özelliklerinin farkına varıp bunları CSS Properties'de css özelliğinin üstünü çizik olarak gösteriyor.
Aşağıdaki örnekte, MyStyle sınıfına ait bir stil tanımlanmış ve bu stil MyButton html elementine atanmış. Buton elementindeki yazının rengi yeşil olarak gözükecekmiş gibi dursa da, buton elementinin inline olarak tanımlanmış stil özelliğinde buton renginin kırmızı olarak ayarlandığını göreceksiniz. Dolayısıyla buton rengi kırmızı olarak gorunecektir. Mystyle sınıfının stil özelliği, inline stil özelliği tarafından ezilmiştir.CSS Properties'de color özelliğinin üstünün kırmızı olarak çizildiği gösterilmiştir.
Master Page desteği ASP.NET 2.0 ile gelen en popüler özelliklerden bir tanesi ve çoğu web uygulaması bu özelliği kullanmakta. Master Page ile web uygulamasındaki tüm siteler için birbiriyle uyumlu tutarlı sayfalar yapabiliyoruz. Bir tane master sayfa tanımlayıp, aspx sayfalarını bu sayfadan türeterek birbirleriyle tutarlı sayfalar geliştirebiliyoruz.
Bazen tek bir master sayfa yetmiyor, birden fazla içe içe geçmiş master sayfalar tanımlamak ihtiyacı olabiliyor. VS2005’te Nested Master Page desteği olsada görsel olarak bunu tasarlayamıyorduk. Yani sadece türetme işlemini yapabiliyorduk, ama sayfanın nasıl gorunduğunu ancak calıstırınca gorebiliyorduk. Ama değiştirme işlemini yapamıyorduk.
Visual Studio 2008 ile bu sorun ortadan kalkmış durumda. Artık tasarım zamanında iç içe geçmiş master sayfaları tasarlayabiliyoruz.
Expression Web, Dreamweaver gibi WYSIWYG editörlerde sık kullanılan Split-View; design-view ve source-view yanında Visual Studio 2008 ile beraber geliyor. Split-view ile ister design-view da ister source-view da çalışabilirsiniz. Source-view'da yaptığınız bir değişiklik, design-view'da simultane bir şekilde değişiyor. Yine benzer şekilde, design-view'da yaptığınız değişiklik, source-view'da anında değişiyor.
Split-view ile ilgili bir başka özellikte, normalde sayfa yatay olarak ayrılırken, siz isterseniz bunu dikey olarak ayarlayabilirsiniz. Bunun için; Tools->Options-HTML Designer->General sekmesinden, "Split Views Vertically" kutucuğunu işaretleyip, Visual Studio 2008'i yeniden başlatın.
-
HTML, CSS and JScript Validation
HTML kaynak kodun validation işlemini VS2005'de yapabiliyorduk. Herhangi bir html elementini ya da attribute’unu geçerli bir şekilde tanımlamadığımızda bize bunları hata olarak gösteriyordu. Mesela bir tane img kontrolu koydumuz zaman kaynağına verdiğimiz resim dosyası eğer yok ise bize hata veriyordu ki olması gereken durum. Bazı insanlar bunun olmasını istiyorlar çünkü standart bir yapıya uymus oluyorlar. Bazılarıda bu hataların hata listesini doldurmasını istemiyor.Ama uygulamayı derlediğimiz zaman bunlar hata olarak errorlist de cıkıyordu. VS2008 ile bunları hata yerine uyarı – warning olarak göstertmek mümkün. Böylelikle, sadece C#/VB ile ilgili server tarafındaki hataları hata listesinde görebiliriz. Aynı zamanda Jscript syntaxinide warning olarak gostermek mumkun.
