HTML 5 App実戦(1):簡易計算機

「アプリを描きましょう」はとても使いやすいHTML 5 App開発ツールですが、ここでは簡単な計算機を例に、「アプリを描きましょう」でFirefoxOSアプリを開発する方法を紹介します.
1.HTML 5対応ブラウザ(Chrome/Firefox/Safari/IE 9+)で開くhttp://www.drawapp8.com/appedit.php

「新規」を選択して新しいappを作成します.デフォルトのデバイスはiphone 5(または他のデバイス)です.
2.今、デバイスをFirefoxOSの携帯電話に切り替えます.デバイスをダブルクリックしてデバイスのプロパティダイアログボックスを開き、デバイスリストからfirefoxOSの携帯電話を選択します.

3.「OK」を選択すると、iPhone 5がFirefoxOS携帯電話になっているのがわかります.上のtoolbarは必要ありません.削除します.

4.次に、計算機の式を表示するlabelコントロールをデバイスに追加します.

5.labelコントロールを選択し、そのプロパティダイアログボックスを開き、その位置とサイズに関するプロパティ(以下の図)を変更します.

6.次に、labelコントロールの名前とその他のプロパティ(以下の図)を設定します.

7.デバイスにgridコントロールを入れ、コンピュータのボタンをいくつか配置します.

8.gridコントロールを選択し、そのプロパティダイアログボックスを開き、行数と列数(以下の図)を変更します.

9.copy/pasteでgridのコントロールにボタンをいっぱい置いて、テキストと色を変更します(以下の図).

10.自分の好みに合わせてインタフェースを調整することができます.インタフェースの差は多くありません.コードを書き始め、対応するボタンを選択し、イベント処理エディタを開きます.
数字、演算子、括弧、小数点のボタンについては、クリックするときに式labelコントロールにテキストを追加すればいいです.

1
2 var   expr =  this .getWindow().findChildByName( "ui-label-expr" ,  true ); expr.setText(expr.getText() +  this .getText());
クリアボタンについては,式labelコントロールのテキスト内容をクリアすればよい.

1
2 var   expr =  this .getWindow().findChildByName( "ui-label-expr" ,  true ); expr.setText( "" );
ロールバックキーは、式labelコントロールのテキストの最後の文字をクリアすればいいです.

1
2
3
4
5
6 var   expr =  this .getWindow().findChildByName( "ui-label-expr" ,  true ); var   text = expr.getText(); if (text) { text = text.substr(0, text.length-1); expr.setText(text); }
等号キーの場合、式labelコントロールの式を計算し、結果を式labelコントロールに設定すればいいです.

1
2
3
4
5
6 var   expr =  this .getWindow().findChildByName( "ui-label-expr" ,  true ); try   { expr.setText(eval(expr.getText())); } catch (e) { alert(e.message); }
11.OK、大功告成、デバイスの「プレビュー」ボタンをクリックすると、コンピュータを使用できます.

今、携帯電話を横にして効果を見てみましょう.

12.実際のデバイスでテストして、メニュー「ファイル」/「デバイスでプレビュー」を選択すると、FirefoxOSの携帯電話でこのURLを開くダイアログボックスが表示されます.
テストに問題がなければ、インストールパッケージを生成できます.メニュー「クラウドコンパイル」/「FirefoxOSインストールパッケージのコンパイル」を選択します.
ここには私たちが作ったものがあります.
直接[編集]:http://www.drawapp8.com/appedit.php?url=https://code.csdn.net/absurd/FirefoxOS_Apps/blob/master/calculators/firefoxos_calc1.jso
オンライン[実行]:http://www.drawapp8.com/apprun.php?url=https://code.csdn.net/absurd/FirefoxOS_Apps/blob/master/calculators/firefoxos_calc1.jso