mvScript, Ajax and JSON

I've been asked to write a website for a new client. Nothing unusual in that, except that I have not yet met the client and the requirements, as they stand, are - well - thin, to say the least. I have a bunch of data in a spreadsheet with instructions that this needs to be served up to registered users. There will be a search box and a heirarchical navigation of some kind.

The solution will need to be available on all standard desktops and mobile platforms, and the data will change regularly.

For the mobile platform, I'm leaning towards a Titanium app. just because. I've spent quite some time recently working with Titanium and learning its foibles, to the extent that I'm writing a new book on Android Development with Titanium - not, if anyone from Appcelerator is watching (unlikely) - to diver away from their training, but because just getting up and running in the first instance is so very frustrating. A good product let down with pitiful documentation and very poor hand holding .. where have we heard that one before?

For the desktops, a web site seems the obvious choice, which means using one of my favourite technologies - the DoJo toolkit. This now, in fact, comes with mobile controls that emulate the look and feel of a real mobile application, but on the web - and unlike other webkit-based stacks it really does look and feel like a real app. It's also easier to prototype the look and feel using this than Titanium.

Which is where mvScript comes in.

The final website will be delivered using mainstream technologies - in this case it will probably be using SQL Server and WCF services to deliver data in JSON format. Which is a good combination but painful to prototype - there's too much configuration involved and too much general messing about. Once the data requirements have been hammered out and the functionality solidified I'm sure it will form a good basis. But we're not there yet.

I've written before about the flexibility of the UniVerse platform, and how it lends itself to rapid development especially during the prototype cycle. I can see a role for it even in dedicated Oracle and SQL Server shops just as a prototyping tool - the fact that it is typeless, handles complex data structures and has completely dynamic metadata makes changing the data structures a breeze. So in no time at all, and assisted with a copy of mvStudio, I had the database designed and a set of Windows forms to maintain it.

But what of the front end?

I've possibly made a mistake in marketing mvScript as a simple solution. It is - you can create dynamic web pages in just a couple of minutes, using regular DHTML and it's UniVerse-like scripting language. It can call regular UniVerse subroutines for data, can read and write files, execute commands, and has all the dynamic array handling and logic constructs of a standard UniVerse application. Except it delivers these up as web pages.

But what I've failed to communicate, is that mvScript is not limited to DHTML. You can create anything in mvScript that can be served up through a web server - and that applies especially to web services and to JSON.

Building JSON output from UniVerse code is childs play - just create some template lines and call CHANGE() to substitute real data. That's the great beauty of JSON - it really lends itself to the multivalue model in terms of its data format, and it is incredibly simple.

       SUBROUTINE adManfacturers(InData, OutData, ErrText)
$OPTIONS PICK
       ErrText = ""
       Results = ''
       Open 'MANFACTURERS' To MANUFACTURERS Else
          ErrText = 'Cannot open MANUFACTURERS'
          RETURN
       End
       Template = \{ identifier: 'name',  label: 'fullname',  items: [ {DATA} ]}\
       ItemTemplate=\{ name: '{ID}', type:'manufacturer', fullname:'{FULLNAME}', image:'{IMAGE}' }\
       GoSub DoSelect
       RETURN
*---------------------------------------------------------------------------
* DoSelect
*---------------------------------------------------------------------------
DoSelect:
       ExLine = 'SSELECT MANUFACTURERS'
       Perform ExLine
       ReadList List Else List = ''
       Dc = Dcount(List,@FM)
       For P = 1 To Dc
          GoSub Add
       Next
       Convert @FM To "," In Results
       OutData = Change(Template,'{DATA}',Results)
       Return
Add:   
       Id = List

       Read ManufRec From MANUFACTURERS, Id Then
          Line = ItemTemplate
          Line = Change(Line,'{ID}',Id)
          Line = Change(Line,'{FULLNAME}', ManufRec<1>)
          Line = Change(Line,'{IMAGE}', ManufRec<2>)
          Results<-1> = Line
       End
       Return 

And creating mvScript pages to source data in JSON format is equally simple. How simple?


That simple!

DoJo, and many other similar projects such as the popular jQuery, make handling JSON and the whole process of AJAX simple. In the case of DoJo it's just a call to a URL and instructing the library in the format of the expected output. All DoJo visual components are data aware and can be sourced from JSON formatted data, so building a tree view, for example, is accomplished by calling the mvScript page and populating a data source:

function getManufacturers(){
 dojo.xhrPost(
    {url : "http://localhost/ad/adTreeJSON.wsp",  
     handleAs: "json",
     load: function(data, args){           
           mStore = new dojo.data.ItemFileWriteStore({data : data});           
            var mGrid = dijit.byId("grdManufacturers");
           mGrid.setStore(mStore);
           },
      error: function(error, args){
           alert('Error reported is ' + error);
         }   
    }
    );
}

Result - a nicely populated tree view, list or table.

If you want to see mvScript and DoJo in action together, take a look at the Better and Better site at the U2UG. And while you're there, feel free to post suggestions.

The U2UG board have been spending the last meetings discussing the future of the U2 products with Rocket and suggestions for getting new developers involved. But that's food for another post.