Themes

‫‪Themes‬‬
‫إعداد المهندس ‪ :‬محمـــــــــــــــــــد الساعـــدي‬

‫العــــــــــــــراق‬
‫‪0‬‬
‫الدرس األول‬
‫بسم هللا الرحمن الرحٌم‬
‫والصالة والسالم على سٌد المرسلٌن ابا القاسم محمد وعلى اله‬
‫اما بعد‬
‫ال ارٌد ان اطٌل بالمقدمة فالكثٌر ال ٌحبذون قراءة المقدمات وانا منهم لذلك سأدخل فً صلب الموضوع وان‬
‫شاء هللا سٌكون مفٌد وساستخدم اسلوب غٌر ذالك االسلوب الذي تعودتموه منً فً الدروس السابقة ‪.‬‬
‫على بركة هللا ابدأ واتوكل ‪....‬‬
‫‪: Themes‬‬
‫فكرة الثٌم تقوم وتقعد على مبدا واحد ال اكثر هو التحكم بمظهر الموقع (الصفحات والعناصر (‪))Controls‬‬
‫‪,‬بمعنى ابسط التحكم بمظهر عناصر ‪ ASP.net‬وعناصر ‪ HTML‬فً الصفحة كلون الخلفٌة وحجم الخط‬
‫ونوع الخط وموقع العنصر بالصفحة الخ هذا هو عمله اما ماهٌته هً انه عبارة عن مجلد ٌقع داخل المجلد‬
‫(‪ )App_Themes‬وٌتكون من ملف واحد فً بعض االحٌان ولكن فً احٌانا كثٌرة من ملفٌن هما ملف‬
‫(‪ )Skin‬وملف (‪ )CSS‬او اكثر ‪.‬‬
‫ربما ٌأتً شخص وٌسأل عن الفرق بٌن ‪ Themes‬و ‪, Master Page‬؟؟؟‬
‫الجواب هو ‪ :‬ان ‪ Master Page‬الفائدة منها مشاركة محتوٌات معٌنة خالل مجموعة من الصفحات فً‬
‫الموقع ‪,‬بٌنما ‪ٌ Themes‬جعلك قادرا على التحكم بمظهر هذه المحتوٌات ‪.‬‬
‫أنشــــــاء ‪: Theme‬‬
‫طرٌقة انشاء الثٌم بسٌطة جدا وهً حسب هذه الخطوات ‪:‬‬
‫‪ ‬أفتح ‪ Visual Studio‬ومن ‪ File‬اختر ‪ New‬ثم اختر ‪ ASP.NET EMPTY WEB SITE‬اذا كنت‬
‫تستخدم (‪ )Visual Studio 2010‬اما اذا كنت تستخدم ‪ Visual Studio 2008‬فاالمر بسٌط اختر‬
‫‪ Empty Web Site‬او ‪ ASP.NET Web site‬ال فرق بٌنهما لكن فً ‪ٌ 2010‬وجد فرق ‪.‬عموما‬
‫سمً المشروع ‪(( Themes‬أللغة ‪((.))C#‬هذا المشروع سنعمل علٌه فً غالبٌة الدروس القادمة))‬
‫ّ‬
‫‪1‬‬
‫‪ ‬ثم من خالل ال‪ Solution Explorer‬انقر ‪ Right Click‬على مشروعنا واختر ‪Add Asp.net‬‬
‫‪ Folder‬اختر ‪Theme‬‬
‫سترى أنه أضاف لك مجلد ‪ App_Themes‬وبداخله مجلد اخر بأسم ‪ Theme1‬هو هذا الثٌم ‪,‬‬
‫الثٌم (‪ )Theme‬فً بعض االحٌان قد ٌحتوي على انواع مختلفة من الملفات كالصور او ملفات نصٌة او حتى‬
‫مجلدات فرعٌة (‪ )Sub Folder‬ولكن فً اغلب االحٌان ٌحتوي على نوعٌن من الملفات هما ‪:‬‬
‫‪: Skin‬‬ ‫‪‬‬

‫)‪Cascading Style Sheet (CSS‬‬ ‫‪‬‬
‫‪2‬‬
: Skin File
‫) التً تؤثر فقط على‬Asp.net Controls( ‫ هً التحكم بخواص عناصر االي اس بً دوت نت‬Skin‫فكرة ال‬
‫ فً الثٌم‬Skin ‫وبأمكانك ان تضٌف اكثر من ملف‬.) ‫ الخ‬BackGround,Fore Color( ‫مظهر العنصر مثل‬
: Skin ‫اضافة ملف‬

Add New Item ‫ واختر‬Theme1 ‫ على‬Right Click 
Add ‫ ثم‬Skin File ‫ أختر‬
‫ ٌعمل على صفحة معٌنة فعلٌك ان تطبق الثٌم‬Skin ‫ولكً تجعل‬, ‫ امسح مافً داخله من كالم‬Skin ‫بعد أضافة ملف‬
‫على هذه الصفحة‬
<%@ Page ……………………… Theme ="Theme1" %>
: ‫لنأخذ مثال بسٌط‬
: Skin ‫اكتب فً ملف‬
<asp:TextBox runat="server" BackColor="#FFCCFF"

BorderColor="#FF6600" BorderWidth="4px" />
: ‫ تٌكس بوكس لٌكون كود الصفحة هكذا‬2 ‫واضف صفحة وداخل هذه الصفحة اضف‬
<%@ Page Language="C#" Theme ="Theme1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
3
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtFirst" runat ="server" />
<asp:TextBox ID="txtSecond" runat ="server" />
</div>
</form>
</body>
</html>
ً‫< )تعن‬asp:TextBox ( ‫ على اي تٌكس بكوس فً الصفحة حٌث ان‬Skin ‫فً المثال اعاله لقد ُطبق ال‬
‫ هً االفتراضٌة‬Skin ‫ فً الصفحة وكانت التسمٌه لملف‬TextBox ‫ان هذا التاثٌر ٌطبق فقط على‬
‫ وبامكانك ان تغٌره بٌنما فً المحتوٌات بأمكانك ان تضٌف‬SkinFile.Skin ‫التً تعنً ٌطبق على الكل‬
. ‫فٌه‬Skin ‫ لكل‬ID
‫) فأنه سوف ال ٌطبق على كل العناصر وانما حسب العنصر الذي‬ID( ‫ أي دي‬Skin ً‫عندما تعط‬: ‫مالحظة‬
: ‫ فً خواصة‬Skin ‫قد اضفت له ملف‬
Skin ‫ لملف‬Id ‫لنعود للمثال السابق ونضٌف‬
<asp:TextBox SkinID="TXT" runat="server" BackColor="#FFCCFF"

: ‫اما فً الصفحة‬

<title></title>
</head>
<body>
<div>
<asp:TextBox ID="txtFirst" runat ="server" SkinID ="TXT" />
<asp:TextBox ID="txtSecond" runat ="server" />
</div>
</form>
</body>
</html>
4
‫بٌنما الثانً لم نسند له‬ SkinID ‫ فً الخاصٌة‬Skin ‫ لملف‬ID ‫بالنسبة للتٌكس بوكس االول اسندنا‬
. ‫ وعدم اضافته‬ID ‫ استعرض وشاهد الفرق بٌن اضافة‬Skin ID‫ال‬
‫هو هذا الجزء‬Skin ‫اقصد ب‬: ‫ربما أختلطت المسمٌات علٌكم‬

Skin ‫ هو مجموعة من‬Skin ‫بٌنما اقصد بملف‬

<asp:Label SkinID="Label" runat ="server" BackColor="#6666FF"

BorderColor="Blue"
BorderStyle="Dotted" BorderWidth="3px" Font-Bold="True" Font-
Italic="True"
ForeColor="Maroon" />
. Skin ‫ٌعنً ٌحتوي على اكثر من‬
‫) المتعلقة بمظهر‬Control(‫ ٌهٌمن على خواص العنصر‬Skin File‫شً مهم جدا وهو ان ال‬
ْ ‫هناك‬
‫ حمراء‬label ‫ واجعل خلفٌة‬label ‫ للتوضٌح أكثر أضف صفحة واضف فٌها‬,‫العنصر الذي ٌطبق علٌه‬
: ‫اللون‬
: ‫ ضع‬Skin ‫فً ملف‬
<asp:Label SkinID="Label" runat ="server" BackColor ="Yellow" />
: ‫بٌنما فً الصفحة‬

<title></title>
</head>
<body>
<div>
<asp:Label ID="Label1" runat ="server" BackColor ="Red" SkinID ="Label"
Text ="This My Label " />
</div>
</form>
</body>
</html>
5
‫بعد االستعراض ‪:‬‬
‫بالرغم ان ‪ Label‬كانت خلفٌته اللونٌة فً الكود حمراء لكن ان ملف ‪ Skin‬جعل الخلفٌة صفراء وهذا‬
‫المقصود بالهٌمنة على خواص العنصر ‪......‬‬
‫لنفترض لدٌنا ٓ‪ 2‬تٌكس بوكس وطبقت علٌهم ‪ Skin‬بلون خلفٌة معٌن لجمٌعهم وكذلك لون الخط لكن اردت‬
‫واحد فقط من هذه التٌكس بوكس ٌكون لون خطه مختلف عن البقٌة فماذا سافعل فً هذا الوضع ؟‬
‫االمر بسٌط سابقا كنا نضٌف او نطبق الثٌم على الصفحة من خالل ‪:‬‬
‫>‪<%@ Page ……………………… Theme ="Theme1" %‬‬
‫لحل هذه المشكلة نطبق الثٌم على الصفحة بالشكل التالً ‪:‬‬
‫"‪<%@ Page ………….. StylesheetTheme ="Theme1‬‬ ‫>‪%‬‬
‫ونعطً لون الخط للتٌكس بوكس الوحٌد الذي اردنا لون خطه ٌكون مختلف البقٌة من خالل خواص التٌكس‬
‫بوكس‪....‬‬
‫والفرق بٌن الطرٌق االولى والثانٌة هو ان فً االولى ‪ٌSkin‬هٌمن على خواص العنصر حتى لو غٌرت من‬
‫خالل العنصر نفسه ولكن فً الحالة الثانٌة سوف الٌهٌمن على خواص العنصر‬
‫حاول ان تطبق الكالم اعاله على المثال الخٌر الذي طبقناه على ‪Label‬‬
‫"‪<%@ Page Language="C#" StylesheetTheme ="Theme1‬‬ ‫>‪%‬‬
‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN‬‬

‫>"‪"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‬‬
‫>"‪<html xmlns="http://www.w3.org/1999/xhtml‬‬
‫>"‪<head runat="server‬‬
‫>‪<title></title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<form id="form1" runat="server‬‬
‫>‪<div‬‬
‫"‪<asp:Label ID="Label1" runat ="server" BackColor ="Red" SkinID ="Label‬‬
‫>‪Text ="This My Label " /‬‬
‫>‪</div‬‬
‫>‪</form‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪6‬‬
ً‫الدرس الثان‬
: Theme ‫إٌقاف‬
‫) التً تستخدم لتفعٌل واٌقاف‬Enable Theming ( ‫) تمتلك خاصٌة‬Asp.net Controls( ‫جمٌع العناصر‬
‫بمعنى ابسط لنفترض ان احدى‬,)True( ً‫) وحالتها االفتراضٌة ه‬Control( ‫تفعٌل الثٌم على العنصر‬
‫الصفحات التً ٌطبق علٌها الثٌمتحتوي على مجموعة من العناصر ونرٌد احد هذه العناصر ال ٌطبق علٌه‬
: ‫لناخذ مثال‬, )Enable Theming =False( ‫الثٌم فً هذه الحالة نجعل الخاصٌة‬
‫) الثانً نوقف فٌه‬Calendar( ‫ من العنصر‬2 ‫) وضع فٌها‬Themes( ‫اضف صفحة جدٌدة الى المشروع‬
‫) واالول نتركه على حالة الن القٌمة االفتراضٌة‬Enable Theming =False( ‫الثٌم من خالل الخاصٌة‬
‫) لٌصبح الكود‬Enable Theming =True( ‫للخاصٌة‬

<script runat="server">
</script>
<title></title>
</head>
<body>
<div>
<asp:Calendar ID="Calendar1" runat ="server" />
<br /><br />
<asp:Calendar ID="Calendar2" EnableTheming ="false" runat ="server" />
</div>
</form>
</body>
</html>
)Theme2( ‫) ونسمٌه‬App_Theme( ‫ونضٌف ثٌم جدٌد الى‬
7
:)Calendar( ‫) للعنصر‬Skin( ‫) ونمسح مافً داخله ونكتب‬Theme2( ‫) داخل‬Skin File( ‫ونضٌف ملف‬
<asp:Calendar
BackColor="White"
BorderColor="White"
BorderWidth="1px"
Font-Names="Verdana"
Font-Size="9pt"
ForeColor="Black"
NextPrevFormat="FullMonth"
Width="400px"
Runat="Server">
<SelectedDayStyle
BackColor="#333399"
ForeColor="White" />
<OtherMonthDayStyle
ForeColor="#999999" />
<TodayDayStyle
BackColor="#CCCCCC" />
<NextPrevStyle
Font-Bold="True"
Font-Size="8pt"
ForeColor="#333333"
VerticalAlign="Bottom" />
<DayHeaderStyle
Font-Bold="True"
Font-Size="8pt" />
<TitleStyle
BackColor="White"
BorderColor="Black"
BorderWidth="4px"
Font-Bold="True"
Font-Size="12pt"
8
‫>‪ForeColor="#333399" /‬‬
‫>‪</asp:Calendar‬‬
‫بعد استعراضه ستظهر الصفحة هكذا ‪:‬‬
‫كما تالحظ ‪,‬فقد طبق الثٌم على (‪ )Calendar1‬ولم ٌطبق على (‪ )Calendar2‬بسبب اٌقاف تفعٌل الثٌم على‬
‫(‪. )Calendar2‬‬
‫فً بعض االحٌان ٌكون لدٌك ثٌم واحد وترٌد تطبٌقة على جمٌع الصفحات هنا سٌكون امامك خٌارٌن ‪:‬‬
‫االول ‪:‬كما تلعمنا سابقا باضافة الثٌم الى الصفحة من خالل‬

‫>‪<%@ Page Language="C#" Theme ="Theme2" %‬‬
‫ولكن ربما تكون لدٌك المئات من الصفحات فهذا فٌه بعض التعب ‪.‬‬
‫ثانٌـــا ‪ :‬عن طرٌق تسجٌل الثٌم فً (‪ )Web.Config‬وبالتالً سوف ٌطبق على جمٌع الصفحات وال نحتاج‬
‫الن نكتب الكود اعاله‬
‫تسجٌل الثٌم فً (‪)Web.Config‬‬
‫>‪<configuration‬‬
‫>‪<system.web‬‬
‫>‪<pages theme ="Theme2" /‬‬
‫>‪<compilation debug="false" targetFramework="4.0" /‬‬

‫>‪</system.web‬‬
‫>‪</configuration‬‬
‫او قد ٌكون التسجٌل بهذا الشكل ‪:‬‬
‫‪9‬‬
<configuration>
<system.web>
<pages styleSheetTheme ="Theme2" />
<compilation debug="false" targetFramework="4.0" />

</system.web>
</configuration>
‫والفرق بٌن الطرٌقة االولى والثانٌة فً تسجٌل الثٌم هو نفس الفرق الذي تكلمنا عنه مسبقا بٌن‬
<%@ Page ……………………… Theme ="Theme1" %>
‫و‬
<%@ Page ………….. StylesheetTheme ="Theme1" %>
ً‫ وهً انه ربما ال ترٌد تطبٌق الثٌم على احدى الصفحات بٌنما مادام الثٌم سجل ف‬, ‫ولكن هناك مشكلة‬
‫) فانه سٌطبق على الكل ؟‬Web.Config(
) Enable Theming ="False"( ‫نوقف تطبٌق الثٌم على اي صفحة من خالل الخاصٌة‬
<%@ Page Language="C#" EnableTheming ="false" %>
10
: Cascading Style Sheet(CSS)
‫) ٌطبق‬Skin Files( ‫) بٌنما‬Html( ‫) وكذلك عناصر‬Asp.net Controls( ‫ٌستخدم للتحكم بمظهر عناصر‬
‫) ٌطبق على عناصر الصفحة بصورة اوتوماتٌكٌة عند تطبٌق الثٌم‬Css( ‫) وكذلك‬Asp.net( ‫على عناصر‬
)Style Sheet.css( ‫على سبٌل المثال اضف ثٌم جدٌد الى المشروع وأضف داخله ملف‬, ‫على الصفحة‬
: ‫)نكتب الكود التالي للتحكم بمظهر الصفحة والعناصر‬Css( ‫وداخل ملف‬
html
{
background-color:gray;
font:14px Georgia,Serif;
}
.content
{
margin:auto;
width:600px;
border:solid 1px black;
background-color:White;
padding:10px;
}
h1
{
color:Gray;
font-size:18px;
border-bottom:solid 1px orange;
}
label
{
font-weight:bold;
}
input
{
background-color:Yellow;
border:double 3px orange;
}
.button
{
background-color:#eeeeee;
}
11
: ‫ثم أضف صفحة وداخل هذه الصفحة‬

<title></title>
</head>
<body>
<div class ="content" dir="rtl">
<h1>‫<التسجيل‬/h1>
<asp:Label ID="lblFirstName" Text ="‫ االول االسم‬:" AssociatedControlID
="txtFirstName" runat ="server" />
<br />
<asp:TextBox ID ="txtFirstName" runat ="server" />
<br /><br />
<asp:Label ID="lblLastName" Text ="‫ االخير االسم‬:" AssociatedControlID
="txtLastName" runat ="server" />
<br />
<asp:TextBox ID="txtLastName" runat ="server" />
<br /><br />
<asp:Button ID="btnSave" Text ="‫ "دخول‬CssClass ="button" runat ="server" />
</div>
</form>
</body>
</html>
‫<) بٌنما‬H1>(‫<) و‬Div > ( ‫ ) مثل‬Html Element( ‫طبعا بالصفحة اعاله لدٌنا نوعٌن من العناصر هما‬
‫) فً المتصفح لذلك فً كود‬html( ‫) الى عناصر‬Render( ‫) التً تترجم‬Asp.net Control( ً‫النوع الثان‬
: ‫بمعنى اخر لو استعرضت الصفحة اعاله‬, )Html( ‫) ُكتب على عناصر‬CSS(
12
<head><title>
</title><link href="App_Themes/Theme3/StyleSheet.css" type="text/css"

rel="stylesheet" /></head>
<body>
<form method="post" action="Default3.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwULLTEzNjkxMzkwNjRkZO7Yx6IfXtq8SSWGvEb9T2kqyQVNqN+CY80fZH
CkNJ4j" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION"

id="__EVENTVALIDATION"
value="/wEWBALjx+usDQK5h62pDwKdlcWpAgKct7iSDKKhu8gHoMYdQz4fTeem+ClF3i
6aZE1NQhtVjQq6T1DN" />
</div>
<div class ="content" dir="rtl">
<h1>‫<التسجيل‬/h1>
<span id="lblFirstName"> ‫االسم االول‬:</span>
<br />
<input name="txtFirstName" type="text" id="txtFirstName" />
<br /><br />
<label for="txtLastName" id="lblLastName">‫ االسم االخير‬:</label>
<br />
<input name="txtLastName" type="text" id="txtLastName" />
<br /><br />
<input type="submit" name="btnSave" value="‫ "دخول‬id="btnSave"
class="button" />
</div>
</form>
</body>
</html>
)Associated Control Id ( ‫) لذلك استخدمنا الخاصٌة‬Span( ‫) ٌترجم على انه محتوى‬Label ( ‫ان‬
http://vb4arb.com/vb/showthread.php?2796-( ‫(للمزٌد عن هذه الخاصٌة ٌرجى زٌارة‬
‫)) مع‬%DD%C7%C6%CF%C9-%C7%E1%CE%C7%D5%ED%C9-AssociatedcontrolId
ً‫) تترجم ف‬Button,TextBox( ‫) اما بالنسبة‬Label( ‫) التً تجعله ٌترجم فً المتصفح على انه‬Label(
: ‫) سٌطبق علىٌهما‬CSS( ً‫< ) فالكود ادناه ف‬Input>( ‫المتصفح على انهما‬
input
{
background-color:Yellow;
border:double 3px orange;
}
. )CSS Class( ‫) من خالل الخاصٌة‬Button (‫هذا باالضافة الى اننا علمنا كالس للبوتون واسند لل‬
13
‫لزٌادة كفائة وسرعة الموقع دائما حاول ان تستخدم الثٌم للتحكم بمظهر الموقع وال تغٌر مظهر العنصر‬
‫(‪ )Control‬من خالل خواصه التً تتحكم بمظهره الن عندما تكتب كود (‪ )Css‬داخل الصفحة فً كل مرة‬
‫سوف ٌتم تحمٌل الصفحة ٌعاد تحمٌل كود (‪ )Css‬مع الصفحة بٌنما لو وضعت (‪ )Css‬فً ملف داخل الثٌم فً‬
‫اول تحمٌل سوف ٌخزن كود (‪ )Css‬بصورة وقتٌه داخل المتصفح وكذلك تجنب دائما استخدام (‪)Skin File‬‬
‫واستخدم بدله (‪ )Css File‬لماذا ؟‬
‫الن استخدام (‪ )Skin File‬سوف ٌترجم ( ‪ ) Render‬على انه خصائص للعنصر (‪ )Control‬وٌدمج مع‬
‫العنصر قبل (‪ )Render‬وسوف ٌترجم فً كل مرة تطلب فٌه الصفحة (‪.)Request Page‬‬
‫بامكانك ان تضٌف اكثر من ملف (‪ )Css‬داخل الثٌم وسوف تطبق جمٌعها على الصفحة ‪ٌ,‬عنً مثال لو كان‬
‫لدٌك ‪ 2‬من (‪ )Style Sheet Cascading‬اذا لم تضعهم فً الثٌم سوف تستخدمهم هكذا ‪:‬‬
‫>"‪<head runat="server‬‬
‫>‪<title></title‬‬
‫>‪<link href="StyleSheet1.css" rel="stylesheet" type="text/css" /‬‬
‫>‪<href="StyleSheet2.css" rel="stylesheet" type="text/css" /‬‬
‫>‪</head‬‬
‫والوضع اعاله مشابه تماما عندما تضع هذٌن الملفٌن داخل ثٌم وتطبق الثٌم على الصفحة ولٌس هناك فرق‬
‫باالداء والكفاءة ‪.‬‬
‫‪14‬‬
‫الدرس الثالث‬
‫‪:Global Themes‬‬
‫طبعا من االمور الرائعة فً الدوت نت بأمكانك ان تعمل ثٌم واحد عام (‪ٌ )Global‬طبق على العدٌد من‬
‫المواقع لكن بشرط ! هو ان تكون جمٌع هذه المواقع على نفس السٌرفر (‪ )WebServer‬وٌخزن هذا الثٌم‬
‫فً المسار التالً اذا كنت تستخدم (‪: )File System‬‬
‫‪C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\ASP.NETClientFiles\Them‬‬
‫‪es‬‬
‫بٌنما اذا اردته على السٌرفر (‪ٌ )IIS‬عنً انك تستخدم ‪ WebLocation‬على (‪ )Http‬فانك سوف تقوم ‪:‬‬
‫نفتح المسار المسار ‪:‬‬ ‫‪‬‬

‫‪Inetpub\wwwroot\aspnet_client\system_web\[version]\Themes‬‬
‫ثم نعمل مجلد فرعً الذي سٌكون هو الثٌم العام ونضٌف داخله ملفات (‪ )Css,Skin‬اما اذا كان لدٌك‬ ‫‪‬‬
‫ثٌم جاهز بامكانك ان تضٌف الثٌم الى المسار اعاله اما ٌدوٌا عن طرٌق النسخ واللصق او عن‬
‫طرٌق االداة (‪ )aspnet_regiis‬الموجودة على المسار ‪:‬‬
‫]‪Windows\Microsoft.NET\Framework\[version‬‬
‫‪folder‬‬
‫الثٌمات الدٌنامٌكٌه ‪:‬‬

‫باالمكان تغٌٌر ثٌم الموقع بصورة دٌنامٌكٌة اثناء وقت التشغٌل (‪ )runtime‬ولكن ٌجب ان ٌكون هذا التغٌٌر‬
‫فً اول االحداث للصفحة ‪,‬ومثلما تعرف ان عند طلب اي صفحة(‪ )Page Requist‬بموقع ما فانها سوف تمر‬
‫بمجموعة من المراحل واالحداث التً تسمى بدورة حٌاة الصفحة (‪ )Page Life Cycle‬واول هذه االحداث هو‬
‫(‪ )Page_PreInit‬الذي سوف نسند فٌه الثٌم للصفحة او الموقع من خالله وبالمناسبة اي شً دٌنامٌكً‬
‫تنشئه فً الموقع سٌكون فً هذا الحدث مثال انشاء عناصر بصورة دٌنامٌكٌة ( ‪ ) ControlsDynamic‬او‬
‫اسناد (‪ )MasterPage‬بصورة دٌنامٌكٌة للموقع الخ ‪.‬‬
‫دعونا ناخذ هذا المثال لتتوضح الصورة اكثر ‪:‬‬
‫الخطوات ‪:‬‬
‫‪ ‬انشئ موقع جدٌد فارغ وسمه (‪ )Dynamic Theme‬واختر اللغة المناسبة لك (‪)C#,Vb.net‬‬
‫‪ ‬ثم أضف مجلد الثٌم (‪ )App_Theme‬الى الموقع‬
‫‪ ‬اضف ثٌمٌن احدهما اسمه (‪ )Red‬وداخله ملف ‪ CSS‬مكتوب فٌه ‪:‬‬
‫‪body‬‬
‫‪15‬‬
{
background-color :Red ;
}
: ‫ واكتب فٌه‬CSS ‫) واضف فٌه ملف‬Green( ‫والثٌم الثانً اسمه‬
body
{
background-color :Green ;
: ‫ وداخلها‬Default.aspx ‫أضف صفحة‬ 
<body>
<div dir ="rtl" >
<h1>‫<الثيم اختر‬/h1>
<ul>
<li>
<a href ="Default.aspx?theme=Red"> ‫<االحمر الثيم‬/a>
</li>
<li>
<a href ="Default.aspx?theme=Green"> ‫< االخضر الثيم‬/a>
</li>
</ul>
</div>
</form>
</body>
: ً‫) نكتب الكود التال‬Page_PreInit( ‫بٌنما فً الكود الخلفً وباالخص فً الحدث‬
protected void Page_PreInit(object sender, EventArgs e) {
if (Request["theme"] != null) {
switch (Request["theme"])
{
case "Red":
Page.Theme = "Red";
break ;
case "Green":
Page.Theme = "Green";
break;
}
16
‫فً الكود اعاله استخدمنا متغٌر من نوع (‪ )Request‬اسم المتغٌر (‪ )theme‬الذي اسندنا له قٌمتٌن اما‬
‫(‪Red‬او ‪ ) Green‬وعلمنا شرط اعتمادا على هذه القٌمتٌن ‪,‬بالمكان استخدام ال(‪. )Session‬‬
‫وكذلك باالمكان تغٌٌر (‪ )Skin‬الي عنصر (‪ )Control‬اثناء التشغٌل من خالل الخاصٌة (‪ )Skin ID‬فً‬
‫الحدث (‪. )Page_PreInit‬مثال ‪:‬‬
‫;"‪Label1.SkinID = "LabelSkin‬‬
‫مالحظــــــــــــــــــــــــــات‬
‫كما الحظتم عند استخدام ‪ Skin File‬ستحتاجون الى كتابة كود وربما ٌصعب على البعض كتابة كود ‪Skin‬‬
‫لذلك فهناك طرٌقة بسٌطة تساعدك على هذا الشً ‪,‬فً اي مشروع تعمله اضف فٌه صفحة تجرٌبٌة وضع‬
‫فٌها العناصر التً سوف تستخدمها فً الموقع مثل (‪ Label‬و ‪ Button‬و ‪ TextBox‬و ‪File Upload‬‬
‫الخ)ومن خالل خصائص كل عنصر غٌر الخصائص التً تتعلق بمظهر هذا العنصر مثل لون الخلفٌة نوع‬
‫الخط وحجمه وعرض العنصر الخ‬
‫>‪<body‬‬
‫>"‪<form id="form1" runat="server‬‬
‫>‪<div‬‬
‫"‪<asp:TextBox ID="TextBox1" runat="server" BackColor="#CCFFCC‬‬

‫"‪BorderColor="#339966" BorderStyle="Groove" BorderWidth="4px‬‬
‫>‪ForeColor="#990000" Height="30px" Width="300px"></asp:TextBox‬‬
‫>‪</div‬‬
‫>‪</form‬‬
‫>‪</body‬‬
‫ثم انسخ الكود الخاص بالعنصر ‪,‬مثال اعاله‬

‫"‪<asp:TextBox ID="TextBox1" runat="server" BackColor="#CCFFCC‬‬
‫‪17‬‬
BorderColor="#339966" BorderStyle="Groove" BorderWidth="4px"
ForeColor="#990000" Height="30px" Width="300px"></asp:TextBox>
)SkinID( ‫) اكتب‬ID( ‫) والصق فٌه الكود الذي نسخته وبدل‬Skin File( ‫ثم افتح‬
<asp:TextBox SkinID="TextBox1" runat="server" BackColor="#CCFFCC"

BorderColor="#339966" BorderStyle="Groove" BorderWidth="4px"
ForeColor="#990000" Height="30px" Width="300px"></asp:TextBox>
‫) اعاله الي تٌكس بوكس تستخدمه وبالتالً وحدت مظهر جمٌع‬Skin( ‫االن صار بامكانك ان تسخدم‬
. ‫ فً الموقع‬Textbox
‫ ) كذلك تحتاج فٌه كتابة اكواد ولكن للسهولة هناك بٌئة رسومٌة‬Cascading Style Sheet( ‫اما بالنسبة‬
‫) وداخل االقواس الي عنصر‬Style Sheet.css( ‫افتح ملف‬, ‫ فً الفٌجوال ستودٌو‬CSS ‫تساعدك على كتابة‬
Body ‫) الذي ٌمثل‬Body ‫) (الصورة ادناه اخترنا‬Build Style( ‫) واختر‬Right Click( ‫فٌه انقر على‬
‫الصفحة‬
Modify Style ‫سٌنفتح لك‬
18
‫صار بامكانك ان تختار اي شً‬
‫‪19‬‬
‫أتمنى ان كان هناك خطأ او استفسار مراسلتً فأنا انسان قد أخطا وقد اصٌب ‪...‬‬
‫ال تنسونا بصالح الدعاء فً الغٌب‪...‬‬
‫محمــــــــــــــــــــــــــد الساعـــــــــــــــــــــــــدي‬
‫‪www.Rtoosh.Net‬‬
‫‪Developer@Rtoosh.Net‬‬
‫‪http://forums.asp.net/members/alsaady.aspx‬‬
‫‪+9647703291330‬‬
‫‪20‬‬

Themes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Themes

Uploaded by

Copyright:

Available Formats

‫‪Themes‬‬

‫إعداد المهندس ‪ :‬محمـــــــــــــــــــد الساعـــدي‬

‫على بركة هللا ابدأ واتوكل ‪....‬‬

‫ربما ٌأتً شخص وٌسأل عن الفرق بٌن ‪ Themes‬و ‪, Master Page‬؟؟؟‬

‫‪: Skin‬‬ ‫‪‬‬

: Skin ‫اضافة ملف‬

<%@ Page ……………………… Theme ="Theme1" %>

: ‫لنأخذ مثال بسٌط‬

: Skin ‫اكتب فً ملف‬

<asp:TextBox runat="server" BackColor="#FFCCFF"

<%@ Page Language="C#" Theme ="Theme1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Skin ‫ لملف‬Id ‫لنعود للمثال السابق ونضٌف‬

<asp:TextBox SkinID="TXT" runat="server" BackColor="#FFCCFF"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

‫هو هذا الجزء‬Skin ‫اقصد ب‬: ‫ربما أختلطت المسمٌات علٌكم‬

<asp:TextBox SkinID="TXT" runat="server" BackColor="#FFCCFF"

Skin ‫ هو مجموعة من‬Skin ‫بٌنما اقصد بملف‬

<asp:TextBox SkinID="TXT" runat="server" BackColor="#FFCCFF"

<asp:Label SkinID="Label" runat ="server" BackColor="#6666FF"

. Skin ‫ٌعنً ٌحتوي على اكثر من‬

: ‫ ضع‬Skin ‫فً ملف‬

<asp:Label SkinID="Label" runat ="server" BackColor ="Yellow" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

‫"‪<%@ Page Language="C#" StylesheetTheme ="Theme1‬‬ ‫>‪%‬‬

‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN‬‬

<%@ Page Language="C#" Theme ="Theme2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

)Theme2( ‫) ونسمٌه‬App_Theme( ‫ونضٌف ثٌم جدٌد الى‬

‫بعد استعراضه ستظهر الصفحة هكذا ‪:‬‬

‫االول ‪:‬كما تلعمنا سابقا باضافة الثٌم الى الصفحة من خالل‬

‫تسجٌل الثٌم فً (‪)Web.Config‬‬

‫>‪<compilation debug="false" targetFramework="4.0" /‬‬

‫او قد ٌكون التسجٌل بهذا الشكل ‪:‬‬

<compilation debug="false" targetFramework="4.0" />

<%@ Page Language="C#" EnableTheming ="false" %>

: ‫)نكتب الكود التالي للتحكم بمظهر الصفحة والعناصر‬Css( ‫وداخل ملف‬

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

</title><link href="App_Themes/Theme3/StyleSheet.css" type="text/css"

<input type="hidden" name="__EVENTVALIDATION"

‫نفتح المسار المسار ‪:‬‬ ‫‪‬‬

‫الثٌمات الدٌنامٌكٌه ‪:‬‬

: ‫ واكتب فٌه‬CSS ‫) واضف فٌه ملف‬Green( ‫والثٌم الثانً اسمه‬

: ‫ وداخلها‬Default.aspx ‫أضف صفحة‬ 

: ً‫) نكتب الكود التال‬Page_PreInit( ‫بٌنما فً الكود الخلفً وباالخص فً الحدث‬

protected void Page_PreInit(object sender, EventArgs e) {

‫"‪<asp:TextBox ID="TextBox1" runat="server" BackColor="#CCFFCC‬‬

‫ثم انسخ الكود الخاص بالعنصر ‪,‬مثال اعاله‬

<asp:TextBox SkinID="TextBox1" runat="server" BackColor="#CCFFCC"

Modify Style ‫سٌنفتح لك‬

‫ال تنسونا بصالح الدعاء فً الغٌب‪...‬‬

You might also like