クライアント Web アプリケーション "Hello World"

提供: HTML5 Builder
移動先: 案内検索

このチュートリアルでは、以下のユーザー インターフェイス コントロールを使用するクライアント Web アプリケーションを作成します。

  • 名前を入力するためのテキスト フィールド
  • メッセージを表示するためのラベル
  • クリックされると "Hello, <名前>!" というメッセージをラベルに表示するボタン(<名前> はテキスト フィールドに入力された名前)。

次のようなユーザー インターフェイスになります。

WebHelloWorldChrome.png WebHelloWorldIE.png WebHelloWorldFirefox.png

アプリケーションの新規作成

[ホーム]ビューの[新規作成]ページで、ファイルやプロジェクトを新規作成できます。左側のツリービューで[HTML5 Builder プロジェクト]を選択し、右上の領域にある[クライアント Web アプリケーション]をダブルクリックします。

HomeNewServerWebApplication.png

新しいアプリケーション用に、最初の(空の)クライアント ページが作成され、[デザイン]ビューに表示されます。

DesignEmptyWebPage.png

[デザイン]ビューの中央部分は、グラフィカルな Web ページ編集ツールであるデザイナです。また、デザイナの左側、右側、下側にもさまざまなウィジェットがあります。これらについてはドキュメントの別のページで詳細に説明されていて、このチュートリアルではその一部を実際に使用します。

コントロールの追加

HTML5 Builder でクライアント Web アプリケーションを作成するには、まずユーザー インターフェイスを設計します。ユーザー インターフェイスの作成にデフォルトで使用できるコンポーネントが多数用意されています。[ツール パレット]右上のウィジェット)にカーソルを移動し、プラス記号([+])のアイコンをクリックして[Standard]カテゴリを展開します。その後、Edit コンポーネントを選択して、デザイナにドロップします。コンポーネントのインスタンスがデザイナに表示されます。

ToolPaletteStandardHighlighted.png ToolPaletteEditHighlighted.png

同じ手順で Label コンポーネントと Button コンポーネントをデザイナに追加します。

ToolPaletteLabelHighlighted.png ToolPaletteButtonHighlighted.png

これで、デザイナ上にコンポーネントが 3 つあるはずです。マウス ポインタを使用して、好きな位置にコンポーネントを配置し直します。

WebHelloWorld1.png

デザイナ上でコンポーネントを選択した後、[オブジェクト インスペクタ]を使って、そのコンポーネントのプロパティを確認したり変更することができます。

WebHelloWorld2.png

次に、Button コンポーネントの Caption をビジュアルに変更します。LabelCaption プロパティと EditText プロパティは空のままでかまいません。前者はプログラムで定義され、後者はユーザーにより入力されるからです。また、ボタンをクリックしたときに Web ページの再読み込みが行われないよう、Button の ButtonType プロパティを btNormal に変更する必要があります。

コンポーネントのプロパティを変更するには、デザイナで(または[オブジェクト インスペクタ]上部のドロップダウン リストから)コンポーネントを選択し、対象のプロパティの値を変更し、Enter キーを押して変更を適用します。上のスクリーンショットでは、Button の Caption プロパティが "Say Hello" に、ButtonType プロパティが btNormal に変更されています。

ボタン クリックに対する応答の作成

Web アプリケーションでは、ボタンをクリックしたりテキスト フィールドに入力するといったユーザーのアクションに対する応答はどれも、イベントに対する応答として実装できます。HTML5 Builder では、そのような応答をイベント ハンドラと呼びます。

Button コンポーネントの場合、最も典型的なイベントはボタンのクリックです。デザイナでボタンをダブルクリックすると、ボタン クリック イベントのイベント ハンドラを実装するためのスケルトン コードが HTML5 Builder によって生成されます。

WebHelloWorld3.png

この中かっこの間に応答を実装することができます。"Hello, <Edit に入力された名前>!" というメッセージを Label に表示するよう、応答を実装します。

$('#Label1').html("Hello, " + $('#Edit1').val() + "!");

jQueryhtml() メソッドを使用すると、Label などの要素の内容を定義することができます。また、val() では、Edit コントロールなどの入力フィールドの値を取得することができます。JavaScript では、文字列リテラルを囲む引用符には ' ' または " " を使用します。また、プラス(+)記号を使用して文字列を連結することもできます。

コードを入力していると、そのオブジェクトでサポートされているメンバの種類、つまり、コンポーネントを表す JavaScript(および jQuery)要素のプロパティやメソッドを示すヒントが表示されます。

WebHelloWorld4.png

アプリケーションの実行

アプリケーションの実装が終わったので、実行することができます。メイン ツールバーで[実行]ボタンをクリックするか、F9 キーを押します。

WebHelloWorld5.png

アプリケーションを実行すると、EditButton を持つ Web ページがデフォルトの Web ブラウザに読み込まれます。Edit にテキストを入力し、[Say Hello]ボタンをクリックします。

WebHelloWorldFirefox.png

関連項目