برنامه نویسی یاد نگیرید! جلسه ی پنجم

به پنجمین جلسه از مجموعه ی “برنامه نویسی یاد نگیرید” خوش آمدید. پیش از این خواندید و یاد گرفتید که چگونه می توان مقدار لحظه ای یک متغیر را در یک شی مبتنی بر نوشته یعنی Simple Text نمایش داد و اما در این جلسه می خواهیم کار با اشیاء پیچیده تر و ویژگی هایشان را یاد بگیریم، پس علاوه بر منطق برنامه نویسی، نیاز به هنر زیبایی شناسی هم دارید!


موارد آموزشی این جلسه :

  • ایجاد کلید
  • فرمان نمایش شی Text Entry و کلید دوم
  • دستور نمایش Simple Text و کلید سوم
  • دستور پاک کردن مقدار متغیر

تهیه آموزش ویدیویی و فایل تمرین - ۱۵۰۰۰ تومان  پادکست آموزشی جلسه پنجم 

پسورد : s5d*4cx886#


 

ایجاد کلید

یکی از اصلی ترین ابزار هایی که در تولید اپلیکیشن به کار می رود، کلید ها هستند. تقریبا ۹۰% رابط کاربری و تجربه کاربری یک اپلیکیشن، مبتنی بر کلید هایی مانند کلید Start در ویندوز، کلید سرچ در گوگل، کلید ارسال پیام در تلگرام و… می باشد.

در منوی Tools، دومین ابزاری که پیش رو دارید، گزینه ی Push Button یعنی همان کلیدی است که معرفی کردیم. این شی را در محیط اپلیکیشن خود ایجاد کنید تا پنجره ی تنظیماتش باز شود.

در طراحی رابط کاربری، به منظور ارائه ی درک بهتر به کاربر اپلیکیشن، نوشتن نام های درست در ابزار های مختلف، یکی از اصلی ترین اصول است؛ یعنی در صفحه ی تنظیمات Push Button و تب General، گزینه ی محوری به نام Caption وجود دارد که متن داخل کلید را تعیین می کند. مقدار Caption می تواند ثابت یا متغیر باشد و بسته به نوع کارکرد پروژه، این مقدار وارد می شود که برای درک بهتر از کارکرد متغیر ها در دیگر اشیاء می توانید به جلسه ی چهارم این آموزش مراجعه کنید.

گزینه ی دیگری که در تب General به چشم می خورد و از اهمیت بالایی برخوردار است، Short Cut Key است که در تجربه ی کاربری بسیار کارآمد است؛ با انتخاب کلید های میانبر کیبورد، کلید شما علاوه بر قابلیت کلیک پذیری، امکان کارکرد به واسطه ی کلید های میانبر کیبورد را دارد. تنها کافیست با فوکوس دربخش Short Cut Key، کلید یا کلید های ترکیبی مورد نظر را انتخاب یا وارد کنید.

ایجاد کلید در NeoBook

در صورتی که تجربه ای در زمینه ی طراحی رابط کاربری کلید داشته باشید، تب Style برایتان چندان غریبه نخواهد بود. در اینجا می توانید عناصر بصری کلید را تعیین کنید که در این جلسه تنها به معرفی کلی بخش های تب Style می پردازیم.

در بخش Button Images با گزینه های زیادی رو به رو خواهید شد که هر کدام را توضیح خواهم داد :

  • None یا Plain button : در صورت فعال بودن این گزینه، کلید شما هیچ تصویری ندارد و تنها مبتنی بر نوشته است.
  • Use an image from the Button Library : در کتابخانه ی پیشفرض رابط کاربری NeoBook و ویندوز، تصاویر پیشفرضی برای معنا بخشیدن به کلید گنجانده شده است که چندان هم جذاب نیستند و در صورت استفاده، ظاهر کلید شما به نرم افزارهای دهه ۹۰ میلادی شباهت پیدا می کند اما اگر حرفه ای نیستید، می توانید برای شروع کار از این تصاویر استفاده کنید.
  • Use individual images : بعد از انتخاب این گزینه، با سه فضای خالی برای تصاویر رو به رو می شوید؛ در تعریف قدیمی و ساده تر رابط کاربری، هر کلید سه حالت کلی Highlight ،Up و Down دارد. حالت Up برای زمانی است که کلید هیچ حالت خاصی ندارد و موس نه روی آن قرار دارد و نه کلیک شده است. حالت Highlight برای زمانی است که نشانگر موس بر روی کلید قرار دارد اما کلیک نشده است و حالت Down برای زمانی است که نشانگر بر روی کلید است و کلید توسط کلیک کاربر، فشرده شده است. بنابراین در صورتی که گزینه ی Use individual images را انتخاب کنید، باید سه تصویر برای سه حالت مختلف کلیدتان انتخاب کنید، مانند تصویر زیر :

ویژگی های کلید در NeoBook

گزینه ی بعدی در تب Style، محل قرار گیری Caption نسبت به تصویر کلید است؛ در بخش Caption placement، گزینه ی Next to image، نوشته ی کلید را بر روی تصویر قرار می دهد. گزینه ی On top of image نیز باعث می شود که نوشته ی کلید، در قسمت بالای تصویر قرار بگیرد.

آخرین بخش کاربردی در تب Style، بخش Button Style است که دیگر ویژگی های ظاهری کلید را تعیین می کند :

  • Use Windows theme : اگر با نسخه های مختلف ویندوز کار کرده باشید، متوجه تغییرات ظاهری رابط کاربری بخصوص کلید ها شده اید بنابراین اگر این گزینه فعال باشد، دیگر برای طراحی ظاهر کلیدتان لازم نیست به خود زحمت بدهید و ظاهر کلید را به نسخه های متفاوت ویندوز می سپارید و به این ترتیب گزینه های بعدی این بخش به صورت خودکار غیر فعال می شود.
  • Hollow/Transparent : با فعال کردن این گزینه، رنگ پس زمینه ی کلید شما محو یا شفاف می شود.
  • No Border : با فعال کردن این گزینه، خط دور کلید حذف می شود.
  • Depress effect : اگر از بخش Preview بر روی کلید خود کلیک کنید، متوجه افکت فرو رفتن پس از کلیک شدن می شوید بنابراین اگر مقدار Bevel width را کم کنید و تیک گزینه ی Depress effect را بردارید، این افکت هم غیر فعال می شود.

 

فرمان نمایش شی Text Entry و کلید دوم

برای اجرای فرمان در ابتدا باید گروه اشیاء دوم را بسازیم بنابراین براساس آموزش جلسه ی قبل، یک Text Entry ایجاد کنید و تنظیمات لازم را اعمال کنید و پیش از نهایی کردن ویژگی های این شی، تیک Visible را بردارید تا شی شما مخفی شود. سپس کلید دوم را نیز ایجاد کنید و آن را نیز با برداشتن تیک Visible، مخفی کنید.

در پنجره ی تنظیمات Push Button یا کلید اول خود، وارد تب Actions شوید و از لیست دستورات پیشفرض وارد بخش Objects شوید. برای نمایش هر شی که از حالت Visible خارج شده است، باید از دستور ShowObject استفاده کرد بنابراین با دوبار کلیک بر روی این دستور، آن را فراخوان کنید و وارد تنظیمات دستور شوید.

همانطور که در پنجره ی تنظیمات دستور ShowObject می بینید، ابتدا باید نام شئی که می خواهید دیده شود را به این دستور نسبت دهید. سپس دو گزینه ی اختیاری برای به نمایش در آمدن شی وجود دارد :

۱- Display Effect : افکتی که می خواهید به هنگام ظاهر شدن شی، همراه آن دیده شود.

۲- Speed : سرعت اجرای انیمیشن ظاهر شدن شی می باشد.

پس خروجی نهایی این دستور به شکل زیر است :

ShowObject "TextEntry1" "Fade" "1"

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

سپس دستور مخفی کردن کلید اول باید اجرا شود بنابراین متضاد دستور ظاهر سازی را استفاده خواهیم کرد یعنی HideObject. این دستور نیز مانند ShowObject می باشد بنابراین نام کلید اول که خود در حال اجرای دستورات شما می باشد را در دستور HideObject بنویسید.

HideObject "PushButton1" "Fade" "1"

 

دستور نمایش Simple Text و کلید سوم

در اینجا نیز باید پیش از نوشتن دستور کلید دوم، اشیاء مورد نظر را ایجاد کنید بنابراین یک SimpleText ایجاد کنید و متغیر شی TextEntry را فراخوان کنید (مانند آموزش جلسه ی قبل). سپس کلید سوم را نیز ایجاد کنید و هر دو شی جدید را از حالت Visible خارج کنید.

همانند پاراگراف قبلی، دستور ظاهرسازی اشیاء جدید را در بخش Actions کلید دوم بنویسید و بعد از آن دستور مخفی سازی کلید دوم را بنویسید. به شکل زیر :

ShowObject "SimpleText1" "Fade" "1"

ShowObject "PushButton3" "Fade" "1"

HideObject "PushButton2" "Fade" "1"

 

دستور پاک کردن مقدار متغیر

در هر اپلیکیشن ممکن است که نیاز به پاک کردن مقدار متغیر های مختلفی باشد؛ به طور مثال یک فرم ثبت نام را در نظر بگیرید که با فشردن یک کلید کل فیلد های آن پاک سازی می شود یا فیلد پسورد که با اشتباه وارد کردن مقدار و نمایش ارور، مقدار قبلی پاک می شود.

پاک کردن مقدار متغیر ها، به کاهش مصرف رم اپلیکیشن نیز کمک می کند، بنابراین در بخش دستورات کلید سوم، وارد بخش Variables شوید و دستور ClearVariables را فراخوان کنید تا با پنجره ی تنظیمات این دستور مطابق تصویر زیر باز شود :

پاک کردن مقدار متغیر در NeoBook

با خالی گذاشتن فیلد این دستور، مقدار تمام متغیر ها پاک می شود اما می توانید نام متغیر یا متغیر ها را به صورت تکی بنویسید تا تنها مقدار متغیر های مورد نظر شما پاک شود.

 

تا به حال چه ایده های جذابی برای ساخت اپلیکیشن به ذهنتان رسیده است؟ رویای غیر ممکنی در سر دارید؟ پس برنامه نویسی یاد گرفتن، شایسته ی شماست!


تهیه آموزش ویدیویی و فایل تمرین - ۱۵۰۰۰ تومان  پادکست آموزشی جلسه پنجم 

پسورد : s5d*4cx886#


 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Share via