Monday, January 18, 2016

ExtJS


CDN for ExtJS
https://cdnjs.com/libraries/extjs

Do not forget to include extjs library to run below programs.


   

<html>
<srcipt src="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css"></script>
<srcipt src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<srcipt src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
<srcipt src="http://dev.sencha.com/deploy/ext-4.0.0/examples/shared/example.css"></script>
<script>
Ext.onReady(function(){
   
    new Ext.Button({
        renderTo: Ext.getBody(),
        text: 'ExtJS Button',
        icon: 'http://dev.sencha.com/deploy/dev/examples/shared/icons/fam/delete.gif',
        handler: function(){
            alert('Yay it works!')
        }
    })
   
});
</script>
<style>
body { padding: 20px }
</style>
<p>A test if ExtJS works on JSFiddle</p>

</html>

Posted by at 13 comments:

Sunday, November 15, 2015

JSON serialization and Deserialization

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  ?? ********* 
Posted by at No comments:

Saturday, November 7, 2015

Kendo UI Grid


Kendo UI Grid





PersonData.js

var personData = [{
    FirstName : "Jim",
    LastName : "Kirk",
    Rank : "Captain",
    DOB: "03/22/2233",
    PersonId : 1
}, {
    FirstName : "Jim",
    LastName : "Raynor",
    Rank : "Captain",
    DOB: "06/23/2470",
    PersonId : 2
}, {
    FirstName : "Jean-Luc",
    LastName : "Picard",
    Rank : "Captain",
    DOB: "07/13/2305",
    PersonId : 3
}, {
    FirstName : "Sarah",
    LastName : "Kerrigan",
    Rank : "Ghost Recon",
    DOB: "09/07/2471",
    PersonId : 4
}, {
    FirstName : "Steve",
    LastName : "Rogers",
    Rank : "Captain",
    DOB: "07/04/1922",
    PersonId : 5
}];



<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Grid How-to</title>
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.default.min.css">
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.web.min.js"></script>
<script src="js/personData.js"></script>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 15 - Working with User Events</h3>
<p><a href="index.html">Home</a></p>
<script type="text/javascript">
  $(document).ready(function() {
        var myDataSource = new kendo.data.DataSource({
            data: personData,
            schema: {
                model: {
                    fields: {
                        FirstName: { type: "string" },
                        LastName: { type: "string" },
                        Rank: { type: "string" },
                        DOB: { type: "date" },
                        PersonId: { type: "number" }
                    }
                }
            }
        } );
        $("#myGrid").kendoGrid({
            dataSource: myDataSource,
            change: showChange,
            selectable: "multiple cell",
            columns: [
                { field: "Name", title: "Full Name", width: "300px", template: '#=FirstName# #=LastName#' },
                { field: "DOB", title: "Date of Birth", width: "300px" },
                { field: "Rank", title: "Rank", width: "300px" }
            ]
        });
   });
   function showChange(e) {
        var selected = $.map(this.select(), function(item) {
            return $(item).text();
        });

        alert("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
    }
</script>
<div id="myGrid"></div>
</body>
</html>

Posted by at No comments:

Kendo UI cookbook Examples






<!DOCTYPE HTML>
<html>
    <body>
        <div class = "addressContainer">
        </div>
<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">
   
    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/>

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

        <script>
            $('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 class = "addressContainer">
        </div>

<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>

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

           Click Here

        </a>
        <script>
            $('document').ready(function(){
                var viewModel = kendo.observable({
                    websiteLink: 'http://www.google.com',
                });
                kendo.bind($('a'),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>
      
        <div id="view">
            <span id="container"
                  data-bind="visible: isVisible">

                  Some content here....

            </span>

            <br/>
          
            <button id="toggleVisible"
                    data-bind="click: updateVisible">

                    Toggle Visible
                  
            </button>
        </div>
        <script>
            $('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>
   
<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>

        <select data-template="select-template"
                data-bind="source: optionsData">
        </select>

        <script id="select-template" type="text/x-kendo-template">
            <option data-bind="attr: {value: optionValue}, html: optionName">              
            </option>
        </script>

        <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="firstName"
                   type="text"
                   required
                   validationMessage="Please specify First Name">

            <br>

            <label for="emailId" class="required">Email Address</label>
            <input id="emailId"
                   name="emailId"
                   type="email"
                   required
                   data-required-msg="Please specify Email Address"
                   data-email-msg="Email format is not correct">
            <br>

            <input type="submit">
        </form>
       
        <script>
            $('document').ready(function(){
               $("form#testView").kendoValidator({
                    validateOnBlur: false
               });
            });
        </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>




























Posted by at No comments:
Subscribe to: Posts (Atom)