Javafx-旋转节点以在手持设备上以横向/纵向显示

Question

The javafx application I am developing will eventually be running on a handheld device with 800x480 resolution. The application will typically be running in portrait mode, but for some features (eg displaying charts and tables), it will need to switch to landscape mode to better display the data.

My question is, is there a straight forward way to operate with nodes that are rotated by multiples of 90 degrees?

I can rotate the table by calling setRotate(), although this introduces several new issues:

To resize column widths when rotated, the user has to drag the column dividers left to right (orthogonal to the row of headers), The table still expands its width/height to the size of its parent, although this doesn't work as well when rotated -90 degrees (or other multiples of 90).

The other constraint is that the chart content is contained in the center of a BorderPane, where the top and bottom of the BorderPane contain toolbars, which prevents rotating the entire scene.

Here is my SSCCE; please correct me if there are any problems with the code below.

    import javafx.application.Application;
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.control.TableColumn;
    import javafx.scene.control.TableView;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.Pane;
    import javafx.scene.layout.VBox;
    import javafx.stage.Stage;

    public class TablePanelTrial extends Application {

        BorderPane root = new BorderPane();
        private boolean isRotated=false;

        public static void main(String[] args) {
            launch(args);
        }

        @Override
        public void start(final Stage primaryStage) {
            primaryStage.setTitle("Table Panel Trial");

            final TablePanel tp = new TablePanel();

            Button btnRotate = new Button("Rotate");
            btnRotate.setOnAction(new EventHandler() {
                @Override
                public void handle(ActionEvent event) { 
                    double r = -90;        
                    if(isRotated){
                        r=0;
                        isRotated = !isRotated;
                    }
                    else{
                        r=-90;
                        tp.tv.setMinHeight(200);
                        isRotated = !isRotated;
                    }
                    tp.rotate(r);
                }
            });        

            root.setTop(btnRotate);
            root.setCenter(tp.getVB());
            primaryStage.setScene(new Scene(root, 480, 800));
            primaryStage.show();
        }  

        class TablePanel{
            private VBox vbox = new VBox();
            private TableView tv = new TableView();
            private String[] labelVal = {"Column 1", "Element", "Difference", "File Name", "Report Number"};

            public TablePanel(){
                TableColumn column1 = new TableColumn(labelVal[0]);
                TableColumn column2 = new TableColumn(labelVal[1]);
                TableColumn column3 = new TableColumn(labelVal[2]);
                TableColumn column4 = new TableColumn(labelVal[3]);
                TableColumn column5 = new TableColumn(labelVal[4]);
                tv.getColumns().addAll(column1, column2, column3, column4,column5);
                vbox.getChildren().add(tv);
                tv.setPrefHeight(2000);
            }

            public Pane getVB(){
                return vbox;
            }

            public void rotate(double r){
                vbox.setRotate(r);
            }
        }
    }
    

Answer 1

Android does not perform a rotate function when the device goes to landscape mode, I think. One has to redraw the layout again to display it. With JavaFX, what you can do is add a Listener to the scene to listen for a change in width since that's what basically happens. You can do it like this most probably:

scene.widthProperty().addListener((observable, oldValue, newValue) -> {
         ....initialize the changes to layout here....
    );
});

May not be the best solution but I guess its something.