Makale Özeti

Bu makalede uygulamalı olarak Expression Web'de User Control kavramını anlatacağım.

Makale

Merhaba bu makalede uygulamalı olarak Expression Web'de User Control kavramını anlatacağım. Bu makaledeki örneği hazırlarken Expression Web 2 Beta kullandım. Expression Web 2.0'ın deneme sürümünü buradan indirebilir ve Expression Web 2'deki yenilikleri E. Altuğ Yılmaz hocanın makalesinden okuyabilirsiniz. Bunun yanında User Control'un Expression'ının ilk versionundan beri bulunduğunu belirtmek isterim.

Başlayalım. Bu makale için hazırladığım örnek sitenin adı "Zero Point". Bu üç farklı gruptan oluşan bir site. A, B, C olarak isimlendirdiğim her grubun altında o gruba ait yüzlerce sayfa olduğunu düşünün.



Zero Point sitesinin ortak alanları Header, Ana Menü ve Footer. İçerik alanı her sayfada, Grup menü her grupta farklılık gösterecek. Tasarımı ASP.NET ile giydireceğiz, table kullanmayacağız ve CSS 2.0'ın tüm avantajlarından yararlanacağız. Tüm bunlara karar verince master page kullanmamızın güzel olacağına karar veriyoruz. (Master page, DIV ile tasarım ve CSS 2.0 kullanımının diğer makalelerimde bulabilirsiniz.)

Peki sol alandaki menüler gruplara göre değişiklik gösteriyorsa ne yapmalıyız? Her sayfada tek tek menüyü kopyalayıp yapıştırarak çoğaltmayı düşünemeyiz. Bu ileride doğabilecek en ufak bir değişiklikte saatlerimizi harcamamıza sebep olabilir. Her grup için ayrı bir master page yaratmak düşünülebilir. Fakat bu seferde tasarımda istenebilecek bir değişikliği üç kere yapmak zorunda kalırız. Peki çözüm nedir? İşte User Control bu aşamada devreye giriyor. User Control, tek bir kaynaktan veri çekmeyi sağlayan bir uygulamadır. User Control içinde yapmak istediğiniz düzenlemeyi yapar ve .ascx olarak kayderdersiniz. Sonra istediğiniz sayfalara bu User Control'u bir path yardımı ile eklersiniz. Yüzlerce sayfada aynı Controlü kullanarak kendinize oldukça yararlı bir şablon yaratmış olursunuz. User Control'de yaptığınız herhangi bir değişiklik otomatik olarak onu içeren sayfalara yansıyacaktır. Şimdi bunu deneyelim.



İlk önce master page'i ve css'i hazırlayacağız. Altta hazırladığım master page'in görünümü bulunmaktadır. (Bunu görebilmek için master page'e bağlı bir temp.aspx dosyası yarattım.)



Sonuçta master page'de çıkan kodlar alttaki gibidir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Master Language="C#" %>

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Zero Point</title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

<link href="main.css" rel="stylesheet" type="text/css" />

 

<!--[if lt IE 7]>

<script defer type="text/javascript" src="pngfix.js"></script>

<![endif]-->

 

</head>

 

<body>

 

<form id="form1" runat="server">

<div id="header"></div>

 

<div id="nav"><map id="FPMap0" name="FPMap0">

            <area coords="232, 14, 300, 30" href="#" shape="rect" />

            <area coords="308, 14, 377, 32" href="#" shape="rect" />

            <area coords="386, 15, 490, 33" href="#" shape="rect" />

            <area coords="501, 17, 617, 30" href="#" shape="rect" />

            <area coords="628, 15, 675, 31" href="#" shape="rect" />

            </map>

            <img height="43" src="images/nav.png" usemap="#FPMap0" width="916" border="0" />

</div>

 

<div id="container">

            <div id="leftContainer">

                        <div><img src="images/leftTop.png" /></div>

                        <div id="leftContentArea">

                       

                                   <asp:ContentPlaceHolder id="leftContentPlaceHolder" runat="server">

                                   </asp:ContentPlaceHolder>

                       

                        </div>

                        <div><img src="images/leftBottom.png" /></div>

            </div>

            <div id="rightContainer">

           

                        <div><img src="images/rightTop.png" /></div>

                        <div id="rightContentArea">

                       

                                   <asp:ContentPlaceHolder id="rightContentPlaceHolder" runat="server">

                                   </asp:ContentPlaceHolder>

                       

                        </div>

                        <div><img src="images/rightBottom.png" /></div>

            </div>

</div>

 <div class="clear"><!-- --></div>

<div id="footer" align="center"><a href="#">HOME</a> | <a href="#">USERS</a>

            | <a href="#">CONTROLS</a> | <a href="#">EXPRESSION</a> | <a href="#">

            WEB</a></div>

 

 

</form>

</body>

</html>


Altta CSS kodları bulunmaktadır.

body{

            background-color:black;

            background-image:url('images/back.jpg');

            background-repeat:no-repeat;

            background-position:center top;

            margin:0px;

            font-family:Arial, Helvetica, sans-serif;

            font-size:12px;

            color:white;

}

a:link{

            color:blue;

            text-decoration:underline;

}

a:visited{

            color:blue;

            text-decoration:underline;

}

a:hover{

            color:blue;

            text-decoration:none;

}

#header{

            background-image:url('images/header.png');

            width:916px;

            height:92px;

            background-repeat:no-repeat;

            margin-left:auto;

            margin-right:auto;

}

#nav{

            width:916px;

            height:43px;

            margin-left:auto;

            margin-right:auto;

}

#container{

            width:916px;

            margin-left:auto;

            margin-right:auto;

}

#leftContainer{

            width:235px;

            float:left;

}

#rightContainer{

            width:681px;

            float:left;

}

#leftContentArea{

            background-image:url('images/leftBack.png');

            width:235px;

            background-repeat:repeat-y;

           

}

#rightContentArea{

            background-image:url('images/rightBack.png');

            width:681px;

            background-repeat:repeat-y;

           

}

#footer{

            background-image:url('images/footerBack.png');

            background-repeat:no-repeat;

            width:916px;

            height:48px;

            margin-left:auto;

            margin-right:auto;

            padding-top:15px;

}

#footer a:link{

            color:white;

            text-decoration:none;

            font-size:10px;

}

#footer a:visited{

            color:white;

            text-decoration:none;

            font-size:10px;

}

#footer a:hover{

            color:white;

            text-decoration:underline;

            font-size:10px;

}

.clear {

            clear: both;

            height: 1px;

            font-size: 1px;

            line-height: 1px;

            margin-bottom: -1px;

}


Bu makale için hazırladığım sitede imajları transparan PNG olarak kullandım. Fakat IE 7.0'ın altındaki versiyonların transparan PNG'yi desteklemediğini unutmamak lazım. Bu sorunu çözen javascript kodu alttadır. Transparan PNG'nin başarısını makalenin sonunda örnekle kanıtlayacağım.

var arVersion = navigator.appVersion.split("MSIE")

var version = parseFloat(arVersion[1])

 

if ((version >= 5.5) && (document.body.filters))

{

   for(var i=0; i<document.images.length; i++)

   {

      var img = document.images[i]

      var imgName = img.src.toUpperCase()

      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

      {

         var imgID = (img.id) ? "id='" + img.id + "' " : ""

         var imgClass = (img.className) ? "class='" + img.className + "' " : ""

         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

         var imgStyle = "display:inline-block;" + img.style.cssText

         if (img.align == "left") imgStyle = "float:left;" + imgStyle

         if (img.align == "right") imgStyle = "float:right;" + imgStyle

         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

         var strNewHTML = "<span " + imgID + imgClass + imgTitle

         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

         img.outerHTML = strNewHTML

         i = i-1

      }

   }

}


Elbette <HEAD> tagının içine alttaki kodu yerleştirmeyi unutmayın.

<!--[if lt IE 7]>

<script defer type="text/javascript" src="pngfix.js"></script>

<![endif]-->


Master page'imizi ve CSS'imizi oluşturduğumuza göre şimdi, master page'i kullanarak sayfalarımızı yaratabiliriz. A, B ve C grubuna ait, her biri kendine özel içeriğe sahip sayfalarımız hazır. Farkındaysanız üç sayfada da soldaki menü alanları boş. Çünkü bunları user control kullanarak hazırlayacağız.



Artık User Control'lerimizi hazırlayabiliriz. Folder List kutusundaki proje adına sağ tıklayarak New>Folder a tıklıyoruz.




Açılan klasörü UserControls(ya da siz ne isterseniz) olarak isimlendiriyoruz.



File>New>Page' e tıklıyoruz.




Açılan pencerede Page>ASP.NET altında Web User Control'u seçerek OK'e tıklıyoruz. (Programming Language bölümü projenin kullanılacağı dil açısından önemli. Biz burada C# olarak bırakıyoruz.)




Sayfamızı UserControls klasörüne kaydediyoruz. (dosya uzantısının ASCX olduğuna dikkat edin)



aMenu.ascx isimli dosyamız hazırdır. Sayfa ilk oluşturulduğunda barındırdığı tek satır kod alttadır.



Peki bu yeni sayfada neler yapabiliriz? Bir ascx sayfası, HTML ve ASP.NET'in tüm özelliklerini kullanabilir. Data base'e bağlı dinamik bir anket uygulaması veya kullanıcı bilgileri kutusu oluşturabileceğiniz gibi html tag larını kullanarak statik içerikde oluşturabilirsiniz. Biz bu örnekte statik bir menu uygulaması ile User Control uygulamamıza devam edeceğiz. Burada dikkat etmeniz gereken browser sayfayı renderlarken ascx den gelen tagları da , içinde bulunduğu taglara bağlı olarak renderlayacaktır.

A grubu için menümüzü oluşturalım. aMenu.ascx sayfasındaki kod alttaki gibidir.
<%@ Control Language="C#" ClassName="WebUserControl1" %>
<div class="menuHead">Menu A</div>
<div>
	<ul>
		<li><a href="#">A1 Lorem ipsum dolor sit amet</a></li>
		<li><a href="#">A2 Consectetuer adipiscing elit.</a></li>
		<li><a href="#">A3 Vestibulum bibendum.</a></li>
		<li><a href="#">A4 Nam sagittis est vel arcu</a></li>
		<li><a href="#">A5 Mauris libero lacus, aliquam</a></li>
		<li><a href="#">A6 Suscipit vitae, facilisis sed</a></li>
		<li><a href="#">A7 Pellentesque commodo</a></li>
		<li><a href="#">A8 Praesent vel risus vel arcu</a></li>
	</ul>
</div>

Menü için oluşturduğumuz CSS'ler altaki gibidir.
ul{
	
}
ul a:link{
	color:white;
	text-decoration:none;
}
ul a:visited{
	color:white;
	text-decoration:none;
}
ul a:hover{
	color:#ffcf00;
	text-decoration: underline;
}


li{
	list-style-image: url('images/listImage.png');
	margin-right:15px;
	font-size:12px;
	line-height:18px;
	letter-spacing:normal;
}

Evet menumüz hazır. Şimdi ne yapacağız? Yapmanız gereken tek şey hazırlamış olduğunuz kontrolü sayfadaki yerine sürükleyip bırakmak.



Expression Web sayfada kodu sizin için oluşturacaktır.



User kontrolun yanındaki oka basarak UserControl Tasks kutusunu açabilir, Edit UserControl'a tıklayarak User Control' ünüzü düzenleyebilirsiniz.



Sayfamız hazır. Peki şimdi ne olacak? Artık A grubu sayfasından yüzlercede yaratsak, menüde olabilecek en ufak bir değişiklik tek kaynaktan, User Control'den kontrol edilecek. Ve bu bize hatrı sayılır bir zaman kazandıracak.



Söz vermiş olduğum gibi şimdi sırada transparan PNG'nin gücü. Yeni bir background imajı hazırlıyorum ve CSS'de sadece BODY'nin background imajını değiştiriyorum.



Ve sonuç!!! Enfes.




Bu makalemde Expression Web'de Web User Control kavramını anlattım.

İyi çalışmalar

Teşekkürler.
Erbuğ Kaya
www.erbugkaya.com