كتابة برنامج نوافذ

الفصل الثانى

كتابة برنامج نوافذ

Windows Program Structure

فى هذا الفصل نعرض لك خطوات تصميم برنامج فى بيئة النوافذ باستعمال VC++ ونستعمل هذه الخطوات فى تصميم أول برنامج ،كما نعرض لك كيفية استعمال مجموعة كتب VC++ الملحقة ببرنامج VC++ وكيفية الحصول على شرح لأية دالة أو أمر من أوامر لغة VC++.

-تأخذ البرمجة فى بيئة النوافذ طابع مختلف عن البرمجة فى بيئة نظام التشغيل DOS حيث كان المبرمج فى بيئة نظام التشغيل DOS يكتب كثير من الأوامر لتصميم كل جزء من البرنامج بما فى ذلك الشاشات الرئيسية للبرنامج وشاشات الادخال والاخراج وغيرها ، ولكن مع وجود برنامج النوافذ وانتشاره اختلف الأمر كثيراً مع المبرمج حيث وفر برنامج النوافذ ولغات البرمجة جميع الأدوات الجاهزة المطلوبة لتصميم ذلك ، وبالتالى اختلفت خطوات تصميم البرنامج وأصبحت كما يلى :-

خطوات تصميم البرنامج

يأخذ تصميم البرنامج فى بيئة النوافذ مرحلتين هما :

أولاً :

تصميم شاشات المستخدم وصناديق الحوار المطلوبة للبرنامج باستعمال الأدوات المتوفرة فى لغة البرمجة .

ثانياً :

كتابة الأوامر التى تحقق اختيارات البرنامج وذلك باستعمال أوامر ودوال لغة البرمجة.

أول برنامج

افتح ملف البرنامج VCEX1من الفهرس CHPT1 او تابع معنا مراحل تصميم البرنامج ونفذه تحصل على شكل رقم ‌2-1

clip_image001

والشكل ( 2 -1 ( عبارة عن شاشة بها زرا أوامر عند الضغط على الأول باستعمال الفأرة تحصل على رسالة ترحيب كما بالشكل 2-2

clip_image002

وعند الضغط على زر الأمر الثانى يعرض البرنامج رسالة ثم ينتهى وهو برنامج بسيط يوضح لنا خطوات تصميم برنامج باستخدام VC++

ولتصميم البرنامج إتبع الخطوات الاتية :

1. قم بتشغيل برنامج VISUAL C++ نحصل على الشاشة الرئيسية كما فى الشكل( 2 - 3 ) .

clip_image004

شكل2-3

2222. من القائمة الرئيسية اختار File ومنها اختار NEW تحصل على صندوق 2. من القائمة الرئيسية اختر File ومنها اختر New تحصل على صندوق حوار يحدد نوع الملف المطلوب إنشائه كما فى الشكل 2-4

clip_image006

3. اختر PROJECT WORKSPASE ثم OK تحصل على صندوق حوار لكتابة اسم المشروع.

4. اكتب اسم للمشروع وليكن VCEX1(مع استعمال الفأرة لتحديد مسار المشروع) فيتم إنشاء فهرس فرعى باسم المشروع اضغط Creat

5. تحصل على صندوق حوار به أنواع مختلفة للمشروع كما فى شكل 2-5 ومعناها كما يلى :-

Single document

ومعناه برنامج به شاشة عليها قائمة اختيارات ولايسمح فى هذا البرنامج بفتح اكثر من وثيقة(ملف) فى نفس الوقت .

Multiple Document

ومعناه مشروع به قائمة اختيارات ولكن يمكن فتح أكثر من ملف فى نفس الوقت فى هذا النوع.

Dialog Based

ومعناه مشروع يبنى على صندوق حوار مثل Form فى Visual Basic وهو أبسط أنواع البرامج.

اختر Dialog Based كما فى الشكل 2-5

clip_image008

ثم اضغط Next نحصل على الشكل 2-6

clip_image010

6. يعرض الشكل 2-6مجموعة اختيارات نحدد منها ما نريد ظهوره فى البرنامج وهذه الاختيارات هى :

About Box

ومعناه ظهور صندوق About ( الذى يعرض معلومات عن البرنامج )عند الضغط على الركن العلوى الأيسر للبرنامج.

Centext Help

ومعناه إضافة ملف مساعدة لتوضيح إستعمال البرنامج.

Use 3D Controls

ومعناه ظهور جميع الأدوات المستعملة فى شكل ثلاثى الأبعاد .

حدد الاختيارات كما فى الشكل 2-6 واكتب عنوان للبرنامج ثم اضغط على NEXT تحصل على الشكل 2-7

clip_image012

7. الشكل 2-7 عبارة عن مجموعة اختيارات تحدد مواصفات نص البرنامج وهى : سؤال هل تريد تعليقات ( نعم / لا) ونوع ملف المشروع وطريقة ربط البرنامج ، اضغط NEXT تحصل على صندوق يحتوى على الفصائل والملفات التى يتكون منها البر نامج كما فى شكل 2-8.

clip_image014

1. فى النهاية اضغط Finsh تحصل على شاشة بمواصفات البرنامج التى تم تحديدها كما فى الشكل 2-9 إضغط OK يقوم VC++ بتخليق برنامج بهذه المواصفات.

clip_image015

شكل 2-9 صندوق مواصفات البرنامج النهائية

تنفيذ البرنامج قبل التعديل

بعد انشاء الشكل المبدئى للبرنامج يمكن تنفيذه بدون تعديلات لمشاهدة الشكل الاولى للبرنامج وذلك كما يلى :-

1. من القائمة الرئيسية من الاختيار BUILDاختر Bulid VCEX1 EXE فيقوم برنامج VC++بترجمة وربط البرنامج.

2. انتظر قليلا حتى يتم ترجمة وربط البرنامج وتحصل فى أسفل الشاشة على رسالة تفيد بعدم وجو د أخطاء فى البرنامج وهى:

0 ERRORS ,0 WARNINGS ثم اختر BUILDومنه نختر Execute تحصل على نتيجة تنفيذ البرنامج كما فى الشكل 2-10

clip_image016

وهذا هو الشكل المبدئى الذى خلقه لك VC++ بالمواصفات التى تم تحديدها مسبقا ، وهو عبارة عن زرى أوامر هما OK و Cancle وسطر نص به رسالة وعلينا تعديل هذا الشكل حتى يوافق الشكل المطلوب.

ملحوظة

بمجرد تنفيذ البرنامج نحصل على نسخة تنفيذية من البرنامج باسم البرنامج ، ففى هذه الحالة نحصل على الملف VCEX1.EXEفى الفهرس الذى تم تحديده عند الانشاء .

تعديل البرنامج

أولاً: نقوم بتعديل شكل البرنامج ليصبح كما فى شكل 2-1 وذلك بالخطوات التالية :

1. فى الشاشة الرئيسة يوجد صندوق ملفات البرنامج الذى يحتوى على جميع محتويات البرنامج الحالى ,ويحتوى الصندوق أيضا على أربعة أزرار تعطى وظائف مختلفة كما فى شكل 2-11

clip_image018

وبالشكل وظيفة كل زر.

انقر زر موارد وأدوات البرنامج ثم من صندوق مكونات البرنامج - انقر مرتين

على VCEX1 RESOURCES تحصل على قائمة بموارد البرنامج كما فى الشكل 2-12

clip_image019

ملحوظة :

موارد البرنامج هى جميع الأدوات التى توجد فى البرنامج مثل صناديق الحوار والصور والرموز وغيرها.

- من قائمة موارد البرنامج انقر مرتين على DIALOG ثم انقر مرتين على

IDD VCEX1_DIALOG تحصل على الشكل المبدئى لصندوق الحوار الذى يمثل البرنامج والذى أنشأه لك VC++ والذى ظهر فى نتيجة التنفيذ -كما فى الشكل 2-13.

clip_image020

2. قم بتعديل الشكل بحذف جميع الأدوات الموجودة على صندوق الحوار 2. قم بتعديل الشكل بحذف جميع الأدوات الموجودة على صندوق الحوار وذلك بالنقر مرة واحدة على الأداة بالفأرة فيتم تعليم هذه الأداة ثم بالضغط على مفتاح Del يتم حذف الأداة وهكذا حتى نحصل علىصندوق الحوار بعد حذف الأدوات.

3. قم بوضع الأدوات على هذا الشكل وذلك من صندوق الادوات الموجود 3. قم بوضع الأدوات على هذا الشكل وذلك من صندوق الأدوات الموجود على اليمين كما فى الشكل 2-14 الذى يوضح صندوق الادوات واسم كل أداة ،ويتم توضيح عمل كل أداة فيما بعد.

clip_image021

اختر زر أوامر بالنقر عليه مرة واحدة فى صندوق الأدوات ووقعه على صندوق الحوار بالنقر داخل الصندوق مرة واحدة ،اضغط على زر الأوامر مرتين بالفأرة نحصل على صندوق خصائص هذه الأداة كما بالشكل 2-15.

clip_image022

غير الكلمة المكتوبة على الأداة بتغير خاصية Caption واكتب كلمة Click مكان كلمة BUTTON1 ثم اضغط ENTER.

4. بالمثل اختر زر أوامر آخر وضعه على الشكل مع تغيير خاصية Caption له الى كلمة Exit واترك خاصية ID كما هى وهو الاسم المميز لهذه الأداة (ويمكن تغييره) ،ويتم التعامل مع الأداة بهذا الاسم

(خاصية ID تقابل خاصية Name فى برنامج Visual Basic).

5. احفظ التغيرات اما من File ثم Save أو رمز الديسك فى شريط الأدوات.

ملحوظة

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

كتابة أوامر البرنامج

بعد تخليق الشكل المبدئى للبرنامج وتعديله بما يناسب الشكل المطلوب لابد من كتابة الأوامر التى تحقق عمل أزرار الأوامر ولتحقيق ذلك اتبع الخطوات التالية :

1. من القائمة الرئيسية من View اختر Class Wizard تحصل على الشكل2-16 ،

clip_image024

فى هذا الشكل نجد صندوقى اختيارات ،الأول عنوانه Object IDc فى الجانب الايسر ويحتوى على أسماء الادوات الموجودة على صندوق الحوار والثانى عنوانه Messages ويحتوى على (الحالات التى يمكن أن تتعرض لها الأداة) والرسائل التى يمكن ان يصدرها برنامج النوافذ بخصوص هذه الأداة.

2. من الصندوق الأول اختر الأداة التى ترغب فى كتابة أوامر لها وهى IDC-BUTTON1 ومن الصندوق الثانى اختار الحالة التى تريد أن تكتب لها أوامر وهى BN-CLICKED ومعناها فى حالة النقر على زر الأوامر ثم اختر Add Function ومعناها اضافة دالة لهذه الأداة فتحصل على صندوق حوار يقترح عليك اسم للدالة اضغط OK للموافقة على هذا الاسم أو غيره الى الاسم الذى ترغبه كما فى الشكل (2-17).

clip_image025

3. ولكتابة سطور هذه الدالة اضغط Edit Code نحصل على الشكل (2-18)

clip_image026

وفيه اكتب سطور الدالة كما يلى :-

Message Box (“Welcome With you ......”)

(لاحظ أن الحروف الكبيرة والصغيرة فى الأوامر تكتب كما تراها حيث يكتب الحرف الأول من كل كلمة بالحرف الكبير )

4. بنفس الخطوات التى استعملناها لكتابة أوامر زر الاوامر الاول إكتب أوامر زر الأوامر الثانى وهى باختصار كما يلى :-

· من القائمة الرئيسية اخترView ثم Class Wizard تحصل على صندوق حوار اختر زر الأوامر الثانى وهو IDC_BUTTON2 ثم اختر BN-CLICED ثم اختر Add Function نحصل على صندوق اضافة دالة اضغط OK ثم اضغط Edit Code لتكتب نص الأوامر ، واكتب السطر التالى :-

ONOK ();

ثم احفظ التغيرات كما سبق وبهذا تم الانتهاء من تصميم شكل البرنامج وتعديله وكتابة أوامر البرنامج ويبقى تنفيذ البرنامج ويتم كما يلى:

اختر Build EXE VCEX1 ثم اختر VCEX1 Execute تحصل علىنتيجة التنفيذ.

جرب استعمال البرنامج بالضغط على زر الأوامر الأول بالفأرة تحصل على صندوق يحتوى على رسالة اضغط على زر الأوامر الثانى تخرج من البرنامج

ملخص خطوات تصميم برنامج

مما سبق ترى أن تصميم البرنامج يأخذ الخطوات التالية :

1. من File نختر New ثم Project

2. خلال مجموعة خطوات نحدد مواصفات البرنامج المطلوب تصميمه.

3. من شجرة ملفات البرنامج نختر ملف الأدوات ومنه نحدد الأداة المطلوب التعديل فيها كما فى المثال السابق كان Dialog

4. نصمم الشكل المطلوب للبرنامج باستعمال الادوات المتاحة ثم تحفظ التغيرات.

5. نكتب الأوامر التى تحقق البرنامج كما يلى:

- نختر view ثم Class wizard ثم نحدد الأداة المطلوبة ثم الحالة

- نختر Addfunction ثم Edit Code

- نكتب الاوامر المطلوب تنفيذها مع هذه الاداة

6. ننفذ البرنامج كما يلى:

- نختر Build ثم Build EXE ثم Execute

7. للتعديل فى البرنامج نخرج من البرنامج ثم نعود للخطوات السابقة من أول التعديل فى البرنامج.

صندوق الأدوات

يحتوى صندوق الأدوات على مجموعة من الأدوات التى تستخدم فى تصميم البرنامج ،وكل أداة لها استخدام فاذا كنت من مبرمجى Visual Basic فأنت تعرف معظم هذه الأدوات والشكل 2-19 يحتوى على صندوق الأدوات موضح عليه أسماء الأدوات وفيما يلى (جدول 2-1) بهذه الأدوات واستخداماتها على أن يتم دراسة هذه الأدوات فى فصول البرنامج مع برامج تطبيقية لها.

clip_image028

اسم الاداة

المعنى

الاستخدام

PICTURE

أداة عرض صورة

لعرض صورة فى صندوق الحوار

STATIC TEXT

أداة كتابة عنوان

لكتابة عنوان أو كلمة على صندوق الحوار

EDIT BOX

صندوق الكتابة

استقبال بيانات من المستخدم

BUTTON

زر أوامر

لتنفيذ أمر معين عند النقر عليه

CHECK BOX

أداة اختبار

لتحديد حالة نعم أم لا

RADIO BOX

أداة اختبار

لتحديد حالة نعم أم لا

COMBO BOX

صندوق قائمة اختيارات

عرض مجموعة اختيارات واختيار احداها

LIST BOX

صندوق قائمة اختيارات

عرض مجموعة اختيارات واختيار احداها

H_SCROLL

شريط ازاحة افقى

زيادة ونقصان قيمة واستخدام هذه القيمة

V_SCROLL

شريط ازاحة رأسى

زيادة ونقصان قيمة واستخدام هذه القيمة

ANIMATE BUTTON

أداة حركة الصور

عرض مجموعة صور بشكل متتالى

TAB CONTROL

أداة عرض الصفحات

وضع أدوات على صفحات وعرضها

TREE CONTROL

أداة الشجرة

عرض الادوات فى شكل شجرة

جدول (2-1) بأدوات صندوق الادوات واستخداماتها

مساعدات التصميم

بالاضافة لمجموعة الادوات التى تستخدم فى تصميم البرنامج يوجد مجموعة من أزرار الاوامر فى VISUAL C++ التى تسهل على المبرمج تصميم شكل البرنامج مثل محازاة أكثر من أداة للجانب الأيسر أو الجانب الأيمن ومثل مساواة ارتفاع أكثر من أداة أو مساواة الأدوات فى الحجم وهكذا…

وتظهر هذه الأدوات فى حالة تصميم صندوق الأدوات فى أسفل الشاشة والشكل 2-20 يوضح هذه الأدوات والغرض منها .

clip_image030

الحصول على معلومات عن دالة أو أمر معين توجد أكثر من طريقة للحصول على معلومات عن دالة أو أمر معين أبسطها كتابة الدالة أو الأمر والوقوف عليها بالمؤشر ثم الضغط على المفتاح F1 تحصل على شرح كامل لهذا الأمر أو لهذه الدالة والطريقة الأخرى هى أن تختر Help ثم Search ثم كتابة الأمر أو الدالة تحصل على شرح كامل لها.

استعمال كتب VC++ الموجودة بالبرنامج

قام مصممو برنامج VC++ بوضع جميع الكتب الخاصة بالبرنامج والتى توزع مع البرنامج داخل حزمة لتسهل على المبرمجين قراءة الكتب واستعمالها ويتم ذلك كما يلى :

من القائمة الرئيسية اختر Help ثم Contents كما فى شكل 2-21

clip_image031

ومنه نختار Visual C++ books وهى قائمة الكتب لك أن تختار راى كتاب ومنه تختر أى فصل ومن الفصل تختار موضوع وهكذا كما بالشكل (2-22).

clip_image033

ويمكن لك الاطلاع على الأمثلة الموجودة ونسخ أجزاء منها واستعمالها.

التسميات: