السلام عليكم ورحمة الله وبركاته
ستتعلم إن شاء الله في هذا الدرس طريقة ربط تقارير ReportViewer بكلاس عن طريق DataObject
تتوفر تقارير ReportViewer في إصدارات VisualStudio وهي غير متوفرة في إصدارات Express
إضافة كلاس:
أضف الكلاس من خلال القائمة Project ثم Add Class وسميه Person
![[صورة مرفقة: 4e80d676f75182d.png]](http://www.m5zn.com/newuploads/2018/12/23/png//4e80d676f75182d.png)
ثم اكتب الكود التالي في الكلاس وهو عبارة عن بطاقة شخصية بسيطة جدا تتكون فقط من رقم واسم وصورة
معلومة: الصورة ما هي إلا مصفوفة بايتات، لهذا نستخدم ()Byte والقوسين () تعني مصفوفة بالنسبة لنوع البيانات
عمل Build:
بعد اتمام عمل الكلاس قم بعمل Build
![[صورة مرفقة: c9289fdc14f78d0.png]](http://www.m5zn.com/newuploads/2018/12/23/png//c9289fdc14f78d0.png)
هذه الخطوة ضرورية عند اي تعديل على الكلاس او التقرير.
إنشاء تقرير ReportViewer:
أضف تقرير ReportViewer عن طريق القائمة Project ثم Add New Item
![[صورة مرفقة: d3ff7718a04cc49.png]](http://www.m5zn.com/newuploads/2018/12/23/png//d3ff7718a04cc49.png)
في نافذة الإضافة حدد في القسم الأيسر Reporting واختار Report
![[صورة مرفقة: 8e8b2d00eed5a79.png]](http://www.m5zn.com/newuploads/2018/12/23/png//8e8b2d00eed5a79.png)
ربط الكلاس بالتقرير:
توضيح قبل ربط الكلاس بالتقرير فان كلمة Dataset تعني مجموعة البيانات، وهي ليست حصرا بملفات xsd.
عند تصميم التقرير إذهب للقائمة View واختار Report Data او قم بالضغط على Ctrl+Alt+D،
![[صورة مرفقة: 41d559b2d099cfe.png]](http://www.m5zn.com/newuploads/2018/12/23/png//41d559b2d099cfe.png)
من قائمة ReportData إضغط على New ومنه اختار Datset،
![[صورة مرفقة: 5f9c56af4e951b4.png]](http://www.m5zn.com/newuploads/2018/12/23/png//5f9c56af4e951b4.png)
ستفتح لك نافذة Dataset Properties قم بالضغط على New الخاصة بـ Data source
تذكّر هنا الاسم Name وهو افتراضيا "DataSet1" والذي ستحتاج إليه في الكود لاحقاً.
![[صورة مرفقة: 7b264cce730131e.png]](http://www.m5zn.com/newuploads/2018/12/23/png//7b264cce730131e.png)
ستفتح لك نافذة اختيار نوع مصدر البيانات Choose a Data Source Type قم باختيار Object ثم اضغط Next
![[صورة مرفقة: 718592de3289726.png]](http://www.m5zn.com/newuploads/2018/12/23/png//718592de3289726.png)
ستفتح لك نافذة اختيار كلاس البيانات Select the Data Objects قم بتوسيع شجرة المشروع
إن كنت قد عملت Build قبل ذلك فسوف ترى الكلاس Person وقم بتحديده ثم اضغط Finish
![[صورة مرفقة: e7e7d33cd2c7b7a.png]](http://www.m5zn.com/newuploads/2018/12/23/png//e7e7d33cd2c7b7a.png)
عند العودة لنافذة Dataset Properties قم بتحديد مصدر البيانات Data source (غالبا يشبه اسم المشروع)
واسفل منه حدد الكلاس Person
![[صورة مرفقة: 84575f648cbdc26.png]](http://www.m5zn.com/newuploads/2018/12/23/png//84575f648cbdc26.png)
الآن سترى أن مجموعة البيانات "DataSet1" ظهرت في قائمة Report Data
قم بسحب كلا من الرقم ID والاسم Name الى التقرير وتنسيقهما
![[صورة مرفقة: ee76881516750e2.png]](http://www.m5zn.com/newuploads/2018/12/23/png//ee76881516750e2.png)
أما الصورة فضع بدلا منها من قائمة ToolBox أداة Image فتظهر تلقائيا لك نافذة Image Properties
(وإن لم تظهر قم بالضغط على أداة الصورة Image بالزر اليمين واختار Image Properties)
في نافذة خصائص الصورة Image Properties افتح Select the image source واختار منها Database
سيظهر لك Use this field واختر منه حقل الصورة Photo وستعرفه بسهولة
واخيرا افتح Use this MIME type لتحدد نوع الصورة فقم باختيار image/png وهو مناسب لجميع الصور
![[صورة مرفقة: 960222c7c00446b.png]](http://www.m5zn.com/newuploads/2018/12/23/png//960222c7c00446b.png)
قم بحفظ التقرير وعمل Build وتكون قد انتهيت من تصميم التقرير
تصميم الفورم:
اضف اداة Reportviewer الى الفورم وقم بربط التقرير به،
سترى أنه تم انشاء PersonBindingSource بشكل تلقائي (حاليا لا تحتاجه في هذا المشروع)
![[صورة مرفقة: 64966e642bf6508.png]](http://www.m5zn.com/newuploads/2018/12/23/png//64966e642bf6508.png)
كتابة الكود:
بالنسبة للكود فهو بسيط جدا،
قم بإنشاء متغير p من الكلاس Person
قم بإضافة باليانات اللازمة لعناصر المتغير p مثل
أما الصورة فقم أولا بإنشاء متغير للصورة
ثم حدد مصدر الصورة، إن كان من ملف أو من PictureBox.Image أو من Resource
وبما أن الصورة هي عبارة عن مصفوفة بايتات فعليك تحويلها عن طريق المكتبة ImageConverter
بعد ان انتهيت من تجهير البيانات لم يبقى عليك سوى ربط هذه البيانات بالتقرير.
عندما قمت في الخطوة السابقة بربط التقرير باداة عرض التقرير ReportViewer فإنه يحتوى على مصدر بيانات باسم "DataSet1" (تذكر النافذة Dataset Properties)
مجموعة البيانات هي مجموعة أسطر أي مصفوفة بيانات، لهذا سيتم وضع المتغير p داخل اقواس {} لتحويلها لمصفوفة حتى وإن لم يكود هناك غيرها.
والآن قم بتشغيل المشروع لتحصل على النتيجة.
![[صورة مرفقة: 44b7a0d4fd511e8.png]](http://www.m5zn.com/newuploads/2018/12/23/png//44b7a0d4fd511e8.png)
المشروع متوفر في المرفقات
اتمنى أن أكون وفقت في تقديم هذا الدرس بشكل سهل وبسيط {وما توفيقي إلا بالله}.
وإن شاء الله إن وجدت قبولا لهذا الدرس سأقوم بتجهيز درس آخر لعمل جدول بيانات باستخدام Data Object
ستتعلم إن شاء الله في هذا الدرس طريقة ربط تقارير ReportViewer بكلاس عن طريق DataObject
تتوفر تقارير ReportViewer في إصدارات VisualStudio وهي غير متوفرة في إصدارات Express
إضافة كلاس:
أضف الكلاس من خلال القائمة Project ثم Add Class وسميه Person
ثم اكتب الكود التالي في الكلاس وهو عبارة عن بطاقة شخصية بسيطة جدا تتكون فقط من رقم واسم وصورة
PHP كود :
Public Class Person
Property ID As Integer
Property Name As String
Property Photo As Byte()
End Class
عمل Build:
بعد اتمام عمل الكلاس قم بعمل Build
هذه الخطوة ضرورية عند اي تعديل على الكلاس او التقرير.
إنشاء تقرير ReportViewer:
أضف تقرير ReportViewer عن طريق القائمة Project ثم Add New Item
في نافذة الإضافة حدد في القسم الأيسر Reporting واختار Report
ربط الكلاس بالتقرير:
توضيح قبل ربط الكلاس بالتقرير فان كلمة Dataset تعني مجموعة البيانات، وهي ليست حصرا بملفات xsd.
عند تصميم التقرير إذهب للقائمة View واختار Report Data او قم بالضغط على Ctrl+Alt+D،
من قائمة ReportData إضغط على New ومنه اختار Datset،
ستفتح لك نافذة Dataset Properties قم بالضغط على New الخاصة بـ Data source
تذكّر هنا الاسم Name وهو افتراضيا "DataSet1" والذي ستحتاج إليه في الكود لاحقاً.
ستفتح لك نافذة اختيار نوع مصدر البيانات Choose a Data Source Type قم باختيار Object ثم اضغط Next
ستفتح لك نافذة اختيار كلاس البيانات Select the Data Objects قم بتوسيع شجرة المشروع
إن كنت قد عملت Build قبل ذلك فسوف ترى الكلاس Person وقم بتحديده ثم اضغط Finish
عند العودة لنافذة Dataset Properties قم بتحديد مصدر البيانات Data source (غالبا يشبه اسم المشروع)
واسفل منه حدد الكلاس Person
الآن سترى أن مجموعة البيانات "DataSet1" ظهرت في قائمة Report Data
قم بسحب كلا من الرقم ID والاسم Name الى التقرير وتنسيقهما
أما الصورة فضع بدلا منها من قائمة ToolBox أداة Image فتظهر تلقائيا لك نافذة Image Properties
(وإن لم تظهر قم بالضغط على أداة الصورة Image بالزر اليمين واختار Image Properties)
في نافذة خصائص الصورة Image Properties افتح Select the image source واختار منها Database
سيظهر لك Use this field واختر منه حقل الصورة Photo وستعرفه بسهولة
واخيرا افتح Use this MIME type لتحدد نوع الصورة فقم باختيار image/png وهو مناسب لجميع الصور
قم بحفظ التقرير وعمل Build وتكون قد انتهيت من تصميم التقرير
تصميم الفورم:
اضف اداة Reportviewer الى الفورم وقم بربط التقرير به،
سترى أنه تم انشاء PersonBindingSource بشكل تلقائي (حاليا لا تحتاجه في هذا المشروع)
كتابة الكود:
بالنسبة للكود فهو بسيط جدا،
قم بإنشاء متغير p من الكلاس Person
PHP كود :
Dim p As New Person
قم بإضافة باليانات اللازمة لعناصر المتغير p مثل
PHP كود :
p.ID = 123
p.Name = "e.wagdi"
أما الصورة فقم أولا بإنشاء متغير للصورة
PHP كود :
Dim img As Image
ثم حدد مصدر الصورة، إن كان من ملف أو من PictureBox.Image أو من Resource
PHP كود :
img = Image.FromFile("C:\photofile.jpg")
وبما أن الصورة هي عبارة عن مصفوفة بايتات فعليك تحويلها عن طريق المكتبة ImageConverter
PHP كود :
p.Photo = New ImageConverter().ConvertTo(img, GetType(Byte()))
بعد ان انتهيت من تجهير البيانات لم يبقى عليك سوى ربط هذه البيانات بالتقرير.
عندما قمت في الخطوة السابقة بربط التقرير باداة عرض التقرير ReportViewer فإنه يحتوى على مصدر بيانات باسم "DataSet1" (تذكر النافذة Dataset Properties)
مجموعة البيانات هي مجموعة أسطر أي مصفوفة بيانات، لهذا سيتم وضع المتغير p داخل اقواس {} لتحويلها لمصفوفة حتى وإن لم يكود هناك غيرها.
PHP كود :
Me.ReportViewer1.LocalReport.DataSources("DataSet1").Value = {p}
والآن قم بتشغيل المشروع لتحصل على النتيجة.
المشروع متوفر في المرفقات
اتمنى أن أكون وفقت في تقديم هذا الدرس بشكل سهل وبسيط {وما توفيقي إلا بالله}.
وإن شاء الله إن وجدت قبولا لهذا الدرس سأقوم بتجهيز درس آخر لعمل جدول بيانات باستخدام Data Object
