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

BorderPane : بررسی Layout های جاوا FX (قسمت پنجم)

BorderPane : بررسی Layout های جاوا FX
مقدمه :

در ادامه ی سلسله مقالات layout ها در جاوا fx در این مقاله می خواهیم در مورد BorderPane صحبت کنیم. به طور خلاصه باید گفت از این layout معمولا برای قرار دادن نودهای فرزند در پنج موقعیت مشخص استفاده می شود . طبق معمول ما از جزئیات صحبت می کنیم اما به خاطر سپاری تک تک آن ها الزامی نیست. امیدواریم این مقاله به شما در انتخاب layout مناسب کمک کند.

مقالات گذشته:

BorderPane :

BorderPane معمولا به عنوان layout پایه انتخاب می شود.

در این layout نودهای فرزند تنها در پنج موقعیت بالا، پایین، چپ، راست و مرکز  قرار می گیرند. پس برای افزودن یک نود به آن، لازم است موقعیت نود را مشخص کنیم. بعلاوه باید دقت کنیم، هر کدام از موقعیت های نام برده در borderpane می تواند خالی باشد.

فاصله :

به تنظیم فاصله ی نودها از لبه ی layout اصطلاحا padding می گویند.

برای این کار از تابعی به نام setPadding استفاده می کنیم. با استفاده از این تابع می توانیم مشخص کنیم نود های فرزند با چه فاصله ای از لبه ی layout درون آن قرار بگیرند. این فاصله برای همه ی نودهای فرزند layout اعمال می شود.

سایز فرزندان :

از نظر من این بخش جز مهم ترین بخش های این مقاله است.

به نکاتی که در ادامه آورده شده دقت کنید:

نکته 1 :  نودهایی که در موقعیت بالا و پایین قرار می گیرند، به اندازه ای تغییر سایز می دهند که طول آنها برابر با طول preferred خودشان و عرض آن ها برابر با عرض borderpane شود.

نکته 2 :  نودهایی که در موقعیت های چپ و راست قرار می گیرند، به اندازه ای تغییر سایز می دهند که عرض آنها برابر با عرض preferred خودشان و طول آن ها به اندازه ی فضای موجود بین نودهای بالا و پایین شود .

نکته 3 :  نود مرکزی تا جایی تغییر سایز می دهد که همه ی فضای خالی باقی مانده در مرکز borderpane را پر کند.

نکته 4 : borderpane محتوا را نمی برد. پس اگر فضایی که به نودهای فرزند اختصاص می دهد، از سایز minimum آنها نیز کوچکتر باشد، مرز نودهای فرزند از مرز  borderpane خارج میشود.

تراز کردن :

در صورتی که رنج تغییر سایز  هر نود این اجازه را به آن نود ندهد تا فضای اختصاص داده شده به آن را بر اساس توضیحات تیتر قبل پر کند، با توجه به alignment که به صورت پیش فرض بر اساس موقعیتش به آن اختصاص داده شده است تراز می شود. این aligment های پیش فرض به صورت زیر است :

بالا : Pos.TOP_LEFT
پایین : Pos.BOTTOM_LEFT
چپ: Pos.TOP_LEFT
راست : Pos.TOP_RIGHT
مرکز : Pos.CENTER

با مطالعه بخش حالت های خاص با نحوه ی تغییر حالت پیش فرض aligment ها آشنا می شوید.

رنج تغییرات سایز:

از آن جایی که اصولا borderpane به عنوان Layout پایه استفاده می شود، اصولا سایز این layout با scene یکی می شود. در صورتی که سایز scene از پیش تعیین نشده باشد، سایز scene با سایز preferred این  layout یکی می شود. حال اگر این layout پدری غیر از scene داشته باشد می تواند سایز آن را با توجه به رنج تغییراتش تغییر دهد.

رنج تغییرات سایز بدون دخالت برنامه نویس قابل تعیین است. این کار زمانی انجام می شود که مقدار سایز ها،  مقدار پیش فرض USE_COMPUTED_SIZE باشد. در این صورت نحوه ی محاسبه ی سایز های minimum، maximum و preferred به صورت زیر است :

  1. minimum :
    • عرض : فاصله های چپ و راست + عرض مورد نیاز برای نمایش نودهای چپ و راست با عرض preferred آن ها +  عرض مورد نیاز برای نمایش نودهای بالا، پایین و مرکز با حداقل عرض minimum
    • طول : فاصله های بالا و پایین + طول مورد نیاز برای نمایش نودهای بالا و پایین با ارتفاع preferred آن ها +  ارتفاع مورد نیاز برای نمایش نودهای چپ، راست و مرکز با حداقل ارتفاع minimum
  2. preferred :
    •  عرض: فاصله های چپ و راست +  عرض مورد نیاز برای نمایش نودهای بالا، پایین، چپ، راست و مرکز با حداقل عرض preferred  آن ها
    •  طول: فاصله های بالا و پایین + طول مورد نیاز برای نمایش نودهای بالا، پایین، چپ، راست و مرکز با حداقل طول preferred  آن ها
  3. maximum :
    • عرض : Double.MAX_VALUE
    •  طول : Double.MAX_VALUE

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

نکته 2: Double.MAX_VALUE  به معنی بدون محدودیت است. اگر سایز maximum بدون محدودیت باشد، تمام فضایی که نود پدر در اختیارش قرار می دهد را پر می کند.

مدل دهی :

پس زمینه  و حاشیه (border) در این layout،  با استفاده از CSS قابل طراحی هستند.

حالت های خاص :

در borderpane دو قید وجود دارد که می توان آن ها را به یک نود به صورت خاص اعمال کرد.

  • margin : امکان تعریف فضای خالی اطراف یک نود خاص
  • alignment :  تراز کردن جداگانه ی یک نود درون borderpane
سازنده :

در شکل زیر سازنده های BorderPane را آورده ایم.

توابع setter :

در این بخش توابع setter که برای تعیین ویژگی های گفته شده و مکان نود ها لازم هستند، آورده شده است. برای درک بهتر کاربرد آن ها دنبال کردن بخش های “کد” و “تحلیل ” به شدت توصیه می شود.

کد :

 تحلیل: 

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

  • فاصله ی نود ها از مربع قرمز( در شکل سمت چپ) به اندازه ی مقدار padding تعیین شده در کد می باشد.
  • فاصله ی نود آبی از مربع سبز دورش به اندازه margin تعریف شده برای این نود خاص می باشد.
  • دقت کنید اندازه طول نود های بالا و پایین برابر با مقدار pref آن ها  و اندازه ی عرض آنها برابر با عرض borderpane شده است.
  • برای نود سمت چپ عرض برابر مقدار pref آن و طول برابر با فاصله ی موجود بین دو نود بالا و پایین شده است.
  • برای نود سمت راست، به دلیل مشخص کردن حداکثر سایز نود، اندازه نود از سایز حداکثر بزرگتر نشده است. از طرفی بزرگترین اندازه ی نود فضای اختصاص داده شده به آن ( فضای بین نود های بالا و پایین) را پر نکرده است پس بر اساس aligment تعریف شده برایش در کد تراز شده است.
  • نکته ای که در تفاوت نود سمت راست و چپ می توان گفت این است که در صورتی که خطوط 16-18 از کد کامنت شود، نود سمت راست به مانند سمت چپ در pane قرار می گیرد.
  • در نهایت نود مرکزی همه ی فضای خالی مانده را پر کرد.
  • همه ی موارد بالا از نکاتی که پیش تر گفتیم پیروی می کنند. برای درک بهتر موارد بالا به اندازه ی borderpane و نودها در کد دقت کنید.
  • به عنوان مورد آخر، با اجرای خط 30ام کد اندازه طول و عرض scene چاپ می شود. همان طور که پیش تر گفتیم، مقادیر چاپ شده با سایز pref تعریف شده برای boderpane یکی است.

 

 

 

 

 

 

ادامه :

ارسال پاسخ