ساخت رابط كاربر گرافيكي(gui) در نت بينز

این آموزش مبتدی به شما می آموزد که چگونه یک رابط کاربری گرافیکی ساده ایجاد کنید و عملکردهای ساده Back-end را اضافه نمائيد. به طور خاص نحوه کدنویسی رفتار دکمه ها و فیلدها را در فرم Swing نشان خواهیم داد.

ما از طریق طرح‌بندی و طراحی یک رابط کاربری گرافیکی کار می‌کنیم و چند دکمه و فیلد متنی اضافه می‌کنیم. فیلدهای متنی برای دریافت ورودی کاربر و همچنین برای نمایش خروجی برنامه استفاده خواهند شد.دکمه عملکرد تعبیه شده در قسمت جلویی را آغاز می کند. برنامه ای که ما ایجاد می کنیم یک ماشین حساب ساده اما کاربردی خواهد بود.

مرحله 1: ایجاد یک پروژه

1. اولین قدم ایجاد یک پروژه IDE برای اپلیکیشنی است که قصد توسعه آن را داریم. ما پروژه خود را NumberAddition نام خواهیم گذاشت.
2. گزينه File > New Project.را انتخاب کنید یا می توانید روی نماد پروژه جدید در نوار ابزار IDE کلیک کنید.
3. در قسمت Categories، گره جاوا را انتخاب کنید. در قسمت Projects، Java Application را انتخاب کنید. روی Next کلیک کنید.
4. NumberAddition را در قسمت Project Name تایپکنید و مسیری را برای مثال در فهرست خانه خود به عنوان محل پروژه مشخص کنید.
5. (اختیاری) چک باکس Use Dedicated Folder for Storing Libraries را انتخاب کنید و مکان پوشه کتابخانه ها را مشخص کنید
6. در صورت انتخاب کادر Create Main Class را از حالت انتخاب خارج کنید.
7. روی Finish کلیک کنید.

مرحله 2: ساختن قسمت جلویی (Front-End)

برای ادامه ساختن رابط خود، باید یک container جاوا ایجاد کنیم که در آن سایر اجزای رابط کاربری گرافیکی مورد نیاز را قرار دهیم. در این مرحله یک ظرف با استفاده از JFrame Component ایجاد می کنیم. ما ظرف را در یک بسته جدید قرار می دهیم که در گره Source Packages ظاهر می شود.

یک ظرف JFrame ایجاد کنید

2. در پنجره Projects، رویNumberAddition گره کلیک راست کرده و  New >Other را انتخاب کنید.
3. در کادر محاوره ای New File، دستهSwing GUI Forms  و نوع فایل را JFrame Form  انتخاب کنید . روی Next کلیک کنید.
4. NumberAdditionUI  را به عنوان نام کلاسوارد کنید .
5. my.numberaddition را به عنوان بستهوارد کنید .
6. روی Finish کلیک کنید.
7. نرم افزار نت بينز فرم NumberAdditionUI و كلاسNumberAdditionUI را در NumberAdditionبرنامه ایجاد می کند و فرم NumberAdditionUI را در GUI Builder باز می کند. بستهNumberAdditionجایگزین بسته به پیش فرض مي شود.

افزودن کامپوننت ها: ساخت فرانت اند

در مرحله بعد از پالت برای پر کردن قسمت جلوی برنامه خود با یک JPanel استفاده می کنیم. سپس سه JLabel، سه JTextFields و سه JButton اضافه می کنیم

پس از کشیدن و قرار دادن اجزای فوق،  JFrame باید چیزی شبیه تصویر زیر باشد.

نكته : اگر پنجره پالت را در گوشه سمت راست بالای IDE نمی بینید، Window > Palette را انتخاب کنید.

1. با انتخاب یک پنل از دسته Swing Containers در پالت شروع کنید و آن را روی JFrame رها کنید.
2. در حالی که JPanel برجسته است، به پنجره Properties بروید و روی دکمه بیضی (…​) در کنار Border کلیک کنید تا سبک حاشیه را انتخاب کنید.
3. در گفتگوی Border، TitledBorder را از لیست انتخاب کنید وNumber Additionدر قسمت عنوان تایپ کنید . برای ذخیره تغییرات و خروج از دیالوگ روی OK کلیک کنید.
4. اکنون باید یک JFrame خالی با عنوان JFrame ببینید که مانند اسکرین شات داراي عنوان Number Addition  است . به اسکرین شات نگاه کنید و همانطور که در بالا می بینید، سه JLabel، سه JTextFields و سه JButton اضافه کنید.

تغییر نام کامپوننت ها

در این مرحله قصد داریم نام متن نمایشگر اجزایی که به تازگی به JFrame اضافه شده اند را تغییر دهیم.

2. روي jLabel1 دوبار کلیک کنیدو ویژگی متن را به First Number: تغيير دهيد.
3. روي jLabel2 دوبار کلیک کنیدو متن را به Second Number: تغيير دهيد.
4. روي jLabel3 دوبار کلیک کنیدو متن را به Result: تغيير دهيد.
5. نمونه متن را ازjTextField1 می توانید با کلیک راست روی قسمت متن و انتخاب Edit Text از منوی بازشو، متن نمایشگر را قابل ویرایش کنید. ممکن است مجبور شوید اندازه را jTextField1به اندازه اصلی تغییر دهید. این مرحله را برای jTextField2و تکرار کنید
6. تغییر نام متن نمایشjButton1به Clear  می توانید متن یک دکمه را با کلیک راست روی دکمه و انتخاب Edit Text ویرایش کنید. یا می توانید روی دکمه کلیک کنید، مکث کنید و سپس دوباره کلیک کنید.
7. تغییر نام متن نمایشjButton2به Add
8. تغییر نام متن نمایشjButton3به Exit

در نهايت GUI شما باید مانند تصویر زیر باشد:

مرحله 3: افزودن عملکرد

در این تمرین می خواهیم به دکمه های Add، Clear  و Exit عملکردی بدهیم. جعبه متن هاي . jTextField1و jTextField2 برای ورودی کاربر استفاده می شود و jTextField3برای خروجی برنامه

کارکردن دکمه خروج

برای اینکه بتوانیم عملکردی به دکمه ها بدهیم، باید به هر کدام یک کنترلر رویداد اختصاص دهیم تا به رویدادها پاسخ دهد.  می خواهیم بدانیم چه زمانی با کلیک ماوس یا از طریق صفحه کلید دکمه فشار داده می شود، بنابراین از ActionListener  برای پاسخگویی به ActionEvent استفاده خواهیم کرد.

روی دکمه Exit کلیک راست کنید. از منوی پاپ آپ، Events > Action > actionPerformed را انتخاب کنید. توجه داشته باشید که منو شامل بسیاری از رویدادهای دیگر است که می توانید به آنها پاسخ دهید! هنگامی که actionPerformed رویداد را انتخاب می کنید ، IDE به طور خودکار یک ActionListener را به دکمه Exit اضافه می کند و یک متد کنترل کننده برای مدیریت متد شنونده actionPerformed ایجاد می کند.

1. IDE پنجره کد منبع را باز می کند و به جایی که عملی را که می خواهید هنگام فشار دادن دکمه (چه با کلیک ماوس یا از طریق صفحه کلید) اجرا می کنید، مي رود. پنجره کد منبع شما باید حاوی خطوط زیر باشد:

 

 

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {

    //TODO add your handling code here:

 }

اکنون  کدی را برای کاری که می‌خواهیم دکمه خروج انجام دهد اضافه کنیم. خط TODO را با دستور  System.exit(0);جایگزین مي كنيم . کد دکمه خروج تمام شده شما باید به شکل زیر باشد:

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {

    System.exit(0);

}

کارکردن دکمه Clear

1. روی تب Design در بالای ناحیه کاری خود کلیک کنید تا به طراحی فرم بازگردید.
2. روی دکمه Clear ( jButton1) کلیک راست کنید. از منوی پاپ آپ، Events > Action > actionPerformed را انتخاب کنید.
3. قرار است دکمه Clear تمام متن را از jTextFields پاک کند. برای این کار، کدی مانند زير اضافه می کنید. کد منبع کامل شما باید به شکل زیر باشد:

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt){

    jTextField1.setText(“”);

    jTextField2.setText(“”);

    jTextField3.setText(“”);

}

کد بالا متن هر سه JTextFields ما را به هیچ تغییر می دهد، در اصل متن موجود را با یک خالی بازنویسی می کند.

کارکردن دکمه افزودن

دکمه Add سه عمل انجام می دهد.

ورودی از کاربر را از jTextField1و jTextField2 گرفته و تبدیل ورودی از یک نوع رشته به یک عدد اعشاري.

1. سپس جمع دو عدد را انجام می دهد.
2. و در نهایت، مجموع را به نوع رشته تبدیل کرده و در jTextField3قرار می دهد.
3. روی تب Design در بالای ناحیه کاری خود کلیک کنید تا به طراحی فرم بازگردید.
4. روی دکمه افزودن ( jButton2) کلیک راست کنید. از منوی باز شده، Events > Action > actionPerformed را انتخاب کنید.
5. قصد داریم تعدادی کد اضافه کنیم تا دکمه Add ما کار کند. کد منبع کامل به شکل زیر خواهد بود:

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt){

    // تعريف متغيرهاي اعشاري.

    float num1, num2, result;

    // تبديل رشته هاي ارقام وارد شده به عدد اعشاري.

    num1 = Float.parseFloat(jTextField1.getText());

    num2 = Float.parseFloat(jTextField2.getText());

   // جمع كردن دو عدد.

    result = num1+num2;

    //تبديل نتيجه به عدد اعشاري و نمايش در جعبه متن سوم

.

    jTextField3.setText(String.valueOf(result));

   }

برنامه اکنون کامل است، می‌توانیم آن را كمپايل كرده و اجرا کنیم تا آن را در عمل ببینیم.

مرحله 4: اجرای برنامه

برای اجرای برنامه در IDE:

Run > Run Project (Number Addition) را انتخاب کنید (يا كليد  F6 را فشار دهید).

اگر پنجره ای دریافت کردید که به شما اطلاع می دهد که Project NumberAddition مجموعه کلاس اصلی ندارد، باید my.NumberAddition.NumberAdditionUI به عنوان کلاس اصلی در همان پنجره انتخاب کنید و روی دکمه OK کلیک کنید.

برای اجرای برنامه خارج از IDE:

1. برای ساخت فایل JAR برنامه، Run > Clean and Build Main Project (Shift-F11) را انتخاب کنید.
2. با استفاده از مدیر فایل سیستم خود، به دایرکتوری «NumberAddition/dist» بروید. (محلNumberAddition  دایرکتوری پروژه بستگی به مسیری دارد که هنگام ایجاد پروژه  تعيين كرده ايد)
3. رویNumberAddition.jar فایل دوبار کلیک کنید.

پس از چند ثانیه، برنامه باید شروع شود.

همچنین می توانید برنامه را از خط فرمان اجرا کنید.

برای راه اندازی برنامه از خط فرمان:

1. در سیستم خود، یک خط فرمان یا پنجره ترمینال را باز کنید.
2. در خط فرمان، دایرکتوری ها را به دایرکتوری تغییر دهیدNumberAddition/
3. در خط فرمان عبارت زیر را تایپ کنید:

java -jar  NumberAddition.jar

my.NumberAddition.NumberAdditionUI  قبل از اجرای برنامه مطمئن شوید که به عنوان کلاس اصلی تنظیم شده است. می توانید با کلیک راست بر روی گره پروژه NumberAddition در پنجره Projects، انتخاب Properties در منوی بازشو، و انتخاب دسته Run در کادر محاوره ای Project Properties، این مورد را بررسی کنید. فیلد کلاس اصلی باید نمایش داده شود my.numberaddition.NumberAdditionUI.

نحوه عملکرد رویدادها در نت بينز

این آموزش نشان داده است که چگونه به یک رویداد دکمه ساده پاسخ دهید. رویدادهای بسیار بیشتری وجود دارد که می توانید درخواست خود را برای پاسخ دادن به آنها داشته باشید.  نت بينز می تواند به شما کمک کند تا لیست رویدادهای موجود را که اجزای رابط کاربری گرافیکی شما می توانند انجام دهند پیدا کنید:

به فایل NumberAdditionUI.javaموجود در ویرایشگر برگردید . برای مشاهده طرح‌بندی رابط کاربری گرافیکی در GUI Builder، روی تب Design کلیک کنید.

1. روی هر مؤلفه رابط کاربری گرافیکی کلیک راست کرده و رویدادها را از منوی پاپ آپ انتخاب کنید. در حال حاضر، فقط منو را مرور کنید تا ببینید چه چیزی وجود دارد، نیازی به انتخاب چیزی ندارید.
2. یا می توانید از منوی Window گزینه Properties را انتخاب کنید. در پنجره Properties، روی تب Events کلیک کنید. در برگه رویدادها، می‌توانید کنترل‌کننده‌های رویداد مرتبط با مؤلفه رابط کاربری گرافیکی فعال فعلی را مشاهده و ویرایش کنید.
3. می‌توانید از برنامه‌تان بخواهید به فشارهای کلید، کلیک‌های تک، دو و سه‌گانه ماوس، حرکت ماوس، اندازه پنجره و تغییرات فوکوس پاسخ دهد. می‌توانید از منوی رویدادها برای همه آنها کنترل‌کننده‌های رویداد ایجاد کنید. رایج ترین رویدادی که استفاده می کنید یک رویداد Action است.
4. مدیریت رویداد چگونه کار می کند؟هر بار که یک رویداد را از منوی رویداد انتخاب می کنید، نت بينز به طور خودکار یک شنونده رویداد برای شما ایجاد می کند و آن را به مؤلفه شما متصل می کند.

 

مراحل زیر را طی کنید تا ببینید مدیریت رویداد چگونه کار می کند:

1. به فایلNumberAdditionUI.javaموجود در ویرایشگر برگردید . برای دیدن سورس رابط کاربری گرافیکی، روی تب Source کلیک کنید.
2. به پایین بروید و توجه داشته باشید که متدهاي

jButton1ActionPerformed()،

jButton2ActionPerformed()و

jButton3ActionPerformed() جايي است كه دستورات شما قرار گرفته اند تا اجرا شوند. به این متدها، رویداد event handler يا دستگيركننده رويداد می گویند.

اکنون متدي به نام initComponents() را اسکرول کنید. اگر اين متد ديده نمي شود، در خطي که می گوید Generated Code را نشان مي دهد، روی علامت + در کنار آن کلیک کنید تا متد جمع شده   initComponents() گسترش یابد .

ابتدا به بلوک آبی رنگ اطراف متد initComponents() توجه كنيد. این کد به طور خودکار توسط نت بينز تولید شده است و شما نمی توانید آن را ویرایش کنید.

اکنون، متد initComponents()را مرور کنید  اين متد از جمله حاوی کدهایی است که اجزای رابط کاربری گرافیکی شما را مقداردهی اولیه کرده و روی فرم قرار می دهد. این کد هنگام قرار دادن و ویرایش مؤلفه ها در نمای طراحی به طور خودکار تولید و به روز می شود.

در initComponents()، به پایین بروید تا جایی که برسيد به كد زير:

jButton3.setText(“Exit”);

jButton3.addActionListener(new java.awt.event.ActionListener() {

    public void actionPerformed(java.awt.event.ActionEvent evt) {

           jButton3ActionPerformed(evt);

    }

});

این نقطه ای است که یک شی شنونده رویداد به مولفه GUI اضافه می شود. در این حالت، یک ActionListener را به jButton3 اضافه مي كند. ActionListener دارای یک متد actionPerformed است که شیء ActionEvent را دریافت می کند که به سادگی با فراخوانی jButton3ActionPerformedرویداد کنترل کننده شما پیاده سازی می شود . دکمه اکنون به رویدادهای اقدام گوش می دهد. هر بار که فشار داده می شود یک ActionEvent تولید می شود و به متد actionPerformed شنونده ارسال می شود که به نوبه خود کدی را که در کنترل کننده رویداد برای این رویداد ارائه کرده اید اجرا می کند.

هر مؤلفه رابط کاربری گرافیکی تعاملی باید در شنونده رویداد ثبت شود و باید یک کنترل کننده رویداد را پیاده سازی کند. همانطور که می بینید، NetBeans IDE شنونده رویداد را برای شما متصل می کند، بنابراین می توانید روی اجرای منطق واقعی که باید توسط رویداد ایجاد شود تمرکز کنید.