float C0 = length * (float) (1.0 + Math.sqrt(5.0)) / 4.0f;
float C1 = length * (float) (3.0 + Math.sqrt(5.0)) / 4.0f;
float C2 = length * (float) (1.0 + Math.sqrt(5.0)) / 2.0f;
float C3 = length * 0.5f;
// 建立TriangleMesh
TriangleMesh trianglemesh = new TriangleMesh();
// 設定頂點座標
trianglemesh.getPoints().addAll(
0.0f, 0.0f, C2,
0.0f, 0.0f, -C2,
C2, 0.0f, 0.0f,
-C2, 0.0f, 0.0f,
0.0f, C2, 0.0f,
0.0f, -C2, 0.0f,
C3, C0, C1,
C3, C0, -C1,
C3, -C0, C1,
C3, -C0, -C1,
-C3, C0, C1,
-C3, C0, -C1,
-C3, -C0, C1,
-C3, -C0, -C1,
C1, C3, C0,
C1, C3, -C0,
C1, -C3, C0,
C1, -C3, -C0,
-C1, C3, C0,
-C1, C3, -C0,
-C1, -C3, C0,
-C1, -C3, -C0,
C0, C1, C3,
C0, C1, -C3,
C0, -C1, C3,
C0, -C1, -C3,
-C0, C1, C3,
-C0, C1, -C3,
-C0, -C1, C3,
-C0, -C1, -C3
);
// 設定貼圖座標
trianglemesh.getTexCoords().addAll(
0.50f, 1.0f,
0.75f, (float) (1.0-Math.sqrt(3.0)/4.0f),
0.25f, (float) (1.0-Math.sqrt(3.0)/4.0f),
1.00f, 1.0f,
0.50f, (float) (1.0-Math.sqrt(3.0)/2.0f),
0.00f, 1.0f
);
// 設定各三角形的面
trianglemesh.getFaces().addAll(
0, 2, 6, 1, 10, 4,
0, 2, 12, 1, 8, 4,
1, 2, 9, 1, 13, 4,
1, 2, 11, 1, 7, 4,
14, 2, 16, 1, 2, 4,
14, 2, 22, 1, 6, 4,
17, 2, 15, 1, 2, 4,
17, 2, 25, 1, 9, 4,
19, 2, 21, 1, 3, 4,
19, 2, 27, 1, 11, 4,
20, 2, 18, 1, 3, 4,
20, 2, 28, 1, 12, 4,
23, 2, 4, 1, 22, 4,
23, 2, 15, 1, 7, 4,
24, 2, 5, 1, 25, 4,
24, 2, 16, 1, 8, 4,
26, 2, 4, 1, 27, 4,
26, 2, 18, 1, 10, 4,
29, 2, 5, 1, 28, 4,
29, 2, 21, 1, 13, 4,
0, 0, 8, 1, 16, 2,
0, 0, 16, 1, 14, 2,
0, 0, 14, 1, 6, 2,
0, 0, 10, 1, 18, 2,
0, 0, 18, 1, 20, 2,
0, 0, 20, 1, 12, 2,
1, 0, 7, 1, 15, 2,
1, 0, 15, 1, 17, 2,
1, 0, 17, 1, 9, 2,
1, 0, 13, 1, 21, 2,
1, 0, 21, 1, 19, 2,
1, 0, 19, 1, 11, 2,
2, 0, 15, 1, 23, 2,
2, 0, 23, 1, 22, 2,
2, 0, 22, 1, 14, 2,
2, 0, 16, 1, 24, 2,
2, 0, 24, 1, 25, 2,
2, 0, 25, 1, 17, 2,
3, 0, 18, 1, 26, 2,
3, 0, 26, 1, 27, 2,
3, 0, 27, 1, 19, 2,
3, 0, 21, 1, 29, 2,
3, 0, 29, 1, 28, 2,
3, 0, 28, 1, 20, 2,
4, 0, 23, 1, 7, 2,
4, 0, 7, 1, 11, 2,
4, 0, 11, 1, 27, 2,
4, 0, 26, 1, 10, 2,
4, 0, 10, 1, 6, 2,
4, 0, 6, 1, 22, 2,
5, 0, 24, 1, 8, 2,
5, 0, 8, 1, 12, 2,
5, 0, 12, 1, 28, 2,
5, 0, 29, 1, 13, 2,
5, 0, 13, 1, 9, 2,
5, 0, 9, 1, 25, 2
);
// 設定各面的平滑參數
trianglemesh.getFaceSmoothingGroups().addAll(
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
);
// 建立MeshView
MeshView meshview;
meshview = new MeshView(createMesh(100));
...
【參考資料】
#preview {
height: 380px;
width: 700px;
background: url(images/phone_landscape.png)
center no-repeat;
}
#preview iframe {
width: 533px;
height: 320px;
top: 27px;
left: 85px;
}
並在HTML網頁中，以下列方式顯示jQuery Mobile網頁 (demo.html)：【執行結果】
#preview {
height: 640px;
width: 1050px;
background: url(images/smalltablet_landscape.png)
center no-repeat;
}
#preview iframe {
width: 800px;
height: 500px;
top: 70px;
left: 125px;
}
並在HTML網頁中，以下列方式顯示jQuery Mobile網頁 (demo.html)：【執行結果】
String[] styles = {
"", // 預設右側垂直
Spinner.STYLE_CLASS_ARROWS_ON_RIGHT_HORIZONTAL, // 右側水平
Spinner.STYLE_CLASS_ARROWS_ON_LEFT_VERTICAL, // 左側垂直
Spinner.STYLE_CLASS_ARROWS_ON_LEFT_HORIZONTAL, // 左側水平
Spinner.STYLE_CLASS_SPLIT_ARROWS_VERTICAL, // 分裂垂直
Spinner.STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL // 分裂水平
};
Spinner[] spinner = new Spinner[styles.length];
for (int i = 0; i < styles.length; i++) {
spinner[i] = new Spinner(0, 100, 10); // 最小值, 最大值, 預設值
spinner[i].getStyleClass().add(styles[i]); // 設定箭頭位置與方向
spinner[i].setPrefWidth(80);
}
...
【執行結果】
Spinner[] spinner = new Spinner[styles.length];
for (int i = 0; i < styles.length; i++) {
// 最小值, 最大值, 預設值, 遞增減值
SpinnerValueFactory svf = new
SpinnerValueFactory.DoubleSpinnerValueFactory(0.0, 10.0, 1.2, 0.1);
Spinner sp = new Spinner();
sp.setValueFactory(svf);
sp.getStyleClass().add(styles[i]);
sp.setPrefWidth(80);
spinner[i] = sp;
}
...
【執行結果】
Spinner[] spinner = new Spinner[styles.length];
for (int i = 0; i < styles.length; i++) {
ObservableList<String> months =
FXCollections.observableArrayList(
"January", "February", "March", "April",
"May", "June", "July", "August",
"September", "October", "November", "December"
);
SpinnerValueFactory svf = new
SpinnerValueFactory.ListSpinnerValueFactory<>(months);
Spinner sp = new Spinner();
sp.setValueFactory(svf);
sp.getStyleClass().add(styles[i]);
sp.setPrefWidth(100);
spinner[i] = sp;
}
...
【執行結果】
TextFormatter<Number> formatter =
new TextFormatter<>(new CurrencyStringConverter());
formatter.setValue(50000);
Spinner spinner = new Spinner();
spinner.setPrefWidth(150);
spinner.setEditable(true);
spinner.getEditor().setTextFormatter(formatter);
spinner.getEditor().setStyle(
"-fx-font: 10pt 'verdana';
-fx-text-fill: black;
-fx-alignment: CENTER_RIGHT;"
);
...
【執行結果】
// 系統預設貨幣格式
TextFormatter<Number> formatter1 =
new TextFormatter<>(new CurrencyStringConverter());
formatter1.setValue(50000);
Spinner spinner1 = new Spinner();
spinner1.setPrefWidth(150);
spinner1.setEditable(true);
spinner1.getEditor().setTextFormatter(formatter1);
spinner1.getEditor().setStyle(
"-fx-font: 10pt 'verdana';
-fx-text-fill: black;
-fx-alignment: CENTER_RIGHT;"
);
// 美金貨幣格式
TextFormatter<Number> formatter2 =
new TextFormatter<>(new CurrencyStringConverter(Locale.US));
formatter2.setValue(50000);
Spinner spinner2 = new Spinner();
spinner2.setPrefWidth(150);
spinner2.setEditable(true);
spinner2.getEditor().setTextFormatter(formatter2);
spinner2.getEditor().setStyle(
"-fx-font: 10pt 'verdana';
-fx-text-fill: black;
-fx-alignment: CENTER_RIGHT;"
);
// 日幣貨幣格式
TextFormatter<Number> formatter3 =
new TextFormatter<>(new CurrencyStringConverter(Locale.JAPAN));
formatter3.setValue(50000);
Spinner spinner3 = new Spinner();
spinner3.setPrefWidth(150);
spinner3.setEditable(true);
spinner3.getEditor().setTextFormatter(formatter3);
spinner3.getEditor().setStyle(
"-fx-font: 10pt 'verdana';
-fx-text-fill: black;
-fx-alignment: CENTER_RIGHT;"
);
// 百分比格式
TextFormatter<Number> formatter4 =
new TextFormatter<>(new PercentageStringConverter(););
formatter4.setValue(0.12);
Spinner spinner4 = new Spinner();
spinner4.setPrefWidth(150);
spinner4.setEditable(true);
spinner4.getEditor().setTextFormatter(formatter4);
spinner4.getEditor().setStyle(
"-fx-font: 10pt 'verdana';
-fx-text-fill: black;
-fx-alignment: CENTER_RIGHT;"
);
...
【執行結果】
try {
Calendar calendar = Calendar.getInstance();
// yyyy/MM/dd
SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy/MM/dd");
// 指定日期
calendar.setTime(DateFormat.getDateInstance().parse("2015/5/10"));
Spinner spinner1 = new Spinner();
spinner1.setPrefWidth(220);
spinner1.setEditable(true);
spinner1.getEditor().setText(sdf1.format(calendar.getTime()));
spinner1.getEditor().setStyle(
"-fx-font: 10pt 'verdana';
-fx-text-fill: black;
-fx-alignment: CENTER_RIGHT;"
);
// E yyyy/MM/dd
SimpleDateFormat sdf2 = new SimpleDateFormat("E yyyy/MM/dd");
// 指定日期
calendar.setTime(DateFormat.getDateInstance().parse("2015/5/10"));
Spinner spinner2 = new Spinner();
spinner2.setPrefWidth(220);
spinner2.setEditable(true);
spinner2.getEditor().setText(sdf2.format(calendar.getTime()));
spinner2.getEditor().setStyle(
"-fx-font: 10pt 'verdana';
-fx-text-fill: black;
-fx-alignment: CENTER_RIGHT;"
);
// yyyy/MM/dd HH:mm:ss
SimpleDateFormat sdf3 = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
Spinner spinner3 = new Spinner();
spinner3.setPrefWidth(220);
spinner3.setEditable(true);
// 系統目前日期
spinner3.getEditor().setText(sdf3.format(new Date()));
spinner3.getEditor().setStyle(
"-fx-font: 10pt 'verdana';
-fx-text-fill: black;
-fx-alignment: CENTER_RIGHT;"
);
// EEE, MMM d, 'yy
SimpleDateFormat sdf4 = new SimpleDateFormat("EEE, MMM d, ''yy");
Spinner spinner4 = new Spinner();
spinner4.setPrefWidth(220);
spinner4.setEditable(true);
// 系統目前日期
spinner4.getEditor().setText(sdf4.format(new Date()));
spinner4.getEditor().setStyle(
"-fx-font: 10pt 'verdana';
-fx-text-fill: black;
-fx-alignment: CENTER_RIGHT;"
);
...
}
catch (Exception e) {
e.printStackTrace();
}
...
【執行結果】
TextInputDialog dialog = new TextInputDialog();
dialog.setTitle("Text Input Dialog");
dialog.setHeaderText(null);
dialog.setContentText("Username:");
dialog.showAndWait().ifPresent(result -> {
System.out.println("Username: " + result);
});
...
【執行結果】
TextInputDialog dialog = new TextInputDialog();
dialog.setTitle("Text Input Dialog");
dialog.setHeaderText("示範以setHeaderText()方法設定標題文字。");
dialog.setContentText("Username:");
dialog.showAndWait().ifPresent(result -> {
System.out.println("Username: " + result);
});
...
【執行結果】
// 取得作業系統的所有字型
List<String> fonts = Font.getFamilies();
// 以字型建立選項方塊對話盒
ChoiceDialog<String> dialog =
new ChoiceDialog<>(fonts.get(0), fonts);
dialog.setTitle("Choice Dialog");
dialog.setHeaderText(null);
dialog.setContentText("Fonts:");
dialog.showAndWait().ifPresent(result -> {
System.out.println("Font: " + result);
});
...
【執行結果】
Dialog<Pair<String, String>> dialog = new Dialog<>();
dialog.setTitle("Custom Dialog");
dialog.setHeaderText(null);
dialog.setGraphic(new ImageView(
new Image(getClass().getResourceAsStream("images/info.png"))));
// 自訂按鈕類型組合
ButtonType button1 = new ButtonType("OK", ButtonData.OK_DONE);
ButtonType button2 = new ButtonType("Cancel", ButtonData.CANCEL_CLOSE);
dialog.getDialogPane().getButtonTypes().addAll(button1, button2);
Label label1 = new Label("Username:");
Label label2 = new Label("Password:");
final TextField textfield = new TextField();
textfield.setText("");
textfield.setTooltip(new Tooltip("Username"));
final PasswordField passwordfield = new PasswordField();
passwordfield.setText("Athena");
passwordfield.setPrefColumnCount(15);
passwordfield.setPromptText("Please enter your password.");
passwordfield.setTooltip(new Tooltip("Password"));
GridPane gridpane = new GridPane();
gridpane.setAlignment(Pos.CENTER);
gridpane.setHgap(10);
gridpane.setVgap(10);
gridpane.setPadding(new Insets(5, 5, 5, 5));
gridpane.add(label1, 0, 0);
gridpane.add(label2, 0, 1);
gridpane.add(textfield, 1, 0);
gridpane.add(passwordfield, 1, 1);
Button btnOK = (Button) dialog.getDialogPane().lookupButton(button1);
btnOK.setDisable(true);
textfield.textProperty().addListener(
(observable, oldValue, newValue) -> {
btnOK.setDisable(newValue.trim().isEmpty());
});
// 將自訂物件置於對話盒中
dialog.getDialogPane().setContent(gridpane);
dialog.setResultConverter(buttontype -> {
if (buttontype == button1) {
return new Pair<>(textfield.getText(), passwordfield.getText());
}
return null;
});
dialog.showAndWait().ifPresent(result -> {
System.out.println("Username: " + result.getKey());
System.out.println("Password: " + result.getValue());
});
...
【執行結果】
// 自訂物件
String text = "...";
TextArea textArea = new TextArea(text);
textArea.setEditable(false);
textArea.setWrapText(true);
BorderPane borderpane = new BorderPane();
borderpane.setCenter(textArea);
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("示範自訂訊息對話盒的內容。");
// 將自訂物件置於對話盒中
alert.getDialogPane().setExpandableContent(borderpane);
alert.showAndWait();
...
【執行結果】
// 自訂物件
Label label1 = new Label("Username:");
Label label2 = new Label("Password:");
final TextField textfield = new TextField();
textfield.setText("");
textfield.setTooltip(new Tooltip("Username"));
final PasswordField passwordfield = new PasswordField();
passwordfield.setText("Athena");
passwordfield.setPrefColumnCount(15);
passwordfield.setPromptText("Please enter your password.");
passwordfield.setTooltip(new Tooltip("Password"));
GridPane gridpane = new GridPane();
gridpane.setAlignment(Pos.CENTER);
gridpane.setHgap(10);
gridpane.setVgap(10);
gridpane.setPadding(new Insets(5, 5, 5, 5));
gridpane.add(label1, 0, 0);
gridpane.add(label2, 0, 1);
gridpane.add(textfield, 1, 0);
gridpane.add(passwordfield, 1, 1);
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("示範自訂訊息對話盒的內容。");
// 將自訂物件置於對話盒中
alert.getDialogPane().setExpandableContent(gridpane);
alert.showAndWait();
...
【執行結果】
// 自訂物件
final ComboBox<Color> combobox = new ComboBox<>();
combobox.getItems().addAll(
Color.RED, Color.GREEN, Color.BLUE, Color.AQUA,
Color.BLUEVIOLET, Color.CHOCOLATE, Color.DIMGRAY,
Color.FORESTGREEN, Color.GREENYELLOW, Color.INDIGO);
// select the last element
combobox.getSelectionModel().select(3);
combobox.setVisibleRowCount(5);
combobox.setEditable(false);
combobox.setPrefWidth(180);
// Cell Factory
combobox.setCellFactory(new Callback<ListView<Color>,
ListCell<Color>>() {
@Override
public ListCell<Color> call(ListView<Color> param) {
return new ListCell<Color>()
{
{
super.setPrefWidth(60);
}
private final Rectangle rectangle;
{
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
rectangle = new Rectangle(150, 15);
}
@Override
protected void updateItem(Color item, boolean empty) {
super.updateItem(item, empty);
if (item == null || empty) {
setGraphic(null);
}
else {
rectangle.setFill(item);
setGraphic(rectangle);
}
}
};
}
});
BorderPane borderpane = new BorderPane();
borderpane.setCenter(combobox);
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("示範自訂訊息對話盒的內容。");
// 將自訂物件置於對話盒中
alert.getDialogPane().setExpandableContent(borderpane);
alert.showAndWait();
...
【執行結果】
// 自訂物件
final Pagination pagination;
pagination = new Pagination();
pagination.setPageCount(14);
pagination.setCurrentPageIndex(0);
pagination.setMaxPageIndicatorCount(10);
pagination.setPageFactory((Integer pageIndex) -> {
ImageView imageview = new ImageView(scene[pageIndex]);
VBox vbox = new VBox();
vbox.setAlignment(Pos.CENTER);
vbox.getChildren().add(imageview);
return vbox;
});
BorderPane borderpane = new BorderPane();
borderpane.setCenter(pagination);
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("示範自訂訊息對話盒的內容。");
// 將自訂物件置於對話盒中
alert.getDialogPane().setExpandableContent(borderpane);
alert.showAndWait();
...
【執行結果】
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("訊息對話盒，顯示一般訊息之用。");
alert.showAndWait();
...
【執行結果】
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText("示範以setHeaderText()方法設定標題文字。");
alert.setContentText("訊息對話盒，顯示一般訊息之用。");
alert.showAndWait();
...
【執行結果】
Alert alert = new Alert(AlertType.WARNING);
alert.setTitle("Warning Dialog");
alert.setHeaderText(null);
alert.setContentText("警告對話盒，顯示警告訊息之用。");
alert.showAndWait();
...
【執行結果】
Alert alert = new Alert(AlertType.WARNING);
alert.setTitle("Warning Dialog");
alert.setHeaderText("示範以setHeaderText()方法設定標題文字。");
alert.setContentText("警告對話盒，顯示警告訊息之用。");
alert.showAndWait();
...
【執行結果】
Alert alert = new Alert(AlertType.ERROR);
alert.setTitle("Error Dialog");
alert.setHeaderText(null);
alert.setContentText("錯誤對話盒，顯示錯誤訊息之用。");
alert.showAndWait();
...
【執行結果】
Alert alert = new Alert(AlertType.ERROR);
alert.setTitle("Error Dialog");
alert.setHeaderText("示範以setHeaderText()方法設定標題文字。");
alert.setContentText("錯誤對話盒，顯示錯誤訊息之用。");
alert.showAndWait();
...
【執行結果】
Alert alert = new Alert(AlertType.CONFIRMATION);
alert.setTitle("Confirmation Dialog");
alert.setHeaderText(null);
alert.setContentText("確認對話盒，用以確認訊息，並包括確認與取消按鈕。");
alert.showAndWait();
...
【執行結果】
Alert alert = new Alert(AlertType.CONFIRMATION);
alert.setTitle("Confirmation Dialog");
alert.setHeaderText("示範以setHeaderText()方法設定標題文字。");
alert.setContentText("確認對話盒，用以確認訊息，並包括確認與取消按鈕。");
alert.showAndWait();
...
【執行結果】
Alert alert = new Alert(AlertType.CONFIRMATION);
alert.setTitle("Confirmation Dialog");
alert.setHeaderText(null);
alert.setContentText("確認對話盒，用以確認訊息，並包括確認與取消按鈕。");
// 設定對話盒中的圖示
alert.setGraphic(new ImageView(
new Image(getClass().getResourceAsStream("images/Question.png"))));
alert.showAndWait();
...
【執行結果】
Optional<buttontype> result = alert.showAndWait();
if (result.get() == ButtonType.OK) {
System.out.println("Press OK button.");
}
else {
System.out.println("Press cancel button.");
}
...
可更進一步使用Lambda Expression精簡程式：alert.showAndWait().ifPresent(result -> {
if (result == ButtonType.OK) {
System.out.println("Press OK button.");
}
else {
System.out.println("Press cancel button.");
}
});
...
除了預設按鈕之外，可使用ButtonType類別自訂按鈕類型組合，並以ButtonData.CANCEL_CLOSE設定自訂按鈕中的預設Cancel按鈕，當按下ESC按鍵時，等同按下Cancel按鈕：// 自訂按鈕類型
ButtonType button1 = new ButtonType("Yes");
ButtonType button2 = new ButtonType("No");
ButtonType button3 = new ButtonType("Maybe");
// 設定預設Cancel按鈕
ButtonType button4 = new ButtonType("Cancel", ButtonData.CANCEL_CLOSE);
alert.getButtonTypes().setAll(button1, button2, button3, button4);
alert.showAndWait().ifPresent(result -> {
if (result == button1) {
System.out.println("Press Yes button.");
}
else if (result == button2) {
System.out.println("Press No button.");
}
else if (result == button3) {
System.out.println("Press Maybe button.");
}
else {
System.out.println("Press Cancel button.");
}
});
...
【執行結果】