menusearch
javapro.ir

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

جستجو
جمعه ۲۴ آبان ۱۳۹۸ | ۲۱:۵۵:۱۰
۱۳۹۸/۵/۹ چهارشنبه
(3)
(0)
♨️ جلسه پنجم - آموزش ساخت برنامه نمایش عکس در جاوا
♨️ جلسه پنجم - آموزش ساخت برنامه نمایش عکس در جاوا

به نام خدا


سلام.در این جلسه آموزشی پروژه محور "ساخت برنامه نمایش عکس" در جاوا قصد داریم ابتدا ظاهر کاربری گرافیکی برنامه را طراحی کنیم. اگه یادتون باشه در جلسه قبل برداشتی که از صورت مسئله داشتیم در کاغذ طراحی کردیم. تصویر(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) اشاره کرد:

 

 

 

آموزش رایگان گرافیک جاوا در netbeans
 

برای مثال 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)

 

 

 


دوره آموزش گرافیک Swing در netbeans
 

💠 همان طور که در تصویر(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 شده) در لینک زیر دریافت کنید.
این جلسه آموزشی را بصورت کامل و مرتب شده در لینک زیر دانلود کنید:(در صورت خرابی لینک گزارش دهید)

 

 

کانال تلگرام آموزش جاوا

 

 

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

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

 

 


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

 

 

نظرات کاربران
*نام و نام خانوادگی
* پست الکترونیک
* متن پیام

بستن
*نام و نام خانوادگی
* پست الکترونیک
* متن پیام

0 نظر
شرکت سازنده