2015年4月18日 星期六

展示jQuery Mobile

網頁以jQuery Mobile完成之後,則可以手機或平板瀏覽,但若是以電腦的瀏覽器瀏覽時,則可能與實際結果有所出入。我們可以試著加入手機或平板的圖片,並以<iframe>網頁標籤將jQuery Mobile網頁置於圖片之中,產生如同以手機或平板的瀏覽效果。

例如以下手機圖片:
其中圖片尺寸分別為380px (Height) 與700px (Width)、白色矩形的右上角分別為27px (Top) 與85px (Left)、長寬分別為320px (Height) 與533px (Width),藉此設定以下CSS:
#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):
【執行結果】

同樣的,以相同方式處理平板,以下為平板圖片:
其中圖片尺寸分別為640px (Height) 與1050px (Width)、白色矩形的右上角分別為70px (Top) 與125px (Left)、長寬分別為500px (Height) 與800px (Width),藉此設定以下CSS:
#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):
【執行結果】


© Chia-Hui Huang

JavaFX Spinner

2015年03月03日Oracle推出JavaFX 8 Update 40,新增Spinner物件,Spinner原義為紡紗機,此處是指微調工具,其類別為javafx.scene.control.Spinner,類似於ListViewComboBox類別,均用以顯示一個以上的項目。

Spinner類別由箭頭與編輯物件 (Editor) 兩部份所組成,下圖為JavaFX之Spinner樣式:

JavaFX的Spinner支援int整數、double浮點數與自定字串清單,與Java Swing的JSpinner相比,Java Swing支援預設 (Default)、日期 (Date)、清單 (List)與數字 (Number)等格式,較JavaFX多了日期格式,下圖為Java Swing之JSpinner的日期樣式:
不過JavaFX的Spinner可設定箭頭位置與方向,分別由以下選項設定,若未指定,則為預設的右側垂直樣式:
  • 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類別的各種箭頭位置與方向之樣式:
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的建構函式設定之外,亦可以使用SpinnerValueFactory設定Spinner的Model,分別如下:
  • SpinnerValueFactory.IntegerSpinnerValueFactory:Integer整數。
  • SpinnerValueFactory.DoubleSpinnerValueFactory:Double浮點數。
  • SpinnerValueFactory.ListSpinnerValueFactory:List清單。
以下範例示範以SpinnerValueFactory.DoubleSpinnerValueFactory設定Double浮點數的Spinner Model:
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;
}
...
【執行結果】
比較特殊的是List清單,一般Spinner物件都用在選擇數字或日期,但JavaFX加入List清單功能,因此可自定字串清單,以下範例示範以SpinnerValueFactory.ListSpinnerValueFactory設定List清單的Spinner Model:
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;
}
...
【執行結果】
更進一步,可搭配CurrencyStringConverter設定貨幣格式,並以setStyle()方法設定Spinner的字型樣式:
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;"
);    
...
【執行結果】
以下範例更進一步以CurrencyStringConverter設定系統預設、美金 (Locale.US)、日幣 (Locale.JAPAN) 等貨幣格式,並以PercentageStringConverter設定百分比格式:
// 系統預設貨幣格式
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;"
);  
...
【執行結果】
雖然Spinner物件不直接支援日期格式,但仍可以搭配SimpleDateFormat的方式設定各種日期格式,請參考以下範例:
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();
}
...
【執行結果】
【參考資料】

[1] Java Official Web Site:http://www.oracle.com/technetwork/java/index.html
[2] JavaFX:http://www.oracle.com/technetwork/java/javafx
[3] JavaFX 8.0 API Specification.
[4] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang

2015年4月13日 星期一

JavaFX Dialog (3)

除了Alert類別之外,另外尚有ChoiceDialogTextInputDialog類別,皆繼承自Dialog類別,分別在對話盒中顯示選項方塊 (Choice Box) 與文字欄位 (Text Field),此外亦可以Dialog類別自訂對話盒。

以下範例示範以TextInputDialog建立文字欄位之對話盒,較之前以getDialogPane()setContent()setExpandableContent()方法將自訂物件置於對話盒的方式為簡單:
TextInputDialog dialog = new TextInputDialog();
dialog.setTitle("Text Input Dialog");
dialog.setHeaderText(null);
dialog.setContentText("Username:");

dialog.showAndWait().ifPresent(result -> {
  System.out.println("Username: " + result);
});     
...
【執行結果】
以下範例並加入setHeaderText()方法設定標題文字:
TextInputDialog dialog = new TextInputDialog();
dialog.setTitle("Text Input Dialog");
dialog.setHeaderText("示範以setHeaderText()方法設定標題文字。");
dialog.setContentText("Username:");

dialog.showAndWait().ifPresent(result -> {
  System.out.println("Username: " + result);
});     
...
【執行結果】
以下範例示範以ChoiceDialog建立選項方塊之對話盒,並示範將作業系統的所有字型置於選項方塊之中:
// 取得作業系統的所有字型
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類別自訂對話盒,請參考以下範例,分別加入文字欄位、修改對話盒圖示與按鈕類型組合:
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());
});
...
【執行結果】
【參考資料】

[1] Java Official Web Site:http://www.oracle.com/technetwork/java/index.html
[2] JavaFX:http://www.oracle.com/technetwork/java/javafx
[3] JavaFX 8.0 API Specification.
[4] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang

JavaFX Dialog (2)

除了前述以Alert類別的相關方法設定對話盒之外,亦可自訂訊息對話盒中的物件。首先自訂各類物件配置,接著以Alert類別的getDialogPane()方法取得對話盒的窗格,再以getDialogPane()setContent()setExpandableContent()方法將自訂物件置於對話盒中。

以下範例首先以TextArea建立文字區域,並以BorderPane配置文字區域,最後以getDialogPane()setContent()setExpandableContent()方法將自訂物件置於對話盒中:
// 自訂物件
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();
...
【執行結果】

當剛開啟對話盒時,其自訂物件部份為收合狀態,並在左下角顯示「顯示詳細資訊」:
點選「顯示詳細資訊」,則展開自訂物件部份,並在左下角顯示「隱藏詳細資訊」:
以下範例首先以TextFieldPasswordField分別建立文字欄位與密碼欄位,並以GridPane配置物件,最後以getDialogPane()setContent()setExpandableContent()方法將自訂物件置於對話盒中:
// 自訂物件
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();
...
【執行結果】
以下範例首先以ComboBox建立複合方塊與setCellFactory()方法設定其Cell Factory,並在Cell Factory中以Rectangle類別設定各選項項目的顏色,並以BorderPane配置複合方塊,最後以getDialogPane()setContent()setExpandableContent()方法將自訂物件置於對話盒中:
// 自訂物件
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();
...
【執行結果】
以下範例首先以Pagination建立分頁控制,並以BorderPane配置文字區域,最後以getDialogPane()setContent()setExpandableContent()方法將自訂物件置於對話盒中:
// 自訂物件
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();
...
【執行結果】
【參考資料】

[1] Java Official Web Site:http://www.oracle.com/technetwork/java/index.html
[2] JavaFX:http://www.oracle.com/technetwork/java/javafx
[3] JavaFX 8.0 API Specification.
[4] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang

JavaFX Dialog (1)

2015年03月03日Oracle推出JavaFX 8 Update 40,終於將Dialog (對話盒) 納入JavaFX中,其實由JavaFX 2就蠻好奇為什麼沒有Dialog這項功能,老實說要寫一個對話盒並不難,Java Swing就有。

在圖形化介面環境中,對話盒因功能之不同可分為:
  • 訊息對話盒 (Message Box)。
  • 開啟檔案對話盒 (Open File Dialog)。
  • 儲存檔案對話盒 (Save File Dialog)。
  • 色彩對話盒 (Color Dialog)。
  • 版面設定對話盒 (Page Setup Dialog)。
  • 預覽列印對話盒 (Print Preview Dialog)。
  • 列印對話盒 (Print Dialog)。
  • 字型對話盒 (Font Dialog)。
  • 尋找對話盒 (Find Dialog)。
在Java Swing中,有關對話盒之類別分為:
  • 對話盒:javax.swing.JDialog
  • 對話框:javax.swing.JOptionPane
  • 檔案對話盒:javax.swing.JFileChooser
  • 色彩對話盒:javax.swing.JColorChooser
JOptionPane類別為例,可分為以下類型,主要是以JOptionPane類別不同的方法顯示:
  • 確認對話盒 (Confirm Dialog):以showConfirmDialog()方法顯示,預設包括Yes、No與Cancel按鈕。
  • 輸入對話盒 (Input Dialog):用以取得資訊,並以showInputDialog()方法顯示。
  • 訊息對話盒 (Message Dialog):用以顯示資訊,並以showMessageDialog()方法顯示。
  • 選項對話盒 (Option Dialog):可自訂對話盒及按鈕樣式,並以showOptionDialog()方法顯示。
在JavaFX中,有關對話盒的類別分別為:
  • 目錄對話盒:javafx.stage.DirectoryChooser
  • 檔案對話盒:javafx.stage.FileChooser
  • 快顯對話盒:javafx.stage.Popup
  • 顏色選擇器:javafx.scene.control.ColorPicker
  • 日期選擇器:javafx.scene.control.DatePicker
其中顏色選擇器與日期選擇器繼承自ComboBoxBaser抽象類別,因此其樣式類似於複合方塊 (Combo Box)。

JavaFX 8 Update 40新增之對話盒沿用自ControlsFX,其類別為javafx.scene.control.Alert,繼承自javafx.scene.control.Dialog類別,因此除了可使用Alert類別的相關方法建立對話盒之外,亦可以Dialog類別自訂對話盒。除了Alert類別之外,另外尚有ChoiceDialogTextInputDialog類別。

Alert類別的方法包括:
  • getButtonTypes():取得對話盒的按鈕類型。
  • getContentText():取得對話盒的內容文字。
  • setContentText():設定對話盒的內容文字。
  • getDialogPane():取得對話盒的窗格。
  • setDialogPane():設定對話盒的窗格。
  • getGraphic():取得對話盒中的圖示。
  • setGraphic():設定對話盒中的圖示。
  • getHeaderText():取得標題文字,Java Swing並沒有此部份。
  • setHeaderText():設定標題文字,Java Swing並沒有此部份。
  • getTitle():取得對話盒標題。
  • setTitle():設定對話盒標題。
  • show():顯示對話盒。
  • wait():等待使用者回應,則按下對話盒中的任一按鈕。
  • showAndWait():顯示對話盒並等待使用者回應。
此外Alert類別以下列屬性值設定對話盒的類型:
  • AlertType.INFORMATION:訊息對話盒。
  • AlertType.WARNING:警告對話盒。
  • AlertType.ERROR:錯誤對話盒。
  • AlertType.CONFIRMATION:確認對話盒。
  • AlertType.NONE:無任何預設設定。
以下範例以Alert類別的相關方法設定訊息對話盒,請注意setHeaderText()方法:
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText(null);
alert.setContentText("訊息對話盒,顯示一般訊息之用。");
alert.showAndWait();
...
【執行結果】
以下範例以Alert類別的相關方法設定訊息對話盒,並加入setHeaderText()方法設定標題文字:
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information Dialog");
alert.setHeaderText("示範以setHeaderText()方法設定標題文字。");
alert.setContentText("訊息對話盒,顯示一般訊息之用。");
alert.showAndWait();
...
【執行結果】
以下範例以Alert類別的相關方法設定警告對話盒
Alert alert = new Alert(AlertType.WARNING);
alert.setTitle("Warning Dialog");
alert.setHeaderText(null);
alert.setContentText("警告對話盒,顯示警告訊息之用。");
alert.showAndWait();
...
【執行結果】
以下範例以Alert類別的相關方法設定警告對話盒,並加入setHeaderText()方法設定標題文字:
Alert alert = new Alert(AlertType.WARNING);
alert.setTitle("Warning Dialog");
alert.setHeaderText("示範以setHeaderText()方法設定標題文字。");
alert.setContentText("警告對話盒,顯示警告訊息之用。");
alert.showAndWait();
...
【執行結果】
以下範例以Alert類別的相關方法設定錯誤對話盒
Alert alert = new Alert(AlertType.ERROR);
alert.setTitle("Error Dialog");
alert.setHeaderText(null);
alert.setContentText("錯誤對話盒,顯示錯誤訊息之用。");
alert.showAndWait();
...
【執行結果】
以下範例以Alert類別的相關方法設定錯誤對話盒,並加入setHeaderText()方法設定標題文字:
Alert alert = new Alert(AlertType.ERROR);
alert.setTitle("Error Dialog");
alert.setHeaderText("示範以setHeaderText()方法設定標題文字。");
alert.setContentText("錯誤對話盒,顯示錯誤訊息之用。");
alert.showAndWait();
...
【執行結果】
以下範例以Alert類別的相關方法設定確認對話盒,用以確認訊息,並包括確認與取消按鈕:
Alert alert = new Alert(AlertType.CONFIRMATION);
alert.setTitle("Confirmation Dialog");          
alert.setHeaderText(null);
alert.setContentText("確認對話盒,用以確認訊息,並包括確認與取消按鈕。");
alert.showAndWait();
...
【執行結果】
以下範例以Alert類別的相關方法設定確認對話盒,並加入setHeaderText()方法設定標題文字:
Alert alert = new Alert(AlertType.CONFIRMATION);
alert.setTitle("Confirmation Dialog");          
alert.setHeaderText("示範以setHeaderText()方法設定標題文字。");
alert.setContentText("確認對話盒,用以確認訊息,並包括確認與取消按鈕。");
alert.showAndWait();
...
【執行結果】
我們也可以使用setGraphic()方法設定對話盒中的圖示:
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.");
  }
});
...
【執行結果】
【參考資料】

[1] Java Official Web Site:http://www.oracle.com/technetwork/java/index.html
[2] JavaFX:http://www.oracle.com/technetwork/java/javafx
[3] JavaFX 8.0 API Specification.
[4] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang

2015年4月4日 星期六

Processing環境設定

Processing是由MIT Media Lab的Ben Fry與Casey Reas於2001年所共同開發的,並於2005年獲得Prix Ars Electronica的Golden Nica (Net Vision/Net Excellence) 大獎。Processing定位在電子藝術與視覺互動設計,Processing建立在Java的基礎上,但使用更簡化的語法。

jQuery Mobile應用程式與一般的HTML網頁程式不同,HTML網頁不需Web Server則可直接在本機電腦以瀏覽器執行,但jQuery Mobile應用程式必須在Web Server環境才能正常執行。模擬用的Web Server有很多免費的軟體,其中XAMPP可以說是其中的佼佼者,XAMPP為Apache+MySQL+PHP +Perl之縮寫,因此其中XAMPP亦支援MySQL, PHP, Perl之執行。

XAMPP安裝程式可至 https://www.apachefriends.org 下載,目前版本為5.6.3,支援Microsoft Windows, Mac OS X, Linux等作業系統,以Microsoft Windows作業系統為例,自XAMPP網站下載XAMPP安裝程式 (xampp-win32-5.6.3-0-VC11-installer.exe) 之後,直接執行安裝程式,其中安裝目錄選擇預設目錄C:\xampp,待安裝完成之後,安裝程式將詢問是否啟動XAMPP Control Panel,如下圖所示,勾選選項並按「Finish」按鈕,則完成安裝並啟動XAMPP Control Panel。

XAMPP Control Panel如下圖所示,預設支援Apache, MySQL, FileZilla, Mercury與Tomcat服務,jQuery Mobile應用程式需以Apache執行,因此點選Apache服務右側的「Start」按鈕則可啟動Apache服務。
啟動Apache服務時,將出現以下之防火牆警告訊息,分別依需求,勾選「私人網路」或「公用網路」選項,並點選「允許存取」按鈕則完成XAMPP之設定。
為執行jQuery Mobile,需自 http://jquerymobile.com 網站下載jQuery Mobile套件,目前版本為1.4.5,檔案包括:
  • jquery.mobile-1.4.5.min.css
  • jquery.mobile-1.4.5.min.js
此外,並需要jQuery電腦版之JS檔案,可自 http://jquery.com 網站下載,例如jquery-2.1.0.min.js。其中檔案名稱含有「min」,代表此檔案經過壓縮處理,較沒有「min」字樣的檔案為小,因此下載與匯入時間較短。

接著在XAMPP的安裝目錄C:\xampp\htdocs下建立一目錄如mobile,並在mobile目錄下分別建立css與js目錄,將上述之jquery.mobile-1.4.5.min.css複製至css目錄下、jquery-2.1.0.min.js與jquery.mobile-1.4.5.min.js複製至js目錄下,如此則完成jQuery Mobile的環境設定。

為測試是否安裝正確,接著在C:\xampp\htdocs\mobile目錄下建立一index.html網頁,其內容如下:

...
黃嘉輝教學網站 






...
  

...
內容基本上類似於一般的HTML網頁,但為能執行jQuery Mobile,因此在網頁標題 (Head) 部份加入上述之css與js檔案設定:
黃嘉輝教學網站 






...
【執行結果】

欲執行上述程式,可使用平版電腦或智慧型手機的瀏覽器執行http://<主機IP Address>/mobile/index.html,以下為以Apple iPad平版電腦執行的結果:
以下為以Android智慧型手機執行的結果:
【參考資料】

[1] XAMPP:https://www.apachefriends.org
[2] jQuery Mobile:http://jquerymobile.com
[3] jQuery:http://jquery.com

© Chia-Hui Huang