نسخه قابل چاپ

یکی از محصولات نسبتاً محبوب در زمینه برنامه‌نویسی با استفاده از 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.WebParts.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: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 را انتخاب کرده باشید.



                                                                                      " Edit_Click? asp:LinkButton>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.EditDisplayMode
                                                                                                                                                {
                                                                 (Protected void Catalog_Click(object sender,EventArgs e
                                                                                                                                                }
                                 ;WebPartManager1.DisplayMode=WevPartManager.CatalogDisplayMode
                                                                                                                                               {
                                                                 (Protected void Browse_Click(object sender,EventArgs e
                                                                                                                                               }
                                  ;WebPartManager1.DisplayMode=WevPartManager.BrowseDisplayMode
                                                                                                                                              {

- اکنون همه کارهای لازم را انجام داده‌اید. حال 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های پیچیده‌تر برطرف کنید.