I Love Programming: 5月 2014

2014年5月26日星期一

JavaFX遊戲程式設計

4月12日完成二校的「JavaFX遊戲程式設計」，今天書商終於想到要做封面，真是感動啊，可別忘了附範例光碟才好啦，期待新書的發表。

章節包括：

1. JavaFX
2. 事件
3. 繪圖
4. 特殊效果
5. 動畫
6. 井字遊戲（Tic Tac Toe）
7. 拼圖（Puzzle）
8. 曲棍球（Hockey）
9. 孔明棋（Peg Solitaire）
10. 黑白棋（Reversi）
11. 西洋跳棋（Checker）
12. 翻翻樂（Matching Card）
13. 新接龍（Free Cell）
14. 俄羅斯方塊（Tetris）
15. 踩地雷（Mine Sweeper）
16. 數獨（Sudoku）

附錄：Java Web Start

© Chia-Hui Huang

JavaFX特效 (1) 陰影 (Shadow) 處理

今天刊登於CodeData網站，有關JavaFX特效之陰影 (Shadow) 處理：

http://www.codedata.com.tw/java/javafx-effect-1-shadow/

還有在JavaFX Coummunity上輪播。

2014年5月24日星期六

JavaFX 8程式設計

剛出版「深入研究JavaFX 2」一書，最近已經開始著手編寫「JavaFX 8程式設計」一書，並加入以下主題：

1. Lambda Expression.

2. Effect.

3. Animation.

4. 3D.

5. DatePicker.

6. Print.

2014年5月21日星期三

SAP Business Intelligence - Tab Set

索引標籤組 (Tab Set) 可在同一窗格中，以索引標籤的方式置放不同的物件，索引標籤上含有分頁標籤。

【參考資料】

[1] 黃嘉輝，商業智慧應用-SAP Crystal Presentation Design，國立臺北商業大學。
[2] 黃嘉輝，商業智慧應用-魚眼式圖片功能表 (Fisheye Picture Menu)，國立臺北商業大學。

© Chia-Hui Huang

SAP Business Intelligence - Ticker

股票行情即時看板 (Ticker) 類似於跑馬燈，用以顯示股票即時行情，資料可自台灣證券交易所 (TSEC)、公開資訊觀測站及櫃檯買賣中心 (OTC) 取得。

當以滑鼠點選Ticker中的股票名稱時，圖表將顯示對應的資訊內容，亦隨之變動。

【參考資料】

[1] 黃嘉輝，商業智慧應用-SAP Crystal Presentation Design，國立臺北商業大學。
[2] 黃嘉輝，商業智慧應用-魚眼式圖片功能表 (Fisheye Picture Menu)，國立臺北商業大學。

© Chia-Hui Huang

2014年5月19日星期一

SAP Business Intelligence - Fisheye Picture Menu

魚眼式圖片功能表 (Fisheye Picture Menu) 類似MacOS的Dock功能表，功能表包含數個圖片，當滑鼠靠近圖片時，圖片會自動放大，以產生動態更改大小的效果。透過魚眼式圖片功能表可將資料依不同的條件篩選出不同的結果，以建立圖表互動，讓圖表更加多樣化。

當滑鼠靠近圖片時，圖片會自動放大，以產生動態更改大小的效果，點選圖片功能表時，圖表亦隨之變動。

【參考資料】

[1] 黃嘉輝，商業智慧應用-SAP Crystal Presentation Design，國立臺北商業大學。
[2] 黃嘉輝，商業智慧應用-魚眼式圖片功能表 (Fisheye Picture Menu)，國立臺北商業大學。

© Chia-Hui Huang

2014年5月18日星期日

JavaFX Scene Builder 2.0

Oracle為加速JavaFX圖形介面的開發，2014/05/13 Oracle正式發表JavaFX Scene Builder 2.0，可至以下網址下載：

http://goo.gl/rYah4S

JavaFX Scene Builder如同NetBeans與JBuilder IDE一般，藉由拖曳的方式配置物件，待完成配置之後，並儲存成FXML格式檔案，此檔案以XML描述物件配置，再交由JavaFX程式處理，因此可減少直接以JavaFX撰寫配置物件程式的困難度。

以Microsoft Windows 7作業系統為例，JavaFX Scene Builder 2.0的安裝步驟如下：

Step 1：下載檔案名為javafx_scenebuilder-2_0-windows.msi的JavaFX Scene Builder之後，直接執行安裝程式。以下為JavaFX Scene Builder 2.0的安裝說明，點選「下一步」按鈕 (與JavaFX Scene Builder 1.1一樣仍是簡體中文的說明)：

Step 2：接著選擇安裝JavaFX Scene Builder的目錄，預設目錄為C:\Program Files (x86)\Oracle\JavaFX Scene Builder 2.0\，點選「安裝」按鈕進行安裝程序：

Step 3：安裝JavaFX Scene Builder 2.0所需檔案：

Step 4：安裝完成：

以JavaFX Scene Builder 2.0配置物件與建立FXML檔案的步驟如下：

Step 1：執行JavaFX Scene Builder 2.0，可發現開發環境已改為JavaFX 8 Modena主題樣式，此外JavaFX Scene Builder 2.0包含以下區域，如下圖所示：

物件面板 (Library Panel)：位於JavaFX Scene Builder左上方，用以顯示JavaFX Scene Builder所有的JavaFX GUI物件，並分成Containers、Controls、Popup Controls、Menu Content、Miscellaneous、Shapes與Charts等類別。
階層面板 (Hierarchy Panel)：位於JavaFX Scene Builder左下方，用以顯示物件的樹狀階層關係。
內容面板 (Content Panel)：位於JavaFX Scene Builder中間區域，可藉由拖曳的方式自物件面板拖曳物件至內容面板以配置物件。
屬性面板 (Property Panel)：位於JavaFX Scene Builder右側，用以設定各物件的屬性。

Step 2：點選「File」→「New」選單建立新檔，接著選擇物件如標籤，並拖曳至內容面板中，此時屬性面板將顯示標籤的所有屬性如標籤文字、字型、文字顏色、對齊方式等。接著依序以相同的方式拖曳物件至內容面板，此時階層面板將顯示所有物件的樹狀關係，其中最上層的容器為GridPane，如下圖所示：

Scene Builder 2.0新增JavaFX Theme預覽功能，可點選「Preview」→「JavaFX Theme」選單選擇不同的主題，包括：

Modena (FX8).
Modena Touch (FX8).
Modena High Contrast - Black on White (FX8).
Modena High Contrast - White on Black (FX8).
Modena High Contrast - Yellow on Black (FX8).
Caspian (FX2).
Caspian Embedded (FX2).
Caspian Embedded QVGA (FX2).

Step 3：待完成物件配置之後，點選「File」→「Save」選單儲存為FXML檔案，其內容如下所示，與JavaFX Scene Bulider 1.1的最大差別只有以下紅色的部份：

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>

<?import java.net.*?>

<?import javafx.geometry.*?>

<?import javafx.scene.control.*?>

<?import javafx.scene.layout.*?>

<?import javafx.scene.text.*?>

<GridPane alignment="CENTER" styleClass="root"

hgap="10.0" vgap="10.0"

xmlns="http://javafx.com/javafx/8"

xmlns:fx="http://javafx.com/fxml/1"

fx:controller="javafxapplication.JavaFXController">

</padding>

<Text id="welcome-text" text="Welcome to JavaFX"

GridPane.columnIndex="0" GridPane.columnSpan="2"

GridPane.rowIndex="0" />

<Label text="User Name:" GridPane.columnIndex="0"

GridPane.rowIndex="1" />

<Label text="Password:" GridPane.columnIndex="0"

GridPane.rowIndex="2" />

<PasswordField fx:id="passwordField"

GridPane.columnIndex="1" GridPane.rowIndex="2" />

<HBox alignment="BOTTOM_RIGHT" spacing="10.0"

GridPane.columnIndex="1" GridPane.rowIndex="4">

</HBox>

</GridPane>

接著將FXML檔案與JavaFX程式置於同一目錄，並以javafx.fxml.FXMLLoader類別的load()方法將FXML檔案的內容載入至JavaFX程式中，由於在JavaFX Scene Builder中設定最上層的容器為GridPane類別，因此載入FXML內容之後，需轉換為GridPane：

try {
// 載入FXML內容並轉換為GridPane
GridPane fxmlRoot = (GridPane) FXMLLoader.load(
getClass().getResource("JavaFXApplication.fxml"));

Scene scene = new Scene(fxmlRoot);

primaryStage.setTitle("JavaFX Hello World");

primaryStage.setScene(scene);

// Show Stage
primaryStage.show();
}
catch (IOException ex) {
System.out.println(ex.toString());
}
...

為避免因變更最上層容器而需要修改原JavaFX程式，因此亦可將載入FXML內容轉換為Parent抽象類別，如此不論最上層容器為何，均不需修改JavaFX程式：

try {
// 載入FXML內容並轉換為Parent
Parent fxmlRoot = FXMLLoader.load(
getClass().getResource("JavaFXApplication.fxml"));

Scene scene = new Scene(fxmlRoot);

primaryStage.setTitle("JavaFX Hello World");

primaryStage.setScene(scene);

// Show Stage
primaryStage.show();
}
catch (IOException ex) {
System.out.println(ex.toString());
}
...

【參考資料】

[1] 黃嘉輝，深入研究JavaFX 2。

[2] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html

[3] JavaFX：http://www.oracle.com/technetwork/java/javafx

[4] NetBeans 8.0: http://netbeans.org

[5] JavaFX Scene Builder 2.0: http://www.oracle.com/technetwork/java/javafx

[6] JavaFX 8.0 API Specification.

[7] Java Platform, Standard Edition 8 API Specification.

2014年5月17日星期六

JavaFX 8 Theme - Modena

JavaFX 2預設外觀主題 (Theme) 稱為Caspian，例如以下為選單之Caspian主題樣式：

JavaFX 8新增Modena主題，可使用javafx.application.Application抽象類別新增的setUserAgentStylesheet()方法設定，其中參數為以下之主題樣式：

STYLESHEET_CASPIAN：Caspian主題。
STYLESHEET_MODENA：Modena主題。

例如：

// 設定Modena主題
setUserAgentStylesheet(STYLESHEET_MODENA);

// 設定Caspian主題
setUserAgentStylesheet(STYLESHEET_CASPIAN);

以下範例以單選選單項目 (Radio Menu Item) 控制主題樣式，可分別選取Modena與Caspian主題。

【執行結果】

Modena主題

Caspian主題

【參考資料】

[1] 黃嘉輝，深入研究JavaFX 2。
[2] 黃嘉輝，JavaFX遊戲程式設計。
[2] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html
[3] JavaFX：http://www.oracle.com/technetwork/java/javafx
[4] JavaFX 8.0 API Specification.
[5] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang

深入研究JavaFX 2

今天發現金石網路書店電腦資訊類書排名第三，不知道是真是假。

2014年5月15日星期四

Delphi XE6

2014年4月Embarcadero發表Delphi XE6，可同時開發Windows、Mac、iOS與Android應用程式，似乎比JavaFX更加「Write Once, Deploy Anywhere」，其特色包括：

Create fast native apps for Windows, Mac and mobile from one codebase.
Build 64-bit Windows applications.
Bind any control to other objects or datasets with LiveBindings.
Get universal enterprise database connectivity with FireDAC.
Modernize Windows applications with new components and styles.
Extend Windows apps with mobile and wearable companion apps.
Access cloud based BaaS and REST services.
Get a fast start and fast results.

想當初Borland Delphi於1995年剛引進臺灣時，那真是盛況空前，還記得臺北天瓏書局連影印書都賣到缺貨，只要有人寫有關於Borland Delphi的書，一定立刻進入排行榜前幾名，真的是洛陽紙貴。

看到這次Embarcadero Delphi XE6，有如JavaFX 2.0一樣起死回生，衷心期待Embarcadero Delphi XE6能在IDE市場再領風騷。

又再一次點燃我心中的戰火，開始研究Embarcadero Delphi XE6。

© Chia-Hui Huang

2014年5月8日星期四

JavaFX事件 (3) 滑鼠事件

今天刊登於CodeData網站，有關JavaFX滑鼠事件：

http://www.codedata.com.tw/java/javafx-mouseevent-mousedragevent/

還有在JavaFX Coummunity上輪播。

訂閱：文章 (Atom)

I Love Programming

2014年5月26日星期一

JavaFX遊戲程式設計

JavaFX特效 (1) 陰影 (Shadow) 處理

2014年5月24日星期六

JavaFX 8程式設計

2014年5月21日星期三

SAP Business Intelligence - Tab Set

SAP Business Intelligence - Ticker

2014年5月19日星期一

SAP Business Intelligence - Fisheye Picture Menu

2014年5月18日星期日

JavaFX Scene Builder 2.0

2014年5月17日星期六

JavaFX 8 Theme - Modena

深入研究JavaFX 2

2014年5月15日星期四

Delphi XE6

JavaFX Scene Builder 2.0

TQC+行動裝置應用程式設計認證指南Windows Phone 8

JavaFX事件 (4) 手勢事件

2014年5月8日星期四

JavaFX事件 (3) 滑鼠事件

JavaFX 8技術手冊

JavaFX遊戲程式設計

2014年5月26日 星期一

2014年5月24日 星期六

2014年5月21日 星期三

2014年5月19日 星期一

2014年5月18日 星期日

2014年5月17日 星期六

2014年5月15日 星期四

2014年5月8日 星期四

2014年5月26日星期一

2014年5月24日星期六

2014年5月21日星期三

2014年5月19日星期一

2014年5月18日星期日

2014年5月17日星期六

2014年5月15日星期四

2014年5月8日星期四