Hackvertor Ajax applications

I hate to use the word Ajax because there’s no XML involved just nice JSON but Hackvertor now has Ajax applications! At the moment it’s very rough around the edges but it will improve when I get more spare time to work on them. What does it mean? Well you can now share actual HTML/JS based applications on Hackvertor based on your own code and store/load data. Each time you create a tag inside the applications category it automatically gets added to the applications section. The app can then be in the list when clicking on the navigation.

How to create a HV app

It’s slightly different than creating a tag, apps use a object to contain the mini site. This way you can write a forum in less than 100 lines 🙂 The best practice way I came up with was to use a anon closure, which contains a user variable to get info about the current user. Then each section is split into a different property of the site object. The object doesn’t need to be called site but I thought it was handy to think of it that way.

There are two special properties of the “site” object. They are home this is required in order to run your application and returns the first page the user sees. Second is styles this allows you to style all of your app in one place. All HTML/CSS is controlled by HTMLReg and CSSReg, JavaScript is handled by JSReg.

To see how it works you can see a very simple/bad app I wrote quickly:-
Forum sample code
Forum demo

You can call each sections of your app by using # urls. For example lets say you wanted to call the “Cancel” function of your “site” object. All you need to do is create a url with #Cancel. Arguments can be sent to your functions in links by using “?” for example if you look at the forum, I use #topic?0 to pass the id number to the topic function. This also works nicely with forms, you just give a submit button a value of your site function and it will automatically gather all the form values and send a object with them all referenced. To see how this works in the forum app, just take a look at the Save section. Here is how to submit button calls it:-

<input type="submit" value="Save" />

Hackvertor automatically scans all inputs/links and adds a onclick handler to call your function named in the value attribute or the location.hash of the link. The above HTML actually does something like this:-

<input type="submit" value="Save"  onclick="site.Save(this.form)" />

Limitations

I need to write a DOM layer to allow sandboxed assignments to CSS and HTML attributes. At the moment this makes apps pretty restrictive but you could write a IM application or shared messaging app. This means stuff like document.getElementById won’t work or custom event handlers. You are also limited what kind of HTML/CSS can be executed using the sandboxes. There are browser bugs too 🙁 I’ve not tested it fully yet.

App API functions

getUser() – Returns an object of the current user. The properties include: userID, username, image. Image will only be returned if a user has a picture uploaded.

loadStorage((string) appID, (int) id) – Loads a JSON string. AppID is the application name, id is a number used to refer to a section such as a forum topic.

saveStorage((string) appID, (int) id, (string) JSON, insert|update) – Saves a JSON string. AppID is the application name, id is a number used to refer to a section such as a forum topic. JSON is a string of JSON data you want to store. The last param inserts or updates the JSON data, it uses the userID of the user to check permissions.