♨️ جلسه پنجم - آموزش ساخت برنامه نمایش عکس در جاوا

به نام خدا

سلام.در این جلسه آموزشی پروژه محور "ساخت برنامه نمایش عکس" در جاوا قصد داریم ابتدا ظاهر کاربری گرافیکی برنامه را طراحی کنیم. اگه یادتون باشه در جلسه قبل برداشتی که از صورت مسئله داشتیم در کاغذ طراحی کردیم. تصویر(1)

حالا قصد داریم طرح موجود در تصویر(1) را در برنامه netbeans به صورت واقعی طراحی کنیم.برای این کار وارد برنامه netbeans می‌شویم و روی کلاس MainClass.java دابل کلیک می‌کنیم تا باز شود و وارد بخش Design برنامه می‌شویم. تصویر(2)

💠 خب در جلسه قبل ما برای این که یاد بگیریم چطور اجزای گرافیکی خود نظیر دکمه و لیبل و.. را روی فریم قرار بدیم یک JButton و یک JLabel را به فریم خود اضاف کردیم.

💡 طبق برداشتی که در جلسات قبل از صورت مسئله کردیم و طراحی که در تصویر(1) انجام دادیم برای ساخت برنامه نمایش عکس به اجزای گرافیکی زیر نیاز داریم:

✔ دو عدد JButton که نقش دکمه های عقب و جلو عکس را برعهده دارند.

✔ یک عدد JLabel که نقش قاب نمایش عکس ها را بر عهده دارد. بله یکی از خاصیت های JLabel در جاوا نمایش عکس است.
✔ یک عدد JMenu Bar و JMenu Item برای طراحی منو open

خب ما تا الان یک JButton یک JLabel را از قبل به frame خود اضاف کردیم. پس نیاز به اضاف کردن یک JButton دیگر و یک عدد JMenu Bar و JMenu Item داریم. برای این کار وارد بخش Design کلاس MainClass می‌شویم. و از بخش palette اجزای گرافیکی نامرده را با موس میگیریم و روی frame برنامه رها می‌کنیم تا به فریم مون اضاف شوند. تصویر(3)

توضیح تصویر(3) :
برای ساخت منو ابتدا باید یک JMenu Bar را به فریم اضاف کنیم بعد یک JMenu Item را به JMenu Bar خود اضاف می‌کنیم. همه این کارها با موس و با درک اند دراپ یا همون کشیدن و رها کردن روی فریم به راحتی انجام می‌شود.کافیست یک بار عملی این کارو کنید ،دستتون میاد روشش چجوری است.

خب دکمه JButton2 را نیز به همین روش از بخش palette با موس میگیریم و روی فریم رها می‌کنیم.
حالا برنامه را اجرا می‌کنیم ببینیم نتیجه چطور شده است: تصویر(4)

خب در تصویر(4) اجزای گرافیکی که به فریم اضاف کردیم را مشاهده می‌کنید،در تصویر(4) در بخش menu bar منو Edit به صورت پیشفرض ایجاد شده که اضافی هست و باید ان را پاک کنیم،و گام بعدی نظم دادن به محل قرار گیری اجزای گرافیکی در فریم برنامه است.به عبارتی باید چیدمان قرار گیری اجزای گرافیکی در فریم را مدیریت کنیم تا به اون طراحی که مدنظر داریم برسیم.

برای پاک کردن منو Edit از فریم برنامه کافیست در بخش Design کلاسمون منو Edit را انتخاب کرده و روی ان کلیک سمت راست کرده و گزینه delete را انتخاب کنیم. تصویر(5)

بعد از پاک کردن منو Edit نتیجه به صورت تصویر(6) خواهد بود:

مدیریت چیدمان محل قرار گیری اجزای گرافیکی در Frame :

دوستان همان طور که در مبحث LayoutManagers یا مدیریت چیدمان قبلا در سایت مون بررسی کردیم، روش های مختلفی برای قرار دادن اجزای گرافیکی خود نظیر button ها و label ها و... در فریم برنامه وجود دارد که از‌ آنها می‌توان به موارد موجود در عکس (7) اشاره کرد:

برای مثال Flow Layout باعث میشه اجزای گرافیکی ما در یک خط پشت سرهم قرار بگیرند. تصویر(8)

یا GridLayoutبرای سازماندهی و چیدن اجزای گرافیکی بصورت یک شبکه مستطیلی استفاده می‌شود.هر component(اجزای گرافیکی) بصورت یک مستطیل نمایش داده می‌شود. تصویر(9)

خب ما قراره از کدام Layout یا چیدمان برای قرار گیری اجزای گرافیکی خود بر فریم استفاده کنیم؟ از Free Design چرا؟ چون می‌تونیم براحتی با درک اند دراپ کردن یا کشیدن و رها کردن اجزای گرافیکی موردنظر را در محل دلخواه در فریم قرار بدیم. برای این کار در بخش Design کلاسمون روی Frame برنامه کلیک سمت راست می‌کنیم و از بخش Set Layout گزینه Free Design را انتخاب می‌کنیم. تصویر(10)

💠 همانطور که در تصویر(10) مشاهده می‌کنید از میان روش های مختلف مدیریت چیدمان اجزای گرافیکی در فریم ،
Free Design را انتخاب کردیم. حالا کافیست به صورت دستی و با موس هر یک از اجزای گرافیکی مورد نظر را بگیریم و در محل مناسبی از Frame قرار بدهیم.

نکته: هر اجزای گرافیکی بخشی به نام properties داره که می‌توان از طریق آن خصوصیات و ویژگی های آنها نظیر اندازه، متن،فونت،رنگ و...را تنظیم کرد. مثلا ما قصد داریم اندازه Frame را 600*800 قرار دهیم یعنی عرض برابر 800 و ارتفاع برابر 600 باشد.برای این کار با موس Frame را انتخاب می‌کنیم و در بخش properties فریم خود سراغ قسمتی با نام preferredSize می‌رویم و اندازه موردنظر را در آن به صورت دستی تایپ می‌کنیم: تصویر(11)

💠 همان طور که در تصویر(11) مشاهده می‌کنید ما با انتخاب JFrame برنامه مون و رفتن به بخش properties و در قسمت preferredSize اندازه ابعداد frame خود را 800 در 600 پیکسل قرار دادیم.

فلش سبز رنگ به نام اجزای گرافیکی انتخاب شده که در این جا JFrame است اشاره می‌کند.ویژگی های همهی همه اجزای گرافیکی نظیر button و label و... را می‌توانیم به همین شیوه تنظیم کنیم.

نکته: برای این که ذهنیتی برای طراحی و چیدمان اجزای گرفیکی خود در مکان های مدنظر در فریم داشته باشیم به صورت دستی با موس گوشه پایین سمت راست Frame خود را مطابق با اندازه ای که برای فریم درنظر گرفتیم ،تنظیم می‌کنیم.تصویر(12)

💠 در تصویر(12) گوشه ای که با فلش قرمز رنگ به آن اشاره شده محل گرفتن آن با موس و کوچک یا بزرگ کردن frame است. حالا برنامه را Run می‌کنیم: تصویر(13)

💠 در تصویر(13) برنامه از یک فریم 800 در 600 پیکسلی و یک منو بار و دو عدد دکمه باتن و یک لیبل تشکیل شده است.خب بله بی نظمی در نام های اجزای گرافیکی و محل قرار گیری آنها در صفحه فریم مشاهده می‌شود.برای تغییر متن هر یک از اجزای گرافیکی خود نیز به بخش properties آن رفته و در قسمت text متن آن را تغییر می‌دهیم.و با موس آنها را گرفته در مکان مناسب در فریم قرار می‌دهیم.همچنین می‌توانید با انتخاب هر یک از اجزای گرافیکی به صورت دستی و با موس یا از طریق بخش properties اندازه ابعداد آنها را تنظیم کنید. مثلا اندازه JLabel را 500 در 400 پیکسل تعیین کرده ام: تصویر(14)

💠 همان طور که در تصویر(14) می‌بینید text یا متن اجزای گرافیکی خود را از طریق بخش properties و محل قرار گرفتن آنها را با موس در Frame تغییر داده ایم. یک نمونه تغییر متن دکمه Next را با فلش قرمز مشخص کرده ایم. حالا برنامه را Run می‌کنیم : تصویر(15)

💠 خب تا اینجا ظاهر رابط کاربری گرافیکی برنامه را به صورت دستی با برنامه netbeans طراحی کرده ایم.دوستان برای کار با طراحی اجزای گرافیکی در netbeans تنها به تمرین و آزمون و خطا نیاز دارید و همین جور برا خودتون باهشون بازی کنید تا یاد بگیرید چطور ازشون استفاده کنید 😊

💠 دوست من میخوام ی کاری کنم.... میخوام یک JPanel به JFrame برنامه اضاف کنم که دارای اندازه 500 در 400 پیکسل (عرض برابر 500 و ارتفاع برابر 400 ) و رنگ آن خاکستری مایل به مشکی باشد. برای این کار از بخش palette با موس یک panel میگیرم و روی فریم رها می‌کنم: تصویر(16)

💠 در تصویر(16) بخشی که با فلش قرمز رنگ به ان اشاره شده است panel ای است که از بخش palette گرفتیم و روی frame برنامه خود انداختیم. خب دیگه باید تا اینجا دیگه با بخش Design برنامه آشنا شده باشید که چطور به این بخش بریم.حالا در بخش Design قسمتی هست به نام Navigator که سلسله مراتب درختی اجزای گرافیکی که تا الان در برنامه خود استفاده کردیم را نمایش می‌دهد: تصویر(17)

💠 همان طور که در تصویر(17) مشاهده می‌کنید رئیس قبیله ما MainClass خودمون است 😊 سلسله مراتب و زیر شاخه های آن را مشاهده می‌کنید. مثلا JFrame زیر شاخه MainClass است و panel1 زیر شاخه JFrame است.ما هر اجزای گرافیکی را که از palette به برنامه اضاف می‌کنیم می‌توانیم از این بخش نحوه اضاف شدن به فریم یا پنل یا کلاس برنامه یا سایر اجزای گرافیکی را مشاهده کنیم.

💠 حالا ما قصد داریم یک تغییری در ظاهر برنامه خود بدیم. همان طور که در تصویر(17) مشاهده می‌کنید Jlabel1 زیر شاخه JFrame قرار گرفته است چرا ؟ چون ما Jlabel1 را اگه یادتون بیاد به صورت دستی روی JFrame اضاف کردیم. حالا قصد داریم Jlabel1 را با موس بگیریم و جابه جا کنیم و آن را به panel1 انتقال بدیم.برای این کار در بخش Navigator می تونیم با موس Jlabel1 را بکشیم و بندازیم روی panel1 که بهش اضاف بشه یا این که روی Jlabel1 کلیک سمت راست کنیم و گزینه cut را انتخاب کنیم و بعد روی panel1 کلیک سمت راست کنیم و گزینه paste را انتخاب کنیم که لیبل از فریم به پنل انتقال پیدا کند. تصویر(18)

💠 اگر تصویر(17) و تصویر(18) را باهم مقایسه کنید خواهید دید که Jlabel1 به panel1 اضاف یا منتقل شده است. حالا نتیجه را به صورت تصویر(19) مشاهده کنید:

💠 در تصویر(19) بخش سفید رنگ panel برنامه است که label برنامه که حاوی متن "show pic" است روی آن قرار گرفته است و در کل panel نیز روی Frame برنامه قرار گرفته است. لازم به ذکر است وقتی label را از Frame به panel منتقل کردید یخورده چیدمان برنامه بهم میریزه که خبری نیست دوباره با موس اجزای گرافیکی را سرجای خود قرار بدید.

💠 خب از بخش properties اندازه panel1 و JLabel1 را 500 در 400 پیکسل(عرض برابر 500 و ارتفاع برابر 400) قرار می‌دهیم. همچنین از بخش properties مربوط به JPanel1 و از قسمت background رنگ خاکستری مایل به مشکی برای پس زمینه پنل خودمون انتخاب می‌کنیم. تصویر(20)

و بعد از تعیین رنگ panel خود برنامه را Run می‌کنیم: تصویر(21)

✔ لازم به ذکر است امکان داره یکم چیدمان اجزای گرافیکی مون بهم بریزه و... همین جور دستی با موس تنظیم کنید محل قرار گیری آنها را روی فریم و برنامه را Run کنید تا به چیدمان مدنظر خود برسید.

✔ تصویر(21) گویای همه چیز هست، تا اینجا ظاهر گرافیکی برنامه را مطابق با خواسته صورت مسئله پروژه برنامه نمایش عکس در جاوا و طرحی که روی کاغذ کشیده بودیم به صورت دستی و بدون کدنویسی با برنامه Netbeans پیاده سازی کردیم.

✔ در بخش خاکستری رنگ که پنل برنامه قرار دارد و در لیبل برنامه که روی پنل چسبیده است قرار است عکس های خود را نمایش بدیم 😊
✔ در بعضی جاها گفتیم پنل، بعضی جاها گفتیم panel و بعضی جاهای دیگر گفتیم panel1 همه این ها یکی هستند چرا که برنامه تنها یک پنل داشت اما اگر برنامه از چند پنل تشکیل شده بود حتما با اسم مثلا panel1 یا panel2 و... در اموزش معرفی میکردم این برای JLabel1 هم صادق است.

✔ دوستان اصلا نگرانی یادگیری این طراحی ظاهر گرافیکی با netbeans نباشید چرا که کافیه برنامه netbeans را باز کنید و با آزمون و خطا کردن و بقول خودمون بازی کردن با امکانات اون قشنگ طرز استفاده ازش رو یاد میگیرید 😊

✔ خب تا اینجا ظاهر گرافیکی پروژه برنامه نمایش عکس در جاوا رو یادگرفتیم البته میتونم بگم طرز کار با طراحی ظاهر گرافیکی برای هر برنامه ای در جاوا را تا حدودی یاد گرفتیم. دیگه ظاهر سازی بسه 😊 و در جلسات اینده سراغ بخش کدنویسی و عملیاتی که باعث میشه دکمه ها کار کنند، از طریق منو open عکس از کامپیوتر بگیریم و در لیبل نمایش بدیم و ....خواهیم رفت 😊

ان شاالله که توانسته باشم این مفاهیم را به سادگی توضیح داده باشم....

دوست من آرزوی سعادت و کامیابی رو برات دارم،خدانگهدار

این جلسه آموزشی را می‌توانید بصورت کتاب الکترونیکی (PDF شده) در لینک زیر دریافت کنید.
این جلسه آموزشی را بصورت کامل و مرتب شده در لینک زیر دانلود کنید:(در صورت خرابی لینک گزارش دهید)

لینک دانلود کتاب + سورس کد این جلسه آموزشی

نشر این مطلب با ذکر منبع (لینک سایت) بلامانع است.
برای با خبر شدن از جدیدترین مطالب آموزشی جاوا عضو کانال تلگرام ما شوید.