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

به نام خدا

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

در این جلسه آموزشی قصد داریم حالا عکس هایی که از کامپیوتر خواندیم و در لیست ArrayList مون ذخیره کردیم را در label برنامه نمایش دهیم.برای این کار یک متد با نام handyPlayImage تعریف کرده و دستوراتی که باعث نمایش عکس در برنامه می‌شود را در آن می‌نویسیم. تصویر(1)

توضیح در مورد متد handyPlayImage موجود در تصویر(1):

کار کلی این متد این است که فایل های تصویری BufferedImage یا همون عکس هامون را که در یک لیست ArrayList به نام image مربوط به کلاس Picture ذخیره شده اند را در JLabel1 برنامه نمایش دهد.

 💠 بررسی خط 69 تصویر(1):

✔ یک متد از نوع void با نام handyPlayImage و یک پارامتر با نام i که از نوع int هست در ورودی متد تعریف کرده ایم.

کاربرد پارامتر i چیست؟ متغیر i به عنوان index یا شماره ای برای دسرسی به خانه های آرایه مون که عکس هامون داخلش ذخیره شده ازش استفاده می‌کنیم. چرا آرایه؟ جلوتر محتوای ArrayList مون را داخل یک آرایه میریزیم.

💠 بررسی خط 72 تصویر(1):

✔ کاربرد این دستور این است که ArrayList مون را به یک آرایه یک بعدی تبدیل می‌کند.به عبارت دیگر محتوای درون ArrayLst مون را درون یک آرایه یک بعدی میریزیم.

💠 بررسی خط 74 تا 93 تصویر(1):

✔ دوستان ما قصد داریم با دکمه های Button هامون عکس ها را عقب یا جلو ببریم،در کل با کلیک بر روی هر دکمه عکس ها مون را رو به جلو یا عقب حرکت بدهیم. قراره متد handyPlayImage را در بدنه متد ActionPerformed دکمه های Button خود قرار دهیم.

✔ متد ActionPerformed چیست؟ خب در مبحث کار با گرافیک در جاوا این متد را توضیح دادیم و باهاش کار کردیم.کاربرد این متد اینه که وقتی روی دکمه Button مون کلیک کردیم دستورات درون بدنه متد ActionPerformed اجرا می‌شود.پس هر وقت قصد داشتیم با کلیک بر روی یک دکمه Button کار خاصی برامون انجام بشه ،دستورات خودمون را در بدنه متد ActionPerformed قرار می‌دهیم.

✔ خب عکس هامون در خانه های آرایه bfi که از نوع کلاس BufferedImage هست ذخیره کردیم. همان طور که می‌دانید برای دسرسی به خانه های آرایه تنها از طریق ایندکس های آرایه یا همون شماره خانه های ارایه امکان پذیراست. ما ایندکس هامون رو چطور باید به دست آوریم؟چطور آرایه مون رو با ایندکس هامون پیمایش کنیم؟ متغیر i همون ایندکسی است که قراره با آن به خانه های آرایه دسرسی پیدا کنیم. حالا چطور متغیر i قراره مقداردهی شود؟ با دکمه های button مون این متغیر را مقدار دهی می‌کنیم. در کل یک شمارنده از نوع int با مقداردهی اولیه 0 با نام counterImage در بدنه کلاس MainClass تعریف می‌کنیم. تصویر(2)

ما با هر بار کلیک کردن روی دکمه هامون یکی به مقدار شمارنده counterImage اضاف یا کم می‌کنیم. چه موقع اضاف می‌شود؟ زمانی که بخوایم بریم سراغ عکس بعدی که در آرایه ذخیره شده و چه موقع کم میشه؟ زمانی که بخوایم عکس قبل موجود در ارایه را نمایش بدهیم. این دستورات را در متد ActionPerformed دو دکمه JButton1 و JButton2 قرار می‌دهیم. تصویر(3)

در تصویر(3) متد ActionPerformed مربوط به دکمه JButton1 را با خط چین آبی و متد ActionPerformed مربوط به دکمه JButton2 را با خط چین قرمز مشخص کرده ایم. خب کار دکمه Button هامون چی بود؟ این بود که عکس هامون را به عقب یا جلو حرکت بدهند.چگونه؟ با یک شمارنده ای که با کم یا زیاد کردنش به خانه آرایه ای که عکس هامون درونش ذخیره بود دسرسی پیدا میکردیم و به خانه بعدی ارایه یا قبلی آرایه می‌رویم. وقتی برنامه اجرا می‌شود شمارنده counterImage مقدارش صفر است و بدیهی است که خانه اول آرایه یا همون عکس اولمون نمایش داده می‌شود و بعد که روی دکمه باتن next کلیک کردیم یکی به مقدار متغیر counterImage اضاف می‌شود و به خانه بعدی آرایه یا عکس بعدی مون دسرسی پیدا می‌کنیم.و برعکس وقتی روی دکمه Previous کلیک کردیم یکی از مقدار شمارنده counterImage کم می‌شود و به خانه قبلی آرایه یا عکس قبلی مون دسرسی پیدا می‌کنیم.

پس با هر بار کلیک کردن روی دکمه های Button برنامه یکی به مقدار شمارنده counterImage اضاف یا ازش کم می‌شود و همچنین متد handyPlayImage را برای نمایش عکس هامون در JLabel صدا میزنیم.

خب دوباره برگردیم به دستورات درون متد handyPlayImage:تصویر(4)

✔ خب حالا متوجه شدیم پارامتر i چیه؟ پارامتر i همون شمارنده ای که از طریق دکمه هامون برای پیمایش خانه های آرایه یا عکس هامون مقداردهی می‌شود.

✔ دستورات شرطی در خط های 74،80،88 برای چیست؟ خب قرار شد به صورت چرخشی عکس هامون را نمایش دهیم، چرخشی یعنی چی؟ یعنی وقتی هنگام حرکت دادن عکس به آخرین عکس رسیدیم با زدن روی دکمه بعدی(next) دوباره از عکس اول شروع کنیم و وقتی از اولین عکس شروع کردیم و در صورتی که روی دکمه قبلی(Previous) کلیک کردیم برنامه آخرین عکس را نمایش دهد: تصویر(5)

✔ تصویر(5) نمایش دهنده یک آرایه یک بعدی با طول 4 یا چهار خانه ای است که تصاویرمون درونش ذخیره شده و همان طور که می‌بینید چرخش نمایش تصاویر با زدن دکمه های Next و Previous را نشان می‌دهد. فرض کنید از خانه صفرم آرایه شروع می‌کنیم بدیهی است که عکس اول نمایش داده می‌شود، بعد با زدن دکمه Next عکس دوم تا ....عکس چهارم واقع در خانه آخر آرایه نمایش داده می‌شود.خب اینبار با زدن دکمه Next در خانه آخر آرایه دوباره به خانه اول آرایه بر می‌گردیم. حالا این حالت برای دکمه Previous برعکس دکمه Next است.

✔ حالا تمامی دستورات شرطی در خط 74،80،88 تصویر(4) برای همین عملیات چرخش در ارایه مون است.

💠 بررسی خط 75 تا 76 تصویر(4):

✔ برای اضاف کردن و نمایش عکس در JLabel1 برنامه باید فایل عکسمون را از BufferedImage به ImageIcon تبدیل کنیم. و در نهایت با صدا زدن متد setIcon از طریق شی jlabel1 عکسمون را به لیبل برنامه برای نمایش اضاف می‌کنیم.

دلم نیومد که شرط های درون متد handyPlayImage واقع در تصویر(4) را براتون نگم:

   
✔ این شرط میگه ایندکسی که قراره با ان به خانه های آرایه مون که عکسامون درونش ذخیره شده دسرسی پیدا کنیم باید بین 0 تا طول آرایه باشد.به عبارتی اگر ایندکس ما بزرگ و مساوی صفر و کوچکتر از طول ارایه بود دستور درون بلوک شرط را اجرا کن.این برای پیمایش عادی عقب یا جلو بردن عکس های درون آرایه است.

✔ قرار بود اگر به انتهای آرایه یا آخرین عکسمون رسیدیم و با زدن دکمه next بریم اول آرایه و اولین عکس را نمایش بدهیم.این شرط برا همینه، گفته اگر مقدار شمارنده بیشتر از مقدار طول آرایه شد،شمارنده رو صفر کن ،حالا وقتی شمارنده صفر میشه اولین خانه آرایه یا اولین عکسمون در لیبل نمایش داده می‌شود.

✔ قرار بود وقتی در اولین خانه از آرایه یا در حال تماشای اولین عکسمون هستیم، وقتی روی دکمه Previous کلیک کردیم بریم سراغ خانه آخر آرایه یا نمایش آخرین عکسمون ،این دستور برا همینه، گفته اگر ایندکس i کوچک تر از صفر شد یا همون منفی شد، مقدار شمارنده را برابر طول آرایه-1 قرار بده،چرا طول آرایه منهای یک؟ چون شماره خانه های آرایه از صفر تا طول آرایه منهای یک است،مثلا یک آرایه با طول چهار ،دارای خانه هایی با شماره های صفر تا 3 است.

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

خب حالا باید متدهایی که نوشتیم را در جایی مناسب خودشون قرار بدیم، برای دکمه های JButton1 وJButton2 خب متدها و دستورات شون رو در جای مناسب که همون در بدنه متدهای jButton1ActionPerformed و jButton2ActionPerformed بود قرار دادیم. خب قرار بود با زدن دکمه open بتوانیم عکس های درون کامپیوتر را انتخاب کنیم.برای این کار به بخش Design مربوط به کلاس MainClass می‌رویم: تصویر(6)

روی آیتم open مربوط به منو برنامه دابل کلیک میکنیم که وارد محل سورس کد آن شویم: تصویر(7)

✔ در تصویر(7) خط 195 تا 198 متد jButton1ActionPerformed مربوط به دکمه jbutton1 است.وقتی شما روی دکمه next کلیک می‌کنید دستورات درون این متد اجرا می‌شود. خط 205 تا 208 مربوط به دکمه jbutton2 است.وقتی شما روی دکمه previous کلیک می‌کنید دستورات درون این متد اجرا می‌شود.

✔ در تصویر(7) خط 200 تا 203 متد jMenuItem1ActionPerformed قرار دارد.چه موقع این متد صدا زده میشه و دستورات درونش اجرا میشه؟ زمانی که شما آیتم open مربوط به منو File را انتخاب کنید یا روش کلیک کنید این متد صدا زده میشه باز چرا؟! چون آیتم open در اصل همون jMenuItem1 است که text ان را open گذاشتیم. حالا کدام متدهایی که نوشتیم را باید در بدنه متد jMenuItem1ActionPerformed قرار بدیم که وقتی روی آیتم open کلیک کردیم اجرا شوند؟ دو متد readImage و handyPlayImage قرار می‌دهیم.چرا؟ ابتدا ما نیاز داریم با زدن دکمه open موجود در منو عکس هامون رو انتخاب کنیم. تصویر(8)

بعد با انتخاب عکس هامون گزینه open که در تصویر(9) به ان اشاره کردیم را انتخاب می‌کنیم.

در نهایت نتیجه به صورت تصویر(10) خواهد بود:

برمی گردیم دوباره به سورس کدهامون،چطور شد که با زدن دکمه Open تونستیم عکس هامون رو بگیریم و در JLabel1 نمایش بدهم؟ تصویر(11) را ببینید.

✔ همان طور که در تصویر(11) مشاهده می‌کنید، در بدنه متد jMenuItem1ActionPerformed متدهای readImage و handyPlayImage را صدا زده ایم. متد readImage کار انتخاب کردن تصاویر را و متد handyPlayImage کار نمایش تصاویر را انجام میدهد.

✔چرا ورودی متد handyPlayImage را 0 قرار دادیم؟ برای این که به اولین خانه آرایه ای که تصاویرمون در آن ذخیره شده است دسرسی پیدا کنیم و اولین عکسمون را نمایش بدهیم.

خب تا اینجا کار انتخاب فایل های تصویری مون و نمایش انها در Jlabel1 را انجام دادیم. همچنین با دکمه های next و previous می‌توانیم عکس ها را جلو یا عقب ببریم. همه چی حل شده به جز یک مورد! کدوم مورد؟ به تصویر(10) توجه کنید! تصاویرمون فیت و مناسب در قاب لیبل نمایش داده نشده است.چرا؟ چون سایز و اندازه هر تصویر با اندازه لیبل ما متفاوت است. تکلیف چیست؟ باید با دستوری مشخص اندازه تصاویری که از کامپیوتر میخوانیم را تنظیم کنیم.چگونه؟ ان شاالله در جلسه بعدی به این مورد می‌پردازیم.

تذکر مهم: تمام جلسات آموزشی پروژه محور برنامه نمایش عکس در جاوا به صورت یک PDF به همراه سورس کد جلسه مربوطه است. تمام سورس کدهای این جلسه آموزشی را میتوانید در سایت www.javapro.ir به آن دسرسی داشته باشید.

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

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

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

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