Spket IDEでコーディングしてみる

簡単なアプリケーション作成

   ではさっそく、簡単なアプリケーションを作ってみましょう。

プロジェクトの作成

   Spket IDEで「File → New → Project」を選択します。表示されたウィンドウで「General → Project」を選択して「Next」ボタンをクリックします。次に表示されたウィンドウでプロジェクト名とワークスペースの設定を行います。

図2：新規プロジェクトの作成
（画像をクリックすると別ウィンドウに拡大図を表示します）

   今回はプロジェクト名を「Sample」とします。ワークスペースはデフォルトではSpket IDE起動時に指定したワークスペースが設定されています。デフォルトで他のディレクトリを選択した場合は「Use default location」のチェックボックスのチェックを外してLocationに下記のコマンドを入力します。

   次にFinishボタンをクリックすると、プロジェクトが作成されてSpket IDEの左上のProject ExplorerにSampleという名前のフォルダが表示されます。

   Sampleというフォルダを右クリックして、表示されたメニューから「Properties」を選択します。その中から「Resource」を選 んで、真ん中あたりにある「Text file encoding」の項目から「Other」を選択します。そして文字コードを「UTF-8」にしてOKボタンをクリックしてください。

   これでOpenLaszloのアプリケーションで日本語表示をすることが可能になります。

ファイルの作成

   ファイルを作成するには「File → New → File」を選択します。するとウィンドウが表示されるので、下にある「File name」の欄に「view.lzx」と入力して「Finish」ボタンをクリックします。

図3：ファイルを作成
（画像をクリックすると別ウィンドウに拡大図を表示します）

   すると、ファイルが作成されて自動的にエディタが開きます。Spket IDEは拡張子のlzxを認識して、OpenLaszlo開発に必要なものをSpket IDE上に表示してくれます。

コーディング

   まずはOpenLaszloの基本コーディングをしましょう。ルートタグは「canvas」です。view.lzxに以下のようにコーディングします。

   上記内容は、テンプレートを使用して記述することも可能です。

   View.lzxの中にカーソルを置いて「Ctrl+Space」をすると、記述可能な候補が表示されます。候補の下にあるcanvas（タグではないもの）を選ぶと、自動的にXML宣言とcanvasタグが記述されます。

   テンプレートの編集・追加は「Window → Preferences」で開いた設定画面から「Spket → Editors → XML Editor → LZX Templates」で行うことが可能です。よく使うコードをテンプレートとして追加しておくと便利かもしれません。

   では中身を記述してみましょう。まずViewを使って単純な赤い四角形を表示するためのコーディングをします。

図4：記述可能な属性値のリストが表示される

   ここでは自分でviewタグをコーディングしてもかまいませんが、せっかくSpket IDEを使っているので、右側の「Snnipets → Components → view」をエディタ上にドラッグ＆ドロップしてみましょう。

   なお、viewタグの属性値はカーソルをviewタグの中において「Ctrl+Space」を押すと記述可能な属性値のリストが出てくるので、そこから選ぶこともできます。