ウィジェットクラスライブラリーのサンプルウィジェットを作る
先日紹介したウィジェットクラスライブラリーの使い方を、
ドキュメントにそって解説して、サンプルウィジェットを作っていこうと思います。
下記のマニュアルを開いて次におすすみください。
まず書いてあることは、JavaScriptでコントロールを作っていく、と言う説明です。
JavaScriptができればできるほど理解はしやすいと思いますが、
高度なスキルがなくても、コピペベースで必要なことはできるかと思います。
基準としては、JavaScriptからイベントの設定ができればOKと思います。
さて、「はじめましょう」の項目では、ライブラリーの二種類の設置の仕方を示しています。
一つは、ライブラリーだけをマイウィジェットフォルダーの中に入れておき、
各ウィジェットからはそこを参照する方法、
そしてもう一つは、各ウィジェットファイルの中に含める方法です。
Yahoo!では後者をすすめていますので、後者 (組み込み) の方法だけを見れば結構です。
ウィジェットクラスライブラリーをインストールすると、
マイウィジェットフォルダーにLibraryと言うフォルダーが増えていると思います。
そのフォルダーごと、あなたの作っているウィジェットのResourcesフォルダーにコピーします。
すると、
include('Resources/Library/Libary.js');
してもエラーにならないようになると思います。
また、.konファイルにallowCustomObjectAttributesを指定するのをお忘れなく。
今のエンジンでは、<settings>タグ内に書くのが本流です。
<settings>
<setting name="allowCustomObjectAttributes" value="true"/>
</settings>
さて、includeができたら、「クラスとコントロールを使う」に移ります。
ここで言っているのは、クラスライブラリーを使う上では、includeの代わりと思ってlib.includeを使いましょう、と言うことです。
コードの最適化だの継承チェインだのはとくだん気に掛ける必要はありません。
で、サンプルですが、上のサンプルと繋げても、さっそく動きません。
上でincludeしたあとに、下記のライブラリーを自分でincludeしてあげる必要があるのです。
lib.include("Yahoo.Controls.Control");
lib.include("Yahoo.Controls.Sizable3PartControlBase");
また、ボタンの設置の仕方で、Form()につける場合、Frame()につける場合、Window()につける場合、と
三種類載っていますが、ひとつのボタンは一カ所にしかつけられません。
どれか一つだけを残して、残り二カ所はコメントにしてください。
frameへの追加について、英語版ドキュメントでは、addsubviewとなっていますが、addSubviewなので、
気をつけてください。
なお、対応するFrameやWindowも必要になりますし、
frmCoolWindowフォームにボタンをつける場合は、そのフォーム自身も作ってあげる必要があります。
その場合はこのような記述になります。
lib.include("Yahoo.Controls.Form");
frmCoolWindow = new Yahoo.Controls.Form(null);
さて、これでボタンが表示されて欲しいのですが、ボタンのかけらしか出ない場合があります。
その場合、ボタンの横幅を自分で調整しなければなりません。
btnOK.width = 50;
のようにすると、横幅50ピクセルになります。
その下のイベントの監視のところは、そのまま繋がります。
今回の以上の処理を記述したウィジェットを公開しておきます。
ウィジェットコンバーターで展開して、中身を確認して参考にしてみてください。
環境設定により、form、frame、windowのどこかにボタンが表示されます。
ダイアログフォームを動かした時に、ボタンが追随してくるかどうか確認できると思います。
frameやwindowに付けた場合は、ボタンがフォームの裏に隠れていることが多いので気をつけてください。
続く？
