اصول برنامه‌نويسي در چهارچوب WebPart
ترجمه امين کلانتري
ماهنامه شبکه - بهمن ۱۳۸۵ شماره 73
اشاره :
با نگاهي به اينترنت مجموعه‌اي از سايت‌هايي با عملكرد استثنايي را مي‌يابيد كه چيدمان آن‌ها كاملاً مطابق سليقه شما است. با ورود به اين سايت‌ها احساس مي‌كنيد در مقابل نقشه‌اي ايستاده‌ايد كه به شما مي‌گويد: <شما اينجا ايستاده‌ايد.> اين واقعيتي بسيار شگفت‌انگيز است. چگونه ظاهر اين سايت‌ها با خصوصيات و علايق شما كاملاً در تناسب است.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
چنين پيشرفتي واقعاً جالب است. اين سطح از پيشرفت با فعاليت برنامه‌نويسان آزاد و توليد چندين چهارچوب پيشرفته، ايجاد ميشود. نكته جذاب ديگر، سطح قابليت استفاده مجدد در اغلب اين سايت‌ها است. براي مثال، همه سايت‌ها داراي سرتيتر(Header) و ناحيه درج تبليغات(Banner) هستند. بعضي از سايت‌ها داراي تقويم هستند و بعضي ديگر برنامه‌هايي شبيهForum ارائه مي‌دهندForum) .ها، ميزگردهاي مستندي به صورت ارسال پيام، سؤال و نظرات كتبي هستند كه توسط ساير افراد عضو درForum پاسخ كتبي آن‌ها توليد ميشود.) اين ساختارهاي انتزاعي ياWidget ها درچهارچوب‌هاي برنامه‌نويسي مختلف به روش‌هاي متفاوتي توليد مي‌شوند. در حقيقت كل محصول بر مبناي مفاهيم عرضه‌شده توسطWidget ها توليد ميشود و تنها نام آن‌ها در محيط‌هاي مختلف متفاوت است.
يكي از محصولات نسبتاً محبوب در زمينه برنامه‌نويسي با استفاده از Widgetها، با نام SharePiont Portal Server2003 مطرح است كه Widgetهاي قابل‌استفاده مجدد خود را WebPart ناميده است.
شركت مايكروسافت در ASP.NET2.0 كاملاً از WebPartها حمايت مي‌كند و جاي تعجب ندارد كه برنامه MicroSoft Office SharePoint Server2007 به همراه مجموعه Office عرضه شده است.
در اين مقاله اصول پايه مطرح در چهارچوب‌هاي WebPart مورد بررسي قرار مي‌گيرد. مي‌توان اين مقاله را به عنوان پايه‌اي براي مباحث پيشرفته‌تر نظير چگونگي پشتيباني از WebPartها در برنامه MOSS2007 در نظر گرفت.
مؤلفه‌هاي اصلي چهارچوب WebPart در ASP.NET2.0
شکل 1
قبل از بررسي يك صفحه ساده وب كه با استفاده از WebPartها طراحي شده است، ابتدا مهم‌ترين عناصر قابل استفاده در چهارچوب كاريNET. را مورد بررسي قرار مي‌دهيم كه براي توليد اين صفحه استفاده شده‌اند:
- WebPartها: WebPart، يك Widget با قابليت استفاده مجدد است كه در صفحات وب به كار مي‌رود. كاربر مي‌تواند WebPart را به صفحات خود بيفزايد، آن را متناسب با نياز خود تنظيم كند يا حتي رابطه‌هايي را بين اين WebPartها تعريف كند.
شکل 2
پيش از هر چيز بايد دانست كه WebPart در ASP.NET2.0 از كلاسSystem.Web.UI.WebControls.Controls.WebPart s.WebPart مشتق شده‌است. يك نمونه خوب، Widgetاي است كه ترافيك را نمايش مي‌دهد.
كاربر نهايي مي‌تواند طوري آن را تنظيم‌كند كه اطلاعات مربوط به بزرگراه‌هاي خاصي را نمايش دهد و از طريق ارتباط با يك WebPart ديگر بزرگراه‌هاي ديگري را تعيين كند و كاربر با كليك روي آن‌ها، آخرين اطلاعات ترافيكي مربوط به آن‌ها را مشاهده كند. توليد چنين سيستمي در ASP.NET2.0 كار زياد سختي نيست.
- WebPartManager: اين كنترل به عنوان مهم‌ترين سيستم بازرسي براي WebPartها در ASP.NET2.0 مطرح است. هر صفحه بايد فقط شامل يك WebPartManager باشد و اين عنصر مسئول همه عملكردها، رخدادها، و سفارشي‌سازي‌هاي مربوط به WebPartهاي مختلف موجود در آن صفحه است و آن‌ها را مديريت مي‌كند.
همچنين مي‌توان WebPartManager را به حالت (Mode)هاي مختلف تنظيم كرد. براي مثال، اگر طراح WebPartManager را در حالت Catalogue تنظيم كند، مي‌تواند WebPartهاي مورد نظر براي صفحه خود را از ميان مجموعه‌اي از WebPartها انتخاب كند.
شکل 3
Communication Mode، يكي ديگر از حالت‌ها براي تنظيم صفحه است. در صورت انتخاب اين حالت مي‌توان بين WebPartهاي مختلف مسيرهاي ارتباطي متعددي تعريف كرد.
- Various Zones: به نواحي مختلف صفحهZone مي‌گويند. پياده‌سازي اين‌ها از طريق كنترل‌هاي سرور زير صورت مي‌گيرد كه به همراه چهارچوب ارائه مي‌شوند:
شکل 4
- WebPartZone: يك WebPartZone عبارت است از كنترلي كه ناحيه‌اي از صفحه را تعيين مي‌كند تا آن ناحيه ميزباني يك يا چند WebPart را برعهده گيرد. همچنين WebPartZone كنترل نحوه نمايش يك WebPart را برعهده دارد.
همچنين هر كنترلي كه از كلاس WebPart به ارث نرسيده باشد، مي‌تواند به صورت يك WebPart ظاهر گردد و در يك WebPartZone ساكن شود. اين كار از طريق كلاس Generic طراحي شده براي WebPartها انجام ميشود كه از كلاس پايه WebPart به ارث مي‌رسد. البته با انجام اين كار، از بخشي از توانايي‌ها و عملكردهاي كلاس WebPart محروم مي‌شويد.
CatalogtueZone: عبارت است از فهرست يا كاتالوگي كه طراح مي‌تواند از ميان گزينه‌هاي آن موارد مورد نظر خود را انتخاب كرد. اين كنترل سرور تعداد كنترل‌هاي CatalogueParts را در خود نگه مي‌دارد و اين كنترل‌ها نيز به نوبه خود WebPartهايي را نگه مي‌دارد كه تا كنون به سايت افزوده شده‌اند و مي‌توان آن‌ها را به صفحات وب مختلف موجود در سايت افزود. كاربر مي‌تواند WebPartها را از كاتالوگ بردارد و به چندين WebPartZone موجود در يك صفحه بيفزايد.
شکل 5
سه نوع CatalogueParts وجود دارد كه عبارتند از: DeclarativeCatalogPart ،PageCatalogPart وImportCatalogPart.
EditorZone: ناحيه‌اي از صفحه است كه از كاربر نهايي مي‌خواهد WebPart را بنابر نياز خود سفارشي كند. همچنين مي‌توان يك WebPart را در حالت اشتراكي (Share Mode) سفارشي كرد. در اين صورت يك مدير مي‌تواند WebPart را سفارشي كند و ساير كاربران مي‌توانند آن را مشاهده كنند، ولي مجاز به سفارشي كردن آن نيستند.
شکل 6
ConnectionZone: اين ناحيه صفحه از كاربر نهايي مي‌خواهد با نحوه تبادل اطلاعات بين WebPartهاي مختلف قرار گرفته در يك صفحه را تعيين كند. براي مثال، مي‌توانيد يك خواننده اطلاعات نوع RSS را بسازيد. در اين حالت يكي از WebPartها، OPMLهاي مربوط به كاربران را نگهداري مي‌كند و ديگري RSS را متناسب با سليقه مشتركان تغيير مي‌دهد.
ارتباط بين اين‌دو WebPart به اين صورت است كه WebPart از نوع OPML كه رديف‌هاي URL مربوط به RSS را تهيه مي‌كند و سپس WebPart خواننده RSS آن رديف را مي‌گيرد، مورد استفاده قرار مي‌دهد و آن را به شكلي مناسب نمايش مي‌دهد.
از آنجا كه اين مثال يك برنامه ساده از نوع ASP.NET2.0 است، مي‌توانيد اين WebPart را به همراه الگوهاي Atlas نيز به كار ببريد (الگوهايي در محيط NET. براي پياده‌سازي آسان فناوري اي‌جكس).
از جمله اين الگوها مي‌توان به UpdatePanel يا كنترل ثانويه‌اي مانند telerik AJAX Panel اشاره كرد. حتي مي‌توانيد PostBackها را با CallBack جايگزين كنيد و براي اين كار تقريباً نياز به نوشتن هيچ‌گونه كدي وجود ندارد (در PostBack با اعمال هر گونه رخدادي توسط كاربر و ايجاد هرگونه تغييري روي كنترل‌ها بايد كل صفحه وب نوسازي شود، ولي در CallBack اين تغييرات توسط كدهاي جاوا اسكريپت مديريت ميشود و به اين ترتيب ارسال اطلاعات به سرور و دريافت داده، بدون نياز به نوسازي كل صفحه انجام ميشود).
توليد يك WebPart ساده
شکل 7
حال كه با عناصر اصلي طراحي صفحات وب در ASP.NET2.0 آشنا شديد، زمان آن فرا رسيده است تا شروع به كار كنيد و اولين WebPart خود را ايجاد كنيد.
مي‌توانيد هر كنترلي را با استفاده از كلاس Generic WebPart به اين نوع تبديل كنيد، اما چنين WebPartي يك مورد واقعي نخواهد بود؛ زيرا يك WebPart واقعي بايد از كلاس پايه System.Web.UI.WebParts.WebPart مشتق شده باشد. كد يك WebPart ساده كه فقط قرار است يك خط كد را نمايش دهد، به صورت زير است:
public class SimpleWebPart : WebPart
}
;"!private string displayText = "Hello World
[(WebBrowsable (true),(Personalizable (true]
public string DisplayText
}
{;get{return displayText
{;set{displayText = value
{
(protected override void Render(System.Web.UI.HtmlTextWriter writer
}
(writer.Write (displayText
{
{
شکل 8
شکل 9
فعلاً در مورد ويژگي‌هاي قابليت جست‌وجو در وب و امكان سفارشي‌سازي صفحات خود نگران نباشيد. نحوه ايجاد اين امكانات به زودي بررسي ميشود. فعلاً كافي است بدانيد كه اين يك كنترل ساده سرور است كه جعبه نمايش‌متن (DisplayText) را تنظيم مي‌كند. سؤال دومي هم كه بايد حتماً بررسي شود، اين است: چگونه مي‌توانم از اين WebPart استفاده كنم؟
نحوه استفاده از يك WebPart
يك سايت ساده را با استفاده از ASP.NET2.0 ايجاد كنيد. سپس به كلاس كتابخانه‌اي كه WebPart توليد شده توسط شما در آن قرار دارد، يك رابط ارجاع (Reference) اضافه كنيد. مراحل زير را روي كد مربوط به فايل توليد شده با نام Default.aspx اجرا كنيد.
- از ناحيه ToolBox يك WebPartManager را برداريد و روي صفحه قرار دهيد (Drop & Drag) .
- دو WebPartZone را نيز به روش كشيدن و انداختن از ToolBox به صفحه اضافه كنيد (اين دو را به روشي كه علاقه داريد، ويرايش كنيد). WebPartZoneها من براي ساده كردن كار مطابق با شكل 1 كه در محيط design view قابل‌مشاهده است، ويرايش شده است.
- حال WebPart ساده‌اي را كه در مرحله قبل نوشته‌ايد، به ناحيه WebPartZone1 اضافه كنيد. بعد از انجام اين كار صفحه طراحي‌شده در محيط design view به شكل 2 است.
- حالا اين صفحه را اجرا كنيد. بايد WebPart شما به درستي در مرورگر نمايش‌داده شود. همچنين يك منوي مناسب در كنار WebPartZone نمايش داده ميشود. وقتي گزينه Minimize را انتخاب كنيد (مطابق شكل3)، پنجره توليد شده توسط WebPart به راحتي بسته ميشود.
كد ايجاد شده تا اين لحظه در فهرست زير آمده و بسيار ساده است:
<"form id="form1" runat="server>
<"asp:WebPartManager ID="/img/2006/07/WebPartManager1" runat="server>
<"asp:WebPartZone ID="/img/2006/07/WebPartZone1" runat="server>
<"cc1:simplewebpart id="SimpleWebPart1>
<"asp:WebPartZone ID="/img/2006/07/WebPartZone2" runat="server>
همچنين توجه داشته باشيد كه با اولين اجراي اين وب‌سايت، پايگاه‌داده SQL Express با نام ASPNERT.MDF به صورت شكل 4 نمايش داده ميشود.
علت اين نمايش از آنجا ناشي ميشود كه چهارچوب WebPart مانند بسياري از بلاك‌هاي اجرايي مهم ASP.NET2.0 به صورت پيش‌فرض از پايگاه داده SQL Express استفاده مي‌كند.
اگر WebPart خود را به صورت سفارشي درآوريد، آن را بين WebPartZoneهاي مختلف جابه‌جا كنيد يا هرگونه سفارشي‌سازي را كه مستلزم بازنويسي URLها يا توابع API عضو يا هر كار ديگري است، انجام دهيد.
اطلاعات مربوط به اين تغييرات به صورت پيش‌فرض در SQL Express database ذخيره ميشود. البته اين فرآيند به راحتي با استفاده از provider model و تغييرات كمي در web.config قابل تغيير است.
شما مي‌توانيد با استفاده از چهارچوب WebPart كارهاي زيادي انجام دهيد. بررسي اين كارها كاملاً از حوصله اين مقاله خارج است. تا كنون با بسياري از عملكردهاي پايه‌اي آشنا شده‌ايد. حال ببينيم بايد چه تغييراتي در كد برنامه ايجاد كنيم تا كاربر بتواند متن WebPart را تغيير دهد يا WebPart را از WebPartZone1 به WebPartZone2 انتقال دهد.
ايجاد كمي تغييرات جالب در WebPart شما
مي‌توانيد به كمك WebPartZoneاي كه در صفحه قرار داده‌ايد، خود WebPart و در نتيجه صفحه‌اي كه WebpartZone در آن قرار گرفته است را روي DisplayModeهاي مختلف تنظيم كنيد.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
شکل 10
اين DisplayModeها يا حالات نمايش را به شما امكان مي‌دهد كارهاي مختلفي را روي WebPartها انجام دهيد. از جمله: آن‌ها را جابه‌جا يا ويرايش كنيد، بين آن‌ها مسيرهاي ارتباطي تعريف نماييد يا آن‌كه فقط صفحه را مشاهده كنيد.
با اجراي مراحل زير تغييراتي را روي همان Default.aspxاي كه با آن كار مي‌كرديد ايجاد كنيد:
- يك CatalogZone را به صفحه اضافه كنيد. در داخل اين CatalogZone يك الگوي ZoneTemplate ايجاد كنيد، سپس يك DeclarativeCatalogPart و يك PageCatalogPart را داخل آن قرار دهيد.
حال يك WebPartsTemplate را به DeclarativeCatalogPart اضافه كنيد و سپس كد تعريف‌كننده cc1:simplewebpart را از WebPart1 به آن انتقال دهيد. كد نهايي بايد به صورت زير باشد:
<"asp:CatalogZone ID="CatalogZone1" runat="server>
asp:DeclarativeCatalogPart>
<"ID="DeclarativeCatalogPart1" runat="server
"cc1:SimpleWebPart ID="SimpleWebPart1>
"asp:PageCatalogPart ID="PageCatalogPart1>
- يك EditorZone را نيز به صفحه اضافه كنيد. در داخل اين EditorZone يك ZoneTemplate ايجاد كنيد و يك كنترل asp:PropertyGridEditorPart را از ToolBox به آن اضافه نماييد.
اين asp:PropertyGridEditorPart وظيفه دارد كه خصوصيات Public مربوط به WebPart را كه از طريق true بودن صفت WebBrowsable شناسايي مي‌شوند را بيابد و يك رابط‌كاربري ساده را در اختيار شما قرار دهد تا بتوانيد مقدار آن صفت يا ويژگي را تغيير دهيد. بايد EditorZone شما شبيه قطعه كد زير باشد:
<"asp:EditorZone ID="EditorZone1" runat="server>
asp:PropertyGridEditorPart>
حالا بايد براي تنظيم حالت‌‌نمايش (DisplayMode) مربوط به WebPartManager كمي كدنويسي كنيد تا به اين ترتيب يكي از حالت‌هاي Edit ،Catalogue يا Browse را انتخاب كرده باشيد.
"asp:LinkButton ID="Edit" runat="server>
Edit
"asp:LinkButton ID="Catalog" runat="server>
Catalog
"asp:LinkButton ID="Browse" runat="server>
Browse
همچنين مدير رخداد OnClick را براي كد سه دكمه ايجاد شده در كد فوق را با استفاده از كد زير توليد كنيد:
(Protected void Edit_Click(object sender,EventArgs e
}
;WebPartManager1.DisplayMode=WevPartManager.EditDi splayMode
{
(Protected void Catalog_Click(object sender,EventArgs e
}
;WebPartManager1.DisplayMode=WevPartManager.Catalo gDisplayMode
{
(Protected void Browse_Click(object sender,EventArgs e
}
;WebPartManager1.DisplayMode=WevPartManager.Browse DisplayMode
{
- اكنون همه كارهاي لازم را انجام داده‌ايد. حال WebApplication خود را اجرا كنيد تا رابط كاربري شبيه شكل 5 را مشاهده كنيد.
- با كليك روي دكمه «Catalogue»، رابط كاربري ناگهان تغيير مي‌كند و شكل6 نمايش داده ميشود.
حالا كادر علامت كنار عبارت «Untitled» را تيك بزنيد و سپس روي دكمه «Add» در زير آن كليك كنيد. با انجام اين كار، يك نمونه از ebPart به WebPartZone1 فزوده ميشود. شما مي‌توانيد از طريق خود WebPart يا از طريق CatalogueZone، نام با معني‌تري را براي WebPart خود انتخاب كنيد.
شکل 11
توجه داشته باشيد كه WebPart اكنون به WebPartZone1 افزوده شده است. مي‌توانيد به روش نشان داده شده در شكل زير WebPart را به روش DragِDrop از WebPartZone1 به WebPartZone2 انتقال دهيد.
توجه: با استفاده از مرورگر IE مي‌توان به سادگي از خاصيت كشيدن و انداختن استفاده كرد. براي داشتن اين خاصيت در مرورگر فايرفاكس بايد از Atlas استفاده كرد.
- حالا روي Browse كليك كنيد. آنچه مشاهده مي‌كنيد بايد مشابه با شكل 8 باشد:
فرض مي‌كنيم كه اين تصويري است كه بعد از ويرايش توسط شما براي كاربر نهايي نمايش داده خواهد شد.
اكنون حالت نمايش Catalogue را دوباره انتخاب كنيد و يك نمونه ديگر از WebPart را به WebPartZone1 اضافه كنيد. روي Edit كليك كنيد و اين‌بار براي Edit، مطابق شكل 9 مورد Edit را كه در WebPartZone1 قرار گرفته است، انتخاب كنيد.
- اكنون رابط كاربري كه در اختيار شما قرار گرفته است، به شما امكان مي‌دهد متن نوشته شده در Displaytext مربوط به PropertyGridEditorPart همانند شكل 10 ويرايش كنيد.
- متن را به «!Hello Mars» تغيير دهيد و روي OK كليك كنيد. سپس دوباره روي Browse كليك كنيد. كاربر مي‌تواند ويژگي‌هاي WebPart را سفارشي كند؛ زيرا صفت Personalizable آن با مقدار true ست شده است. در شكل 11، شكل سفارشي‌شده WebPart توسط شما نمايش داده شده است.
چهارچوب ASP.NET2.0؛ توانمندي و انعطاف
با كمي كد توانستيم يك چهارچوب را براي يك Portal يا Widget آماده‌به‌كار طراحي كنيم. چهارچوب طراحي‌شده به نحو غيرقابل باوري انعطاف‌پذير است. بايد اعتراف كرد كه آنچه شما توليد كرده‌ايد نه جذابيت زيادي دارد و نه عملكرد بالايي دارد، اما مي‌توانيد اين مشكلات را به سادگي و با استفاده از Stylesheetها يا WebPartهاي پيچيده‌تر برطرف كنيد
کد:
http://www.shabakeh-mag.com/Articles/Show.aspx?n=1003179
