آموزش تصویری Visual Basic 2010 - قسمت 2

آموزش تصویری Visual Basic 2010 - قسمت 2

در بخش قبل با ایجاد یک پروژه با محیط ویژوال بیسیک آشنا شدید. در این آموزش با تکمیل کردن پروژه بخش قبل با مفهوم شئ و کاربرد آن نیز آشنا می‌‌شویم. 
هر چیزی که برای ساختن یک برنامه از آن استفاده می‌کنید، شئ نامیده می‌شود. برای مثال در پروژه بخش قبل فرم و کنترل PictureBox دو شئ مختلف هستند.
هر شئ دارای یک سری خصوصیت می‌باشد که با استفاده از آنها می‌توانیم حالت شئ را تعیین کنیم. برای مثال با استفاده از خصوصیت Text شئ فرم می‌توان تیتر فرم را تغییر داد. بعضی از خصوصیات فقط خواندنی هستند مانند خصوصیت Height یک کنترل Combo Box که قابل تغییر نمی‌باشد ولی قابل خواندن است.
در فصل قبل یاد گرفتید که چگونه خصوصیتهای یک فرم را با استفاده از پنجره Properties تنظیم کنید. در این بخش می‌خواهیم این خصوصیتها را با استفاده از کد نویسی تغییر دهیم و بخوانیم.
در ادامه به بررسی یک مثال ساده می‌پردازیم. در انتها این فصل نیز برنامه فصل قبل را مقداری تکمیل می‌کنیم. برای ایجاد یک پروژه جدید روی دکمه New Project کلیک کنید.

مطابق تنظیمات این صفحه یک پروژه تحت Windows به زبان Visual Basic ایجاد می‌شود. نام این پروژه را App2 تعیین کرده‌ایم. روی دکمه OK کلیک کنید.

در این برنامه می‌خواهیم دو کنترل Button بر روی فرم قرار دهیم. روی کنترل Button در جعبه ابزار کلیک کنید.



اکنون باید محل قرارگیری این کنترل را تعیین کنیم. در قسمت مشخص شده توسط کادر قرمز کلیک کنید تا گوشه بالا و سمت چپ این کنترل در این قسمت قرار بگیرد.



مشاهده می‌کنید که یک کنترل Button به صفحه اضافه شده است. می‌خواهیم یک کنترل دیگر نیز به صفحه اضافه کنیم. روی کنترل Button در جعبه ابزار کلیک کنید.



در محل مشخص شده کلیک کنید.



اکنون دو کنترل بر روی فرم قرار دارند. این دو کنترل هر کدام یک شئ هستند و دارای خصوصیاتی هستند که از طریق کدنویسی یا پنجره Properties قابل تنظیم است. اکنون در زمان طراحی برنامه هستیم. در زمان طراحی برنامه مقدار خصوصیات باید از طریق پنجره Properties تعیین شود ولی در زمان اجرای برنامه مقدار خصوصیات یک شئ از طریق کد نویسی خوانده شده یا تغییر داده می‌شود.
در این برنامه می‌خواهیم با کلیک بر روی یک دکمه فرم بزرگ و با کلیک بر روی دکمه دیگر فرم کوچک شود. ابتدا خصوصیات دو کنترل Button را در زمان طراحی تعیین می‌دهیم و سپس با استفاده از کد نویسی با کلیک بر روی هر دکمه مقدار خصوصیت ابعاد فرم را تغییر می‌دهیم تا فرم بزرگ و کوچک شود. 
با استفاده از خصوصیت Text کنترل Button می‌توانید متنی که بر روی کنترل نوشته می‌شود را تغییر دهید. روی مقدار خصوصیت Text دابل کلیک کنید.



در ادامه عبارت Big را وارد می‌کنیم.
روی کنترل Button اول کلیک کنید.



روی مقدار خصوصیت Text دابل کلیک کنید.



عبارت Small را به عنوان مقدار این خصوصیت وارد کرده‌ایم. دکمه Enter صفحه کلید را فشار دهید.
تا اینجا در زمان طراحی فرم مقدار دو خصوصیت کنترل را تغییر دادیم. حال می‌خواهیم وارد قسمت برنامه‌نویسی شده و کد مربوط به تغییر خصوصیات در زمان اجرای برنامه را وارد نمائیم.روی دکمه Small دابل کلیک کنید تا وارد کد کلیک بر روی این دکمه بشویم.

اکنون در قسمت کد رویداد کلیک بر روی دکمه Small قرار داریم. کدی که در این قسمت وارد می‌کنید زمانی اجرا می‌شود که کاربر بر روی دکمه Small کلیک کند. عبارت Button1_Click نشان دهنده رویداد کلیک بر روی کنترل Button1 است با استفاده از خصوصیت Name می‌توانید نام هر کنترل را تغییر دهید. در فصل بعد با رویدادها بیشتر آشنا می‌شوید. روی دکمه Auto Hide کلیک کنید تا صفحه جعبه ابزار مخفی شود.



عبارت Me که نشان دهنده این فرم می‌باشد را تایپ کنید.



کاراکتر . را وارد کنید.



برای جستجوی خصوصیت Width کلید W را فشار دهید. 



اکنون گزینه خصوصیت Width انتخاب شده است. کلید Tab را فشار دهید تا این خصوصیات بر روی صفحه نوشته شود. توجه کنید که اگر در این حالت کلید Space را فشار دهید علاوه بر این که کلمه Width بر روی صفحه نوشته می‌شود یک فاصله نیز بعد از کلمه Width وارد می‌شود.



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



توسط خط دوم مقدار خصوصیت ارتفاع فرم 20 واحد کاهش می‌یابد. روی برگه Form1.vb[Design] کلیک کنید تا وارد پنجره طراحی فرم بشویم.



روی دکمه Big دابل کلیک کنید.



در ادامه کد مربوط به این دکمه را وارد می‌کنیم.
با کلیک بر روی این دکمه ارتفاع و عرض فرم به 20 واحد افزایش می‌یابد و در نتیجه فرم بزرگتر می‌شود. پس در این برنامه با کلیک بر روی دکمه Big فرم بزرگتر شده و با کلیک بر روی دکمه Small فرم کوچکتر می‌شود. برای اجرای برنامه روی دکمه Start کلیک کنید.



روی دکمه Big کلیک کنید تا فرم بزرگ شود.

با کلیک بر روی دکمه Big خصوصیات فرم در زمان اجرای برنامه خوانده شده و سپس تغییر داده شده است. پس این خصوصیات اکنون در زمان اجرا تغییر یافته و فرم بزرگ‌تر شده است.روی دکمه Small کلیک کنید تا فرم کوچک شود.



روی دکمه Close کلیک کنید.



علاوه بر خصوصیات, اشیاء دارای متد نیز هستند. متدها عملیاتی هستند که شئ می‌تواند انجام دهد. متدها به شکل توابع می‌باشند. یک متد می‌تواند داده‌ای را دریافت کند یا داده‌ای را بعنوان خروجی برگرداند. فراخوانی یک متد مانند اشاره به مقدار یک خصوصیت است. ابتدا نام شئ را وارد می‌کنیم سپس یک کاراکتر نقطه و در ادامه نام متد را وارد می‌کنیم.
در اینجا می‌خواهیم به بررسی یک متد ساده بپردازیم. دکمه Enter صفحه کلید را فشار دهید تا در خط بعد دستور مورد نظر را وارد کنیم.



همانطور که بیان شد نام این کنترل Button2 است. برای آنکه بتوانیم خصوصیات یا متدهای این کنترل را بخوانیم، تغییر دهیم یا فراخوانی کنیم باید نام کنترل را وارد کنید. همیشه سعی کنید که نام کنترل را یک نام با معنی انتخاب نمائید تا در کد نویسی دچار اشتباه نشوید. در این مثال چون دو کنترل در فرم وجود دارد کار با آنها ساده است ولی اگر چندین کنترل در یک فرم وجود داشته باشد شناسائی وظیفه هر کنترل مقداری پیچیده می‌شود. همانطور که بیان شد با استفاده از خصوصیت Name در پنجره Properties می‌توانید نام یک کنترل را تغییر دهید.
عبارت Button2 را وارد نمائید.



کاراکتر نقطه را وارد کنید.



حرف H را وارد کنید.



در این لیست دو گروه گزینه وجود دارند. یک گروه مانند Height خصوصیت هستند و یک گروه مانند Hide متد می‌باشند. مشاهده می‌کنید که آیکون این دو گروه متفاوت است. روی گزینه Hide کلیک کنید.



دکمه Enter صفحه کلید را فشار دهید.
بصورت خودکار علامت پرانتز باز و بسته در کنار نام متد نوشته شده است. توسط این متد کنترل دیگر بر روی فرم نمایش داده نمی‌شود.
هر شئ شامل مقداری کد است که شما به آن دسترسی ندارید. برای مثال شئ Button با استفاده از کدهائی که نوشته شده است عمل می‌کند. در این کدها یک یا چندین متغیر و تابع نیز وجود دارد که شما می‌توانید آنها را استفاده کنید تا مقدار یک متغیر موجود در کد شئ را بخوانیدیا مقداردهی کنید یا یک تابع موجود در کد شئ را فراخوانی نمائید.
برای مثال در شئ Button یک متغیر به نام Text وجود دارد که از خارج از شئ قابل مقدار دهی و خواندن است. با استفاده از این متغیر کد داخل شئ Button متن روی کنترل را تعیین می‌کند. به همین ترتیب نیز شئ Button دارای یک تابع به نام Hide است که وظیفه آن عدم نمایش کنترل می‌باشد با استفاده از دستور Button2.Hide تابع hide موجود در شئ Button را فراخوانی می‌کنید.
اصطلاحاً به هر متغیر شئ که به آن دسترسی دارید خصوصیت و هر تابع قابل دسترسی متد گفته می‌شود.

در ادامه این بخش می‌خواهیم برنامه فصل قبل را کاملتر کنیم تا در زمان اجرا کاربر بتواند یک تصویر را انتخاب کند تا در کنترل PictureBox نمایش داده شود.
برای بستن این پروژه منوی File را باز کنید.



روی گزینه Close Project کلیک کنید.



برای ذخیره پروژه روی دکمه Save کلیک کنید.

روی دکمه Save کلیک کنید.



روی گزینه FirstApp کلیک کنید، تا این پروژه باز شود.



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



روی کنترل Button کلیک کنید.



دکمه Escape صفحه کلید را فشار دهید، تا منو بسته شود.
در محل مشخص شده بر روی فرم کلیک کنید.



روی مقدار خصوصیت Text دابل کلیک کنید.



در ادامه عبارت Open را وارد می‌کنیم.
دکمه Enter صفحه کلید را فشار دهید.
برای تغییر نام کنترل PictureBox، روی کنترل PictureBox کلیک کنید. 



روی مقدار خصوصیت (Name) دابل کلیک کنید.



اکنون عبارت PB را وارد کرده‌ایم. دکمه Enter صفحه کلید را فشار دهید.
می‌خواهیم حاشیه این کنترل را تغییر دهیم. این کار توسط خصوصیت Border Style انجام می‌شود.
روی خصوصیت Border Style کلیک کنید.



لیست بازشونده این خصوصیت را باز کنید.

روی گزینه Fixed Single کلیک کنید.



مشاهده می‌کنید که یک خط مشکی در دور کنترل رسم شده است.
در صورتی که تصویری که می‌خواهید دراین کنترل نمایش دهید بزرگتر باشد تمام تصویر نمایش داده نمی‌شود. برای آنکه تعیین کنیم تصویر به چه صورت در کنترل نمایش داده شود از خصوصیت SizeMode استفاده می‌کنیم. 
روی خصوصیت SizeMode کلیک کنید.



لیست باز شونده این خصوصیت را باز کنید.



روی گزینه Stretch Image کلیک کنید، تا تصویر به اندازه کنترل گسترش یابد.



تا کنون از تمامی کنترل‌هایی که استفاده کردیم در زمان اجرا نیز نمایش داده می‌شوند ولی اکنون می‌خواهیم کنترلی روی فرم قرار دهیم که در هنگام اجرای برنامه توسط کاربر قابل رویت نیست. برای اینکه به کاربر اجازه دهید تا یک تصویر را برای نمایش انتخاب کند لازم است که به او قابلیت جستجو و نشان دادن فایل‌های موجود در کامپیوتر را بدهید. کنترلی که به کاربر این اجازه را می‌دهد کنترل OpenfileDialog می‌باشد. ماوس را بر روی Toolbox ببرید.



کنترل OpenfileDialog در گروه Dialogs کنترلها قرار دارد.
روی کنترل OpenfileDialog دابل کلیک کنید تا به فرم اضافه شود.



مشاهده می‌کنید کنترل OpenfileDialog در قسمت پایین صفحه قرار گرفته است. تمامی کنترلهایی که در زمان اجرا توسط کاربر دیده نمی‌شوند در این قسمت قرار می‌گیرند. روی خصوصیت Name کلیک کنید.



عبارت SelFile را بعنوان نام این شیء وارد کرده‌ایم.
روی خصوصیت Filter کلیک کنید.



در ادامه عبارت زیر را به عنوان مقدار خصوصیت فیلتر وارد می‌کنیم ‌تا فقط فایلهای JPGو BMP نمایش داده شوند.
Windows Bitmaps|*.bmp|JPEGFiles|*.JPG‌از خصوصیت Filter جهت تعیین پسوند فایلهای که این کنترل می‌تواند نمایش دهد استفاده می‌شود. برای مثال در اینجا تعیین کرده‌ایم که فقط فایلهای با پسوند BMP و JPG نمایش داده شوند متنی که قبل از علامت | ظاهر می‌شود متن توضیح نوع فایل و متنی که بعد از علامت | می‌آید الگویی است که طبق آن فایل‌ها فیلتر می‌شوند. برای مثال در اینجا دو گزینه باید ساخته شود که در گزینه اول متن Windows Bitmaps نمایش داده می‌شود و با انتخاب آن فقط فایلهایی که دارای پسوند BMP می‌باشند نمایش داده می‌شوند. اکنون رابط گرافیکی یا ظاهر برنامه Picture Viewer طراحی شده است و نوبت به نوشتن کد رسیده است.
Windows Bitmaps|*.bmp|JPEGFiles|*.JPG‌
این کنترل دارای چندین خصوصیت دیگر نیز می‌باشد که در کد نویسی آنها را مقداردهی می‌کنیم.
در اولین کد می‌خواهیم به کاربر اجازه دهیم تا در کامپیوتر خود یک فایل با پسوند BMP یا JPG را انتخاب کند تا در کنترل Picture Box نمایش داده شود. این کد زمانی اجرا می‌شود که کاربرروی دکمه Open کلیک کند. روی دکمه Open دابل کلیک کنید.



در این قسمت ممکن است کد‌های برنامه را متوجه نشوید ولی در فصلهای بعد که با ساختارهای کدنویسی آشنا شدید کاملاً عملیاتهای انجام شده در این فصل را درک خواهید کرد. در ادامه کد برنامه را وارد می‌کنیم.
در زیر می‌توانید این کد را مشاهده کنید.
SelFile.Title = "Select a Picture"
SelFile.FileName = ""
If SelFile.ShowDialog = Windows.Forms.DialogResult.OK Then
PB.Image = Image.FromFile(SelFile.FileName)
End If
در دو خط اول این کد دو خصوصیت کنترل SelFile را مقداردهی کرده‌ایم. توسط خصوصیت Title تیتر پنجره‌ای که توسط آن فایل تصویر را انتخاب می‌کنید تعیین می‌شود. با استفاده از خصوصیت FileName می‌توانید یک نام فایل پیش فرض تعیین کنید.

در خط سوم برنامه، از ساختار شرطی If استفاده شده است. در این ساختار, شرطی وجود دارد که اگر کاربر یک فایل را انتخاب کرد شرط درست بوده و کد داخل ساختار If اجرا می‌شود.



در خط چهارم بیان شده است که تصویر انتخاب شده توسط کنترل OpenFileDialog در Picturebox نمایش داده شود. در فصلها‌ی آینده با نحوه کد‌نویسی برنامه‌ها کاملاً آشنا خواهید شد.



توسط خط آخر نام و آدرس فایل در قسمت تیتر پنجره نمایش داده می‌شود. برای اجرای برنامه روی دکمه Start کلیک کنید.



برنامه اجراء شده است. روی دکمه Open کلیک کنید.



اکنون گزینه Windows BMP انتخاب شده است و فقط فایلهائی با پسوند BMP نمایش داده می‌شوند. در قسمت تیتر پنجره عبارتی که در کد نویسی تعیین کردیم نمایش داده شده است.روی فایل Coffee Bean.bmp دابل کلیک کنید.



مشاهده می‌کنید که تصویر نمایش داده شده و نام و آدرس تصویر نیز در تیتر پنجره نمایان شده است. در این فصل هدف آشنائی و کار با اشیاء، متدها و خصوصیات بود. در فصلهای بعدی به بررسی بیشتر رویدادها، کنترلها، کد نویسی و ... خواهیم پرداخت.

منبع