آموزشبرنامه نویسیجاوامیم تک 14

VBox و HBox : بررسی Layout های جاوا FX (قسمت اول)

VBox و HBox : بررسی Layout های جاوا FX

در این مقاله و مقاله ی ماه های بعد قصد داریم در مورد Layout ( طرح بندی) پنجره ها در جاوا FX صحبت کنیم. ابتدا انواع Layout ها را با ریز جزئیات آنها بررسی کرده، سپس به کاربردهای معمول آنها در جاوا اشاره می کنیم. در نهایت هم مثالی از ترکیب این layout ها برای طراحی یک صفحه در جاوا خواهیم داشت. اگر همه چیز خوب پیش برود نسخه اصلی کد روی سایت GitHub برای دسترسی راحت ­تر منتشر خواهد شد. باید اشاره کنم این مقاله برای افرادی مفید است که آشنایی ابتدایی با جاوا Fx دارند. در این مقاله می خواهیم در مورد layout های  VBox و HBox صحبت کنیم.

بررسی ویژگی Layout های مختلف در جاوا FX (قسمت اول) :

شاید شما مطالب زیادی در مورد layout ها در جاوا خوانده باشید ولی خیلی دقیق جزئیات ویژگی هر یک را بررسی نکرده باشید. دانستن ویژگی ­های هر کدام از آن­ها در انتخاب layout مناسب برای طراحی گرافیک برنامه کمک کننده است.

در هر بخش ما سعی داریم به سوال های زیر پاسخ دهیم :

  • نحوه ی قرار گرفتن node ها در pane به چه صورت ­است ؟
  • فاصله ی node ها از لبه ی ­pane چطور تنظیم می­ شود ؟
  • فاصله ­ی بین node ها چطور تنظیم می­ شود؟
  • تزار کردن ( alignment ) آن­ ها به چه ترتیب است ؟
  • بازه ­­ی تغییر اندازه­ ی pane و تاثیرات تغییر اندازه بر node­های فرزند به چه صورت است ؟

و در نهایت هم ویژگی­ هایی که به­ صورت خاص برای یک node فرزند می ­توان اعمال کرد مورد بررسی قرار می گیرد.

VBox :

نکات :

در این Layout همه ی nodeهای فرزند در آن روی یک ستون عمودی قرار می گیرند.

فاصله ها :

به فاصله ی nodeها از لبه ی pane اصطلاحا padding می گویند. برای این کار از تابعی به نام setPadding استفاده می کنیم. می توانیم میزان فاصله ی node ها از بالا، پایین، چپ و راست pane را تنظیم کنیم.

به فاصله ی بین nodeها اصطلاحا spacing می گویند. برای تنظیم هم می توانیم مقدار آن را به عنوان متغییر ورودی به سازنده بدهیم و هم می توانیم با استفاده از تابعی به نام setSpacing این کار را انجام دهیم.

تراز کردن :

به تراز کردن nodeها اصطلاحا alignment می گویند. با توجه به ویژگی alignment درون کلاس Vbox تنظیم می شود. که مقدار آن به صورت پیش فرض TOP_LEFT است. برای تغییر آن از تابعی به نام setAlignment استفاده می شود.

سایز و تغییرات آن :

VBox ویژگی ای برای تنظیم بازه ی سایز بدون دخالت برنامه نویس دارد. این کار زمانی انجام می شود که مقدار این ویژگی USE_COMPUTED_SIZE باشد. در این صورت نحوه ی مقاله ی سایز های minimum، maximum و preferred به صورت زیر است :

  1. minimum :
    • عرض : padding های مربوط به چپ و راست + برزگترین مینیمم عرض nodeهای فرزند
    • طول : padding مربوط به بالا و پایین + فاصله ی بین nodeهای فرزند + طول مینیمم همه ی node های فرزند
  2. preferred :
    •  عرض: padding های مربوط به چپ و راست + برزگترین عرض مقدم nodeهای فرزند
    •  طول: paddingهای مربوط به بالا و پایین + فاصله ی بین nodeهای فرزند + طول مینیمم همه ی node های فرزند
  3. maximum :
    • عرض : MAX_VALUE
    •  طول : MAX_VALUE

نکته 1 : این مقادیر توسط برنامه نویس با فراخوانی توابع setter  مربوطه قابل هم تنظیم است.

نکته 2 : Double.MAX_VALUE  به این معنی است که تمام فضایی که پدرش در اختیارش قرار می دهد را پر می کند.

اگر VBox از اندازه مقدم بزرگ تر شود، به صورت پیش فرض node های فرزند را در اندازه ی مقدم خودشان نگه می دارد و بقیه ی فضا خالی می ماند. یکی از شرایطی که با این مسئله بر می خورید زمانی است که صفحه ی طراحی شده را fullScreen کنید. راه حلی برای این وضعیت وجود دارد که در بخش بعد به آن اشاره می کنیم.

حالت های خاص :

تا به الان تمام تنظیمات برای تمام node های فرزند به طور یکسان اعمال می شد، اما در VBox 2 قید دیگری وجود دارد که می توان آن را برای node های فرزند به صورت خاص اعمال کرد.

  • margin : امکان تعربف فضای خالی اطراف یک node خاص
  • vgrow : تعیین اولیت رشد عمودی برای فرزندان برای پر کردن فضای خالی VBox . فضای خالی اشاره به موضوع بخش قبل دارد.

نکته 1 :  اگر برای چند node فرزند اولویت یکسان تعریف شده باشد،  فضای خالی بین آن ها به صورت مساوی تقسیم می شود.

نکته 2 : فراموش نکنید بیشترین مقداری که یک node بزرگ می شود، به اندازه ی سایز ماکسیمم آن است. پس برای اینکه node مورد نظر شما تمام فضای خالی را پر کند، سایز ماکسیمم را به  MAX_VALUE تغییر دهید.

با نوع و نحوه تنظیم آن ها در ادامه آشنا می شویم .

سازنده  :

در تصویر زیر انواع سازنده های VBox را مشاهده می کنید. نکاتی که خوب هست دقت کنید.

  • زمان ساخت VBox می توانید spacing را مشخص کنید. در صورت عدم انجام این کار مقدار آن صفر در نظر گرفته می شود تا هنگامی که با استفاده از تابع مربوطه مقدار را تغییر دهید.
  • می توانید nodeهای فرزند ها را هم به عنوان ورودی به سازنده بدهید.
  • به مقدار پیش فرض alignment هم اشاره شده کهTOP_LEFT است .

توابع setter :

در شکل زیر نام تمام توابع setter مورد نیاز را به همراه  نوع ورودی و مقدار بازگشتی آورده ایم.

کد و تحلیل آن :

نتیجه :

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

نکاتی که باید دقت کنید :

  • تغییر سایز دکمه ی ” to khafani 🙂 ” بعد از تغییر سایز پنجره و ثابت ماندن اندازه ی سایر دکمه ها و فاصله های عمودی شکل
  • فاصله ی بین دکمه ها، به دلیل تعریف spacing
  • فاصله ی دکمه ها از لبه ی Vbox، به دلیل تعریف padding
  • بیشتر بودن فاصله ی دکمه ی “VBOX test” نسبت به بقیه ی دکمه به دلیل تعریف margin

HBox :

خبر خوشحال کننده شباهت کامل HBox به VBox  است. فقط باید حالت های عمودی به افقی، طول به عرض و بر عکس تبدیل شود.

 

ادامه :

1 دیدگاه

ارسال پاسخ