In one of the topics was touched the topic of creating applications for Vkontakte. Well, let's continue it, but this time we will move on to another development tool. In this topic, I will not consider the methods of API vkontakte, the principle of creating a signature, etc., that was described in that topic.

Everyone knows that Vkontakte applications are flash applications. Mainly for the development of VK applications use Adobe products. I use the free open source environment OpenLaszlo to develop rich Internet applications. This framework (let's call it that way) is free, its source codes are available, all components can be changed (I’ll just say that I don’t know how Lazla compiles xml files to a binary flash, because I wasn’t interested in this). In addition, in fact, compilation to flash, it is possible to create applications on DHTML.

Basic concepts.

Source codes in lazlo are regular xml files. Any application on a lazlo must contain a main node. You can put existing classes inside the canvas inside the canvas, create your own classes. Any class in Laszlo is inherited from the <node> class. The second most important class in Laszlo is <view>, similar to the <div> element in (x) html.
Let's write a simple application on a lazlo, a program that displays hello world:

< canvas >
< text > Hello World < text >
</ canvas >

This is where the new standard element <text> appeared. Main attributes: text, selectable, pattern, multiline. We will not focus on it further.
JavaScript is used to create application logic. I will give an example more complicated:

< canvas height ="30" >
< class name ="clickClock" extends ="text" >
< attribute name ="dayTable"
value ='["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]' />
< handler name ="onclick" >
var now = new Date;
this.format("You clicked me at %02d:%02d:%02d on %s",
now.getHours(),
now.getMinutes(),
now.getSeconds(),
dayTable[now.getDay()]);
</ handler >
</ class >
< clickClock >
Click Me!
</ clickClock >
</ canvas >

Result

')
This example is useful because here you can see how classes are redefined, handlers are used. In particular, based on the text class, we created our own clickClock class (I draw your attention to the fact that lazla is case sensitive). Added a new attribute to the class - dayTable (you can add attributes with js, I will not explain how :)). The <attribute> tag has three attributes: name, value & type. To set the onclick handler, use the <handler> element. Inside the code is on js. Since xml is used, then inside scripts you cannot use entities from xml, such as <,>, &, etc. Instead, the long-used & lt ;, & gt ;, & amp; are used instead. If this does not suit someone, then you can put the whole script inside the text block.

<! [CDATA[ var i = 0; if (i > 1) doSomething; ]] >

At this acquaintance, you can finish and go directly to creating a framework for VKontakte applications.

Creating a framework for Vkontakte applications on OpenLaszlo.

First we create the main project file, let's name it main.lzx. In it we will write our canvas

< canvas width ="607" height ="590" bgcolor ="white" >
< include href ="lib/library.lzx" />
</ canvas >

Here we set the maximum size for our application (the maximum allowed on VK), set the white background and included the file with the definition of our classes, which we will now create. For this, we used the <include> tag. What is the name of the file - it does not matter. We will just call the files using talking names. Here are the contents of our library:

< library >
< include href ="ServerData.lzx" />
< include href ="framework.lzx" />
< include href ="md5.js" />
</ library >

The library is specified by the <library> element. In the library, we connect three files — the first to work with the remote server and the VK server, the second, the application logic, the third — the function to create an md5 hash. Let's start, perhaps!

framework.lzx

< library >
< attribute name ="api_id" type ="string" value ="" />
< attribute name ="user_id" type ="string" value ="" />
< attribute name ="group_id" type ="string" value ="" />
< attribute name ="viewer_id" type ="string" value ="" />
< attribute name ="is_app_user" type ="string" value ="" />
< attribute name ="viewer_type" type ="string" value ="" />
< attribute name ="auth_key" type ="string" value ="" />
< attribute name ="secret" type ="string" value ="secret" />
< node id ="framework" >
< handler name ="oninit" >
<! [CDATA[
if ($debug)
{
canvas.setAttribute("api_id", '1566108');
canvas.setAttribute("user_id", '6781573');
canvas.setAttribute("group_id", '0');
canvas.setAttribute("viewer_id", '6781573');
canvas.setAttribute("is_app_user", '1');
canvas.setAttribute("viewer_type", '0');
canvas.setAttribute("auth_key", '556C75F1EFBC11CFB9F300A0247033C4');
}
else
{
canvas.setAttribute("api_id", lz.Browser.getInitArg('api_id'));
canvas.setAttribute("user_id", lz.Browser.getInitArg('user_id'));
canvas.setAttribute("group_id", lz.Browser.getInitArg('group_id'));
canvas.setAttribute("viewer_id", lz.Browser.getInitArg('viewer_id'));
canvas.setAttribute("is_app_user", lz.Browser.getInitArg('is_app_user'));
canvas.setAttribute("viewer_type", lz.Browser.getInitArg('viewer_type'));
canvas.setAttribute("auth_key", lz.Browser.getInitArg('auth_key'));
}
]] >
</ handler >
</ library >


Here we define the basic attributes of the application. If we are in debug mode, then we use our own parameters; if in operation mode, we get our parameters via flashvars. In order not to overload our framework, we will not create any class for it, we will use the root class node. I note that all elements can be set as identifiers that are visible from anywhere in the application, and names. In general, everything here is similar to (x) html. We will continue to develop the framework further. I will define in this topic only one method from the vkontakte API - getProfile:
Add a couple of methods inside <node id = "framework">

<!-- -->
< method name ="_getProfile" >
canvas.setAttribute("cntr", canvas.cntr + 1);
this._website.getProfile({c: this, f: "_getProfileCallback"}, canvas.viewer_id);
</ method >
< method name ="_getProfileCallback" args ="data" >
status.setText(" ...");
var o = {};
o.auth_key = canvas.auth_key;
o.uid = data.xpathQuery("user/uid/text()");
o.first_name = data.xpathQuery("user/first_name/text()");
o.last_name = data.xpathQuery("user/last_name/text()");
o.sex = data.xpathQuery("user/sex/text()");
status.setText("...");
this._register(o);
canvas.setAttribute("cntr", canvas.cntr - 1);
</ method >

Error handling from VKontakte here I will not give. Each of the methods is represented by a pair - request, callback. In the first one, we set the request counter (canvas.cntr), call the profile request method, passing the reference to the framework, the name of the callback method, and the rest of the parameters. In the second method, we get the data. In this case, the response from the VKontakte server is in the form of xml (unfortunately there is no JSON support in Lazel, all data exchange is only via xml).

Now find out what _website is. To do this, I will give an example of the serverData.lzx file:

< library >
< class name ="ServerWebsite" extends ="node" >
< handler name ="oninit" >
this.base_url = "http://api.vkontakte.ru/api.php";
</ handler >

< method name ="_getSignature" args ="params" >
/*if ($debug)
{
paraxms.test_mode = 1;
}*/
params.test_mode = 1;
params.rnd = Math.random();
var result = "";
var arr = [];
var j = 0;
for (var i in params)
{
result = i + "=" + params[i];
arr[j] = result;
j++;
}
arr.sort();
result = "";
for (j = 0; j < arr.length; j++ )
result += arr[j];
return canvas.viewer_id + result + canvas.secret;
</ method >

< method name ="getProfile" args ="cb_ref, uids" >
var data = {};
data.api_id = canvas.api_id;
data.method = "getProfiles";
data.uids = uids;
data.v = "2.0";
data.fields = "sex,photo";
data.sig = md5(_getSignature(data));
var ds = new lz.ServerWebsiteDataset(this, {cb_ref: cb_ref});
ds.setAttribute("src", this.base_url);
ds.setAttribute("querytype", "POST");
ds.setQueryParams(data);

ds.doRequest();
</ method >
</ class >

< class name ="ServerWebsiteDataset" extends ="dataset" type ="http" request ="false" >
< attribute name ="cb_ref" value ="null" />
< handler name ="ondata" >
var p = this.getPointer();
p.selectChild();
this.destroy();
this.cb_ref.c[this.cb_ref.f](p);
</ handler >

< handler name ="onerror" >
this.destroy();
this.cb_ref.c[this.cb_ref.f](-1);
</ handler >

</ class >
</ library >

_website is the id of the created ServerWebsite instance. Here are two classes. The first one defines the actual requests to the server of the VKontakte, the second - the dataset making requests and receiving data from the server.
The _getSignature method creates a signature for requests.
While we’ll dwell on this, I’ll just say that dataset has three important events: ondata, onerror, ontimeout. And all of them can be defined independently. In the ondata handler, we get a datapointer and call our callback, passing the datapointer there. Pointer we need for traverse xml-ki.

Links

openlaszlo.org - The main site for OpenLaszlo.
openlaszlo.org/download - Here you can download the latest version of Windows for Windows, Linux, Mac OS ...
With the latest version I had problems with compilation in whist and seven, so you can try version 4.5.1. With her, while there were no problems.
openlaszlo.org/archive - here you can download earlier versions
openlaszlo.org/taxonomy/term/14 - developer documentation
openlaszlo.org/node/409 - examples of developed applications on Laszlo. (I note that there is an outsourcing experience for the H & R Block. Previously, two years ago, the site they had was much more interesting)

If you go to my list of applications on VKontakte, then you can see examples (only one works, another had to be closed. The third example is in development)

If you need source, then tomorrow I can prepare. Today I can not make myself.

Waiting for comments :)
_________
Source code was highlighted with Source Code Highlighter .
The text was prepared in Habra Editor