A way to call the JSON service

nexacro platform provides various communication  ways.
This explains about a way to call JSON type data.

Main Source Code

Form Code

this.Button01_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
  var strInDS = "";
  var strOutDS = "Dataset00=dsDetailMain";
  var strParams = "";
  var strCallback = "fn_init_callback";
  this.transaction("load", "Svc::json.jsp", strInDS, strOutDS, strParams, strCallback);
}
  
this.fn_init_callback = function (sid, errcd, errmsg)
{   
  if (errcd == 0) {
    this.Grid00.createFormat();
  }            
}

Main Source Code for JSON data format handling

_pTransactionItem._deserializeData = function (strRecvData, bPending) 
{     
 if (!strRecvData)
  return [-1, "Stream Data is null!"]; 
 strRecvData = strRecvData.trim();
 var fstr = strRecvData.substring(0, 3);
 
 if (fstr == "SSV") // SSV Type (HEX:53,53,56)
 { 
  return this.__deserializeSSV(strRecvData);
  
 }
 else if (fstr == "CSV") // CSV Type (HEX:43,53,56)
 { 
  return this.__deserializeCSV(strRecvData);
 }
 else if (fstr == "PPX") // PPX Type : Runtime only
 { 
  return this.__deserializeJSON(strRecvData);
 } 
 // Additional code for JSON handling
 else if (fstr == "JSN") {
 }
 //<< Additional code for JSON handling
 else // XML Type (HEX:3C,3F)
 {   
  //return this.__deserializeXML(strRecvData);
  return this.__deserializeJSON(strRecvData);
 }
}
// When receive data under transaction, JSON handling 
_pTransactionItem.__deserializeJSON = function(strRecvData) 
{
 var code = 0;
 var message = "SUCCESS";
 
 var outDatasets = this.outputDatasets;
 if (outDatasets && outDatasets.length)
 {
  var revcJsonObj = JSON.parse(strRecvData);
  if (!revcJsonObj) 
  {
   code = -1;
   message = "Fail JSON.parse";
  }
  var outDataCnt = outDatasets.length;
  for (var i = 0; i < outDataCnt; i++)
  {
   // this.context: access form object
   var ds = this.context._getDatasetObject(outDatasets[i].lval);
   if (ds) {
    ds.clear();
    this.context.createDatasetColInfo(ds);
    this.context.addData(ds, revcJsonObj);
   }
  }
 }
 return [code, message];
}   
// dataset initialization
this.createDatasetColInfo = function(ds) 
{
 var nIndex = ds.addColumn( "name", "string" );
 nIndex = ds.addColumn( "surname", "string", 120 );
}
// data processing
this.addData = function(ds, jsonObj) 
{
 for (var j = 0 ; j < jsonObj.length ; j++) 
 {
  jObj = jsonObj[j];
  var rIdx = ds.addRow();
  ds.setColumn(rIdx, "name", jObj.name);
  ds.setColumn(rIdx, "surname", jObj.surname);
 }
}

JSP

<%@page contentType="text/html; charset=UTF-8"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%
  JSONArray users = new JSONArray();
  JSONObject obj=new JSONObject();
  obj.put("name","Ambarish");
  obj.put("surname","Aura"); 
  users.add(obj);
  obj=new JSONObject();
  obj.put("name","bmbarish");
  obj.put("surname","Bura"); 
  obj=new JSONObject();
  obj.put("name","Cmbarish");
  obj.put("surname","Cura"); 
  users.add(obj);
  response.getWriter().print(users);
%>

JSP Result

[{"surname":"Aura","name":"Ambarish"},{"surname":"Cura","name":"Cmbarish"}]

Source Location

Sample\ListBox\np_Transaction_JSON.xfdl

DomParser

To use XML type data, You  have to parse XML type documents before using.
This explains about a way to access to  XML document using DomParser.

Main Source Code

Node List

var domDoc;
var domPar = new DomParser;
domDoc = domPar.parseFromString(this.TextArea00.value);

var domElement1, domElement2;  
var i, j;
var msg="";
for( i = 0 ; i < domDoc.childNodes.length ; i++ )
{
  domElement1 = domDoc.childNodes[i];
  msg += "Node1["+i+"] = " + domElement1.nodeName + "\n";
  for( j = 0 ; j < domElement1.childNodes.length ; j++ )
  {
    domElement2 = domElement1.childNodes[j];
    msg += "    Node2["+j+"] = " + domElement2.nodeName + "\n";   
  }
 }  
 this.TextArea01.set_value(msg);

Node Value

// Parsing
 var domDoc;
 var domPar = new DomParser;
 domDoc = domPar.parseFromString(this.TextArea00.value);
 // Checking Node value
 var domElement;  
 var msg="";
 
 domElement = domDoc.getElementsByTagName("Dataset");
 msg += "Dataset TAG의 id값 = " + domElement[0].getAttribute("id") + "\n";
 
 domElement = domDoc.getElementsByTagName("Column");
 msg += "ID value of first Column TAG = " + domElement[0].getAttribute("id") + "\n";
 msg += "ID value of second Column TAG = " + domElement[1].getAttribute("id");
     
 this.TextArea01.set_value(msg);

Source Location

Sample\Etc\np_DomParser.xfdl

How to use jQuery

Preparation

Copying related jQuery module

To use jQuery copy the jquery lib file to engine folder of  nexacro platform.

1) Copy the ExtApi.json file to nexacro component directory
For example) C:\Program Files (x86)\nexacro\14\nexacro14lib\component\ExtAPI.json

2) Create the ExtAPI directory in the component directory
For example) C:\Program Files (x86)\nexacro\14\nexacro14lib\component\ExtAPI .

3) Copy the jquery-1.10.2.js file to ExtAPI folder in the component directory
For example) C:\Program Files (x86)\nexacro\14\nexacro14lib\component\ExtAPI\jquery-1.10.2.js

Registering ExtAPI.jsp module in TypeDefinition in nexacro studio

• Run the TypeDifinition and then click the add button

• Select the ExtAPI.json

Click the OK button after registeration like above.

Implementing animation Using JQuery

We implemented moving effect using animation function of jQuery.

Source location

Sample\Etc\np_jQuery_animate.xfdl

A way to use Local DB

Basic

This explains about how to configure Local DB.

1. How to create Lite DB

2. Data Definition (DDL)

3. Data Manipulation Language (DML)

How to create Lite DB

• Open project which you want to work

• and then add LiteDBConnection and LiteDBStatement to TypeDefinition.

• Draw LiteDBConnection and LiteDBStatement on form after creating new form

• Change datasource in property of LiteDBConnection to c:\Temp\localDB\localDB.s3db

• Mouse right button click on LiteDBConnection00 in Project Explorer and click on edit menu. DB editor will be opened and the DB file will be created at the location which is appointed in datasource in Properties.

• You can verify the created DB file at the location which is appointed in datasource in Properties.

Data Definition (DDL)

• Data Difinition Language of nexacro can not be handled in script logic. This is possible in DB editor.

• Click right button on LiteDBConnection00 in DB editor.You can create Table using Create Table menu in DB editor

• You can add and modify the table name, column name, type and primary Key etc on Create table window after clicking on [add a new field].

• You can create or modify clicking on [Execute SQL] on right bottom of Create Table after completing table creation or modification

• When Table is accomplished, [command has been complete] message will be appear in Output window.

• You can do drop and renaming etc. of created table clicking mouse right button on table in DB Editor.

• Search [SQLite Manager ] on Firefox Add-ons manager and install.

• After installing, press alt key on FireFox browser then the SQLite Manager will appear in Tool menu.

Data Manipulation Language (DML)

• We created table and defined column information. Now we explain about data input.

• Create four buttons for work.

Insert

This is setting for insert

• Set LiteDBConnection00 in ldbconnection of LiteDBStatement00 Properties.

• Write insert statement in query of LiteDBStatement00 Properties.

Ex)
insert into department values('100','CS Team','Gangnam-Gu, Seoul, Korea','135-873','1588-7895')

• Add following script in onclick event of insert button to run insert statement.

this.Button00_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.LiteDBConnection00.open();
    this.LiteDBStatement00.executeUpdate();
}

• Run insert statement clicking insert button on form after running the form using QuickView.

• You can verify the result after running using Refresh Database menu.

Select

This explains about a way to select data from Table.

• Create Dataset(Dataset00) and grid to show selected data.

• Create LiteDBStatement one more for selecting and name it as Selectstatement.

• Add following script in onclick event of select button to run select statement.

this.Button03_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.LiteDBConnection00.open();
    this.SelectStatement.executeQuery();
}

Ex)
select code, name, address, zipcode, telno from department

• Add following script to copy selected data from Local DB into Dataset.

this.SelectStatement_onsuccess = function(obj:LiteDBStatement,  e:nexacro.LiteDBEventInfo)
{
    if(e.reason == 7) // Select
   {
        this.dsDepartment.copyData(e.returnvalue);
   }
}

• You can verify the result clicking select button on form after running the form using QuickView.

Update

This explains about a way to update existing data.
Create update button and LiteDBStatement and then write update statement in query in Properties.

• Create LiteDBStatement and name it as UpdateStatement and then write update statement in query in Properties.

• Add following script in onclick event of update button.

this.Button01_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.LiteDBConnection00.open();
    this.UpdateStatement.executeUpdate();
}

Ex)
update department set name = 'Support Team' where code = '100'

• You can verify updated result clicking select button after clicking update button on form after running the form using QuickView

Delete

This explains about a way to delete existing data.

• Create LiteDBStatement and name it as DeleteStatement and then write delete statements in query in Properties

• Add following script in onclick event of delete button.

this.Button02_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    this.LiteDBConnection00.open();
    this.DeleteStatement.executeUpdate();
}

Ex)
delete from department where code = '100'

• Data will be deleted clicking delete button after clicking select button on form after running the form using QuickView .

Etc

1. LocalDB does not work when LocalDB is located in server. Please use localDB after putting LocalDB in local.

2. LocalDB sample provides interlocking with open source SQLite. We do not provide technical support about SQL query statements or ways to use query statements..

3. You can modify column of DB file using SQLite edit program.

Local DB sample with DataSet

After understanding about Local DB content, please try to apply Local DB to your project referring to sample with grid and dataset.

Preparation

1. Down load a zip file from link below and unzip in your pc directory.

2. Copy localDB.s3db file from DB folder into Documents folder.

3. Run nexacro studio and open sample project in LocalDB folder.

Related Source