سرفصل‌های آموزشی
آموزش جاوا
آشنایی با JPanel در طراحی رابط گرافیکی کاربر در زبان جاوا

آشنایی با JPanel در طراحی رابط گرافیکی کاربر در زبان جاوا

در ادامه آموزش قبل، در این قسمت قصد داریم ببنیم که به چه شکل می توان برای JPanel یی که ایجاد کردیم یک Border اختصاص دهیم. برای این منظور می بایست ابتدا پنجره Properties را باز نماییم:

همانطور که در تصویر فوق ملاحظه می شود از منوی اصلی Window روی گزینه IDE Tools کلیک کرده سپس روی گزینه Properties کلیک می نماییم:

ایجاد یک Border برای JPanel با استفاده از منوی Properties

در واقع با انتخاب هر Component یا چیزی که روی UI قرار می گیرد، خصوصیات آن شیئ در این پنجره نمایش داده شده و می توان با استفاده از این پنجره آن ها را تغییر داد. برای این منظور ابتدا با نشانگر موس خود JPanel را انتخاب کرده و سپس تنظیمات آن را در پنجره Properties مورد بررسی قرار می دهیم:

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

در بخش Available Borders به معنی "حاشیه های موجود" می توان از میان گزینه های موجود هر کدام که تمایل داشتیم را انتخاب کنیم که در این مثال گزینه آخر تحت عنوان Titled Border را انتخاب کرده ایم. در بخش پایین تحت عنوان Properties کلیه تنظمات Border یی که در بخش بالا انتخاب کردیم نمایش داده می شود که می توان بسته به نیاز خود آن ها را تغییر داد. به طور مثال گزینه Title عنوانی را برای این پنل مشخص می کند که در اینجا عنوان This Is A JPanel را انتخاب کرده ایم. گزینه Color رنگی را برای این Border انتخاب می کند که در اینجا رنگی مایل به قرمز را انتخاب کرده ایم. در گزینه مرتبط با Font می توان نوع، اندازه و ضخامت فونت را نیز مشخص کرد. در بخش Justification هم می توان جایگاه قرار گیری عنوان پنل را تنظیم کرد و از آنجا که می خواستیم عنوان پنل در سمت چپ نمایش داده شود گزینه left را انتخاب کرده ایم (لازم به ذکر است که به همین منوال می توان دو گزینه باقیمانده تحت عنوان Position و Border را تنظیم نمود). در نهایت روی دکمه OK کلیک می کنیم:

می بینیم که کلیه تنظیمات اعمال شده اند.

در ادامه قصد داریم تا سه JLabel را به پنجره خود اضافه کنیم. برای این منظور از پنجره Palette روی گزینه Swing Controls کلیک کرده و سه بار گزینه Label را روی JFrame می کشیم:

می بینیم که JLabel ها به صورت خودکار نامگذاری می شوند. حال برای آنکه عنوان آن ها را عوض کنیم صرفاً نیاز است تا دو بار روی هر کدام از آن ها کلیک کنیم:

می بینیم که با دو بار کلیک کردن روی JLabel متن آن قابل ویرایش خواهد شد. کاری که قرار است انجام دهیم این می باشد که عنوان JLabel اول را بگذاریم First Number و عنوان دومی را Second Number و عنوان سومی و آخرین مورد را Result به معنی "نتیجه" قرار خواهیم داد:

به خاطر داشته باشیم به همان منوال که توانستیم خصوصیات JPanel را با استفاده از پنجره Properties تغییر دهیم، به همان صورت خواهیم توانست خصوصیاتی همچون نوع فونت، اندازه فونت، رنگ و غیره را نیز برای تک تک JLabel ها تغییر دهیم اما به خاطر طولانی نشدن آموزش از این کار خودداری خواهیم کرد.

حال برای هر یک از JLabel ها می بایست یک فیلد قرار دارد که کاربر بتواند عددی داخل آن ها تایپ کند. برای این منظور می بایست از چیزی تحت عنوان TextField استفاده کرد:

همانطور که در تصویر فوق می بینیم از Tab مربوط به Swing Controls گزینه TextField را به تعداد سه بار روی JFrame کشیده و رها می سازیم. اکنون با دو بار کلیک کردن روی هر یک از TextField ها متن داخل آن ها را حذف می کنیم:

توجه داشته باشیم که به محض پاک کردن متن داخل TextField ها اندازه آن ها کاهش می یابد. برای بازگردادن اندازه به حالت اول به سادگی خواهیم توانست با نشانگر موس TextField را گرفته و به اندازه ای دلخواه خود بکشیم:

در ادامه نیاز داریم تا دو دکمه روی JFrame خود قرار دهیم. برای این منظور از پنجره Palette روی Tab مربوط به Swing Controls کلیک کرده و مطابق تصویر زیر دو بار گزینه Button روی روی UI می کشیم:

اکنون به منظور تغییر دادن نام دکمه ها مطابق با تصویر زیر عمل می کنیم:

در واقع روی دکمه مد نظر کلیک راست کرده و از پنجره ای که باز می شود روی گزینه Edit Text کلیک می کنیم:

می بینیم که امکان ویرایش نام دکمه ها برای ما فراهم می شود. حال متن دکمه سمت چپ را به Add به معنی "جمع کردن" و متن دکمه سمت راست را به Clear به معنی "پاک کردن" تغییر می دهیم:

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

online-support-icon