GUI الواجهة الرسومية

خطوات أساسية لبدء مشروع c++ بواجهة رسومية.

1- إنشاء مشروع واجهة رسومية “الشرح على بيئة تطوير Visual Studio 2013 , Professional”.

مشروع جديد (New Project)

مشروع جديد

 


Visual C++

C++


CRL

CLR


CRL Empty Project

Empty

 


 تسمية المشروع ثم OK

اسم المشروع

 


2- إنشاء أول نافذة : ممكن أن تتم بأكثر من طريقة ، سأكتفي بواحدة

Source File >> ثم زر الفأرة اليمين

Source File


ADD – New item

Add-New item


UI

UI


Widows Form

Widows form


 النتيجة بعد ضغط زر ADD

MyForm


3- فتح صفحة الأكواد التي يتم العمل داخلها 

النقر مرتين على النافذة يفتح ملف .h وهذه الطريقة لكل بقية المكونات الأزرار وغيرها 

نقر


الكود  يظهر بهذا الشكل ، وهذه إحدى الطرق

كود


4- إظها صندوق الأدوات لاستخدامها ، مثل الأزرار Buttons و مربع النص TextBox … الخ

View

عرض


ToolBox

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

ToolBox


5- إظهار مربع خصائص المكون  الذي يحوي اسم المكون والخط ووقت الظهور ..الخ، مثل خصائص النافذة .

 في الوضع الافتراضي يكون موجود في الزاوية اليمنى في الأسفل؛ ولكن إن لم يظهر لك :

الزر الأيمن على النافذة – خصائص 

زر أيمن

 


ستظهر على الجانب الأيمن ، قم بتثبيتها حتى تكون ظاهرة دائمًا في أسفل الركن الأيمن

خصائص

تثبيت الخصائص الخصائص ، النتيجة


6- إضافة Label والكتابة فيه .

من صندوق الأدوات ToolBox أختار Label ثم أسحبه إلى داخل النافذة .

ToolBox

Label


أذهب إلى مربع الخصائص عند خاصية Text أكتب ماتشاء وبإمكانك تغيير لون وحجم الخط ولون خلفية المربع …الخ من الخصائص .

الكتابة

Text

 

Hello World

 

تغيير حجم الخط

Font Size

 

النتيجة

Font Size Result


7- إضافة Button وبرمجته .

بنفس طريقة الـ label  نضيف الزر ، وننقر عليه مرتين لفتح صفحة الكود ، وتغيير خصائص الزر مثل اسمه الظاهر بمثل طريقة الـ label عن طريق مربع الخصائص.

Button Button2 Code of Button


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

*تحتاج بدايةً أن تُنشِئ نافذة جديدة بنفس طريقة النافذة الأولى .

أولًا : عمل include للنافذة الجديدة في النافذة الأولى

#include "MyForm1.h"

include Form 1 include Form 2

ثانيًا : كتابة هذا الكود داخل دالة الـ button  ، ومن مسميّات الدوال في الكود والتعليقات الموجودة بإمكانك فهم الكود .

// creat a new form of MyForm1
  MyForm1^ frm = gcnew MyForm1();
  this->Hide(); //Hide MyForm "The Start Form"
  frm->ShowDialog(); // Show MyForm1

Button Code 1 Button Code 2


8- في النافذة الأخرى سنضع 2 من الأزرار  واحد Exit يخرج من البرنامج والآخر  Restart ويعيد تشغيل البرنامج من البداية .

البداية مع Exit .

 //Exit Button
 Application::Exit();

ExitExit Button

زر إعادة التشغيل 

 //Start Again Button
 Application::Restart();

Restart

 


9- تشغيل البرنامج 

عند عمل build سيظهر لك هذا الخطأ ، سببه هو أنه يجب أن تعيّن Main Form وهي تقابل Main Function نقطة بداية البرنامج .

Error 1 error LNK1561: entry point must be defined 

الحل:

أولًا : أفتح ملف cpp للنافذة الأولى ، موجود في الناحية اليمنى ؛ ثم أكتب بداخله هذا الكود ، وأكتب اسم مشروعك بدل كلمة “اسم المشروع الموجودة” 

using namespace System;
using namespace System::Windows::Forms;

[STAThread]
void Main(array<String^>^ args)
{
 Application::EnableVisualStyles();
 Application::SetCompatibleTextRenderingDefault(false);

اسم المشروع::MyForm form;
 Application::Run(%form);
}

مكان ملف cpp في الجانب الأيمن
Cpp Place

الكود

Codeثانيًا : أذهب إلى خصائص المشروع وأتبع الآتي 

Properties>>Configuration Properties->Linker->System
Select Windows (/SUBSYSTEM:WINDOWS) for SubSystem.
Advanced->Entry Point, type in Main >>hit OK.

Project FolderخصائصConfLinkerSystemW-subsAdvancedMainOK

أعمل Build مرة أخرى ثم Run ستجد أن البرنامج يعمل معك .

في هذا المثال لم أقم بتغيير أسماء النوافذ التي يقترحها البرنامج مثل MyForm ، لذلك عندما تغيّر أسماءها قد لاتعمل معك بعض أكوادي لاختلاف المسميّات ، وأنا أقترح عليك أن لاتغيّر الأسماء بالنسبة لي كانت تسبب مشاكل في الربط .

 

هناك اختلافات عند العمل مع visual studio 2008 ، بإمكانك مراسلتي إذا كنت تعمل على هذه النسخة ؛ كذلك لدّي مشروع  أتممته مع مجموعتي في الجامعة بواجهة رسومية يحوي LinkedList و Stack و Queue بإمكانك مراسلتي أيضًا إذا أحتجت مساعدة قد يكون لدي إجابة أو مررت على نفس الخطأ ؛ أنا أكتب هذا الكلام لأنني رأيت خلال تطوير مشاريع الواجهة الرسومية بالـ c++ أن المصادر شحيحة جدًّا ، لذلك لاأحب أن يواجه غيري صعوبات قد أكون اعرف لها حلًّا .

رسم مربع ومستطيل

-أكتب برنامج يعرض للمستخدم قائمة إما رسم مربّع أو مستطيل أو خروج ، إذا اختار المستخدم المربع يطلب منه إدخال طول ضلع المربع ، وإذا اختار المستطيل يطلب منه إدخال الطول والعرض .

يجب استخدام مفهوم functions’ prototypes and functions’ overloading في الحل .

-استخدم ” *  ” للرسم .

الحل:

 

#include <iostream>
using namespace std;

void drow();
void drow(int);

int main()
{
 int choice;

 do{
 cout << "Welcome to my shapes!" << endl;
 cout << "Please select a shape to draw: " << endl;
 cout << "1- Square \n2- Rectangle \n3- Exit program" << endl;
 cout << "Your choice: ";
 cin >> choice;

 switch (choice)
 {
 case 1://Square
 int hw_s;
 cout << "Please enter height or width of the square: ";
 cin >> hw_s;
 drow(hw_s);
 break;

 //Rectangle
 case 2:drow();
 break;
 }
 } while (choice == 1 || choice == 2);

 system("pause");
 return 0;
}


void drow(int x)
{

 //Square
 for (int counter = x; counter > 0; counter--)
 {
 for (int i = 1; i <= x; i++)
 cout << "*";

 cout << endl;
 }
}

void drow()
{
 //rectangle
 int h_r, W_r;
 cout << " Enter the height of the rectangle: ";
 cin >> h_r;
 cout << " Enter the width of the rectangle: ";
 cin >> W_r;

 for (int count = h_r; count > 0; count--)
 {
 for (int i = 1 ; i <= W_r; i++)
 cout << "*";

 cout << endl;
 }
}