{"id":688,"date":"2010-06-28T10:41:21","date_gmt":"2010-06-28T10:41:21","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=688"},"modified":"2014-01-16T23:30:56","modified_gmt":"2014-01-16T23:30:56","slug":"expression-web-web-user-control","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=688","title":{"rendered":"Expression Web – Web User Control"},"content":{"rendered":"

13\/5\/2008<\/em>
\nMerhaba bu makalede uygulamal\u0131 olarak Expression Web’de User Control kavram\u0131n\u0131 anlataca\u011f\u0131m. Bu makaledeki \u00f6rne\u011fi haz\u0131rlarken Expression Web 2 Beta kulland\u0131m. Expression Web 2’deki yenilikleri E. Altu\u011f Y\u0131lmaz hocan\u0131n makalesinden<\/a> okuyabilirsiniz. Bunun yan\u0131nda User Control’un Expression’\u0131n\u0131n ilk versionundan beri bulundu\u011funu belirtmek isterim.<\/span><\/p>\n


\nBa\u015flayal\u0131m. Bu makale i\u00e7in haz\u0131rlad\u0131\u011f\u0131m \u00f6rnek sitenin ad\u0131 “Zero Point”. Bu \u00fc\u00e7 farkl\u0131 gruptan olu\u015fan bir site. A, B, C olarak isimlendirdi\u011fim her grubun alt\u0131nda o gruba ait y\u00fczlerce sayfa oldu\u011funu d\u00fc\u015f\u00fcn\u00fcn.<\/p>\n

\"\"<\/a> \"\"<\/a> \"\"<\/a><\/p>\n

Zero Point sitesinin ortak alanlar\u0131 Header, Ana Men\u00fc ve Footer. \u0130\u00e7erik alan\u0131 her sayfada, Grup men\u00fc her grupta farkl\u0131l\u0131k g\u00f6sterecek. Tasar\u0131m\u0131 ASP.NET ile giydirece\u011fiz, table kullanmayaca\u011f\u0131z ve CSS 2.0’\u0131n t\u00fcm avantajlar\u0131ndan yararlanaca\u011f\u0131z. T\u00fcm bunlara karar verince master page kullanmam\u0131z\u0131n g\u00fczel olaca\u011f\u0131na karar veriyoruz.<\/p>\n

Peki sol alandaki men\u00fcler gruplara g\u00f6re de\u011fi\u015fiklik g\u00f6steriyorsa ne yapmal\u0131y\u0131z? Her sayfada tek tek men\u00fcy\u00fc kopyalay\u0131p yap\u0131\u015ft\u0131rarak \u00e7o\u011faltmay\u0131 d\u00fc\u015f\u00fcnemeyiz. Bu ileride do\u011fabilecek en ufak bir de\u011fi\u015fiklikte saatlerimizi harcamam\u0131za sebep olabilir. Her grup i\u00e7in ayr\u0131 bir master page yaratmak d\u00fc\u015f\u00fcn\u00fclebilir. Fakat bu seferde tasar\u0131mda istenebilecek bir de\u011fi\u015fikli\u011fi \u00fc\u00e7 kere yapmak zorunda kal\u0131r\u0131z. Peki \u00e7\u00f6z\u00fcm nedir? \u0130\u015fte User Control bu a\u015famada devreye giriyor. User Control, tek bir kaynaktan veri \u00e7ekmeyi sa\u011flayan bir uygulamad\u0131r. User Control i\u00e7inde yapmak istedi\u011finiz d\u00fczenlemeyi yapar ve .ascx olarak kayderdersiniz. Sonra istedi\u011finiz sayfalara bu User Control’u bir path yard\u0131m\u0131 ile eklersiniz. Y\u00fczlerce sayfada ayn\u0131 Control\u00fc kullanarak kendinize olduk\u00e7a yararl\u0131 bir \u015fablon yaratm\u0131\u015f olursunuz. User Control’de yapt\u0131\u011f\u0131n\u0131z herhangi bir de\u011fi\u015fiklik otomatik olarak onu i\u00e7eren sayfalara yans\u0131yacakt\u0131r. \u015eimdi bunu deneyelim.<\/p>\n

\"\"<\/a><\/p>\n

\u0130lk \u00f6nce master page’i ve css’i haz\u0131rlayaca\u011f\u0131z. Altta haz\u0131rlad\u0131\u011f\u0131m master page’in g\u00f6r\u00fcn\u00fcm\u00fc bulunmaktad\u0131r. (Bunu g\u00f6rebilmek i\u00e7in master page’e ba\u011fl\u0131 bir temp.aspx dosyas\u0131 yaratt\u0131m.)<\/p>\n

\"\"<\/a><\/p>\n

Sonu\u00e7ta master page’de \u00e7\u0131kan kodlar alttaki gibidir.<\/p>\n

\n

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

<%@ Master Language=”C#” %><\/p>\n

<html dir=”ltr” xmlns=”http:\/\/www.w3.org\/1999\/xhtml”><\/p>\n

<head runat=”server”><\/p>\n

<meta content=”text\/html; charset=utf-8″ http-equiv=”Content-Type” \/><\/p>\n

<title>Zero Point<\/title><\/p>\n

<asp:ContentPlaceHolder id=”head” runat=”server”><\/p>\n

<\/asp:ContentPlaceHolder><\/p>\n

<link href=”main.css” rel=”stylesheet” type=”text\/css” \/><\/p>\n

<!–[if lt IE 7]><\/p>\n

<script defer type=”text\/javascript” src=”pngfix.js”><\/script><\/p>\n

<![endif]–><\/p>\n

<\/head><\/p>\n

<body><\/p>\n

<form id=”form1″ runat=”server”><\/p>\n

<div id=”header”><\/div><\/p>\n

<div id=”nav”><map id=”FPMap0″ name=”FPMap0″><\/p>\n

<area coords=”232, 14, 300, 30″ href=”#” shape=”rect” \/><\/p>\n

<area coords=”308, 14, 377, 32″ href=”#” shape=”rect” \/><\/p>\n

<area coords=”386, 15, 490, 33″ href=”#” shape=”rect” \/><\/p>\n

<area coords=”501, 17, 617, 30″ href=”#” shape=”rect” \/><\/p>\n

<area coords=”628, 15, 675, 31″ href=”#” shape=”rect” \/><\/p>\n

<\/map><\/p>\n

<img height=”43″ src=”images\/nav.png” usemap=”#FPMap0″ width=”916″ border=”0″ \/><\/p>\n

<\/div><\/p>\n

<div id=”container”><\/p>\n

<div id=”leftContainer”><\/p>\n

<div><img src=”images\/leftTop.png” \/><\/div><\/p>\n

<div id=”leftContentArea”><\/p>\n

\n

<asp:ContentPlaceHolder id=”leftContentPlaceHolder” runat=”server”><\/p>\n

<\/asp:ContentPlaceHolder><\/p>\n

\n

<\/div><\/p>\n

<div><img src=”images\/leftBottom.png” \/><\/div><\/p>\n

<\/div><\/p>\n

<div id=”rightContainer”><\/p>\n

\n

<div><img src=”images\/rightTop.png” \/><\/div><\/p>\n

<div id=”rightContentArea”><\/p>\n

\n

<asp:ContentPlaceHolder id=”rightContentPlaceHolder” runat=”server”><\/p>\n

<\/asp:ContentPlaceHolder><\/p>\n

\n

<\/div><\/p>\n

<div><img src=”images\/rightBottom.png” \/><\/div><\/p>\n

<\/div><\/p>\n

<\/div><\/p>\n

<div class=”clear”><!– –><\/div><\/p>\n

<div id=”footer” align=”center”><a href=”#”>HOME<\/a> | <a href=”#”>USERS<\/a><\/p>\n

| <a href=”#”>CONTROLS<\/a> | <a href=”#”>EXPRESSION<\/a> | <a href=”#”><\/p>\n

WEB<\/a><\/div><\/p>\n

<\/form><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n<\/div>\n

Altta CSS kodlar\u0131 bulunmaktad\u0131r.<\/p>\n

\n

body{<\/p>\n

background-color:black;<\/p>\n

background-image:url(‘images\/back.jpg’);<\/p>\n

background-repeat:no-repeat;<\/p>\n

background-position:center top;<\/p>\n

margin:0px;<\/p>\n

font-family:Arial, Helvetica, sans-serif;<\/p>\n

font-size:12px;<\/p>\n

color:white;<\/p>\n

}<\/p>\n

a:link{<\/p>\n

color:blue;<\/p>\n

text-decoration:underline;<\/p>\n

}<\/p>\n

a:visited{<\/p>\n

color:blue;<\/p>\n

text-decoration:underline;<\/p>\n

}<\/p>\n

a:hover{<\/p>\n

color:blue;<\/p>\n

text-decoration:none;<\/p>\n

}<\/p>\n

#header{<\/p>\n

background-image:url(‘images\/header.png’);<\/p>\n

width:916px;<\/p>\n

height:92px;<\/p>\n

background-repeat:no-repeat;<\/p>\n

margin-left:auto;<\/p>\n

margin-right:auto;<\/p>\n

}<\/p>\n

#nav{<\/p>\n

width:916px;<\/p>\n

height:43px;<\/p>\n

margin-left:auto;<\/p>\n

margin-right:auto;<\/p>\n

}<\/p>\n

#container{<\/p>\n

width:916px;<\/p>\n

margin-left:auto;<\/p>\n

margin-right:auto;<\/p>\n

}<\/p>\n

#leftContainer{<\/p>\n

width:235px;<\/p>\n

float:left;<\/p>\n

}<\/p>\n

#rightContainer{<\/p>\n

width:681px;<\/p>\n

float:left;<\/p>\n

}<\/p>\n

#leftContentArea{<\/p>\n

background-image:url(‘images\/leftBack.png’);<\/p>\n

width:235px;<\/p>\n

background-repeat:repeat-y;<\/p>\n

\n

}<\/p>\n

#rightContentArea{<\/p>\n

background-image:url(‘images\/rightBack.png’);<\/p>\n

width:681px;<\/p>\n

background-repeat:repeat-y;<\/p>\n

\n

}<\/p>\n

#footer{<\/p>\n

background-image:url(‘images\/footerBack.png’);<\/p>\n

background-repeat:no-repeat;<\/p>\n

width:916px;<\/p>\n

height:48px;<\/p>\n

margin-left:auto;<\/p>\n

margin-right:auto;<\/p>\n

padding-top:15px;<\/p>\n

}<\/p>\n

#footer a:link{<\/p>\n

color:white;<\/p>\n

text-decoration:none;<\/p>\n

font-size:10px;<\/p>\n

}<\/p>\n

#footer a:visited{<\/p>\n

color:white;<\/p>\n

text-decoration:none;<\/p>\n

font-size:10px;<\/p>\n

}<\/p>\n

#footer a:hover{<\/p>\n

color:white;<\/p>\n

text-decoration:underline;<\/p>\n

font-size:10px;<\/p>\n

}<\/p>\n

.clear {<\/p>\n

clear: both;<\/p>\n

height: 1px;<\/p>\n

font-size: 1px;<\/p>\n

line-height: 1px;<\/p>\n

margin-bottom: -1px;<\/p>\n

}<\/p>\n<\/div>\n

Bu makale i\u00e7in haz\u0131rlad\u0131\u011f\u0131m sitede imajlar\u0131 transparan PNG olarak kulland\u0131m. Fakat IE 7.0’\u0131n alt\u0131ndaki versiyonlar\u0131n transparan PNG’yi desteklemedi\u011fini unutmamak laz\u0131m. Bu sorunu \u00e7\u00f6zen javascript kodu alttad\u0131r. Transparan PNG’nin ba\u015far\u0131s\u0131n\u0131 makalenin sonunda \u00f6rnekle kan\u0131tlayaca\u011f\u0131m.<\/p>\n

\n

var arVersion = navigator.appVersion.split(“MSIE”)<\/p>\n

var version = parseFloat(arVersion[1])<\/p>\n

if ((version >= 5.5) && (document.body.filters))<\/p>\n

{<\/p>\n

for(var i=0; i<document.images.length; i++)<\/p>\n

{<\/p>\n

var img = document.images[i]<\/p>\n

var imgName = img.src.toUpperCase()<\/p>\n

if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)<\/p>\n

{<\/p>\n

var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”<\/p>\n

var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”<\/p>\n

var imgTitle = (img.title) ? “title='” + img.title + “‘ ” : “title='” + img.alt + “‘ “<\/p>\n

var imgStyle = “display:inline-block;” + img.style.cssText<\/p>\n

if (img.align == “left”) imgStyle = “float:left;” + imgStyle<\/p>\n

if (img.align == “right”) imgStyle = “float:right;” + imgStyle<\/p>\n

if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle<\/p>\n

var strNewHTML = “<span ” + imgID + imgClass + imgTitle<\/p>\n

+ ” style=\\”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”<\/p>\n

+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”<\/p>\n

+ “(src=\\'” + img.src + “\\’, sizingMethod=’scale’);\\”><\/span>”<\/p>\n

img.outerHTML = strNewHTML<\/p>\n

i = i-1<\/p>\n

}<\/p>\n

}<\/p>\n

}<\/p>\n<\/div>\n

Elbette <HEAD> tag\u0131n\u0131n i\u00e7ine alttaki kodu yerle\u015ftirmeyi unutmay\u0131n.<\/p>\n

\n

<!–[if lt IE 7]><\/p>\n

<script defer type=”text\/javascript” src=”pngfix.js”><\/script><\/p>\n

<![endif]–><\/p>\n<\/div>\n

Master page’imizi ve CSS’imizi olu\u015fturdu\u011fumuza g\u00f6re \u015fimdi, master page’i kullanarak sayfalar\u0131m\u0131z\u0131 yaratabiliriz. A, B ve C grubuna ait, her biri kendine \u00f6zel i\u00e7eri\u011fe sahip sayfalar\u0131m\u0131z haz\u0131r. Fark\u0131ndaysan\u0131z \u00fc\u00e7 sayfada da soldaki men\u00fc alanlar\u0131 bo\u015f. \u00c7\u00fcnk\u00fc bunlar\u0131 user control kullanarak haz\u0131rlayaca\u011f\u0131z.<\/p>\n

\"\"<\/a> \"\"<\/a> \"\"<\/a><\/p>\n

Art\u0131k User Control’lerimizi haz\u0131rlayabiliriz. Folder List kutusundaki proje ad\u0131na sa\u011f t\u0131klayarak New>Folder a t\u0131kl\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

A\u00e7\u0131lan klas\u00f6r\u00fc UserControls(ya da siz ne isterseniz) olarak isimlendiriyoruz.<\/p>\n

\"\"<\/p>\n

File>New>Page’ e t\u0131kl\u0131yoruz.<\/p>\n

\"\"<\/p>\n

A\u00e7\u0131lan pencerede Page>ASP.NET alt\u0131nda Web User Control’u se\u00e7erek OK’e t\u0131kl\u0131yoruz. (Programming Language b\u00f6l\u00fcm\u00fc projenin kullan\u0131laca\u011f\u0131 dil a\u00e7\u0131s\u0131ndan \u00f6nemli. Biz burada C# olarak b\u0131rak\u0131yoruz.)<\/p>\n

\"\"<\/a><\/p>\n

Sayfam\u0131z\u0131 UserControls klas\u00f6r\u00fcne kaydediyoruz. (dosya uzant\u0131s\u0131n\u0131n ASCX oldu\u011funa dikkat edin)<\/p>\n

\"\"<\/a><\/p>\n

aMenu.ascx isimli dosyam\u0131z haz\u0131rd\u0131r. Sayfa ilk olu\u015fturuldu\u011funda bar\u0131nd\u0131rd\u0131\u011f\u0131 tek sat\u0131r kod alttad\u0131r.<\/p>\n

\"\"<\/p>\n

Peki bu yeni sayfada neler yapabiliriz? Bir ascx sayfas\u0131, HTML ve ASP.NET’in t\u00fcm \u00f6zelliklerini kullanabilir. Data base’e ba\u011fl\u0131 dinamik bir anket uygulamas\u0131 veya kullan\u0131c\u0131 bilgileri kutusu olu\u015fturabilece\u011finiz gibi html tag lar\u0131n\u0131 kullanarak statik i\u00e7erikde olu\u015fturabilirsiniz. Biz bu \u00f6rnekte statik bir menu uygulamas\u0131 ile User Control uygulamam\u0131za devam edece\u011fiz. Burada dikkat etmeniz gereken browser sayfay\u0131 renderlarken ascx den gelen taglar\u0131 da , i\u00e7inde bulundu\u011fu taglara ba\u011fl\u0131 olarak renderlayacakt\u0131r.<\/p>\n

A grubu i\u00e7in men\u00fcm\u00fcz\u00fc olu\u015ftural\u0131m. aMenu.ascx sayfas\u0131ndaki kod alttaki gibidir.<\/p>\n

\n
<%@ Control Language=\"C#\" ClassName=\"WebUserControl1\" %>\r\n<div class=\"menuHead\">Menu A<\/div>\r\n<div>\r\n\t<ul>\r\n\t\t<li><a href=\"#\">A1 Lorem ipsum dolor sit amet<\/a><\/li>\r\n\t\t<li><a href=\"#\">A2 Consectetuer adipiscing elit.<\/a><\/li>\r\n\t\t<li><a href=\"#\">A3 Vestibulum bibendum.<\/a><\/li>\r\n\t\t<li><a href=\"#\">A4 Nam sagittis est vel arcu<\/a><\/li>\r\n\t\t<li><a href=\"#\">A5 Mauris libero lacus, aliquam<\/a><\/li>\r\n\t\t<li><a href=\"#\">A6 Suscipit vitae, facilisis sed<\/a><\/li>\r\n\t\t<li><a href=\"#\">A7 Pellentesque commodo<\/a><\/li>\r\n\t\t<li><a href=\"#\">A8 Praesent vel risus vel arcu<\/a><\/li>\r\n\t<\/ul>\r\n<\/div><\/pre>\n<\/div>\n
Men\u00fc i\u00e7in olu\u015fturdu\u011fumuz CSS’ler altaki gibidir.<\/p>\n
\n
ul{\r\n\r\n}\r\nul a:link{\r\n\tcolor:white;\r\n\ttext-decoration:none;\r\n}\r\nul a:visited{\r\n\tcolor:white;\r\n\ttext-decoration:none;\r\n}\r\nul a:hover{\r\n\tcolor:#ffcf00;\r\n\ttext-decoration: underline;\r\n}\r\n\r\nli{\r\n\tlist-style-image: url('images\/listImage.png');\r\n\tmargin-right:15px;\r\n\tfont-size:12px;\r\n\tline-height:18px;\r\n\tletter-spacing:normal;\r\n}<\/pre>\n<\/div>\n
Evet menum\u00fcz haz\u0131r. \u015eimdi ne yapaca\u011f\u0131z? Yapman\u0131z gereken tek \u015fey haz\u0131rlam\u0131\u015f oldu\u011funuz kontrol\u00fc sayfadaki yerine s\u00fcr\u00fckleyip b\u0131rakmak.<\/p>\n
\"\"<\/a><\/p>\n
Expression Web sayfada kodu sizin i\u00e7in olu\u015fturacakt\u0131r.<\/p>\n
\"\"<\/a><\/p>\n
User kontrolun yan\u0131ndaki oka basarak UserControl Tasks kutusunu a\u00e7abilir, Edit UserControl’a t\u0131klayarak User Control’ \u00fcn\u00fcz\u00fc d\u00fczenleyebilirsiniz.<\/p>\n
\"\"<\/p>\n
Sayfam\u0131z haz\u0131r. Peki \u015fimdi ne olacak? Art\u0131k A grubu sayfas\u0131ndan y\u00fczlercede yaratsak, men\u00fcde olabilecek en ufak bir de\u011fi\u015fiklik tek kaynaktan, User Control’den kontrol edilecek. Ve bu bize hatr\u0131 say\u0131l\u0131r bir zaman kazand\u0131racak.<\/p>\n
\"\"<\/a><\/p>\n
S\u00f6z vermi\u015f oldu\u011fum gibi \u015fimdi s\u0131rada transparan PNG’nin g\u00fcc\u00fc. Yeni bir background imaj\u0131 haz\u0131rl\u0131yorum ve CSS’de sadece BODY’nin background imaj\u0131n\u0131 de\u011fi\u015ftiriyorum.<\/p>\n
\"\"<\/p>\n
Ve sonu\u00e7!!! Enfes.<\/p>\n
\"\"<\/a><\/p>\n
Bu makalemde Expression Web’de Web User Control kavram\u0131n\u0131 anlatt\u0131m.<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar<\/p>\n
Te\u015fekk\u00fcrler.<\/p>\n
\n
Merhaba bu makalede uygulamal\u0131 olarak Expression Web’de User Control kavram\u0131n\u0131 anlataca\u011f\u0131m. Bu makaledeki \u00f6rne\u011fi haz\u0131rlarken Expression Web 2 Beta kulland\u0131m. Expression Web 2.0’\u0131n deneme s\u00fcr\u00fcm\u00fcn\u00fc  buradan<\/a> indirebilir ve Expression Web 2’deki yenilikleri E. Altu\u011f Y\u0131lmaz hocan\u0131n  makalesinden<\/a> okuyabilirsiniz. Bunun yan\u0131nda User Control’un Expression’\u0131n\u0131n ilk versionundan beri bulundu\u011funu belirtmek isterim.<\/span><\/p>\n
Ba\u015flayal\u0131m. Bu makale i\u00e7in haz\u0131rlad\u0131\u011f\u0131m \u00f6rnek sitenin ad\u0131 “Zero Point”. Bu \u00fc\u00e7 farkl\u0131 gruptan olu\u015fan bir site. A, B, C olarak isimlendirdi\u011fim her grubun alt\u0131nda o gruba ait y\u00fczlerce sayfa oldu\u011funu d\u00fc\u015f\u00fcn\u00fcn.<\/p>\n
\"\"<\/a> \"\"<\/a> \"\"<\/a><\/p>\n
Zero Point sitesinin ortak alanlar\u0131 Header, Ana Men\u00fc ve Footer. \u0130\u00e7erik alan\u0131 her sayfada, Grup men\u00fc her grupta farkl\u0131l\u0131k g\u00f6sterecek. Tasar\u0131m\u0131 ASP.NET ile giydirece\u011fiz, table kullanmayaca\u011f\u0131z ve CSS 2.0’\u0131n t\u00fcm avantajlar\u0131ndan yararlanaca\u011f\u0131z. T\u00fcm bunlara karar verince master page kullanmam\u0131z\u0131n g\u00fczel olaca\u011f\u0131na karar veriyoruz. (Master page, DIV ile tasar\u0131m ve CSS 2.0 kullan\u0131m\u0131n\u0131n  di\u011fer makalelerimde bulabilirsiniz.<\/a>)<\/p>\n
Peki sol alandaki men\u00fcler gruplara g\u00f6re de\u011fi\u015fiklik g\u00f6steriyorsa ne yapmal\u0131y\u0131z? Her sayfada tek tek men\u00fcy\u00fc kopyalay\u0131p yap\u0131\u015ft\u0131rarak \u00e7o\u011faltmay\u0131 d\u00fc\u015f\u00fcnemeyiz. Bu ileride do\u011fabilecek en ufak bir de\u011fi\u015fiklikte saatlerimizi harcamam\u0131za sebep olabilir. Her grup i\u00e7in ayr\u0131 bir master page yaratmak d\u00fc\u015f\u00fcn\u00fclebilir. Fakat bu seferde tasar\u0131mda istenebilecek bir de\u011fi\u015fikli\u011fi \u00fc\u00e7 kere yapmak zorunda kal\u0131r\u0131z. Peki \u00e7\u00f6z\u00fcm nedir? \u0130\u015fte User Control bu a\u015famada devreye giriyor. User Control, tek bir kaynaktan veri \u00e7ekmeyi sa\u011flayan bir uygulamad\u0131r. User Control i\u00e7inde yapmak istedi\u011finiz d\u00fczenlemeyi yapar ve .ascx olarak kayderdersiniz. Sonra istedi\u011finiz sayfalara bu User Control’u bir path yard\u0131m\u0131 ile eklersiniz. Y\u00fczlerce sayfada ayn\u0131 Control\u00fc kullanarak kendinize olduk\u00e7a yararl\u0131 bir \u015fablon yaratm\u0131\u015f olursunuz. User Control’de yapt\u0131\u011f\u0131n\u0131z herhangi bir de\u011fi\u015fiklik otomatik olarak onu i\u00e7eren sayfalara yans\u0131yacakt\u0131r. \u015eimdi bunu deneyelim.<\/p>\n
\"\"<\/p>\n
\u0130lk \u00f6nce master page’i ve css’i haz\u0131rlayaca\u011f\u0131z. Altta haz\u0131rlad\u0131\u011f\u0131m master page’in g\u00f6r\u00fcn\u00fcm\u00fc bulunmaktad\u0131r. (Bunu g\u00f6rebilmek i\u00e7in master page’e ba\u011fl\u0131 bir temp.aspx dosyas\u0131 yaratt\u0131m.)<\/p>\n
\"\"<\/p>\n
Sonu\u00e7ta master page’de \u00e7\u0131kan kodlar alttaki gibidir.<\/p>\n
\n
<!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd”><\/p>\n
<%@ Master Language=”C#” %><\/p>\n
<html dir=”ltr” xmlns=”http:\/\/www.w3.org\/1999\/xhtml”><\/p>\n
<head runat=”server”><\/p>\n
<meta content=”text\/html; charset=utf-8″ http-equiv=”Content-Type” \/><\/p>\n
<title>Zero Point<\/title><\/p>\n
<asp:ContentPlaceHolder id=”head” runat=”server”><\/p>\n
<\/asp:ContentPlaceHolder><\/p>\n
<link href=”main.css” rel=”stylesheet” type=”text\/css” \/><\/p>\n
<!–[if lt IE 7]><\/p>\n
<script defer type=”text\/javascript” src=”pngfix.js”><\/script><\/p>\n
<![endif]–><\/p>\n
<\/head><\/p>\n
<body><\/p>\n
<form id=”form1″ runat=”server”><\/p>\n
<div id=”header”><\/div><\/p>\n
<div id=”nav”><map id=”FPMap0″ name=”FPMap0″><\/p>\n
<area coords=”232, 14, 300, 30″ href=”#” shape=”rect” \/><\/p>\n
<area coords=”308, 14, 377, 32″ href=”#” shape=”rect” \/><\/p>\n
<area coords=”386, 15, 490, 33″ href=”#” shape=”rect” \/><\/p>\n
<area coords=”501, 17, 617, 30″ href=”#” shape=”rect” \/><\/p>\n
<area coords=”628, 15, 675, 31″ href=”#” shape=”rect” \/><\/p>\n
<\/map><\/p>\n
<img height=”43″ src=”images\/nav.png” usemap=”#FPMap0″ width=”916″ border=”0″ \/><\/p>\n
<\/div><\/p>\n
<div id=”container”><\/p>\n
<div id=”leftContainer”><\/p>\n
<div><img src=”images\/leftTop.png” \/><\/div><\/p>\n
<div id=”leftContentArea”><\/p>\n
\n
<asp:ContentPlaceHolder id=”leftContentPlaceHolder” runat=”server”><\/p>\n
<\/asp:ContentPlaceHolder><\/p>\n
\n
<\/div><\/p>\n
<div><img src=”images\/leftBottom.png” \/><\/div><\/p>\n
<\/div><\/p>\n
<div id=”rightContainer”><\/p>\n
\n
<div><img src=”images\/rightTop.png” \/><\/div><\/p>\n
<div id=”rightContentArea”><\/p>\n
\n
<asp:ContentPlaceHolder id=”rightContentPlaceHolder” runat=”server”><\/p>\n
<\/asp:ContentPlaceHolder><\/p>\n
\n
<\/div><\/p>\n
<div><img src=”images\/rightBottom.png” \/><\/div><\/p>\n
<\/div><\/p>\n
<\/div><\/p>\n
<div class=”clear”><!– –><\/div><\/p>\n
<div id=”footer” align=”center”><a href=”#”>HOME<\/a> | <a href=”#”>USERS<\/a><\/p>\n
| <a href=”#”>CONTROLS<\/a> | <a href=”#”>EXPRESSION<\/a> | <a href=”#”><\/p>\n
WEB<\/a><\/div><\/p>\n
<\/form><\/p>\n
<\/body><\/p>\n
<\/html><\/p>\n<\/div>\n
Altta CSS kodlar\u0131 bulunmaktad\u0131r.<\/p>\n
\n
body{<\/p>\n
background-color:black;<\/p>\n
background-image:url(‘images\/back.jpg’);<\/p>\n
background-repeat:no-repeat;<\/p>\n
background-position:center top;<\/p>\n
margin:0px;<\/p>\n
font-family:Arial, Helvetica, sans-serif;<\/p>\n
font-size:12px;<\/p>\n
color:white;<\/p>\n
}<\/p>\n
a:link{<\/p>\n
color:blue;<\/p>\n
text-decoration:underline;<\/p>\n
}<\/p>\n
a:visited{<\/p>\n
color:blue;<\/p>\n
text-decoration:underline;<\/p>\n
}<\/p>\n
a:hover{<\/p>\n
color:blue;<\/p>\n
text-decoration:none;<\/p>\n
}<\/p>\n
#header{<\/p>\n
background-image:url(‘images\/header.png’);<\/p>\n
width:916px;<\/p>\n
height:92px;<\/p>\n
background-repeat:no-repeat;<\/p>\n
margin-left:auto;<\/p>\n
margin-right:auto;<\/p>\n
}<\/p>\n
#nav{<\/p>\n
width:916px;<\/p>\n
height:43px;<\/p>\n
margin-left:auto;<\/p>\n
margin-right:auto;<\/p>\n
}<\/p>\n
#container{<\/p>\n
width:916px;<\/p>\n
margin-left:auto;<\/p>\n
margin-right:auto;<\/p>\n
}<\/p>\n
#leftContainer{<\/p>\n
width:235px;<\/p>\n
float:left;<\/p>\n
}<\/p>\n
#rightContainer{<\/p>\n
width:681px;<\/p>\n
float:left;<\/p>\n
}<\/p>\n
#leftContentArea{<\/p>\n
background-image:url(‘images\/leftBack.png’);<\/p>\n
width:235px;<\/p>\n
background-repeat:repeat-y;<\/p>\n
\n
}<\/p>\n
#rightContentArea{<\/p>\n
background-image:url(‘images\/rightBack.png’);<\/p>\n
width:681px;<\/p>\n
background-repeat:repeat-y;<\/p>\n
\n
}<\/p>\n
#footer{<\/p>\n
background-image:url(‘images\/footerBack.png’);<\/p>\n
background-repeat:no-repeat;<\/p>\n
width:916px;<\/p>\n
height:48px;<\/p>\n
margin-left:auto;<\/p>\n
margin-right:auto;<\/p>\n
padding-top:15px;<\/p>\n
}<\/p>\n
#footer a:link{<\/p>\n
color:white;<\/p>\n
text-decoration:none;<\/p>\n
font-size:10px;<\/p>\n
}<\/p>\n
#footer a:visited{<\/p>\n
color:white;<\/p>\n
text-decoration:none;<\/p>\n
font-size:10px;<\/p>\n
}<\/p>\n
#footer a:hover{<\/p>\n
color:white;<\/p>\n
text-decoration:underline;<\/p>\n
font-size:10px;<\/p>\n
}<\/p>\n
.clear {<\/p>\n
clear: both;<\/p>\n
height: 1px;<\/p>\n
font-size: 1px;<\/p>\n
line-height: 1px;<\/p>\n
margin-bottom: -1px;<\/p>\n
}<\/p>\n<\/div>\n
Bu makale i\u00e7in haz\u0131rlad\u0131\u011f\u0131m sitede imajlar\u0131 transparan PNG olarak kulland\u0131m. Fakat IE 7.0’\u0131n alt\u0131ndaki versiyonlar\u0131n transparan PNG’yi desteklemedi\u011fini unutmamak laz\u0131m. Bu sorunu \u00e7\u00f6zen javascript kodu alttad\u0131r. Transparan PNG’nin ba\u015far\u0131s\u0131n\u0131 makalenin sonunda \u00f6rnekle kan\u0131tlayaca\u011f\u0131m.<\/p>\n
\n
var arVersion = navigator.appVersion.split(“MSIE”)<\/p>\n
var version = parseFloat(arVersion[1])<\/p>\n
if ((version >= 5.5) && (document.body.filters))<\/p>\n
{<\/p>\n
for(var i=0; i<document.images.length; i++)<\/p>\n
{<\/p>\n
var img = document.images[i]<\/p>\n
var imgName = img.src.toUpperCase()<\/p>\n
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)<\/p>\n
{<\/p>\n
var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”<\/p>\n
var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”<\/p>\n
var imgTitle = (img.title) ? “title='” + img.title + “‘ ” : “title='” + img.alt + “‘ “<\/p>\n
var imgStyle = “display:inline-block;” + img.style.cssText<\/p>\n
if (img.align == “left”) imgStyle = “float:left;” + imgStyle<\/p>\n
if (img.align == “right”) imgStyle = “float:right;” + imgStyle<\/p>\n
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle<\/p>\n
var strNewHTML = “<span ” + imgID + imgClass + imgTitle<\/p>\n
+ ” style=\\”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”<\/p>\n
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”<\/p>\n
+ “(src=\\'” + img.src + “\\’, sizingMethod=’scale’);\\”><\/span>”<\/p>\n
img.outerHTML = strNewHTML<\/p>\n
i = i-1<\/p>\n
}<\/p>\n
}<\/p>\n
}<\/p>\n<\/div>\n
Elbette <HEAD> tag\u0131n\u0131n i\u00e7ine alttaki kodu yerle\u015ftirmeyi unutmay\u0131n.<\/p>\n
\n
<!–[if lt IE 7]><\/p>\n
<script defer type=”text\/javascript” src=”pngfix.js”><\/script><\/p>\n
<![endif]–><\/p>\n<\/div>\n
Master page’imizi ve CSS’imizi olu\u015fturdu\u011fumuza g\u00f6re \u015fimdi, master page’i kullanarak sayfalar\u0131m\u0131z\u0131 yaratabiliriz. A, B ve C grubuna ait, her biri kendine \u00f6zel i\u00e7eri\u011fe sahip sayfalar\u0131m\u0131z haz\u0131r. Fark\u0131ndaysan\u0131z \u00fc\u00e7 sayfada da soldaki men\u00fc alanlar\u0131 bo\u015f. \u00c7\u00fcnk\u00fc bunlar\u0131 user control kullanarak haz\u0131rlayaca\u011f\u0131z.<\/p>\n
\"\"<\/a> \"\"<\/a> \"\"<\/a><\/p>\n
Art\u0131k User Control’lerimizi haz\u0131rlayabiliriz. Folder List kutusundaki proje ad\u0131na sa\u011f t\u0131klayarak New>Folder a t\u0131kl\u0131yoruz.<\/p>\n
\"\"<\/p>\n
A\u00e7\u0131lan klas\u00f6r\u00fc UserControls(ya da siz ne isterseniz) olarak isimlendiriyoruz.<\/p>\n
\"\"<\/p>\n
File>New>Page’ e t\u0131kl\u0131yoruz.<\/p>\n
\"\"<\/p>\n
A\u00e7\u0131lan pencerede Page>ASP.NET alt\u0131nda Web User Control’u se\u00e7erek OK’e t\u0131kl\u0131yoruz. (Programming Language b\u00f6l\u00fcm\u00fc projenin kullan\u0131laca\u011f\u0131 dil a\u00e7\u0131s\u0131ndan \u00f6nemli. Biz burada C# olarak b\u0131rak\u0131yoruz.)<\/p>\n
\"\"<\/p>\n
Sayfam\u0131z\u0131 UserControls klas\u00f6r\u00fcne kaydediyoruz. (dosya uzant\u0131s\u0131n\u0131n ASCX oldu\u011funa dikkat edin)<\/p>\n
\"\"<\/p>\n
aMenu.ascx isimli dosyam\u0131z haz\u0131rd\u0131r. Sayfa ilk olu\u015fturuldu\u011funda bar\u0131nd\u0131rd\u0131\u011f\u0131 tek sat\u0131r kod alttad\u0131r.<\/p>\n
\"\"<\/p>\n
Peki bu yeni sayfada neler yapabiliriz? Bir ascx sayfas\u0131, HTML ve ASP.NET’in t\u00fcm \u00f6zelliklerini kullanabilir. Data base’e ba\u011fl\u0131 dinamik bir anket uygulamas\u0131 veya kullan\u0131c\u0131 bilgileri kutusu olu\u015fturabilece\u011finiz gibi html tag lar\u0131n\u0131 kullanarak statik i\u00e7erikde olu\u015fturabilirsiniz. Biz bu \u00f6rnekte statik bir menu uygulamas\u0131 ile User Control uygulamam\u0131za devam edece\u011fiz. Burada dikkat etmeniz gereken browser sayfay\u0131 renderlarken ascx den gelen taglar\u0131 da , i\u00e7inde bulundu\u011fu taglara ba\u011fl\u0131 olarak renderlayacakt\u0131r.<\/p>\n
A grubu i\u00e7in men\u00fcm\u00fcz\u00fc olu\u015ftural\u0131m. aMenu.ascx sayfas\u0131ndaki kod alttaki gibidir.<\/p>\n
\n
<%@ Control Language=\"C#\" ClassName=\"WebUserControl1\" %>\r\n<div class=\"menuHead\">Menu A<\/div>\r\n<div>\r\n\t<ul>\r\n\t\t<li><a href=\"#\">A1 Lorem ipsum dolor sit amet<\/a><\/li>\r\n\t\t<li><a href=\"#\">A2 Consectetuer adipiscing elit.<\/a><\/li>\r\n\t\t<li><a href=\"#\">A3 Vestibulum bibendum.<\/a><\/li>\r\n\t\t<li><a href=\"#\">A4 Nam sagittis est vel arcu<\/a><\/li>\r\n\t\t<li><a href=\"#\">A5 Mauris libero lacus, aliquam<\/a><\/li>\r\n\t\t<li><a href=\"#\">A6 Suscipit vitae, facilisis sed<\/a><\/li>\r\n\t\t<li><a href=\"#\">A7 Pellentesque commodo<\/a><\/li>\r\n\t\t<li><a href=\"#\">A8 Praesent vel risus vel arcu<\/a><\/li>\r\n\t<\/ul>\r\n<\/div><\/pre>\n<\/div>\n
Men\u00fc i\u00e7in olu\u015fturdu\u011fumuz CSS’ler altaki gibidir.<\/p>\n
\n
ul{\r\n\r\n}\r\nul a:link{\r\n\tcolor:white;\r\n\ttext-decoration:none;\r\n}\r\nul a:visited{\r\n\tcolor:white;\r\n\ttext-decoration:none;\r\n}\r\nul a:hover{\r\n\tcolor:#ffcf00;\r\n\ttext-decoration: underline;\r\n}\r\n\r\nli{\r\n\tlist-style-image: url('images\/listImage.png');\r\n\tmargin-right:15px;\r\n\tfont-size:12px;\r\n\tline-height:18px;\r\n\tletter-spacing:normal;\r\n}<\/pre>\n<\/div>\n
Evet menum\u00fcz haz\u0131r. \u015eimdi ne yapaca\u011f\u0131z? Yapman\u0131z gereken tek \u015fey haz\u0131rlam\u0131\u015f oldu\u011funuz kontrol\u00fc sayfadaki yerine s\u00fcr\u00fckleyip b\u0131rakmak.<\/p>\n
\"\"<\/p>\n
Expression Web sayfada kodu sizin i\u00e7in olu\u015fturacakt\u0131r.<\/p>\n
\"\"<\/p>\n
User kontrolun yan\u0131ndaki oka basarak UserControl Tasks kutusunu a\u00e7abilir, Edit UserControl’a t\u0131klayarak User Control’ \u00fcn\u00fcz\u00fc d\u00fczenleyebilirsiniz.<\/p>\n
\"\"<\/p>\n
Sayfam\u0131z haz\u0131r. Peki \u015fimdi ne olacak? Art\u0131k A grubu sayfas\u0131ndan y\u00fczlercede yaratsak, men\u00fcde olabilecek en ufak bir de\u011fi\u015fiklik tek kaynaktan, User Control’den kontrol edilecek. Ve bu bize hatr\u0131 say\u0131l\u0131r bir zaman kazand\u0131racak.<\/p>\n
\"\"<\/p>\n
S\u00f6z vermi\u015f oldu\u011fum gibi \u015fimdi s\u0131rada transparan PNG’nin g\u00fcc\u00fc. Yeni bir background imaj\u0131 haz\u0131rl\u0131yorum ve CSS’de sadece BODY’nin background imaj\u0131n\u0131 de\u011fi\u015ftiriyorum.<\/p>\n
\"\"<\/p>\n
Ve sonu\u00e7!!! Enfes.<\/p>\n
\"\"<\/p>\n
Bu makalemde Expression Web’de Web User Control kavram\u0131n\u0131 anlatt\u0131m.<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar<\/p>\n
Te\u015fekk\u00fcrler.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
13\/5\/2008 Merhaba bu makalede uygulamal\u0131 olarak Expression Web’de User Control kavram\u0131n\u0131 anlataca\u011f\u0131m. Bu makaledeki \u00f6rne\u011fi haz\u0131rlarken Expression Web 2 Beta kulland\u0131m. Expression Web 2’deki yenilikleri E. Altu\u011f Y\u0131lmaz hocan\u0131n makalesinden okuyabilirsiniz. Bunun yan\u0131nda User Control’un Expression’\u0131n\u0131n ilk versionundan beri bulundu\u011funu belirtmek isterim.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[29],"class_list":["post-688","post","type-post","status-publish","format-standard","hentry","category-teknik-yazi","tag-expression-web"],"_links":{"self":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=688"}],"version-history":[{"count":8,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/688\/revisions"}],"predecessor-version":[{"id":2484,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/688\/revisions\/2484"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=688"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}