معلومة:: أجزاء الويب Web Parts - نسخة قابلة للطباعة

معلومة:: أجزاء الويب Web Parts - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم برمجة وتطوير المواقع (http://vb4arb.com/vb/forumdisplay.php?fid=51)
+--- قسم : قسم ASP.NET (http://vb4arb.com/vb/forumdisplay.php?fid=52)
+---- قسم : قسم مقالات ASP.NET (http://vb4arb.com/vb/forumdisplay.php?fid=54)
+---- الموضوع : معلومة:: أجزاء الويب Web Parts (/showthread.php?tid=4582)

معلومة:: أجزاء الويب Web Parts - RaggiTech - 29-09-12

كاتب الموضوع محمد الناشـري

مقدمة
من أكبر الميزات التي ظهرت مع الإصدارة ASP.NET2 هي أجزاء الويب Web Parts
وهي عبارة عن ادوات تحكم للمحتويات يستطيع المستخدمون تحريكها ضمن الصفحة ووضعها في المكان الذي يرغبون فيه ...
وهي تسمح بتخصيص الصفحة على حسب ذوق واهتمامات المستخدم . حيث يمكن إضافة اجزاء الويب وحذفها ديناميكياً من قبل المستخدمين ...
ويمكن التحكم بها من حيث تصغيرها واستعادتها وإغلاقها ..
سنلقى نظرة سريعة في البداية على أجزاء الويب Web Parts :
WebPartManager
تقوم هذة الاداة بالتحكم بالعرض الحالي ...
وهي تسمح للمستخدم بالتنقل بين نمط الاستعراض ونمط التصميم ونمط التحرير ... الخ .. وهي لاتوفر اي واجهة مستخدم بحد ذاتها ..( عليك ان تبنى هذة الواجهة بنفسك ) ومن ثم عليك استدعاء طرائق الصف WebPartManager لتغيير نمط العرض .. أو لإضافة أجزاء ويب برمجياً الى الصفحة ..
يجب ان يتم الإعلان عنها قبل أي أداة في الصفحة .. كما يجب ايضاً ان لاتوجد اكثر من أداة WebPartManager واحدة فقط ضمن كل صفحة .

WebPartZone
عادة مايتم وضع هذة الاداة ضمن خلايا جدول او ضمن حاويات <div > , وهي تعرف ( بتشديد وكسر الراء) منطقة يمكن ان يتم إضافة اجزاء الويب اليها بشكل برمجي أو ان يتم سحب أجزاء الويب ووضعها فيها من قبل المستخدم .

CatalogZone
تعرف ( بتشديد وكسر الراء) هذة الاداة منطقة تحتوى على اجزاء ويب محددة ..مثل DeclarativeCatalogPart
تبقى هذة الأداة غير مرئية إالى ان تدخل الصفحة في نمط عرض الكتالوج ( بالمثال ستتضح باذن الله ) .

DeclarativeCatalogPart .
يجب وضعها ضمن CatalogZone ... عندما تكون الصفحة في نمط عرض الكتالوج سيظهر هذا الجزء قائمة باجزاء ويب التي تم التصريح عنها أثناء زمن التصميم ..
وتسمح للمستخدم بإدراج اجزاء الويب ضمن هذة المساحة المحددة .

PageCatalogPart
يجب وضعها ضمن CatalogZone ...
عندما تكون الصفحة في نمط عرض الكتالوج سيظهر هذا الجزء قائمة باجزاء ويب الموجودة أصلاً ضمن الصفحة غير الظاهرة حاليا ضمنها ..( بالمثال ستتضح باذن الله ) .

ImportCatalogPart
يسمح لك باستيراد ملف تشكيل تم تخزينة ضمن حاسب المستخدم وتحميلة الى الخادم
يحوى هذا الملف على عنوان URL لجزء الويب الذي سيتم إدراجه ضمن الصفحة .. بالاضافة الى قيم خصائصه .
يتم توليد هذا الملف بواسطة الأمر Export من قائمة اجزاء الويب ...
هذا الامر غير ممكن بشكل افتراضي.

EditorZone
تعرف ( بتشديد وكسر الراء) هذة الاداة منطقة ستحوي أجزاء ويب محددة .والتي ستنشئ محرر أجزاء الويب ..
وهي غير مرئية الى ان تدخل الصفحة في نمط عرض التحرير .. يتم نقل الامر EDIT من اجل أحد أجزاء الويب بالتحديد .

ApperanceEditorPart
يجب ان يتم وضعها ضمن EditorZone وهي تسمح بتحرير خصائص جزء الويب التي تتعلق بالمظهر كالعنوان والعرض .... الخ

BehaviorEditorPart
يجب ان يتم وضعها ضمن EditorZone .. .. وهي تسمح بتحرير خصائص جزء الويب التي تتعلق بكيفية عمله كإمكانية إغلاق جزء ويب او تصغيرة أو تحريكة الى منطقة أخرى ..
كما تسمح بتحرير عنوان url الذ ستتم إعادة توجيه المستخدم اليه عندما ينقر على شريط عنوان جزء الويب ......

LayoutEditorPart
يجب ان يتم وضعها ضمن EditorZone .. .. وهو يسمح بتحرير خصائص جزء الويب التي تتعلق بمخطط عرضه مثل حالته ( مصغر او مفتوح ) والمنطقة التي يوجد بها .

PropertyGridEditorPart
يجب ان يتم وضعها ضمن EditorZone .. وتسمح بتحرير جميع الخصائص المخصصة التي تملك السمة WebBrowsable .
يتم بناء واجهة المستخدم بشكل افتراضي حسب نوع الخصيصة .. مثل الخصائص المنطقية ييتم عرضها على هيئة خانات اختيار وكذلك الخصائص العددية يتم عرضها على هيئة قائمة منسدلة ... وهكذا ..
إذا لم تنسابك واجهة المستخدم الافتراضية التي تعرض خصيصة معينة فبامكانك ان تبني محرر خاص بك وتربطة بتلك الخصيصة ...
المحرر الخاص بك هو بكل بساطة اداة مخصصة ترث من الصف EditorPart ...

ConnectionsZone ..
يقوم جزء ويب هذا بإنشاء واجهة المستخدم الضرورية للإتصال بين جزأي ويب ..
حيث يكون أحد هما مزود والآخر متلقى للقيم التي يتم تبادلها ..
تظهر واجهة المستخدم هذة فقط عندما تكون الصفحة في نمط العر ض .

بالمثال ستتضح الامور اكثر .. باذن الله ..
يتبع ..

معلومة:: أجزاء الويب Web Parts - RaggiTech - 29-09-12

قبل ان نبدأ بالمثال بودي ان أوضح انماط العرض ..
يسعدني ان أخبرك بأننا لن نحتاج بتطوير بنية تحتية ضخمة لان asp.net توفر لنا أصلاً هذة البنية .. تستطيع ان تعتبر أجزاء الويب web parts شبيهة بأدوات المستخدم user control مع إضافة شريط عناوين وإطار ( اختياري ) وقائمة منسدلة تحوى أوامر تصغير واسترجاع أجزاء الويب وإغلاقها وحذفها وتحريرها ..
لاتتوفر جميع هذة الاوامر بشكل دائم ولاتظهر ضمن قائمة التحكم الخاصة باجزاء الويب لأن ذلك يعتمد على نمط العرض الذي تم تحميل الصفحة وفقه .
سنتعرف الآن على انماط العرض المتوفرة .
1- Browse
تعرض قائمة التحكم بأجزاء الويب في هذا النمط أوامر التصغير والإستعادة والإغلاق بحيث يختفى نهائياً من الصفحة .
2- Design
تستطيع ضمن هذا النمط تحريك أجزاء الويب بحرية عن طريق سحبها بالفأرة عبر مختلف المناطق Zones المتوفرة .
تمتلك قائمة التحكم باجزاء الويب في هذا النمط أيضاً امر لحذف جزء الويب نهائياً ..
يختلف امر الحذف عن امر الإغلاق ...( أمر الإغلاق يقوم بإخفاء جزء ويب من الصفحة فقط وستتمكن من إعادة إظهارة مرة أخرى ).
3- Edit ...
يظهر في هذا النمط الأمر Edit ضمن قائمة التحكم الخاصة بأجزاء الويب عند النقر على هذا الأمر ستظهر الخانات التي تسمح بتغيير خصائص جزء الويب .

4- Catalog
تعرض الصفحة في هذا النمط قائمة بأجزاء الويب المتوفرة بحيث تستطيع إضافتها الى الصفحة .
هناك نوعان من الكتالوج
* خاص بالصفحة يقوم بعرض أجزاء الويب الموجودة أصلاً ضمن الصفحة لكنها غير ظاهرة حالياً ( تم إغلاقها من قبل المستخدم )
* أكثر عمومية حيث يحوي قائمة بجميع اجزاء الويب المتوفرة ضمن كامل الموقع .
5- Connect
في هذا النمط تملك قائمة التحكم بأجزاء الويب الأمر Connect الذي يسمح للمستخدم بإنشاء علاقة بين جزأي ويب يملكان واجهة مناسبة وخصائص مناسبة ( يجب تصميم جزء ويب لدعم الإتصال مع جزء ويب آخر ) بحيث يمكن لكليهما تبادل المعلومات فيما بينهما ..
على سبيل المثال ..
الواجهة الاولى تعرض الأقسام والواجهة الاخرى تعرض المواضيع الموجودة بالقسم المحدد .

معلومة:: أجزاء الويب Web Parts - RaggiTech - 29-09-12

السلام عليكم ورحمة الله ..
بعد أن أخذنا فكرة نظرية عن أجزاء الويب web parts ..
جاء دور التطبيق وسنحاول أن نغطي جميع أنماط العرض التي أشرنا لها سابقاً ..
خطوات العمل ..
سنبدأ بتصميم الصفحة وفي مثالنا هذا تم تقسيم الصفحة إلى ثلاثة أعمدة باستخدام ملف Css ( في التطبيقات الجدية يفضل وضع MasterPage ) ..
سنحتاج إلى إضافة SiteNavigation لذا قم بإضافة Web.sitemap الى المشروع ( راجع درس معلومة SiteNavigation)
كذلك نحتاج إلى userControl لذا قم بإضافتها الى المشروع وضع لها إسم
Calculator.ascx ( درس معلومة UserControl ) ..
بعد الانتهاء من تصميم الصفحة وتصميم أدواتناالخاصة ..
نبدأ بوضع أدواتنا على الصفحة ..
1- WebPartManager ( من باب التذكير نضع واحدة فقط ) .
من خصائصه

كود :

<asp:WebPartManager ID="WebPartManager1" runat="server" 

            CloseProviderWarning="انت على وشك إغلاق هذة الأداة .. لإغلاقها اختر موافق" 

            DeleteWarning="انت على وشك حذف هذة الأداة ..  إذا كنت متاكدا من الحذف ..اختر موافق">

        </asp:WebPartManager>

2- نضع في العمود الأول WebPartZone
من خصائصه EmptyZoneText و CloseVerb و EditVerb .... الخ ويمكنك التعديل على القيمة Text بما يحلو لك وكما تود أن يظهر النص للمستخدم ..
نضع في داخل WebPartZone أداة TreeView ونقوم بربطها ب sitemap...

كود :

<asp:WebPartZone ID="WebPartZone1" runat="server">

            <ZoneTemplate>

                <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">

                </asp:TreeView>

            </ZoneTemplate>

        </asp:WebPartZone>

3- في العمود الثاني نضع ايضا WebPartZone ونضع بداخله Calendar

كود :

<asp:WebPartZone ID="WebPartZone2" runat="server">            <ZoneTemplate>

                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

            </ZoneTemplate>

        </asp:WebPartZone>

يمكنك الآن القيام بتجريب الصفحة وستلاحظ بأنه يمكنك القيام بتصغير واستعادة الأدوات
النمط الافتراضي هو Browese
شاهد الصورة في المرفقات
يتبع...

معلومة:: أجزاء الويب Web Parts - RaggiTech - 29-09-12

سنكمل الآن باقي انماط العرض لذا سنقوم بوضع DropDownList على الصفحة ونضع لها العناصر Browse و Design و catalog و Edit
كود

كود :

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">

<asp:ListItem>Browse</asp:ListItem>

<asp:ListItem>Design</asp:ListItem>

<asp:ListItem>catalog</asp:ListItem>

<asp:ListItem>Edit</asp:ListItem>

</asp:DropDownList>

[SIZE=3]

بعد ذلك نقوم بتوجية جزء التحكم WebPartManager لإظهار نمط العرض المناسب وفقاً للقيمة المختارة من DropDownList
كود
[/SIZE]

كود :

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged

Select Case DropDownList1.SelectedValue

Case "Browse"

WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode

Case "Design"

WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode

Case "catalog"

WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode

Case "Edit"

WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode

Case Else

End Select

End Sub

الى هنا نستطيع اختبار صفحتنا ونلاحظ بان النمط Design يعمل الى جانب نمط Browse ويمكننا نقل أدواتنا ضمن المساحة المتوفرة ل WebPartZone.
لكي نتمكن من عرض النمط catalog نقوم بالاتي
1- نضع CatalogZone في العمود الثالث
2 - نضع بداخله DeclarativeCatalogPart ونقوم بجعله على الهيئة Edit Template
3- نقوم بسحب UserControl ووضعه بداخلة ( أو أي أداة أخرى )
كود

كود :

<asp:CatalogZone ID="CatalogZone1" runat="server">

<ZoneTemplate>

<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">

<WebPartsTemplate>

<uc1:Calculator ID="Calculator1" Title="Calculator" runat="server" />

</WebPartsTemplate>

</asp:DeclarativeCatalogPart>

</ZoneTemplate>

</asp:CatalogZone>

نستطيع الآن مشاهدة نمط العرض Catalog وإضافة الأداة التي قمنا بوضعها بداخله الى أي من WebPartZone الموجودة بالصفحة

معلومة:: أجزاء الويب Web Parts - RaggiTech - 29-09-12

سنقوم الآن بإضافة النمط الممتع والأكثر تشويقاً وهو النمط Edit
سنقوم بوضع الادوات الآتية
1- EditorZone ثم نقوم بوضع الادوات التالية بداخله
2- BehaviorEditorPart
3- [SIZE=3]LayoutEditorPart
4- [SIZE=3]AppearanceEditorPart
5- [SIZE=3]PropertyGridEditorPart
كود
[/SIZE][/SIZE][/SIZE]

كود :

<asp:EditorZone ID="EditorZone1" runat="server">

<ZoneTemplate>

<asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" 

HorizontalAlign="Center" />

<asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" 

ChromeType="TitleAndBorder" HorizontalAlign="Center" />

<asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" 

ChromeType="TitleAndBorder" HorizontalAlign="Center" />

<asp:PropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server" 

Direction="RightToLeft" HorizontalAlign="Center" />

</ZoneTemplate>

</asp:EditorZone>

يمكننا الآن القيام بالتعديل على أدواتنا وتغيير عرضها وطولها وعنوانها ... الخ وذلك باختيار نمط العرض Edit من القائمة المنسدلة ثم نذهب الى الأدة التي نود التعديل عليها ونختار Edit
إضافة الى ذلك يمكننا وضع LinkButton يقوم يقوم بإعادة ضبط الصفحة وإعادتها كما كانت قبل عمل التعديل
كود

كود :

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click

PersonalizationAdministration.ResetAllState(PersonalizationScope.User)

Response.Redirect("Default.aspx")

End Sub

للمهتمين بالأمر يمكن تنزيل الفيديو الآتي من موقع asp.net