SME: 2015

JSON serialization and Deserialization

JSON is stand for JavaScript Object Notation, it is a lightweight data-interchange format.

Persist JSON to Java Object /POJO called JSON serialization ( Storing object state in a file ).
Converting Java object / POJO to JSON object called JSON Deserialization ( reading/recreating from file to object ).

Gson ( Google JSON library) used to convert object to/from json.
Gson is easy to learn and implement, what we need to know are following two methods.

toJson() – Convert Java object to JSON format
fromJson() – Convert JSON into Java object

Maven dependency to add to POM.xml ( search for latest jar in maven central ..http://search.maven.org/#search%7Cga%7C1%7Cgson )

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.4</version>
</dependency>

POJO

import java.util.ArrayList;
import java.util.List;

public class VarObject {

private int var1= 1599;
private String var2 = "GsonWelcomesU";
private List<String> list = new ArrayList<String>() {
{
add("String 1");
add("String 2");
add("String 3");
}
};

//getter and setter methods

@Override
public String toString() {
   return "DataObject [var1=" + var1 + ", var2=" + var2 + ", list="
+ list + "]";
}

}
Serialize JSON .. toJson()
Convert object to JSON string, and save it as “file.json“.

import java.io.FileWriter;
import java.io.IOException;
import com.google.gson.Gson;

public class SerializeJSON {
    public static void main(String[] args) {

VarObject obj = new VarObject ();
Gson gson = new Gson();

// convert java object to JSON format, and returned as JSON formatted string
String json = gson.toJson(obj);

try {
//write converted json data to a file named "file.json"
FileWriter writer = new FileWriter("c:\\file.json");
writer.write(json);
writer.close();

} catch (IOException e) {
e.printStackTrace();
}

System.out.println(json);

    }
}
Output

{"var1":1599,"var2":"GsonWelcomesU","list":["String 1","String 2","String 3"]}

DeSerialize JSON  .. fromJson()

Convert JSON  to Java Object.



import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import com.google.gson.Gson;

public class DeserializeJSON {


public static void main(String[] args) {

 Gson gson = new Gson();

 try {

  BufferedReader br = new BufferedReader(
   new FileReader("c:\\file.json"));

  //convert the json string back to object
  VarObject obj = gson.fromJson(br, VarObject.class);

  System.out.println(obj);

 } catch (IOException e) {
  e.printStackTrace();
 }

    }
}



Output

VarObject [var1=1599, var2=GsonWelcomesU, list=[String 1, String 2, String 3]]





Pretty Print JSON format

To enable pretty print, you should use GsonBuilder return a Gson object :



 Gson gson = new GsonBuilder().setPrettyPrinting().create();
 String json = gson.toJson(obj);
 System.out.println(json);



Output

{
  "var1": 1599,
  "var2": "GsonWelcomesU",
  "list": [
    "String 1",
    "String 2",
    "String 3"
  ]
}

********* How to convert a long JSON Array to Java Object ?? *********

<!DOCTYPE HTML>

<html>

<body>

</div>

Firstname: <input id="firstName"

type="text"

data-bind="value: fisrtName">

<br/>

Lastname: <input id="lastName"

type="text"

data-bind="value: lastName">

<br/>

Fullname: <input id="fullName"

type="text"

data-bind="value: fullName"

readonly>

<br/>

</form>

$('document').ready(function(){

var viewModel = kendo.observable({

fisrtName: "Sagar",

lastName: "Ganatra",

fullName: function() {

return this.get("fisrtName") + ' ' + this.get("lastName");

}

});

kendo.bind($('form#testView'),viewModel);

});

</script>

</body>

</html>

<!DOCTYPE HTML>

<html>

<body>

</div>

<a data-bind="attr: {href: websiteLink}"

target="_blank">

Click Here

</a>

$('document').ready(function(){

var viewModel = kendo.observable({

websiteLink: 'http://www.google.com',

});

kendo.bind($('a'),viewModel);

});

</script>

</body>

</html>

<!DOCTYPE HTML>

<html>

<body>

<span id="container"

data-bind="visible: isVisible">

Some content here....

</span>

<br/>

<button id="toggleVisible"

data-bind="click: updateVisible">

Toggle Visible

</button>

</div>

$('document').ready(function(){

var viewModel = kendo.observable({

isVisible: true,

updateVisible: function() {

this.set('isVisible', !this.get('isVisible'));

}

});

kendo.bind($('div#view'),viewModel);

});

</script>

</body>

</html>

<!DOCTYPE HTML>

<html>

<body>

<select data-template="select-template"

data-bind="source: optionsData">

</select>

</option>

</script>

$('document').ready(function(){

var viewModel = kendo.observable({

optionsData: [

{optionValue:1, optionName: "Test1"},

{optionValue:2, optionName: "Test2"},

{optionValue:3, optionName: "Test3"}

]

});

kendo.bind($('select'),viewModel);

});

</script>

</body>

</html>

<!DOCTYPE HTML>
<html>
    <body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>

        <form id="testView">

            <label for="firstName">First Name</label>
            <input id="firstName"
                   name="First Name"
                   type="text"
                   required>

            <br>

            <label for="emailId" class="required">Email Address</label>
            <input id="emailId"
                   name="Email Address"
                   type="email"
                   required>
            <br>

            <input type="submit">
        </form>

        <script>
            $('document').ready(function(){
               $("form#testView").kendoValidator({
                    validateOnBlur: false,
                    messages: {

                      // {0} would be replaced with the input element's name
                      required: '{0} is required',

                      email: 'Enter a valid email address'
                    }
               });
            });
        </script>
    </body>
</html>

<!DOCTYPE HTML>
<html>
    <body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>

        <form id="testView">

            <label for="firstName">First Name</label>
            <input id="firstName"
                   name="First Name"
                   type="text"
                   required>

            <br>

            <label for="emailId" class="required">Email Address</label>
            <input id="emailId"
                   name="Email Address"
                   type="email"
                   required>
            <br>

            <input type="submit">
        </form>

        <script>
            $('document').ready(function(){
               $("form#testView").kendoValidator({

                    rules: {
                      customRule1: function(input) {
                        var re = /^[A-Za-z@.]+$/;

                        return re.test(input.val());
                      }
                    },
                    messages: {
                        customRule1: 'Numbers are not allowed'
                    }
               });
            });
        </script>
    </body>
</html>

<!DOCTYPE HTML>
<html>
    <body>


    <link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.blueopal.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>

        <div id="example" class="k-content">
          <table id="grid">
              <thead>
                  <tr>
                      <th>Employee ID</th>
                      <th>Full Name</th>
                      <th>Year of Joining</th>
                      <th>Designation</th>
                      <th>Extension No.</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>10001</td>
                      <td>Sagar H Ganatra</td>
                      <td>2008</td>
                      <td>Software Architect</td>
                      <td>49523</td>
                  </tr>
                  <tr>
                      <td>7008</td>
                      <td>Adam Wayne</td>
                      <td>2000</td>
                      <td>Engineering Manager</td>
                      <td>34890</td>
                  </tr>
                  <tr>
                      <td>10298</td>
                      <td>Nick Taylor</td>
                      <td>2012</td>
                      <td>Software Engineer</td>
                      <td>56823</td>
                  </tr>
                  <tr>
                      <td>10677</td>
                      <td>James Thompson</td>
                      <td>2010</td>
                      <td>Senior Software Engineer</td>
                      <td>48999</td>
                  </tr>
                  <tr>
                      <td>6745</td>
                      <td>Andrew Jones</td>
                      <td>2003</td>

                      <td>Senior Engineering Manager</td>
                      <td>48999</td>
                  </tr>
              </tbody>
          </table>
        </div>

        <script>
            $('document').ready(function(){
               $("#grid").kendoGrid();
            });
        </script>
    </body>
</html>

<!DOCTYPE HTML>
<html>
    <body>

    <link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.blueopal.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>

        <div id="grid">
        </div>
        <script>
            $('document').ready(function(){
               $("#grid").kendoGrid({
                  columns: [
                    {
                      field : 'movieName',
                      title : 'Movie'
                    },
                    {
                      field : 'year',
                      title : 'Year'
                    },
                    {
                      field : 'rating',
                      title : 'Rating'
                    }
                  ],
                  dataSource: [
                    {
                      movieName : 'The Shawshank Redemption',
                      year      : 1994,
                      rating    : 9.2
                    },
                    {
                      movieName : 'The Godfather',
                      year      : 1972,
                      rating    : 9.2
                    },
                    {
                      movieName : 'The Godfather - Part 2',
                      year      : 1974,
                      rating    : 9.0
                    },
                    {
                      movieName : 'Pulp Fiction',
                      year      : 1994,
                      rating    : 8.9
                    },
                    {
                      movieName : 'The Good, the Bad and the Ugly',
                      year      : 1966,
                      rating    : 8.9
                    }
                  ]
               });
            });
        </script>
    </body>
</html>

SME

Sunday, November 15, 2015

JSON serialization and Deserialization

Saturday, November 7, 2015

Kendo UI Grid

Kendo UI cookbook Examples