جلسه بیست و چهارم
Web User Control چیست و نحوه اضافه کردن آن به پروژه به چه صورت است؟
برای اینکه بخواهم ساده توضیح بدهم. فرض کنید شما می خواهید header یا footer به صفحات وبتان اضافه کنید و یا قسمتی از یک صفحه در تمامی صفحاتی که دارید تکرار می شود و به همین خاطر می خواهید با ایجاد یک فایل ، به راحتی بتوانید در آن قسمت تغییرات سراسری بدهید و نیازی نباشد تک تک صفحات رو تغییر دهید، جهت این کار از Web User Control استفاده می شود که فایل هایی با پسوند Ascx هستند.
اما چطور به پروژه مان اضافه کنیم؟
به نظر شما چرا من می خواهم یک Web User Control به پروژه ام اضافه کنم؟ در جلسه قبل مشاهده کردید که من Easy Menu را به ویژوال استودیو اضافه کردم. حال من می خواهم منوی بالای صفحاتم را طراحی کنم. چون منو در تمامی صفحات تکرار می شود، من منو را داخل یک Web User Control می گذارم و از آن استفاده می کنم. مشخص است که اگر من بخواهم هر تغییری در منو ایجاد کنم، تمامی صفحات به طبع آن تغییر میکنند.
جهت این کار:
1.بر روی قسمت مشخص شده در تصویر راست کلیک کنید و گزینه Add New Item را کلیک کنید. همیشه به مسیر ایجاد فایل دقت کنید. مثلا اگر در پوشه Image باشید فایل شما در آن پوشه ایجاد می شود. اگر در تصویر دقت کنید من بر روی روت یعنی مسیر D:\w3c\ راست کلیک کردم و گزینه Add New Item را انتخاب کردم.
2.حال از پنجره باز شده ، مطابق شکل، گزینه Web User Control را انتخاب کرده و در پایین نام آن را به HeaderAndMenu تغییر دهید و سپس کلید Add را کلیک کنید.
3.فایلی به نام HeaderAndMenu.ascx به پروژه ما اضافه می شود.
طراحی منو
بعد از اینکه صفحه HeaderAndMenu اضافه شد، به قسمت Design این صفحه می رویم تا ابزار EasyMenu را به آن اضافه کردیم.(در جلسه قبل این ابزار را به ویژوال استودیو اضافه کردیم).
در نوار ToolBox کنار صفحه بر روی گزینه EasyMenu دابل کلیک می کنیم تا آن را به پروژه مان اضافه کنیم. همانطور که می بینید به این صورت به قسمت Design صفحه HeaderAndMenu اضافه می شود.
خب. مشکلی که وجود دارد این است که این منو را انگلیسی زبان ها ساخته اند و آنها ساختار زبانشان چپ به راست هست و ما زبانمان راست به چپی. راه حل چیست؟ راه حل این است که ما باید این منو را برای زبان خودمان اصطلاحا Customize کنیم. جهت این کار به قسمت Source بروید و با استفاده از تگ HTML ، Div ،متن در منو را راست به چپی می کنیم.
چگونه؟
به تصویر زیر دقت کنید.
همانطور که می بینید من با استفاده از خصوصیت dir جهت را rtl یعنی right to left یا همان راست به چپ خودمان کردم. easy menu را داخل تگ باز و بسته div قرار دادم تا کل منو راست به چپ شود.
حالا اگر به قسمت Design برگردیم می بینیم که راست چین شده است.
تنظیم مشخصات منو
در قسمت Design اگر بر روی آیتم EasyMenu که بر روی صفحه آوردیم کلیک کنید ، می توانید قسمت Properties آن را ویرایش کنید. این کار را انجام دهید.
مطابق شکل شما باید هفت قسمت از Properties را تغییر دهید.قسمت هایی که باید تغییر کنند را من در شکل مشخص کرده ام. همینطور در جدول بعد از تصویر آورده شده است.
|
مقدار |
مشخصه |
|
EasymenuMain |
ID= |
|
ParentMenu |
CSSMenu= |
|
ParentItemContainer |
CssMenuItemContainer= |
|
Horizontal |
Position= |
|
Always |
ShowEvent= |
|
~/style/horizontal1 |
StyleFolder= |
|
50% |
Width= |
اما چرا باید این هفت قسمت تغییر کند؟
اولین قسمت ID است. همانطور که از نام آن پیداست Identification یا شناسه است برای صدا زدن این منو در کد نویسی. ما یک شناسه قابل فهم برای خودمان نوشتیم که بعدا بتوانیم از آن استفاده کنیم. در این جا من ID را EasymenuMain گذاشتم و این یک نام است و می تواند هر چیز دیگری باشد اما باید دقت کنید که هر چیزی می گذارید موقع کد نویسی باید دقیقا همان را وارد کنید.
دومین و سومین قسمتی که تنظیم کردم مربوط به Css منو هست. CSSMenu و CSSMenuItemContainer .
نام هایی که در مقابل آنها قرار گرفت نام هایی است که من هنگام نوشتن قالب منوانتخاب کرده ام.
ابتدا قالب منو را که یک پوشه به نام Horizontal1 هست از اینجا دانلود کنید.
رمز فایل :w3c.blogfa.com
این فایل را از حالت فشرده خارج کنید و پوشه Horizontal1 را کپی کرده و به پوشه Styles داخل پروژه Paste کنید. (نحوه اضافه کردن فایل به پروژه را در جلسه بیست و یکم توضیح دادم).
اگر داخل پوشه Horizontal بروید می بینید که فایلی به نام Style.css وجود دارد واگر آن را باز کنید با کدهای CSS مواجه می شوید.چون توضیح کل کدهای CSS ی که در آنجا وجوددارد در حوصله این جلسه نمی گنجد ان شاءالله در جلسه آینده کل کدهای CSS که دراین قسمت وجود دارد در یک جلسه جداگانه توضیح خواهم داد.
پس فقط تا اینجا داشته باشید که ParentMenu و ParentItemContainer که در بالا وارد کردیم،نام کلاسهایی هست که در این فایل ذخیره شده است.
در قسمت چهارم Position)) : حالت منو را مشخص کردیم که افقی یا Horizontal باشد. منو در دو حالت افقی یا عمودی می تواند قرار گیرد.
در قسمت پنجم (ShowEvent): حالت نمایش منو را مشخص کردیم. ما حالت نمایش منو را روی همیشه یا always گذاشتیم. حالت های دیگری هم وجود دارد. مثلا وقتی ماوس روی منو رفت نمایش داده شود. و یا فقط تک کلیک و یا دابل کلیک شد منو نمایش داده شود.
در قسمت ششم (StyleFolder): محل پوشه CSS یا Style را مشخص کردم. یادتونه در قسمت دوم و سوم گفتم که نام کلاسهایی که در کد CSS پوشه Horizontal1 وجود دارد را مشخص کردم. حال باید محل پوشه را به ویژوال استودیو بگیم تا بتواند نام کلاس ها را تشخیص دهد وگرنه نمی تواند.
برای دادن محل پوشه Horizontal1 یک نکته را باید دقت کنید. وقتی در قسمت StyleFolder بر روی ... یا browse کلیک می کنید پنجره ای باز می شود و از شما محل پوشه را می خواهد. مطابق شکل وقتی horizontal1 را انتخاب می کنید در پنجره سمت راست bg.gif هم انتخاب می شود. شما باید پس از OK کردن به صورت دست /bg.gif را پاک کنید . همانطور که من در جدول و در تصویر های بالا مشخص کرده ام.
در قسمت انتهایی و هفتم Width یا عرض را مشخص می کنیم. ما در اینجا به صورت درصدی می دهیم که با هر صفحه نمایشی اگر سایت باز شد 50 درصد منو باشد. و این قابلیت انعطاف به سایت ما می دهد.
طراحی منوی سایت حدود سه جلسه به طول می انجامد. در جلسه آینده در مورد CSS یا قالب منو توضیح خواهم داد. موفق باشید. علیرضا مهجور