AppStudio Blog

One of the enhancements in NS Basic/App Studio 1.2.4 was the addition of JSON support. If you want the full details on what JSON is, read about it on Wikipedia. For our purposes, it is a fast way to wrap up a bunch of data up so it can be transmitted or received.

Using JSON, you can take a data structure or a complete SQLite database and turn it into a string which you can send to another system using HTTP POST or WebSockets. You can also receive a string the same way, which you can then turn into active data in your program or save to SQLite. You can also use JSON to encode a database which can then be installed with your app. Your app can read it in and construct the database.

It’s fast. We did a benchmark where we created an SQLite database with 20,000 customer address records. Exporting that database to JSON on an iPhone 4 took just over 1.1 seconds. Importing 1,000 records to a new database took 2.2 seconds. Tests on an Android Nexus S were also fast: import in .851 seconds and export of 20,000 records in 3.8 seconds. It’s quite practical to use on large files.

Here is how to export an SQLite database using JSON:

Function JSONExport()
  Dim i
  recs=DBRecords.rows.length
  Dim data(recs)
  For i=0 To recs-1
    data[i]=DBRecords.rows.item(i)
  Next
  JSONExport=JSON.stringify(data)
End Function

What this code does is to copy the database into an array, with one element for each row of the database. The JSON.stringify() function converts it all to a JSON string.

Here is some code which imports an SQLite database:

Function JSONImport()
  Dim data, sqlList, q
  file=ReadFile("customers.json")
  data=JSON.parse(file.responseText)
  DB = SqlOpenDatabase("customers.db","1.0","My Customer Database")
  q=Chr(34)
  If DB<>0 Then
    sqlList=[]
    sqlList[0]=["DROP TABLE customerData;",,skipError]
    sqlList[1]=["CREATE TABLE IF NOT EXISTS " & "customerData('name', 'address1', 'address2', 'age', 'sales', PRIMARY KEY('name') );"]
    
    For i = 0 To UBound(data)-1
      Name    = q & data[i].name & q
      Address1= q & data[i].address1 & q
      Address2= q & data[i].address2 & q
      Age     = data[i].age
      Sales   = data[i].sales
      s = Join([Name, Address1, Address2, Age, Sales],",")
      sqlList[i+2]="INSERT INTO customerData (name, address1, address2, age, sales) VALUES ( " & s & ");"
    Next
 
    sqlList[i+2]=["SELECT * from customerData ORDER BY name;", dataHandler]	  
    Sql(DB, sqlList)
  End If  
End Function

The ReadFile in the third line is interesting. “customers.json” is a file that is included in the project’s manifest and deployed with the project. ReadFile() reads the entire file in.

The fourth statement does all the work. It takes the data that was read in and turns it into an array, with one element per row. From there, it is straightforward to process it and add the records into the SQLite database.

You can try this sample out: it is called SqlSample1, and it is installed with NS Basic/App Studio starting with 1.2.4.

If you are curious about the format of the JSON file, here’s a sample:

[{"name":"Customer0","address1":"0 Winding River Lane","address2":"Anytown USA 100000","age":32,"sales":56025},{"name":"Customer1","address1":"1 Winding River Lane","address2":"Anytown USA 100001","age":75,"sales":86082},{"name":"Customer10","address1":"10 Winding River Lane","address2":"Anytown USA 1000010","age":23,"sales":52976},{"name":"Customer100","address1":"100 Winding River Lane","address2":"Anytown USA 10000100","age":87,"sales":26473},{"name":"Customer101","address1":"101 Winding River Lane","address2":"Anytown USA 10000101","age":10,"sales":45455},
...

The data is represented as an array, with one element for each row of the array. Each element is made up of a list of fieldnames in quotes and values. String values are in quotes; number values not.

It’s easy to get Facebook information into your NS Basic/App Studio program. Facebook has an API that is easy to access. Send a message to it, and it will return the information you requested.

Here’s how to request information on Mark Zuckerberg:

$.getJSON("https://graph.facebook.com/MarkZuckerberg", "callback=?", gotJSON)

A bit of explanation is in order.
The $.getJSON() function is in an external library named JQuery. JQuery is a very popular library for JavaScript developers. Fortunately, it can be called from NS Basic/App Studio quite easily. Simply put the following into your project’s “extraheaders” property:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js">
</script>

(You could also download the file jquery.min.js into your project’s directory and add it to your manifest.)

The getJSON call has 3 parameters: the URL to get information from, any parameters to send to the URL, and the return function. In this case, we want to get information about Mark Zuckerberg.

When it comes back, we want the function gotJSON to be called on our program. This is an asynchronous operation: your program can continue to run while we wait for graph.facebook.com to reply. When it does, our function is called.

Here is what gotJSON looks like:

Function gotJSON(data)
  If data["error"] Then
    txtData.value = data.error.message
  Else
    txtData.value = ""
    For Each index, item in data
      txtData.value = txtData.value & index & ": " & item & vbCRLF
    Next
  End If
End Function


The data is returned as a JSON object, which ) is a lightweight text-based open standard designed for human-readable data interchange. What’s left to do is to display the object. Taking advantage of For Each’s ability to iterate both the names and the values of each member of the object, we output one line for each member. Here is the output:

For more information on the Facebook API, see http://developers.facebook.com/docs/reference/api/.

You can print the current screen contents from your app using the statement

window.print()

For this to work from an iOS device, you will need to be connected by WiFi to a network with a properly configured printer. For example, if you are connected to a Mac running Mac OS 10.6, you can print to any AirPlay enabled printer.

While Apple has only a short list of AirPlay printers built in, almost any printer connected to the network will work if you run Air Printer Lite or Air Print Activator on the system.

jQuery Mobile 1.4 adds some extra styling which can interfere with printing a full page. Here is the workaround:

Function btnPrint_onclick()
  Dim h = Page_PrintTest.style.minHeight
  Page_PrintTest.style.minHeight = ""
  window.print()
  Page_PrintTest.style.minHeight = h
End Function

Sencha Touch is a JavaScript framework which can be used to add additional functionality to NS Basic/App Studio. It has a number of slick features and controls. Complete documentation is at http://dev.sencha.com/deploy/touch/docs/. One thing to keep in mind: it’s quite large, adding almost 500K to your project.

Let’s use it to create a Date Picker that looks like this:

Start by adding the Sensha .css and js files into your project folder. Add this to your project’s extraheaders property:
<link rel="stylesheet" href="sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touchcompressed.js"></script>


Add this to your project’s manifest:
sencha-touch.css
sencha-touchcompressed.js


Now, we’re ready to code. First thing we need to do is set up a reference to Sencha’s DataPicker object. All of Sencha’s functions are wrapped in a single object named Ext. To call any Sencha function, you therefore put “Ext.” in front of it:
datePicker = new Ext.DatePicker({yearFrom:2010, yearTo:2015})

Next, we want to tell datePicker what to do if the value of our datePicker changes. Sencha has a handy function for that: the following statement will call the showDate function in our program when this happens:
datePicker.on("change", showDate)

We’ll need a button to open the datePicker window. Add one to the project and put the following code for onclick. The first statement sets the initial date for the picker as today. The second one shows the DatePicker as a modal dialog.
Function Button1_onclick()
  datePicker.setValue(new Date())
  datePicker.show()
End Function

Now we just have to add the function that gets run if the user changes the date. We’ll just display it on the screen. An NS Basic/App Studio MsgBox statement could do this well, but since we’re showing off Sencha, let’s use their fancy one:
Function showDate()
  Ext.Msg.alert("Sencha Touch", "Date Entered is " & datePicker.getValue(), Ext.emptyFn)
End Function

Here is all the code in one listing:

datePicker = new Ext.DatePicker({yearFrom:2010, yearTo:2015}
datePicker.on("change", showDate)

Function Button1_onclick()
  datePicker.setValue(new Date())
  datePicker.show()
End Function

Function showDate()
  Ext.Msg.alert("Sencha Touch", "Date Entered is " & datePicker.getValue(), Ext.emptyFn)
End Function

This sample is included in the NS Basic/App Studio Samples folder starting in version 1.2.2.

There’s a lot more to Sencha Touch than this. If you discover any good tips or tricks, let us know so we can share with everyone!