TextFlow : بررسی Layout های جاوا FX

TextFlow : بررسی Layout های جاوا FX (قسمت هفتم)

مقدمه :

در سلسله مقالات layout ها در جاوا FX به معرفی و بررسی انواع Layout ها در جاوا FX از قبیل HBox ، VBox ، BorderPane ، TilePane ، FlowPane ، StackPane و AnchorePane پرداختیم. حال در ادامه می خواهیم در مورد TextFlow صحبت کنیم. به طور خلاصه باید گفت از این layout معمولا برای قرار دادن نودهایی از جنس Text در کنار هم استفاده می شود. طبق معمول ما از جزئیات صحبت می کنیم اما به خاطر سپاری تک تک آن ها الزامی نیست.

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

TextFlow :

یک layout ویژه برای ایجاد متن های غنی است. زمانی که بخواهیم تعدادی نود Textرا به دنبال هم بیاوریم می توانیم از این layout استفاده کنیم. زمانی که بخواهیم بخشی از متن رنگ متفاوت داشته باشد یا بخواهیم روی بخش خاصی از متن eventهای موس را دریافت کنیم این layout بهترین گزینه است.

TextFlow  تنها از متن و فونت مربوط به هر نود Text استفاده می کند و موقعیت نودها تنها با توجه به عرض و ویژگی alignment خودش مشخص می کند. بر این اساس ممکن است متن یک نود Text بیش از چند خط باشد چرا که عرض یک خط متن برابر با عرض فعلی TextFlow می باشد.

می توان با قراردادن n\ در نودهای Text در TextFlow پاراگراف ایجاد کرد.

در این layout با هر نود دیگری غیر از Text مانند اشیا موجود در متن رفتار می شود. این نودها با سایز pref خود در متن قرار می گیرد.

نادیده گرفتن ویژگی فرزندان  :

در تکمیل صحبت ها ی بالا وقتی نود هایی از جنس Text درون FlowPane قرار می گیرند، حتی اگر ویژگی های زیر در آن ها تعیین شده باشد نادیده گرفته می شود :

  • wrappingWidth :   عرض خطوط در تنظیم شده در نود نادیده گرفته می شود زیرا این مقدار با توجه به عرض فعلی TextFlow تنظیم می شود.
  • X, Y : اگر موقعیت نود text را از پیش مشخص کرده باشید این مقدار در نظر گرفته نمی شود. لوکیشن آن توسط TextFlow به عنوان پدر تعیین می شود.
  • pickOnBounds : مقدار این ویژگی هرچه تنظیم شده باشد به false تغییر می کند. به این دلیل که محتوای یک نود Text ممکن است تقسیم شده و در خطوط متفاوتی قرار گیرد.

یادآوری : زمانی که ویژگی pickOnBounds یک نود مقدار false بگیرد، محاسبات هنگام رخ دادن event موس و یا فراخوانی تابع ()contain برای آن نود بر اساس مرز های آن انجام نمی شود بلکه بر اساس شکل هندسی محتوای آن انجام می شود.

فاصله :

به ایجاد فضای خالی در لبه های layout اصطلاحا padding می گویند. برای تعیین این فاصله از تابعی به نام ()setPadding استفاده می کنیم. این فاصله در محاسبه ی سایز ،TextFlow در نظر گرفته می شود.

علاوه بر مورد بالا دیگر فاصله ای که در این layout قابل تنظیم است فاصله ی بین خطوط می باشد. با تعیین ویژگی lineSpacing توسط تابع ()setLineSpacing می توان این کار را انجام داد.

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

TextFlow محتوا را نمی برد.  در نتیجه هر زمان فضای اختصاص داده شده به  نودهای فرزند توسط TextFlow از سایز pref آن ها کوچک تر باشد. مرز نودهای فرزند از مرز های TextFlow بیرون میزند.

تراز کردن :

با تعیین ویژگی textAlignment می توانیم متن های درون این layout رو تراز کنیم. این ویژگی با تابع ()setTextAlignment قابل تنظیم است.  مقادیر TextAlignment.RIGHT، TextAlignment.LEFT، TextAlignment.CENTER و TextAlignment.JUSTIFY را می توان به عنوان ورودی به این تابع داد.

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

پدر یک نود TextFlow، می تواند سایز آن را بر اساس رنج تغییرات سایزش تغییر دهد. رنج تغییرات سایز TextFlow بدون دخالت برنامه نویس قابل تعیین است. این کار زمانی انجام می شود که  برنامه نویس اقدام به تعیین سایز نکرده باشد و مقدار سایز ها،  مقدار پیش فرض USE_COMPUTED_SIZE باشد.

در این صورت نحوه ی محاسبه ی سایز های minimum، maximum و preferred به صورت زیر است :

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

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

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

مدل دهی :

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

سازنده :

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

توابع setter :

در تکمیل توضیحات قبل در رابطه با تعیین ویژگی در این بخش توابع setter را آورده ایم.

کد :
public class FlowTextTest extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Text text_part1 = new Text("IndexOutOfBound Exception happened in (") ;
        Text text_part2 = new Text("line:32") ;
        text_part2.setFill(Color.BLUE);
        text_part2.setFont(Font.font(null , FontPosture.ITALIC, 11));
        Text text_part3 = new Text(")") ;
        TextFlow textFlow = new TextFlow( text_part1 , text_part2 , text_part3) ;
        textFlow.setTextAlignment(TextAlignment.CENTER) ;
        textFlow.setPadding( new Insets( 20 , 20 , 20 , 20));
        primaryStage.setScene( new Scene( textFlow));
        primaryStage.show();
 }

    public static void main(String[] args) {
        launch(args);
    }
}
تحلیل :

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

  • فاصله بین دو مربع سبز به دلیل تعیین padding ایجاد شده است. با تنظیم این فاصله از چسبیدن متن به گوشه TextFlow جلوگیری می کنید.
  • متن به صورت وسط چین قرار گرفته است.
  • سایز TextFlow را از پیش تعیین نکردیم. مقدار آن بر اساس طول و عرض متن و فاصله از طرفین تعیین شده است.
  • با کاهش عرض صفحه ، عرض خط متن هم کاهش پیدا کرد.

 

ادامه :

 

منبع : oracle.com