How to POST data from Vaadin to Vertx using Unirest?

Question

I currently have a canvas on my Vaadin page to draw bounding boxes, in which they will be saved as objects into an array containing their width, height, coordinates etc. I also have a Vertx backend that can carry out GET and POST requests from my MariaDB database (using JDBC) that is supposed to contain all the bounding boxes objects from the Vaadin frontend (but they only contain sample created objects for now). I would like to know how do I write a POST request properly on the Vaadin frontend using Unirest, so that I can pass my object from Vaadin to Vertx using a 'Save' button, as my current code in UserService.java right now isn't doing anything.

Vaadin UserService.java:

package com.vaadin.starter.beveragebuddy.service;

import com.mashape.unirest.http.HttpResponse;
import com.mashape.unirest.http.JsonNode;
import com.mashape.unirest.http.Unirest;
import com.mashape.unirest.http.exceptions.UnirestException;
import com.vaadin.starter.beveragebuddy.ui.components.BoundingBox;
import com.vaadin.starter.beveragebuddy.ui.components.Canvas;
import org.json.JSONArray;
import org.json.JSONObject;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import static com.helger.commons.mock.CommonsAssert.assertEquals;
//import static com.sun.xml.internal.ws.spi.db.BindingContextFactory.LOGGER;

public class UserService {

    public JSONArray bbJsonArray;
    public JSONObject bbJsonObject;
    public static ArrayList bb = Canvas.getArrayBoxes();

    public static String createAnnotations(String boxname) throws UnirestException {

        Map headers = new HashMap<>();

            try {

                HttpResponse jsonResponse = Unirest.post("http://localhost:9080/api/annotations")
                        .header("accept", "application/json")
                        .field("boxname", bb.get(0).boxname)
                        .asJson();

                JSONObject output = jsonResponse.getBody().getObject();

                String status = output.getString("status");
                System.out.println(jsonResponse.getBody());
                return status;

            } catch (UnirestException e) {
                return "error";
            }
        }

}

Vaadin BoundingBox.java:

package com.vaadin.starter.beveragebuddy.ui.components;

import org.json.JSONObject;

public class BoundingBox {

    public double xcoordi = 0;
    public double ycoordi = 0;
    public double boxWidth = 0;
    public double boxHeight = 0;
    public double endX = 0;
    public double endY = 0;
    public String picID;
    public String boxname;
    public String boxcategory;
    public String boxcolour;

    public BoundingBox(String picID, String boxname, String boxcategory, String boxcolour, double xcoordi, double ycoordi, double boxWidth, double boxHeight, double endX, double endY) {
        this.picID = picID;
        this.boxname = boxname;
        this.boxcategory = boxcategory;
        this.boxcolour = boxcolour;
        this.xcoordi = xcoordi;
        this.ycoordi = ycoordi;
        this.boxWidth = boxWidth;
        this.boxHeight = boxHeight;
        this.endX = endX;
        this.endY = endY;
    }

    public String getPicID() {
        return picID;
    }

    public void setPicID(String picID) {
        this.picID = picID;
    }

    public String getBoxName() {
        return boxname;
    }

    public void setName(String boxname) {
        this.boxname = boxname;
    }

    public String getBoxcategory() {
        return boxcategory;
    }

    public void setBoxcategory(String boxcategory) {
        this.boxcategory = boxcategory;
    }

    public String getBoxcolour() {
        return boxcolour;
    }

    public void setBoxcolour(String boxcolour) {
        this.boxcolour = boxcolour;
    }

    public double getXcoordi() {
        return xcoordi;
    }

    public void setXcoordi(double xcoordi) {
        this.xcoordi = xcoordi;
    }

    public double getYcoordi() {
        return ycoordi;
    }

    public void setYcoordi(double ycoordi) {
        this.ycoordi = ycoordi;
    }

    public double getWidth() {
        return boxWidth;
    }

    public void setWidth(double endX, double xcoordi) {
        boxWidth = endX - xcoordi;
    }

    public double getHeight() {
        return boxHeight;
    }

    public void setHeight(double endY, double ycoordi) {
        boxHeight = endY - ycoordi;
    }

    public double getEndX() {  // Bottom-right X coordinate of box
        return endX;
    }

    public void setEndX(double endX) {
        this.endX = endX;
    }

    public double getEndY() {  // // Bottom-right Y coordinate of box
        return endY;
    }

    public void setEndY(double endY) {
        this.endY = endY;
    }

    public JSONObject toJSON() {

        JSONObject bbJsonObject = new JSONObject();
        bbJsonObject.put("boxname", boxname);
        bbJsonObject.put("boxcategory", boxcategory);
        bbJsonObject.put("boxcolour", boxcolour);
        bbJsonObject.put("xcoordi", xcoordi);
        bbJsonObject.put("ycoordi", ycoordi);
        bbJsonObject.put("boxwidth", boxWidth);
        bbJsonObject.put("boxheight", boxHeight);

        return bbJsonObject;
    }

    @Override
    public String toString() {
        return "{" +
                "Name=" + boxname +
                ", Class=" + boxcategory +
                ", Colour=" + boxcolour +
                ", X=" + xcoordi +
                ", Y=" + ycoordi +
                ", Width=" + boxWidth +
                ", Height=" + boxHeight +
                '}';
    }
}

Vertx MainVerticle.java:

import io.vertx.core.AsyncResult;
import io.vertx.core.Future;
import io.vertx.core.Handler;
import io.vertx.core.http.HttpServer;
import io.vertx.core.http.HttpServerResponse;
import io.vertx.core.json.Json;
import io.vertx.core.json.JsonArray;
import io.vertx.core.json.JsonObject;
import io.vertx.ext.jdbc.JDBCClient;
import io.vertx.ext.sql.ResultSet;
import io.vertx.ext.sql.SQLClient;
import io.vertx.ext.web.Router;
import io.vertx.ext.web.RoutingContext;
import io.vertx.ext.web.handler.StaticHandler;
import io.vertx.ext.jdbc.JDBCClient;
import io.vertx.ext.sql.SQLConnection;
import io.vertx.ext.sql.UpdateResult;
import io.vertx.ext.web.handler.BodyHandler;
import io.vertx.ext.web.handler.StaticHandler;
import io.vertx.starter.components.BoundingBox;
import io.vertx.starter.components.Picture;


import java.sql.Statement;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class MainVerticle extends AbstractVerticle {

  private JDBCClient jdbc;
  private static final Logger LOGGER = LoggerFactory.getLogger(MainVerticle.class);
  private Future fut;
  private String SQL_GET_ANNOTATION = "SELECT * FROM boundingboxes";
  private String SQL_ADD_ANNOTATION = "INSERT INTO boundingboxes (picID, boxname, boxcategory, boxcolour, xcoordi, ycoordi, boxWidth, boxHeight, endX, endY) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
  private int nextCount = 0;
  private Map pictures = new LinkedHashMap<>();
  private Map annotations = new LinkedHashMap<>();

  @Override
  public void start(Future fut) {

    createBBData();

    startHttpServer();

    dbConnection();

//    Router router = Router.router(vertx);
  }

public Future dbConnection(){

        // Create a JDBC client
    jdbc = JDBCClient.createShared(vertx, new JsonObject()
      .put("url", "jdbc:mariadb://localhost:3306/annotationdb")
      .put("driver_name", "org.mariadb.jdbc.Driver")
      .put("max_pool_size", 5)
      .put("user", "root"));

    jdbc.getConnection(ar -> {
      if (ar.failed()) {
        LOGGER.error("Could not open a database connection", ar.cause());
        fut.fail(ar.cause());         // If SQL Connection could not be obtained, then method future is completed to fail.
      } else {
        SQLConnection connection = ar.result(); // else ... SQL connection is established with successful AsyncResult (Use this connection to perform a SQL query)
        connection.query(SQL_GET_ANNOTATION, get -> {
          connection.close();
          if (get.failed()) {            // If SQL Query fails ...
            LOGGER.error("Database operation error", get.cause());  // ...
            fut.fail(get.cause());

          } else {
            LOGGER.info("Connection Established");
//            fut.complete();   // Complete method future object with a success
            System.out.print("Succeed");

            ResultSet rs = get.result();
            if (rs.getNumRows() > 0) {
              System.out.println(rs.getResults().toString());
              nextCount++;
            }
          }
        });
      }
    });
    return fut;
  }

  public Future startHttpServer(){
    Future future = Future.future();
    HttpServer server = vertx.createHttpServer();

    Router router = Router.router(vertx);
    router.route("/").handler(routingContext -> {
      HttpServerResponse response = routingContext.response();
      response
        .putHeader("content-type", "text/html")
        .end("Hello from my first Vert.x 3 application");
    });

    // Serve static resources from the /assets directory
    router.route("/assets/*").handler(StaticHandler.create("assets"));
    router.route("/api/annotations*").handler(BodyHandler.create());
    router.get("/api/annotations").handler(this::getAll);
//    router.get("/api/annotations/:bbID").handler(this::getOne);
    router.post("/api/annotations").handler(this::addOne);
    router.put("/api/annotations/:bbID").handler(this::updateOne);
    router.delete("/api/annotations/:bbID").handler(this::deleteOne);

    vertx
      .createHttpServer()
      .requestHandler(router::accept)
      .listen(
        // Retrieve the port from the configuration,
        // default to 8080.
        config().getInteger("http.port", 9080)
      );

    return future;

  }

private void createBBData() {
    BoundingBox annotation1 = new BoundingBox("P1", "sign1", "signs", "Magenta", 340.0, 110.0, 100.0, 200.0, 500.0, 400.0);
    annotations.put(annotation1.getBbID(), annotation1);
    BoundingBox annotation2 = new BoundingBox("P2", "woman1", "people", "Red", 300.0, 150.0, 200.0, 400.0, 600.0, 350.0);
    annotations.put(annotation2.getBbID(), annotation2);
  }

  private void getAll(RoutingContext routingContext) {
    jdbc.getConnection(ar -> {
      SQLConnection connection = ar.result();
      connection.query("SELECT * FROM boundingboxes", result -> {
        System.out.println("[GetALL] NUMBER = " + result.result().getNumRows());
        LOGGER.info("LOGGER INFO TEST!!");
        LOGGER.error("LOGGER ERROR TEST!!");
//        System.out.println("[GetALL] CONTENTS = " + result.result().getResults().get(0).encodePrettily());

        List annotation = result.result().getRows().stream().map(BoundingBox::new).collect(Collectors.toList());
        routingContext.response()
          .putHeader("content-type", "application/json; charset=utf-8")
          .end(Json.encodePrettily(annotation));
        connection.close();
      });
    });
  }

  private void addOne(RoutingContext routingContext) {  // OK
    jdbc.getConnection(ar -> {
      System.out.println("CONNECTION INSERT OK");

    final BoundingBox annotation = Json.decodeValue(routingContext.getBodyAsString(),
      BoundingBox.class);
    System.out.println(annotation.getEndX());
    SQLConnection connection = ar.result();
//    annotations.put(annotation.getBbID(), annotation);
    insert(annotation, connection, (r) ->

      routingContext.response()
      .setStatusCode(201)
      .putHeader("content-type", "application/json; charset=utf-8")
      .end(Json.encodePrettily(r.result())));
      connection.close();
    });
  }

  private void updateOne(RoutingContext routingContext) {
    final String bbID = routingContext.request().getParam("bbID");
    JsonObject json = routingContext.getBodyAsJson();
    if (bbID == null || json == null) {
      routingContext.response().setStatusCode(400).end();
    } else {
      jdbc.getConnection(ar ->
        update(bbID, json, ar.result(), (annotation) -> {
          if (annotation.failed()) {
            routingContext.response().setStatusCode(404).end();
          } else {
            routingContext.response()
              .putHeader("content-type", "application/json; charset=utf-8")
              .end(Json.encodePrettily(annotation.result()));
          }
          ar.result().close();
        })
      );
    }
  }

private void select(String bbID, SQLConnection connection, Handler> resultHandler) {
    System.out.println("[TEST]  SELECT ONE REQUEST !!!");
    connection.queryWithParams("SELECT * FROM boundingboxes", new JsonArray().add(bbID), ar -> {
      if (ar.failed()) {
        resultHandler.handle(Future.failedFuture("Annotation not found"));
      } else {
        if (ar.result().getNumRows() >= 1) {
          System.out.println(ar.result().getResults().get(0).encodePrettily());
          System.out.println(ar.result().getRows().get(0).fieldNames());
          System.out.println(ar.result().getRows().get(0).encodePrettily());

          resultHandler.handle(Future.succeededFuture(new BoundingBox(ar.result().getRows().get(0))));
        } else {
          System.out.println("Annotation is not found!");
          resultHandler.handle(Future.failedFuture("Annotation not found"));
        }
      }
    });
  }

    private void insert(BoundingBox annotation, SQLConnection connection, Handler> next) { // OK
      String sql = "INSERT INTO boundingboxes (picID, boxname, boxcategory, boxcolour, xcoordi, ycoordi, boxWidth, boxHeight, endX, endY) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
      JsonArray annotationJson = new JsonArray().add(annotation.getPicID()).add(annotation.getBoxName()).add(annotation.getBoxcategory()).add(annotation.getBoxcolour()).add(annotation.getXcoordi()).add(annotation.getYcoordi()).add(annotation.getWidth()).add(annotation.getHeight()).add(annotation.getEndX()).add(annotation.getEndX());
//      System.out.println(annotationJson);
      connection.updateWithParams(sql, annotationJson,
        (ar) -> {
          if (ar.failed()) {
            next.handle(Future.failedFuture(ar.cause()));
            connection.close();
            return;
          }
          UpdateResult result = ar.result();
          BoundingBox bb = new BoundingBox(result.getKeys().getInteger(0), annotation.getPicID(), annotation.getBoxName(), annotation.getBoxcategory(), annotation.getBoxcolour(), annotation.getXcoordi(), annotation.getYcoordi(), annotation.getWidth(), annotation.getHeight(), annotation.getEndX(), annotation.getEndY());
          System.out.println(bb);
          next.handle(Future.succeededFuture(bb));
        });
    }

  private void update(String bbID, JsonObject content, SQLConnection connection,
                      Handler> resultHandler) {
    String sql = "UPDATE boundingboxes SET picID=?, boxname=?, boxcategory=?, boxcolour=?, xcoordi=?, ycoordi=?, boxWidth=?, boxHeight=?, endX=?, endY=? WHERE bbID=?";
    connection.updateWithParams(sql,
      new JsonArray().add(content.getString("picID")).add(content.getString("boxname")).add(content.getString("boxcategory")).add(content.getString("boxcolour")).add(content.getDouble("xcoordi")).add(content.getDouble("ycoordi")).add(content.getDouble("boxWidth")).add(content.getDouble("boxHeight")).add(content.getDouble("endX")).add(content.getDouble("endY")).add(bbID),
      update -> {
        if (update.failed()) {
          resultHandler.handle(Future.failedFuture("Cannot update the annotation"));
          return;
        }
        if (update.result().getUpdated() == 0) {
          resultHandler.handle(Future.failedFuture("Annotation not found"));
          return;
        }
        resultHandler.handle(
          Future.succeededFuture(new BoundingBox(Integer.valueOf(bbID),
            content.getString("picID"), content.getString("boxname"), content.getString("boxcategory"), content.getString("boxcolour"), content.getDouble("xcoordi"), content.getDouble("ycoordi"), content.getDouble("boxWidth"), content.getDouble("boxHeight"), content.getDouble("endX"), content.getDouble("endY"))));
      });
  }

}

Vertx index.html:




  
  List of Annotations

  
  
  



  
    List of Annotations

    Just an example of simple CRUD application developed using Vert.x and Vertx Web.
  
  
    Annotations
    
    
      
        
          
          
            bbID
            picID
            Box Name
            Box Category
            Box Colour
            X-Coordi
            Y-Coordi
            Box Width
            Box Height
            End X
            End Y
            
          
          
          
          
          
        
      
    
  



  
    
      
        
        Add an annotation
      
      
        
          
            Pic ID:
            
          
          
            Box Name:
            
          
          
            Box Category:
            
          
          
            Box Colour:
            
          
          
            X-Coordi:
            
          
          
            Y-Coordi:
            
          
          
            Box Width:
            
          
          
            Box Height:
            
          
          
            End X:
            
          
          
            End Y:

Any help is appreciated, thank you!

user_3441504 · Answer

You will have to send not only the name of the bounding box, but the whole object(s) with all the information about coordinates and whatnot, so all the relevant data can be stored in a DB. Sending and storing only the name will get you nowhere.

This is usually being done using json. It is possible to build the json on your own if you want to, but using an ObjectMapper to transform your BoundingBox to json and back is so much more convenient, especially if you're going to have other objects besides BoundingBoxes to send as well.

Here is a great post about using unirest with java, with examples: https://www.baeldung.com/unirest.

How to POST data from Vaadin to Vertx using Unirest?

1 Answers