JavaFX Cookbook

Search this site
Data Access‎ > ‎

Data Posting with HttpRequest


Another aspect of data interaction in JavaFX is the ability to post data to a web server.  The HttpRequest object supports both GET and POST method.  The code below shows how to capture data from a form and post it to web server over HTTP using JavaFX's HttpRequest.

The first portion of the code builds the GUI for the form:
def w = 400;
def h = 200;
var scene:Scene;

var nameRow = HBox {
    spacing:7
    content:[
        VBox{content:[Label{text:"First Name"},TextBox{id:"fName"}]}
        VBox{content:[Label{text:"Last Name"},TextBox{id:"lName"}]}
    ]
}

var addr1Row = HBox {
     spacing:7
     content:[
        VBox{content:[Label{text:"Address"},TextBox{id:"addr"}]}
        VBox{content:[Label{text:"Title"},TextBox{id:"title"}]}
    ]
}

var btnRow = HBox {
    spacing:7
    content:[
        Button{
            text:"Submit"
            action:function(){
                formData.visible = true;
                postData();
            }
        }
    ]
}

def dataW = w-30;
def dataH = h-100;
var formData:Group = Group {
    visible:false
    layoutX: (w - dataW)/2;
    layoutY: 20
    content:[
        Rectangle {
            width: dataW height: dataH
            fill:Color.BLACK
            stroke:Color.BLUE
            strokeWidth:3
            opacity:0.65
            arcHeight:10 arcWidth:10
        }
        VBox {
            width:w-30 height:100
            hpos:HPos.CENTER
            content:[
                Label{textFill:Color.WHITE text: "Data Submitted"}
                Label{textFill:Color.WHITE text: bind "First Name: {(scene.lookup("fName") as 
                      TextBox).text}"}
                Label{textFill:Color.WHITE text: bind "Last Name: {(scene.lookup("lName") as 
                      TextBox).text}"}
                Label{textFill:Color.WHITE text: bind "Address: {(scene.lookup("addr") as 
                      TextBox).text}"}
                Label{textFill:Color.WHITE text: bind "Title: {(scene.lookup("title") as 
                      TextBox).text}"}
            ]
        }
    ]
    onMousePressed:function(e){
        formData.visible = false;
    }
}

// form panel
def panel = VBox {
    spacing:5
    content: [nameRow, addr1Row,btnRow]
}

The second part of the code defines function postDate() to collect the data from the form's TextBox instances and send it to server.  Each data element to be sent to the server must be grouped in key/value pairs where key is the name of a field in an HTTP form. To accomplish the same in JavaFX, you place your data in a sequence of Pair instances. The Pair is a simple key/value structure (hence the name) where you can store associative data. In the code sample below, we declare variable postData as a sequence of Pair instances to store values with key firstName, lastName, title, and address.

Before data can be posted to the server though, the sequence of Pair instances must be converted into a format supported by web server. The utility class URLConverter makes available the encodeParameters(Pair[]):String function which returns a string of encoded values ready to be sent to the server.
function postData(){
    var conv = URLConverter{};
    var url = "http://localhost:8080/webapp/employee/save";
    var postData = [
        Pair{name:"firstName" value:(scene.lookup("fName") as TextBox).text},
        Pair{name:"lastName" value:{(scene.lookup("lName") as TextBox).text}},
        Pair{name:"title" value:(scene.lookup("title") as TextBox).text},
        Pair{name:"address" value:(scene.lookup("addr") as TextBox).text},
    ];

    var http = HttpRequest {
        location: url
        method: HttpRequest.POST

        onOutput:function (toServer: OutputStream){
            try {
                var data = conv.encodeParameters(postData);
                toServer.write(data.getBytes());
            }finally{
                toServer.close();
            }
        }

    }

    http.start();
}

The final portion of the code places the GUI controls on the stage:
Stage {
title : "Http POST"
scene: scene = Scene {
                fill:LinearGradient {
                    startX: 0, endX: 0, startY: 0, endY: 1
                    stops: [
                        Stop { offset: 0, color: Color.LIGHTGRAY }
                        Stop { offset: 1, color: Color.WHITESMOKE }
                    ]
                }
width: w
height: h
content: [Group{ layoutX:10 content:panel}, formData ]
}
}

When the code is executed, it will send the data in the TextBox components to the server addressed in the code as shown below:



The materials on this website represent a small sample of content loosely based on the book JavaFX Application Development Cookbook.  The book offers far more content with over 80 recipes covering a range of topics from basics to advanced concepts.  

Buy the Book

You can get your copy of the book directly from the publisher. Click here to order!