トピックの1つで、 Vkontakteのアプリケーションを作成するトピックが取り上げられました。 さて、続けましょう、今回だけ別の開発ツールに切り替えます。 このトピックでは、そのトピックで説明したAPIの連絡方法、署名作成の原則などについては考慮しません。



Vkontakteアプリケーションはフラッシュアプ​​リケーションであることは誰もが知っています。 主に、アドビ製品を使用したVKontakteアプリケーションの開発用。 無料のOpenLaszlo無料環境を使用して、リッチインターネットアプリケーションを開発しています。 このフレームワーク（それを呼び出しましょう）は無料で、そのソースコードは利用可能です。すべてのコンポーネントは変更できます（lazlaがXMLファイルをバイナリフラッシュにコンパイルする方法がわかりません。 フラッシュでのコンパイルに加えて、DHTMLでアプリケーションを作成する可能性があります。

基本的な概念。

レーザーのソースコードは通常のxmlファイルです。 レーザー上のアプリケーションには、メインノードが含まれている必要があります。 キャンバス内で、既存のクラスをlazloに配置し、独自のクラスを作成できます。 Lazloのクラスはすべて、<node>クラスから継承します。 Lazloで2番目に重要なクラスである<view>は、（x）htmlの<div>要素に似ています。

Hello Worldを表示するプログラムであるLazloで簡単なアプリケーションを作成しましょう。

< canvas >

< text > Hello World < text >

</ canvas >

ここで、新しい標準要素<text>が登場しました。 主な属性：テキスト、選択可能、パターン、複数行。 これ以上は焦点を合わせません。

JavaScriptは、アプリケーションロジックの作成に使用されます。 もっと複雑な例を挙げます。

< 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 >

結果





この例は、クラスの再定義方法とハンドラーの使用方法を示しているため便利です。 特に、テキストクラスに基づいて、独自のクラスclickClockを作成しました（laslaでは大文字と小文字が区別されることに注意してください）。 クラスに新しい属性-dayTableを追加しました（jsを使用して属性を追加することもできますが、方法については説明しません:)）。 <attribute>タグには、名前、値、タイプの3つの属性があります。 onclickハンドラを設定するには、<handler>要素を使用します。 内部jsコード。 xmlが使用されるため、<、>、＆などのスクリプト内でxmlのエンティティを使用することはできません。それらの代わりに、よく知られている＆lt;、＆gt;、＆amp;がすべての人によって使用されます。 これが誰かに合わない場合は、スクリプト全体をテキストブロック内に配置できます

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

この知り合いでは、VKontakteアプリケーションのフレームワークの作成を終了して直接作成できます。

OpenLaszloでのVkontakteアプリケーションのフレームワークの作成。

まず、メインプロジェクトファイルを作成し、main.lzxと呼びます。 その中にキャンバスを登録します

< canvas width ="607" height ="590" bgcolor ="white" >

< include href ="lib/library.lzx" />

</ canvas >

ここで、アプリケーションの最大サイズ（VKontakteで許可される最大値）を設定し、白い背景を設定し、作成するクラスの定義を含むファイルを含めます。 このために、<include>タグを使用しました。 ファイルの名前は何ですか-それは重要ではありません。 名前を話すファイルだけを呼び出します。 ライブラリの内容は次のとおりです。

< library >

< include href ="ServerData.lzx" />

< include href ="framework.lzx" />

< include href ="md5.js" />

</ library >

ライブラリは<library>要素によって定義されます。 ライブラリには、リモートサーバーとVKontakteサーバーを操作するための最初のファイル、アプリケーションロジック、3番目のファイル-md5ハッシュを作成するためのf-sという3つのファイルが含まれています。 始めましょう！

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 >



ここで、アプリケーションの主要な属性を定義します。 デバッグモードの場合はパラメーターを使用し、操作モードの場合はフラッシュスイッチを介してパラメーターを取得します。 フレームワークをオーバーロードしないために、クラスを作成しません。ルートクラスノードを使用します。 すべての要素は、アプリケーションのどこからでも見える識別子と名前として設定できることに注意してください。 一般に、ここのすべては（x）htmlに似ています。 今後もフレームワークの開発を続けていきます。 このトピックでは、vkontakte APIの1つのメソッドgetProfileのみを定義します。

<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 >

ここではvkontakteからのエラー処理は行いません。 各メソッドは、リクエスト、コールバックのペアで表されます。 最初に、要求カウンター（canvas.cntr）を設定し、プロファイル要求メソッドを呼び出して、フレームワークへのリンク、コールバックメソッドの名前、残りのパラメーターを渡します。 2番目の方法では、データを取得します。 この場合、VKontakteサーバーからの応答はxmlの形式です（残念ながらレーザーにはJSONサポートがありません。すべてのデータ交換はxmlを介してのみ行われます）。



ここで、_websiteとは何かを学びます。 これを行うために、serverData.lzxファイルの例を示します。

< 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は、ServerWebsiteクラスの作成済みインスタンスのIDです。 2つのクラスがあります。 最初はVKontakteサーバーへの実際のリクエストを決定し、2番目はサーバーからリクエストを作成してデータを受信するデータセットを決定します。

_getSignatureメソッドは、リクエストの署名を作成します。

これについて詳しく説明しますが、データセットには、ondata、onerror、ontimeoutの3つの重要なイベントがあるとしか言えません。 そして、それらはすべて独立して決定できます。 ondataハンドラーで、データポインターを取得し、コールバックを呼び出して、そこにデータポイントを渡します。 xml-kiをトラバースするためのポインターが必要です。

参照資料

openlaszlo.org-メインのOpenLaszloサイト。

openlaszlo.org/download-ここでは、Windows、Linux、Mac OS用の最新バージョンのLazlaをダウンロードできます...

最新バージョンでは、VistaおよびSevenでのコンパイルに問題があったため、バージョン4.5.1を試すことができます。 彼女にはまだ問題はありませんでした。

openlaszlo.org/archive-以前のバージョンはここからダウンロードできます

openlaszlo.org/taxonomy/term/14-開発者向けドキュメント

openlaszlo.org/node/409-Lazlo用に開発されたアプリケーションの例。 （H＆Rブロックのアウトソーシングの経験があることに注意してください。以前、約2年前、彼らのサイトははるかに興味深いものでした）



私のVKontakteアプリケーションリストにアクセスすると、例を見ることができます（1つだけが機能し、もう1つは閉じなければなりません。3つ目の例は現在開発中です）



ソースが必要な場合は、明日準備できます。 今日、私は自分自身を強制することはできません。



コメントを待っています:)

_________

ソースコードは、 ソースコードハイライターで強調表示されました。

テキストはHabraで準備されます