クイックスタート
ここではステップに従い、一番最初のアプリケーション開発を作成してみます。
アプリケーション開発のスタートからデプロイしてアプリケーションの動作確認までになります。
Step1. アプリケーション作成
- まずサインインをしますと
[アプリケーション一覧]が表示されます。もし[アプリケーション一覧]が表示されない場合は、左サイドメニューにある[アプリケーション]を選択します。 - 次に画面右上にある
[アプリ作成]をクリックします。 [新しいアプリ]を選択します。- ここではアプリケーションタイプに
[DESKTOP]を選択し、任意の[ID]と[ラベル]を入力して、[作成]をクリックします。
Step2. UI作成
- Step1. で空のアプリケーションを作成すると自動的にUIエディタが開きます。この時点ではまだUIは保存されていません。
- UIエディタに好きなコンポーネントを配置します。ここではStep3. でアクションの計算を行うために
[入力]カテゴリから、[数値入力]コンポーネントを３つ好きな場所に配置します。配置したら各コンポーネントを右クリックして、[プロパティ]を選択します。[ID]はシステムが初期値を自動的に決定しているので、わかりやすい[ID]に変更します。ここでは次のように変更します。
| コンポーネント | ID |
|---|---|
| Number Field | number_field_1 |
| Number Field | number_field_2 |
| Number Field | number_field_answer |
- 同様にUIエディタに
[ボタン]カテゴリから[プッシュボタン]を好きな場所に配置します。このボタンはアクションのトリガーになります。ボタンの場合はイベントはクリックなので、クリックしたときの動作を、Step3. で記述していきます。 - 最後にUIを保存します。右上の
[保存]ボタンをクリックすると、[UI新規作成]ダイアログが起動しますので、任意の[ID]と[ラベル]を入力して保存します。ここではいずれも「UI01」とします。
Step3. アクション作成
- Step2. に配置した
[プッシュボタン]をクリックしたときに、[number_field_1]と[number_field_2]に入力した値を加算して、[number_field_answer]に表示する処理を行うようにします。このとき、[プッシュボタン]はイベントを発生するコンポーネントであり、そのときの処理をアクションとして記述していきます。アクションを記述するには対象のコンポーネントを右クリックして、コンテキストメニューから[アクション]を選択します。そのため、まずは[プッシュボタン]を右クリックして、[アクション]を選択します。 - アクションエディタの表示に切り替わります。アクションは
[アクションボード]とラベリングされたエディタ領域に JavaScript言語で記述していきます。次のように記述してください。
$ui.number_field_answer.value = $ui.number_field_1.value + $ui.number_field_2.value;- 右上の
[保存]ボタンをクリックします。アクションが保存されます。 - アクションエディタからUIエディタに戻るために右の
[閉じる (×)]ボタンをクリックします。
Step4. デプロイ
- Step3. まででアプリケーション開発は完了したので、実行環境にデプロイします。デプロイするにはUIエディタの右上にある
[実行]アイコンから行います。[実行]アイコンをクリックします。 - デプロイは2種類ありますが、ここでは
[リリースデプロイ]を選択します。 - ブラウザに新しいタブが自動的に開きます。このタブにアプリケーションの実行画面が表示されます。この画面が表示されたということは、正常にアプリケーションは実行されています。
[number_field_1]と[number_field_2]に好きな数値を入力して、[プッシュボタン]をクリックします。[number_field_answer]に足し算された結果が表示されていれば成功です。 - 以上で、はじめてのアプリケーション作成の説明は終了です。