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

FlowPane و TilePane : بررسی Layout های جاوا FX (قسمت دوم)

FlowPane و TilePane : بررسی Layout های جاوا FX

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

در ادامه ی مقاله ی ماه قبل که از HBox و VBox گفتیم. در این مقاله می خواهیم در مورد layout های  FlowPane و TilePane صحبت کنیم. ما از جزئیات صحبت می کنیم اما نیاز نیست همه ی آن ها را به خاطر بسپارید.

امیدواریم این مقاله به شما در انتخاب layout مناسب کمک کند.

FlowPane :

این layout نودهای فرزند را در دنباله ای پشت هم قرار می دهد تا جایی که به مرز flowpane برسد. flowpane دو نوع افقی و عمودی دارد. اگر افقی باشد نودها را پشت هم در یک سطر قرار می دهد تا زمانی که به انتهای عرض (مرز حالت افقی) flowpane برسد، سپس این روال برای سطر بعدی تکرار می شود. در صورت عمودی بودن اتفاقی مشابه در ستون ها افتاده، همچنین با رسیدن به انتهای طول (مرز حالت عمودی)، ستون بعدی برای ادامه ی چیدن نودها انتخاب می شود. در انتها باید اشاره کنیم، به صورت پیش فرض جهت flowpane افقی است.

فاصله ها :

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

فاصله ی دیگری که می توان تنظیم کرد فاصله ی بین سطر و ستون هاست. ویژگی vgap و hgap به ترتیب فاصله ی بین ستون ها و سطرها را مشخص می کنند. تنظیم آن ها با فراخوانی توابع setVgap , setHgap  میسر می شود.

تراز کردن :

برای هم تراز کردن سطر ها و ستون ها از ویژگی alignment و تابع setAlignment استفاده می کنیم.مقدار پیش فرض آنPos.TOP_LEFT است. امکان هم تراز کردن نودهای درون سطر و ستون ها وجود دارد. این کار با  تنظیم ویژگی rowVAligment برای حالت افقی و  columnHalignment برای حالت عمودی امکان پذیر است.

جهت:

برای تعیین جهت flowpane از ویژگی orientation استفاده می شود.

این ویژگی هم از طریق سازنده ( constructor ) هم با استفاده از تابع setter قابل مقداردهی است.

ویژگی prefWrapLength  :

این ویژگی در حالت عمودی و افقی به ترتیب ویژگی prefwidth و preflength را مشخص می کند. این ویژگی دقیقا برابر با اندازه ی دنباله ی چیدن نودها نیست. زیرا اندازه ی دنباله به سایز flowpane در لحظه بستگی دارد.

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

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

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

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

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

نکته3 : موارد ذکر شده برای حالت افقی است. دوگانه ( مثلا عرض و طول) همه ی موارد را جایگزین کنیم برای حالت عمودی صدق می کند.

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

flowpane محتوا را نمی برد.

پس اگر فضایی که به نودهای فرزند اختصاص می دهد، از بزرگترین pref سایز بین نود های فرزند کوچکتر باشد، مرز نودهای فرزند از مرز  flowpane خارج می‌شود یا به زبان بهتر مرز flowpane را تا جایی که فضای کافی ایجاد شود جابجا می کنند.

مدل دهی :

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

حالت های خاص :

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

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

در شکل زیر سازنده های FlowPane را آورده ایم، نکاتی  بهتر هست توجهی بکنید :

  • می توان نودهای فرزند را به عنوان ورودی به سازنده داد.
  • با استفاده از سازنده می توان hgap , vgap  مقداردهی کرد، در صورت عدم انجام این کار مقدار آن ها برابر با صفر می شود.
  • در صورت مقدار دهی نکردن  orietation با استفاده از سازنده، مقدار horizetal  به آن داده می شود.

توابع setter :

در این بخش توابع setter مربوط به flowpane را آورده ایم. این توابع برای مقدار دهی ویژگی هایی که تا الان صحبت کردیم لازم هستند. در بخش ” کد و تحلیل آن ”  با کاربرد آن ها بیشتر آَشنا می شوید.

کد و تحلیل :

نتیجه :

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

  • در قدم اول 4 تا button تعریف شده است.
  • برای button1 یک طول مشخص و برای button2 عرض مشخص تعریف شده است.
  • فضای بیرون از کادر سبز در واقع فضایی است که بخاطر تعریف padding ایجاد شده است.
  • فلش بین دو خط قرمز نشان دهنده ی فضای vgap است.
  • فضای درون مستطیل قرمز و بیرون از button1 به دلیل تعریف margin برای آن ایجاد شده است.
  •  به دلیل مقداردهی alignment با CENTER نود ها از وسط هر سطر چیده می شوند. به طور واضح در سطر دو این قضیه پیداست.
  • به دلیل مقدار دهی rowValignment  با مقدار CENETER  نود button2  در وسط ارتفاع فضای خالی اطرافش قرار گرفت.
  • به دلیل مقدار دهی prefWrapLength با 300 دو button اول در سطر اول جا شدند و بقیه به سطر بعد منتقل شدند. اگر سایز صفحه  یا حتی ترتیب نودها زمان مقدار دهی سازنده تغییر کند، با احتمال بالا شاهد نتایج کاملا متفاوتی خواهید بود.

 

TilePane :

در این layout نودهای فرزند درون یک توری (grid) که سایز خانه هایش یکسان است قرار می گیرند. به هر کدام از این خانه ها اصطلاحا tile می گویند. در واقع شبیه سازی از فضای کاشی کاری شده است. مثل flowpane حالت افقی و عمودی دارد. در حالت عمودی/افقی نود ها را درون ستون/ سطر قرار می دهد وقتی به انتهای طول/عرض می رسد، از ستون/سطر بعد ادامه می دهد.

سایز tile  :
  •  اندازه ی همه ی tile ها به صورتی تنظیم می شود که بتواند بزرگترین prefWidth و prefHight در بین نودهای فرزند را در خود جا بدهد. اگر نود جدیدی اضافه شود که  preferred سایزش بیشتر از قبلی ها باشد اندازه tile مجدد محاسبه می شود.
  • اندازه ی tile ها به صورت مستقیم هم قابل تنظیم است.  این کار با مقداردهی ویژگی های preTileHight و prefTileWidth  امکان پذیراست.
سایز  preferred :

باید ویژگی های prefColumns (در حالت افقی)  و prefRows  (در حالت عمودی) مقدار دهی شوند تا سایز preffered مربوط به tilepane تعیین شود. مقدار پیش فرض این ویژگی ها 5 است.  دقت کنید prefRows/prefColumns برای محاسبه ی سایز preferred است و تعداد سطر و ستون را مشخص نمی کند. تعداد سطر و ستون با توجه به اندازه ی واقعی tilepane در لحظه محاسبه می شود.

هم تراز کردن :

برای هم تراز کردن سطر ها و ستون ها از ویژگی alignment و تابع setAlignment استفاده می کنیم.مقدار پیش فرض آنPos.TOP_LEFT است. همچنین هم تراز کردن نودها در tile هایشان با مقدار دهی ویژگی tileAlignment امکان پذیر است.

مقدار پیش فرض آن Pos.CENTER است.

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

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

  1. minimum :
    • عرض : padding های مربوط به چپ و راست + عرض tile
    • طول : padding مربوط به بالا و پایین + ارتفاعی که لازم است همه ی tileها را نمایش بدهد، زمانی که در عرض خاص دسته بندی می شوند + vgap  بین سطر ها
  2. preferred :
    •  عرض: padding های مربوط به چپ و راست + (  prefColumns  * عرض tile )
    •  طول: مثل حالت minimum
  3. maximum :
    • عرض : Double.MAX_VALUE
    •  طول : Double.MAX_VALUE

نکته1 : این مقادیر توسط برنامه نویس با فراخوانی توابع setter مربوطه نیز قابل تنظیم است.
نکته2 : Double.MAX_VALUE  به این معنی است که تمام فضایی که نود پدر در اختیارش قرار می دهد را پر می کند.
نکته3 : موارد ذکر شده برای حالت افقی (horizontal) است.
نکته4 : اگر tilepane از اندازه ی preferred خود کوچکتر شود، نمی تواند همه ی tile ها را درون خود نگه دارد. در نتیجه ی آن محتوا از مرزها بیرون می زند.

سایز فرزندان :
  • tilepane سعی می کند سایز نودهای فرزند را تغییر بدهد تا درون tileها را پر کنند. اگر نود resizable نباشد یا تنظیمات مربوط به سایز اجازه ی تغییر سایز را ندهند، با توجه به مقدار tileAlignment نودها را درون tile تنظیم می کند.
  • tilepane محتوا را نمی برد، یعنی فرزندها را نصف و نیمه نشان نمی دهد. پس اگر preferred سایز نود درون tile جا نشود، از مرزهای tile و در نتیجه از pane بیرون می زند.
فاصله ها :

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

فاصله ی دیگری که می توان تنظیم کرد فاصله ی بین سطر و ستون هاست. ویژگی vgapو hgap به ترتیب فاصله ی بین ستون ها و سطرها را مشخص می کنند. تنظیم آن ها با فراخوانی توابع setVgap , setHap  میسر می شود.

حالت های خاص :

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

  • margin : امکان تعریف فضای خالی اطراف یک نود خاص
  • alignment : تنظیم یک نود درون tile خودش

.

سازنده :

در شکل زیر سازنده های TilePane را آورده ایم، نکاتی تقریبا مشابه FlowPane که بد نیست دقت کنید :

  • می توان نودهای فرزند را به عنوان ورودی به سازنده داد.
  • با استفاده از سازنده می توان hgap , vgap  مقداردهی کرد، در صورت عدم انجام این کار مقدار آن ها برابر با صفر می شود.
  • در صورت مقدار دهی نکردن  orietation با استفاده از سازنده، مقدار horizetal  به آن داده می شود.
  • زمان ساخت TilePane  می توان prefRow/prefColumn را مقدار دهی کرد. در صورت عدم انجام این کار مقدار آن ها 5 در نظر گرفته می شود.
توابع setter :

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

کد و تحلیل :

نتیجه :

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

  • فضای خالی که با فلش به آن اشاره شده است به دلیل تعریف hgap ایجاد شده است.
  • دلیل اینکه تمام item  ها بالا سمت چپ قرار دارند، مقدار دهی tileAlignment با CENTER است.
  • موضوع بعدی که باید دقت کنید، یکسان بودن سایز tile هاست. این سایز به گونه ای است که بزرگترین طول و عرض در بین نودها را خود جای دهد.
  • فضای اطراف button3 به دلیل تعریف  margin برای آن ایجاد شده است.
  • موضوعی که خیلی علاقه مندم دقت کنید. بزرگ بودن اندازه ی button3  نسبت به button4 است. اگر دقت کنید من preferred سایز برای این button تعریف نکردم. کاری که انجام شد برداشتن محدودیت از حداکثر سایز آن بود. این کار باعث شد tilepane سایز آن را تغییر بدهد تا فضای درون tile را پر کند.
  • موضوع آخر، اندازه صفحه به دلیل مقدار دهی prefColumns با عدد 2 است. با تغییر این عدد سایز صفحه و چیدمان نودها  امکان تغییر خواهند داشت.

 

ادامه:

ارسال پاسخ