JavaFX與後臺交互

目前JavaFX相關的資料都是基本語法，以及界面相關。而JavaFX面向的是RIA，RIA就肯定需要和後臺交互，個人研究了一下，遇到了不少問題，共享給大家 :D

首先先看看JavaFX的api，一眼就能看到javafx.io.http包，包裏面有三個類，HttpHeaders，HttpRequest，HttpStatus三個類。具體用法，呵呵，看API吧。主要使用的就是HttpRequest類了。API裏也有比較詳細的例子。

這裏有修改此例來實現Http的get和post提交，分別和後臺交互。

先寫個servlet

public class MooServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException {
        String name = request.getParameter("name");

        PrintWriter writer = response.getWriter();
        writer.write("Hello "+ name);
        writer.flush();
        writer.close();
    }
}

配置文件自己配吧。

接着編寫JavaFX文件。首先以get方式提交，這個很簡單。只需要一個onInput方法就夠了。

import javafx.io.http.*;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingButton;
import java.io.DataInputStream;
import javafx.scene.layout.HBox;
import javafx.ext.swing.SwingTextField;


def label:SwingTextField = SwingTextField {
    columns: 10
    text: "Ivan"
    editable: true
}

function sendHttp(){
        HttpRequest {
        location:bind "http://localhost:8080/JavaScriptWeb/moo?name={label.text}";

        onInput: function(is: java.io.InputStream) {
            try {
                def data:DataInputStream = new DataInputStream(is);
                label.text = data.readLine();
            } finally {
                is.close();
            }
        }
    }.enqueue();
}


Stage {
    title : "Http"
    scene: Scene {
        width: 200
        height: 200
        content: [HBox{
            content:[label,
            SwingButton {
            text: "Click"
            action: function() {
                sendHttp();
            }
        }
        ]
        }
         ]
    }
}

很像AJAX操作吧 :D

運行界面如下：

[img]/upload/attachment/91110/42a911f7-0e9f-37e4-b837-56b016008072.jpg[/img]

這裏有兩個需要注意的地方。

1.location那裏使用了bind關鍵字，如果不使用此關鍵字，那麼name值始終是TextField的初始值，不信試試。

2.我把實例化HttpRequest以及發送包裝爲一個方法，因爲每次發送請求都必須要重新實例化一個HttpRequest，否則報錯，不信也可以試試。

其他關於onInput回調方法，自行查看API.

下面是Post提交，這個比較鬱悶，如果照API上的例子，你找半天都可能不知道怎麼提交，網上也沒有例子。我摸索了半天才搞定。代碼如下。

import javafx.io.http.*;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingButton;
import java.io.DataInputStream;
import javafx.scene.layout.HBox;
import javafx.ext.swing.SwingTextField;


def label:SwingTextField = SwingTextField {
    columns: 10
    text: "Ivan"
    editable: true
}

var t:String= bind "name={label.text}";

function sendHttp(){
    HttpRequest {

        method:HttpRequest.POST;
        location:"http://localhost:8080/JavaScriptWeb/moo";

       onOutput: function(os: java.io.OutputStream) {
            try {
                os.write(t.getBytes());
                os.flush();
            } finally {
                os.close();
            }
        }

        onInput: function(is: java.io.InputStream) {
            try {
                def data:DataInputStream = new DataInputStream(is);
                label.text = data.readLine();
            } finally {
                is.close();
            }
        }
    }.enqueue();
}

Stage {
    title : "Http"
    scene: Scene {
        width: 200
        height: 200
        content: [HBox{
            content:[label,
            SwingButton {
            text: "Click"
            action: function() {
                sendHttp();
            }
        }
        ]
        }
         ]
    }
}

看似簡單。真摸索我還是摸索了半天，原因是，在API裏面的例子是繼承了HttpRequest，裏面設置了兩個header，就其中一個header害死人。如果你要post提交，將setHeader("Content-Type", "somecontent/type");這句刪除，或者將其修改爲setHeader("Content-Type", "application/x-www-form-urlencoded");否則後臺getParameter無法取到值。

與上面相比，有三處改變。

1.location直接寫地址，無須跟參數。（get和post之間的區別）

2.method:HttpRequest.POST;提交方法改爲Post。

3.添加了一個onOutput方法，在其內寫入參數。此處的流一定要關閉。如果不關閉，後續方法將不會執行。且此方法必須要覆蓋，如果不覆蓋同樣的程序沒有響應。

OK。現在看來JavaFX和後臺交互還是很簡單的吧!同時也看到了不足。類似AJAX的請求和響應，那麼響應流就需要自己的組裝，這個就比較麻煩了。查了些資料，JavaFX有對xml和json的支持，那麼具體操作待續 :D