最初のOpenLaszloプロジェクト作成

さて、ここまででLaszloで表示するデータの準備が できたので、いよいよLaszloでのプログラムを開始 しましょう。
ステップを踏んで段階的に画面を充実 して行きながら、Laszloの概要をつかんでゆきましょう。

　1. OpenLaszloプロジェクト作成

• NetBeansでＦｉｌｅで新規プロジェクト-->Web/OpenLaszlo411AppProject.zip-->を選択し、次へをクリックします。
  プロジェクトの名前は"OpenLaszlo411_NetBeans_Rails_RIA"として完了をクリックします。
  現在のプラグインではProject Folderのみ追随し、 Project Nameはデフォルトの名前が入るので、プロジェクト名を
  修正して やります。
  デプロイ対象のｱﾌﾟﾘｹｰｼｮﾝｻｰﾊﾞｰは デフォルトではGlassFishです。
  まず起動してみましょう。操作順次は、ｱﾌﾟﾘｹｰｼｮﾝｻｰﾊﾞｰ が停止した状態で、プロジェクトにカーソルを当て、
  まず右クリック-->生成物を削除して構築を選択します。
  次に 右クリック--> 実行の取り消しおよび配備を選択します。
  次に右クリック-->実行 または主プロジェクトを実行のアイコンをクリックします。
  このときは今やろうとしているプロジェクトが主プロジェクト として選択されていなければなりません。
  ブラウザが自動起動されて、"OpenLaszlo First Guide" というメッセージが表示されれれば成功です。

　2. canvas作成、　<window>　タグ追加

• 次にLaszloｱﾌﾟﾘｹｰｼｮﾝを作成しましょう。マウスカーソルを Webページに当て、
  右クリック-->新規-->OpenLaszlo Canvas を選択します。初めて作成するときはOpenLaszlo Canvasが
  現れないので、その他を選択するとweb/OpenLazloカテゴリが 現われので、そこで選択します。
  そして現れたWizardでファイル名にrestaurant フォルダはデフォルトでwebとなっていますが、これを
  web\my-trainingと修正して完了をクリックします。
  最初からcanvasタグが入力された編集画面が現れますが この中に2行
  <window title="Restaurants" width="200" height="250">
  </window>
  と入れてやりましょう。(restaurant.lzx)
  そこで直ぐにブラウザのURLに my-training/restaurant.lzxを追加して
  URL: http://localhost:8080/OpenLaszlo411App/my-training/restaurant.lzx　として
  ブラウザの更新をかけます。ｱﾌﾟﾘｹｰｼｮﾝｻｰﾊﾞは再起動する 必要がありません。
  自動デプロイ機能が働いている ようです。
  現れたRestaurantsというタイトルがついた windowはブラウザのどこの位置にでも動かせます。
  

　3. Laszlo window に<dataset> タグ追加

• ここでIDE上でrestaurant.lzxをコピーしてペースト してやりますとrestaurant_1.lzxというファイルが できますので、
  これをrestaurant1.lzxと名前を変えてから 修正を加えてやります。
  <dataset src="http://localhost:3000/restaurants.xml" name="dsRestaurants" request="true"/>
  という行を追加してやり、ブラウザのURLを修正して 更新をかけます。
  ここではまだ何も現れませんが OpenLaszloのコンソールを使ってデバッガーを 立ち上げ、
  この入力フィールドにcanvasとかdsRestaurants と入力してやるとオブジェクトの存在が確認できます。
  この実行の前にはRoRを立ち上げておいてXMLデータの XMLオーバーHTTPによるﾃﾞｰﾀ供給を
  可能にして置く必要が あります。
  デバッガーコンソールを立ち上げるには OpenLaszloのコンソールの Debugのチェックボックスを チェックを入れ、
  Compileをクリックします。OpenLaszloのコンソールはブラウザをスクロールダウンするといちばん下に在ります。
  それではデータを表示してみましょう。次の1行
  <text datapath ="dsRestaurants:/restaurants/restaurant[1]/name/text()" />
  を<window>タグ内に追加しますが、前回と同じ手順で、またコピー・ ペーストをして更にrestaurant2.lzxと名前を
  変えてからから実施しましょう。restaurant2.lzx
  1個の名前が表示されました。
  

　4. 複数の名前を表示する。

• 今度は5個の名前を表示しましょう。前回と同じ手順で、 またコピー・ペーストをして更にrestaurant3.lzxと
  名前を変えてからから実施しましょう。
  表示される名前が重なってしまいした。
• そこで、これをファイルに<simplelayout/>を追加して
  修正します。コピー・修正後ははrestaurant4.lzxとなっています。
• []を取ると全部を表示します。コピー・修正後は restaurant5.lzxとなっています。

　5. スクロールバー、<view>タグ <datapath>タグ　追加

• 今度は大きくタグの追加をします。今度はrestaurant6.lzx です。
  スクロールバーが付き、<view>タグが<text>タグ の親となっています。
  <text>タグの中で新たなタグである <datapath>が使われています。
  <xpath>が導入され、 replication="lazy" となっています。
  こうすると自動的に<simplelayout/> も内部的に定義されていることになります。

　6. 別window , class・継承 、アニメーション の導入

• 今度の変化も大きく、別windowに選択した名前の 詳細データを表示します。
  今度はrestaurant7.lzx です。
  この詳細表示のwindowにはclassと継承の要素を 取り込んでいます。
  更にここにアニメーションの 要素を追加します。restaurant8zxです。
  
• OpenLaszloはバージョン4.0系統になってから 同一のソースコードからFlashとともに
  DHTMLの コンテンツを生成する事ができます。
  ここでは OpenLaszloのコンソールのDHTMLのチェックボックスを チェックを入れ、Compileをクリックします。
  するともう見えているのはDHTMLのコンテンツです。

　7. 詳細データからGoogle Map表示

• 最後に更にエキサイティングな例をお見せします。
  今までで得られた詳細データをGoogle Mapの geocoderに検索させてレストランの位置情報を 表示させるものです。
• まずGoogleからアクセスするためのAPIキーを獲得 します。
  そのためには下記のWebサイトにアクセスし、 利用規定をよく読んでチェックを入れます。
  この操作を行う前に、Googleからアカウントを獲得して おく必要があります。
  Sign Up for the Google Maps API
  http://www.google.com/apis/maps/signup.html
  ローカルでテストするので「http://localhost:8080」
  を入力した上で、「Generate API Key」ボタンをクリックします。
• 表示されるサンプルコードはsample_code.txtですが これを修正してgooglemap.jspとします。
  restaurant8.lzxをコピー・ペーストして得られた名前をrestaurantMap.lzx　と変更 します。
  その上でGoogle Map用に修正します。
  できた.lzxファイルをGoogleから供給されたHTML ファイルでラップします。
  ここではjspで簡潔に 実現しています。
  このjsp内でインクルードしているheader.jspでOpenLaszlo独自の環境を設定しています。
  
• restaurantMap.lzxをHTMLでラップして、Flash表示するjspはgooglemap.jspです。
• restaurantMap.lzxをHTMLでラップして、DHTML表示するjspはgooglemap_dhtml.jspです。