توضیحات پیشنهادی نظرات اشتراک
تبلیغات

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

در اکثر برنامه‌ها و بازی‌هایی موجود، می‌توان با استفاده از کیبورد، چیزی را در قسمتی از اپلیکیشن خود تایپ کرد. برای مثال در پیام‌رسان‌ها، متنی را نوشته و سپس این متن به هنگام نوشته شدن روی صفحه هم نمایش داده می‌شود و امکاناتی از قبیل حذف و … را نیز دارا می‌باشد و از آنها با نام‌های TextBox یا EditText و … در فریمورک‌های برنامه‌نویسی مختلفی یاد می‌شود.

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

در تمامی فریمورک‌های موجود، اصول زیر برای یک چنین کامپوننتی صادق هستند:

  • تایپ حروف فشرده شده در کیبورد به صورت رئال تایم
  • وجود یک مکان‌نما برای اینکه بدانیم در کجای نوشته قرار داریم
  • امکان تغییر موقعیت مکان‌نما از انتهای نوشته به ابتدا، وسط و …
  • امکان پاک کردن حرف به حرف از جایی که مکان‌نما در آن قرار دارد
  • امکان انتخاب کل متن نوشته شده یا قسمتی از متن نوشته شده + پاک کردن آن
  • و …

شروع به کار

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

بنابراین قبل از توضیحات لازم، کد زیر را در نظر بگیرید:

شرح کد:

  • داخل متد setup، سایز دلخواهی برای صفحه در نظر گرفته‌‎ایم و چیز مهمی نیست.
  • داخل متد draw:
    1. ابتدا کل محتوای صفحه را با تنظیم بکگراند سفید نابود می‌کنیم.
    2. رنگ ترسیم را سیاه در نظر میگیریم.
    3. متن دلخواه Write Any Text را در نقطه‌ای ترسیم می‌کنیم.
    4. متن موجود در متغیر result را زیر متن قبلی ترسیم می‌کنیم؛ اما متغیر result چیست؟!
      این متغیر متنی، متن تایپ شده را دربرخواهد گرفت.
  • داخل متد keyPressed که برای زمان فشرده شدن کلیدی اجرا می‌شود، شرطر نوشته‌ایم که:
    • اگر کلید فشرده شده، برابر کلید Backspace بود، آخرین حرف موجود در متغیر result را حذف کن.
    • اگر کلید دیگری بود، آن حرف کلید را به متغیر result اضافه کن. بنابراین در فریم‌های بعدی، داخل draw ترسیم خواهد شد.

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

البته به کد جالب زیر هم توجه داشته باشید که تا حدودی برخی از قابلیت‌های یک چنین کامپوننتی را درون یک کلاس مجزا پیاده کرده است:

استفاده از کتابخانه ControlP5

برای ساخت انواع مختلف کنترل‌های GUI (رابط کاربری گرافیکی) از قبیل دکمه‌ها و تکست‌باکس‌ها و …، می‌توانید از کتابخانه‌ی ControlP5 استفاده کنید. (لینک توضیحات + مثال‌ها)

کانال تلگرام فول کده

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

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک‌گذاری اطلاعات در هر زمینه‌ای
برنامه‌نویس فول استک

پاسخ دهید

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

نظرات ثبت شده بدون دیدگاه