Làm thế nào để chỉ định một tỷ lệ phần trăm chiều rộng trong JavaFX 2 bằng cách sử dụng FXML?

Question

Tôi đang tìm cách để nói đặt kích thước maxWidth thành 80% trong FXML.

Giống như trong phát triển web.

<VBox fx:id="testVB" prefWidth="600">

Nhưng điều này không:
<VBox fx:id="testVB" prefWidth="80%">

Tôi biết rằng trong Straight JavaFX2 phi fxml bạn có thể tạo insets? Cách tốt nhất để làm điều này bên ngoài mã trong FMXL là gì?

Cảm ơn!

Riley

Answer 1

Tôi không chắc chắn bạn có thể. Bạn cần sử dụng thành phần bố cục GridPane. Trong thành phần này, bạn có thể chỉ định các ràng buộc về hàng và cột, và trong những ràng buộc này, bạn có thể chỉ định chiều rộng là phần trăm. Ví dụ:

<GridPane> 
    <children> 
     <TitledPane text="testGridPane" GridPane.columnIndex="0" GridPane.rowIndex="0" /> 
    </children> 
    <columnConstraints> 
     <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="80.0" prefWidth="100.0" /> 
     <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="100.0" /> 
    </columnConstraints> 
    <rowConstraints> 
     <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> 
    </rowConstraints> 
</GridPane> 

Mã này xác định một GridPane với cột đầu tiên có chiều rộng 80%. TitledPane được đặt trong ô đầu tiên của cột đầu tiên của GridPane và có thể (vì bạn cần đảm bảo rằng các giới hạn chiều rộng của TitledPane khớp với nhu cầu của bạn) chiếm 80% chiều rộng của GridPane.

Xin lưu ý rằng tôi đã xóa tất cả thông tin không liên quan đến câu hỏi của bạn. Nhân tiện, công cụ Scene Builder của Oracle rất hữu ích để xác định bố cục FXML phức tạp.

Answer 2

Bạn có thể mô phỏng nó - ví dụ cơ bản mô phỏng 50% cho hai cols trong HBox. Bạn có thể thêm các khung giả để lấy số ba, v.v.

HBox { 
     VBox { 
      static hgrow : "ALWAYS", 
      Label { 
       text : "Privacy", 
       alignment : "CENTER", 
       styleClass : ["h2", "heading"] 
      } 
     }, 
     VBox { 
      static hgrow : "ALWAYS", 
      Label { 
       text : "Messages", 
       alignment : "CENTER", 
       styleClass : ["h2", "heading"] 
      }, 
      Label {text:""} 
     } 
    } 

Answer 3

Có vẻ như nhiều câu trả lời đã được cung cấp và chúng sẽ hoạt động. Tuy nhiên, có một cách để thiết lập tỷ lệ:

<fx:define> 
    <Screen fx:factory="getPrimary" fx:id="screen" /> 
</fx:define> 

Điều này sẽ giúp bạn phát hiện kích thước của màn hình hiện tại, ứng dụng đang được hiển thị trên. Bây giờ chúng ta có các kích thước màn hình, chúng tôi có thể chơi với nó trong FXML như sau:

<HBox fx:id="hroot" prefHeight="${screen.visualBounds.height}" prefWidth="${screen.visualBounds.width}"> Your FXML elements inside the root... </HBox> 

Lưu ý rằng tôi sử dụng visualBounds, vì điều này sẽ làm cho tôi không gian có sẵn trên màn hình, kể từ khi tôi làm không muốn có một chồng chéo với thanh tác vụ trong Windows chẳng hạn. Đối với các ứng dụng toàn màn hình, bạn sẽ chỉ sử dụng 'giới hạn'.

Bây giờ, để đến mức bạn sử dụng tỷ lệ phần trăm, bạn thực sự có thể chơi với giá trị của prefheight và prefWidth. Bạn có thể đặt các phép tính bên trong $ {}.

tùy ý:

Nếu bạn muốn có tất cả các yếu tố của bạn sử dụng kích thước tương đối, chỉ cần tham khảo với họ, sử dụng ID của họ và chiều rộng hoặc chiều cao bất động sản, và làm cho tính toán của bạn.

<VBox fx:id="VBSidebar" prefWidth="${hroot.width*0.15}" prefHeight="${hroot.height}"> more elements.. </VBox> 

Hy vọng điều này sẽ hữu ích!