HTML5 Builder トライアル<サーバーWebアプリケーション>

 HTML5 Builder トライアルを使ってみた。30日間無料でお試しすることが可能です。
http://www.embarcadero.com/jp/products/HTML5-Builder

HTML5 Builderは、PHPによるWebアプリケーション開発ツール「RadPHP」の後継製品だ。jQuery、jQueryMobileならびにPhoneGapを統合したモバイル向け開発環境を提供し、単一のHTML5/CSS3/JavaScriptコードベースから、iOSやAndroid、BlackBerry、Windows Phone 7といった複数のモバイルOSやWebブラウザ向けのアプリを開発できる。OSや画面サイズなどが異なる複数のスマートフォンやタブレット向けに、それぞれ個別に開発を行う必要はない。
情報:http://www.atmarkit.co.jp/news/201209/04/embarcadero.html

まずはダウンロード。
https://downloads.embarcadero.com/free/html5builder
情報を入力して「SUBMIT」すると、ダウンロードが開始されます。
また、シリアル番号がメールで送られてきます。

ダウンロードしたhtml_5_builder_upd1_win.zipを展開して、HTML5 Builder.exeを起動するとインストールが始まります。評価に使用したPCは64bit版のWindows7。インストールは簡単です。すべてデフォルトのまま進めると、JavaSEやAndroidSDK、apache-ant、TeeChart(グラフ作成ツール)も一緒にインストールされます。

インストールが完了したら早速起動しましょう。
まずは、メールで送られてきたシリアル番号とユーザ名、パスワードを入力して認証を行います。

起動すると黒い画面が立ち上がります。

サーバWebアプリケーション

ではチュートリアルに従い作業してみます。
左のペインから新規作成を選択し、「HTML5 Builder プロジェクト」を選択して、サーバーWebアプリケーションを ダブルクリックします。

「デザインビュー」が開きます。

UIコンポーネントを追加していきます。右ペインの「ツールパレット」から、「Edit」「Label」「Button」コンポーネントをドラッグ&ドラッグで中央のデザイン領域へ配置していきます。

Button1のキャプションを変更してみましょう。Button1を選択して、左下ペインにある「オブジェクトインスペクタ」より、Captionの項目を探し、  Say Hello に打ち変えます。

 ボタンクリックに対する応答の作成は、ダブルクリックで生成されます。では Button1をダブルクリックしてみます。

    function Button1Click($sender, $params)
    {

    }

このButton1Click関数に、ボタンクリック時のコードを記述していきます。 では、Edit1に入力kされた内容を連結してLabel1に表示するコードを書いてみます。

    function Button1Click($sender, $params)
    {
        $this->Label1->Caption = "Hello,".$this->Edit1->Text."!";    
    }

これで実行してみます。ツールバーから実行ボタンを押します。

ファイルやプロジェクトの保存について聞かれるのでそのまま保存します。プログラムが実行され、ブラウザに表示されます。

その1
その2
その3
その4

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です