Tải bản đầy đủ - 0 (trang)
1-15. Organizing UI with Split Views

1-15. Organizing UI with Split Views

Tải bản đầy đủ - 0trang

CHAPTER 1  JAVAFX FUNDAMENTALS



.text("Left " + i)

.translateX(20)

.fill(Color.BLUE)

.font(Font.font(null, FontWeight.BOLD, 20))

.build();

rowBox.getChildren().add(leftText);

leftArea.getChildren().add(rowBox);

}

leftArea.setAlignment(Pos.CENTER);

// Upper and lower split pane

SplitPane splitPane2 = new SplitPane();

splitPane2.setOrientation(Orientation.VERTICAL);

splitPane2.prefWidthProperty().bind(scene.widthProperty());

splitPane2.prefHeightProperty().bind(scene.heightProperty());

HBox centerArea = new HBox();

InnerShadow iShadow = InnerShadowBuilder.create()

.offsetX(3.5f)

.offsetY(3.5f)

.build();

final Text upperRight = TextBuilder.create()

.text("Upper Right")

.x(100)

.y(50)

.effect(iShadow)

.fill(Color.LIME)

.font(Font.font(null, FontWeight.BOLD, 35))

.translateY(50)

.build();

centerArea.getChildren().add(upperRight);

HBox rightArea = new HBox();

final Text lowerRight = TextBuilder.create()

.text("Lower Right")

.x(100)

.y(50)

.effect(iShadow)

.fill(Color.RED)

.font(Font.font(null, FontWeight.BOLD, 35))

.translateY(50)

.build();

rightArea.getChildren().add(lowerRight);

splitPane2.getItems().add(centerArea);

splitPane2.getItems().add(rightArea);

// add left area

splitPane.getItems().add(leftArea);



58



CHAPTER 1  JAVAFX FUNDAMENTALS



// add right area

splitPane.getItems().add(splitPane2);

// evenly position divider

ObservableList dividers = splitPane.getDividers();

for (int i = 0; i < dividers.size(); i++) {

dividers.get(i).setPosition((i + 1.0) / 3);

}

HBox hbox = new HBox();

hbox.getChildren().add(splitPane);

root.getChildren().add(hbox);

Figure 1-21 depicts the application using split pane controls.



Figure 1-21. Split views



How It Works

If you’ve ever seen a simple RSS reader or the Javadocs, you’ll notice that the screen is divided into

sections with dividers that allow the user to adjust. In this recipe, three areas are on the left, upper right,

and lower right.

I begin by creating a SplitPane that divides the left from the right area of the scene. Then I bind its

width and height properties to the scene so the areas will take up the available space as the user resizes

the Stage. Next I create a VBox layout control representing the left area. In the VBox (leftArea), I loop to

generate a bunch of Text nodes. Next is creating the right side of the split pane. The following code

snippet allows the split pane control (SplitPane) to divide horizontally:

SplitPane splitPane = new SplitPane();

splitPane.prefWidthProperty().bind(scene.widthProperty());

splitPane.prefHeightProperty().bind(scene.heightProperty());



59



CHAPTER 1  JAVAFX FUNDAMENTALS



Now we create the SplitPane to divide the area vertically forming the upper-right and lower-right

region. Shown here is the code used to split a window region vertically:

// Upper and lower split pane

SplitPane splitPane2 = new SplitPane();

splitPane2.setOrientation(Orientation.VERTICAL);

At last we assemble the split panes and adjust the dividers to be positioned so that the screen real

estate is divided evenly. The following code assembles the split panes and iterates through the list of

dividers to update their positions:

splitPane.getItems().add(splitPane2);

// evenly position divider

ObservableList dividers = splitPane.getDividers();

for (int i = 0; i < dividers.size(); i++) {

dividers.get(i).setPosition((i + 1.0) / 3);

}

HBox hbox = new HBox();

hbox.getChildren().add(splitPane);

root.getChildren().add(hbox);



1-16. Adding Tabs to the UI

Problem

You want to create a GUI application with tabs.



Solution

Use JavaFX’s tab and tab pane control. The tab (javafx.scene.control.Tab) and tab pane control

(javafx.scene.control.TabPane) classes allow you to place graph nodes in individual tabs.

The following code example creates a simple application having menu options that allow the user to

choose a tab orientation. The available tab orientations are top, bottom, left, and right.

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("Chapter 1-16 Adding Tabs to a UI");

Group root = new Group();

Scene scene = new Scene(root, 400, 250, Color.WHITE);

TabPane tabPane = new TabPane();

MenuBar menuBar = new MenuBar();

EventHandler action = changeTabPlacement(tabPane);

Menu menu = new Menu("Tab Side");

MenuItem left = new MenuItem("Left");



60



CHAPTER 1  JAVAFX FUNDAMENTALS



left.setOnAction(action);

menu.getItems().add(left);

MenuItem right = new MenuItem("Right");

right.setOnAction(action);

menu.getItems().add(right);

MenuItem top = new MenuItem("Top");

top.setOnAction(action);

menu.getItems().add(top);

MenuItem bottom = new MenuItem("Bottom");

bottom.setOnAction(action);

menu.getItems().add(bottom);

menuBar.getMenus().add(menu);

BorderPane borderPane = new BorderPane();

// generate 10 tabs

for (int i = 0; i < 10; i++) {

Tab tab = new Tab();

tab.setText("Tab" + i);

HBox hbox = new HBox();

hbox.getChildren().add(new Label("Tab" + i));

hbox.setAlignment(Pos.CENTER);

tab.setContent(hbox);

tabPane.getTabs().add(tab);

}

// add tab pane

borderPane.setCenter(tabPane);

// bind to take available space

borderPane.prefHeightProperty().bind(scene.heightProperty());

borderPane.prefWidthProperty().bind(scene.widthProperty());

// added menu bar

borderPane.setTop(menuBar);

// add border Pane

root.getChildren().add(borderPane);

primaryStage.setScene(scene);

primaryStage.show();

}

private EventHandler changeTabPlacement(final TabPane tabPane) {

return new EventHandler() {

public void handle(ActionEvent event) {

MenuItem mItem = (MenuItem) event.getSource();



61



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

1-15. Organizing UI with Split Views

Tải bản đầy đủ ngay(0 tr)

×