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

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

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

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

  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 کلیک کنید.

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

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

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

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

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

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

طراحی رابط گرافیکی با نت بینز

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

در این تمرین می خواهیم به دکمه های 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));

   }

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

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

برای اجرای برنامه در 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 شنونده رویداد را برای شما متصل می کند، بنابراین می توانید روی اجرای منطق واقعی که باید توسط رویداد ایجاد شود تمرکز کنید.

برچسب ها

, , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش نرم افزار NetBeans, رابط گرافیکی در جاوا | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

درباره کدنویسان
آکادمی کدنویسان جهت کمک به دانشجویان رشته های کامپیوتر و فناوری اطلاعات و همه علاقمندان به طراحی و برنامه نویسی برای ویندوز، وب و موبایل ایجاد شده است.
بیشتر آموزش های سایت کدنویسان، بصورت رایگان ارائه شده است و بعضی بسته های آموزشی تصویری و نیز نرم افزارهای پیاده سازی شده در ازای پرداخت، قابل دانلود هستند.
هر گونه نظر، انتقاد یا پیشنهادی در مورد مطالب یا عملکرد کدنویسان دارید، حتما با ما در میان بگذارید.
نمادهای اعتماد ما


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.