I Love Programming: 4月 2015

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)：

【執行結果】

【參考資料】

[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類別之外，另外尚有ChoiceDialog與TextInputDialog類別，皆繼承自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());
});
...

【執行結果】

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();
...

【執行結果】

當剛開啟對話盒時，其自訂物件部份為收合狀態，並在左下角顯示「顯示詳細資訊」：

點選「顯示詳細資訊」，則展開自訂物件部份，並在左下角顯示「隱藏詳細資訊」：

以下範例首先以TextField與PasswordField分別建立文字欄位與密碼欄位，並以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();
...

【執行結果】

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類別之外，另外尚有ChoiceDialog與TextInputDialog類別。

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.");
  }
});
...

【執行結果】

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網頁，其內容如下：

...
黃嘉輝教學網站 






...
  


黃嘉輝教學網站
電腦版
    


 
教師資訊
課程資訊
研究著作
專書著作
研究計畫
榮譽獎項
聯絡資訊
English Edition
 



...


...

內容基本上類似於一般的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

訂閱：文章 (Atom)

I Love Programming

2015年4月18日星期六

展示jQuery Mobile

JavaFX Spinner

2015年4月13日星期一

JavaFX Dialog (3)

JavaFX Dialog (2)

JavaFX Dialog (1)

2015年4月4日星期六

Processing環境設定

黃嘉輝教學網站

JavaFX 8技術手冊

JavaFX遊戲程式設計

2015年4月18日 星期六

展示jQuery Mobile

JavaFX Spinner

2015年4月13日 星期一

JavaFX Dialog (3)

JavaFX Dialog (2)

JavaFX Dialog (1)

2015年4月4日 星期六

Processing環境設定

黃嘉輝教學網站

2015年4月18日星期六

2015年4月13日星期一

2015年4月4日星期六