s.im.pl serialization tutorial
javascript poly-morphic

Introduction

This tutorial shows how to create Javascript code generated from simpl annotated classes. We assume that you have been through the java tutorial already. One thing that should be emphasized about the utility of Javascript simpl is that JSON specifications do not allow one de/serialize objects that have cycles; objects that point to themselves directly or indirectly cannot be de/serialized in JSON. Simpl Javascript does allow one to create Javascript objects with cycles.

Setting Up Environments

Two environments are required to generate javascript code from Java. We will start by setting up our Java environment, where we generate Javascript classes, then we will de/serialize Javascript classes.

Java Evironment in Eclipse

Use an SVN cleint like subclipse to checkout the following project over our svn. Use the user anonymous and the password anonymous.

Chrome/Firefox + Firebug Environment

Included in the simplTranslators project, a folder called jscode contains three files, simpl.js, gamething.js, and test.html. We recommend downloading the Firbug plug-in and using Firefox or Chrome to test Javascript code as you develop.

From Java to Javascript

There are a hand full of annotated classes present in the package ecologylab.translators.javascript.test that show different kinds of classes, but we will use one as an example here.

//Item.java
package ecologylab.translators.javascript.test;

import ecologylab.serialization.ElementState;

public class Item extends ElementState{
 @simpl_scalar float price;
 @simpl_scalar String ownerName;
 @simpl_scalar String name;
 public Item(float price, String ownerName, String name) {
  super();
  this.price = price;
  this.ownerName = ownerName;
  this.name = name;
 }
}
Tranlsation Program

This class is translated by a short program also in ecologylab.translators.javascript.test called JavascriptTranslatorTest.

package ecologylab.translators.javascript.test;

import java.io.File;
import java.io.IOException;
import ecologylab.serialization.SIMPLTranslationException;
import ecologylab.serialization.TranslationScope;
import ecologylab.translators.cocoa.CocoaTranslationException;
import ecologylab.translators.javascript.JavascriptTranslator;

public class JavascriptTranslatorTest {
 public static void main(String args[]) throws IOException, SIMPLTranslationException
 {
  System.out.println("Javascript Translator");
  TranslationScope ts = new TranslationScope();
  ts = TranslationScope.get("somegame",Player.class, Bank.class,Computer.class,Human.class,Item.class,Move.class, Movements.class,Player.class, ReferToSelf.class);
  JavascriptTranslator jst = new JavascriptTranslator();
  jst.translateToJavascript(new File("jscode/gamething.js"), ts);
 }
}
Generated Function Objects

Instead of creating a file for each class in the translation scope, TranslateToJavascript puts each class into the same file. Here is the Javascript function object generated that was placed in gamething.js

function item(json,price,owner_name,name)
{
    this._simpl_object_name = "item";
    this._simpl_class_descriptor='{"class_descriptor":{"name":"ecologylab.translators.javascript.test.Item", "tag_name":"item", "described_class":"ecologylab.translators.javascript.test.Item", "described_class_simple_name":"Item", "described_class_package_name":"ecologylab.translators.javascript.test", "simpl.id":"27832", "super_class":{"name":"ecologylab.serialization.ElementState", "tag_name":"element", "described_class":"ecologylab.serialization.ElementState", "described_class_simple_name":"ElementState", "described_class_package_name":"ecologylab.serialization"}, "field_descriptor":[{"name":"price", "tag_name":"price", "field":"price", "type":"18", "scalar_type":"float", "xml_hint":"XML_ATTRIBUTE", "field_type":"float", "declaring_class_descriptor":{"simpl.ref":"27832"}},{"name":"ownerName", "tag_name":"owner_name", "field":"ownerName", "type":"18", "scalar_type":"String", "xml_hint":"XML_ATTRIBUTE", "field_type":"String", "declaring_class_descriptor":{"simpl.ref":"27832"}},{"name":"name", "tag_name":"name", "field":"name", "type":"18", "scalar_type":"String", "xml_hint":"XML_ATTRIBUTE", "field_type":"String", "declaring_class_descriptor":{"simpl.ref":"27832"}}]}}';
    this._simpl_collection_types = {};
    this._simpl_map_types = {};
    this._simpl_map_types_keys = {};
    this._simpl_composite_types = {};
    if(json)
    {
        jsonConstruct(json,this);
        return;
    }
    else
    {
        if(price) this.price = price;
        if(owner_name) this.owner_name = owner_name;
        if(name) this.name = name;
    }
}

We see that this function works as a constructor. Next we will look at how de/serialization in Javascript works.

Javascript Environment

Open test.html in Chrome or Firefox with the Firebug plugin installed. Here are the contexts of test.html.

<html>
<head title="Testbed">
</head>
  <script src="simpl.js" type="text/javascript"></script>
  <script src="gamething.js" type="text/javascript"></script>
</html>
Javascript De/Serialization

This file includes the file we generated includes the script files simpl.js(has functions for construction and de/serialization) and gamething.js(has the function objects that we translated from Java). First, we instantiate an item in the console. We then serialize it. We then instantiate a new item from serialization string.

var h = new item(null,20.00,"John Smith", "Hammer MC");
h

Produces the output:
item { _simpl_object_name="item", _simpl_class_descriptor="{"class_descriptor":{"n...simpl.ref":"27832"}}]}}", more...}



var h = new item(null,20.00,"John Smith", "Hammer MC");
simplSerialize(h)
Produces the output:
"{"item":{"price":20,"owner_name":"John Smith","name":"Hammer MC"}}"
var h = new item('"{"item":{"price":20,"owner_name":"John Smith","name":"Hammer MC"}}"');
h
Produces the output:
item { _simpl_object_name="item", _simpl_class_descriptor="{"class_descriptor":{"n...simpl.ref":"27832"}}]}}", more...}
an interface ecology lab production