HT for Web Serialization Manual

Index


Overview

HT for Web provides ht.JSONSerializer serialization function for data model ht.DataModel to serialize the Data objects and attributes serialized into JSON format contained in DataModel and providing deserialization build the function of DataModel data object at the same time. This manual describes the basic class definition rules for the HT for Web, the basic use of the ht.JSONSerializer, and the serialization and deserialization cases of custom classes and attributes.

Class Basics

The JavaScript language does not provide rigorous language level support for object classes, and the HT design of a package system for users to choose from.

The steps for defining and using the com.hightopo.Person class are as follows:

  1. Defining package directory structure

    // define package com = {}; com.hightopo = {};

  2. Defining class constructors

    // define Person class constructor com.hightopo.Person = function (firstName, lastName){
    com.hightopo.Person.superClass.constructor.call(this); this.setFirstName(firstName); this.setLastName(lastName); };

  3. Defining class properties and functions

    // define Person class properties and methods ht.Default.def('com.hightopo.Person', Object, { firstName: null, lastName: null, getFirstName: function (){ return this.firstName; }, setFirstName: function (firstName){ this.firstName = firstName; }, getLastName: function (){ return this.lastName; }, setLastName: function (lastName){ this.lastName = lastName; }, getDescription: function (){ return 'firstName:' + this.firstName + ' lastName:' + this.lastName; } });

  4. Building objects and function calls

    var person = new com.hightopo.Person('eric', 'lin'); console.log('FirstName - ' + person.getFirstName()); console.log('LastName - ' + person.getLastName()); console.log('Description - ' + person.getDescription());

  5. Output result

    FirstName - eric LastName - lin Description - firstName:eric lastName:lin

The steps to define and use the subclass com.hightopo.Student of com.hightopo.Person are as follows:

  1. Defining class constructors

    // define Student class constructor com.hightopo.Student = function (firstName, lastName, grade){ com.hightopo.Student.superClass.constructor.call(this, firstName, lastName); this.setGrade(grade); };

  2. Defining class properties and functions

    // define Student class properties and methods ht.Default.def('com.hightopo.Student', com.hightopo.Person, { grade: null, getGrade: function (){ return this.grade; }, setGrade: function (grade){ this.grade = grade; }, // override getDescription method
    getDescription: function (){ var desc = com.hightopo.Student.superClass.getDescription.call(this); return desc + ' grade:' + this.
    grade; }
    });

  3. Building objects and function calls

    var student = new com.hightopo.Student('ben', 'lin', 2); console.log('FirstName - ' + student.getFirstName()); console.log('LastName - ' + student.getLastName()); console.log('Grade - ' + student.getGrade()); console.log('Description - ' + student.getDescription());

  4. Output result

    FirstName - ben LastName - lin Grade - 2 Description - firstName:ben lastName:lin grade:2

Serialization

ht.JSONSerializer can serialize and deserialize in JSON format for Data object and the attr property of the DataModel, HT will predefined the get/set attributes of classes, serialized style and attr properties, and the JSONSerializer function is as follow:

The string JSON parameter often occurs because the wrapping information causes an error in parsing, in which case the string parameter is preprocessed by json.replace(/\n/g,"").

The following are the default implementation logic for the get/set, style and attr properties that serialize the related function, can customized overload, the default implementation calls the corresponding function of the Data object, therefore it can change the logic by overloading the implementation of the Data object type.

The default logic of ht.JSONSerializer:

getProperties: function (data){        
    return data.getSerializableProperties();
},
getStyles: function (data){
    return data.getSerializableStyles();
},
getAttrs: function (data){
    return data.getSerializableAttrs();
},

The default logic of ht.Data:

getSerializableProperties: function (){
    return {
        name: 1,
        displayName: 1, 
        icon: 1, 
        toolTip: 1, 
        parent: 1,
        layer: 1,
        tag: 1,
        adjustChildrenToTop: 1            
    };
},
getSerializableStyles: function (){            
    var name, map = {};
    for (name in this._styleMap) {            
        map[name] = 1;
    }
    return map; 
},
getSerializableAttrs: function (){
    var name, map = {};
    for (name in this._attrObject) {            
        map[name] = 1;
    }
    return map; 
}

The default logic of ht.Edge:

getSerializableProperties: function (){
    var map = ht.Edge.superClass.getSerializableProperties.call(this);        
    addMethod(map, {
        source: 1,
        target: 1
    });                
    return map;
}

The following code is a convenient function encapsulated by the DataModel class, and if you do not need to customize the serialization logic, directly manipulate the serialization related function of DataModel.

serialize: function (space){
    return (new ht.JSONSerializer(this)).serialize(space);
},
toJSON: function (){       
    return (new ht.JSONSerializer(this)).toJSON();
},
deserialize: function (json, rootParent, setId) {
    (new ht.JSONSerializer(this)).deserialize(json, rootParent, setId);
} 

The following example constructs the subclasses MyData inheritance in ht.Data, if overloaded with getSerializableProperties functions, increased the storage of age properties, and if overloaded getSerializableAttrs functions, stored only attr2 properties, after var jsonString = dataModel.serialize(); serialization and dataModel.deserialize(jsonString) deserialization, attr1 is lost, and all other properties recover to the original value.

The example code is as follows:

// define package
com = {};
com.hightopo = {};

// define MyData
var MyData = com.hightopo.MyData = function (age, attr1, attr2){    
    MyData.superClass.constructor.call(this);
    this.setAge(age);
    this.setAttr('attr1', attr1);
    this.setAttr('attr2', attr2);
};
ht.Default.def('com.hightopo.MyData', ht.Data, {
    _age: 1,
    getAge: function (){
        return this._age;
    },
    setAge: function (age){
        if(age !== this._age){
            var oldValue = this._age;
            this._age = age;
            this.firePropertyChange('age', oldValue, age);
        }
    },
    getSerializableProperties: function (){
        var map = MyData.superClass.getSerializableProperties.call(this);        
        map.age = true;              
        return map;
    },
    getSerializableAttrs: function (){
        return {
            attr2: 1
        }; 
    }                         
});                

var dataModel = new ht.DataModel();
dataModel.setAttr('website', 'www.hightopo.com');                

var data = new MyData(34, 'tw', 'ht');
data.setTag('20130301');
dataModel.add(data);                                                  

var jsonString = dataModel.serialize();
console.log(jsonString); 

dataModel.clear();
dataModel.setAttr('website', null);
dataModel.deserialize(jsonString);
data = dataModel.getDataByTag('20130301');

console.log(data.getAge());
console.log(data.getAttr('attr1'));
console.log(data.getAttr('attr2'));
console.log(dataModel.getAttr('website'));

The results of the operation are as follows:

{
  "v": "2.8",
  "d": [
    {
      "c": "com.hightopo.MyData",
      "i": 3,
      "p": {
        "tag": "20130301",
        "age": 34
      },
      "a": {
        "attr2": "ht"
      }
    }
  ],
  "a": {
    "website": "www.hightopo.com"
  }
} 

34 
undefined 
ht 
www.hightopo.com 

Welcom to communicate with service@hightopo.com