ボタン設定
Web Appsエディタでの操作の基本を理解し、ボタンだけで構成されるアプリケーションを構築します。
不思議の国のアリスの冒険」という本を題材にした短いクイズを作ってみましょう。アリスがチェシャ猫に初めて会った場所をユーザーが覚えているかどうか調べてみましょう。
私たちのアプリケーションは、このようになります。
- 問題文です。アリスがチェシャ猫に初めて会ったのはどこでしょう？
- 選択ボタン。マッドティーパーティー、公爵夫人の家、森、クロケット場。ユーザーが間違った答えを選んだ場合、その答えのボタンが消え、正しい答えを選んだ場合、間違った答えのボタンがすべて一度に消えます。
- ポップアップメッセージで、答えが正しかったかどうかが分かるようになっています。
ボタンの作成方法
ボタン」 エレメントをマウスポインターで（左クリックしたまま）、ボタンを置きたい場所にドラッグします。
回答可能な数に応じて、4つのボタンを追加する必要があります。
ボタンの外観をカスタマイズする
最初のボタンをクリックすると、設定ウィンドウが表示されます。ボタンの外観を設定する"Look&Feel"タブが表示されます。
1.以下のフィールドを編集します。
- ラベル：ボタンのテキスト - 最初の答えを入力してください。"Mad-Tea Party "と入力します。
- アイコン：ボタンのアイコン - 「アイコンの選択」をクリックして、好きなものを選んでください（現在、2500種類以上あります）。
- Size: ボタンサイズ - ボタンを大きくするために「Large」に設定します。
- 名前。これは、ボタンがアプリケーションの他の要素から "見られる "名前です。各ボタンはユニークな名前が必要です - ボタンの名前を "btn-mad_tea "にします。
フィールドを編集すると、ウィンドウ上部の画像が変わり、設定が適用された後のボタンの外観が表示されます。
2.2. すべての項目を入力したら、"Save"をクリックします。
- 残りのボタンも、最初のボタンと同様に、btn-duchess_h、btn-wood、btn-croquet_g という名前を使って設定します。
- そうしないと、ページを更新したりエディターを閉じたりしたときに、ボタンが消えてしまいます。
トリガーとイベントのセットアップ
次に、ボタンのアクションを設定する必要があります。まずは正解の「Duchess' House」から始めましょう。あなたの仕事は、Web Apps エディタに "説明 "することです。
- ボタンのトリガーは何なのか？
- この場合、どのようなイベントが発生するか：ボタンが消えます。
- このイベントが発生すると、どんな要素が変化するのか：他のボタン。
Duchess' House "ボタンの設定に戻り、トリガー・タブに移動してください。このボタンに追加されたすべてのトリガーが表示されます。
- 今は1つだけです -"OnClick"。これは自動的に追加され、あなたがボタンをクリックしたときにボタンが動作することを意味します（まさにあなたが必要とするものです）。
- OnClick"の他に、他のトリガーもボタンに設定することができます。説明付きの完全なリストは、プラットフォームのドキュメントにあります。
次に、イベントに関する情報を指定します（各ボタンに1つずつ、計3つのイベントを用意します）。OnClick"の隣にある"+"をクリックします。イベント設定ウィンドウが開きます。
Target component"フィールドには、イベントが発生する場所を、"Action "フィールドには、どのような種類のイベントであるかを指定する必要があります。
すべての誤答を隠す
Mad-Tea Partyボタンを非表示にするイベントを追加します。
- Target component」フィールドをクリックし、btn-mad_teaという固有名で見つけます。アクション」フィールドで、適切なイベント（この場合は「Hide Button」）を選択します。
- 保存"をクリックします。
残りのボタンも、同じように隠すように設定します。
- これが、"Duchess' House" ボタンのトリガーリストの完成形です。
- Save"をクリックして、変更を保存します。
ここで、すべてがうまくいくことを確認する必要があります。
- 変更を保存します。
- アプリケーションを公開する（インターネットに公開する）ためのボタンを押し、"Development "を選択します。
- go to your app "アイコンをクリックし、新しいタブで開きます。
アプリに移動し、正しい選択肢を選択すると、他のボタンが消えることを確認します。
クリックすると不正解を隠す
では、間違った答え「Mad-Tea Party」を持つボタンをユーザーがクリックすると消えるようにしましょう。この場合、トリガー(押す)とイベント(消える)の両方が同じボタンに属しています。
ボタンの設定を開いて、"Triggers"タブに行き、"onClick"トリガーに新しいイベントを追加してください。Target component"フィールドで、"This component (self)" を選択し、ボタンが自分自身のためにイベントを起動することを示します。Action"フィールドの値は、前の例と同じ"Hide Button"です。すべての変更を保存してアプリを公開し、アプリ・タブに切り替えて、アプリを更新してください。すべてが意図したとおりに動作することを確認します。
ここで、「Wood」と「Croquet-Ground」を調整します。保存して公開し、もう一度テストしてください。
ボタンの種類
素晴らしい、答えは機能しています。質問を追加する時間です。もちろん、Appmaster.ioにはこのための特別な要素がありますが、あなたは私たちのタスクを覚えています - ボタンと他の何もありません。それでは、もう一つ追加してみましょう。今回は、メインキャンバスにではなく、ページの上部に追加します。もっと楽しくするために、このスクリーンショットのように質問を記入してください。
もっと楽しくするために、このスクリーンショットにあるような質問を記入してください。
今度は、異なるタイプのボタンのための配色を使用して「色付け」します：設定に移動し、「タイプ」フィールドの値を他に切り替えます。
我々はこのようにそれを得たが、あなたはあなたのオプションを選択することができ、ボタンの配色は、その操作に影響を与えません。
では、最後のタスクであるユーザーへのメッセージの設定に移りましょう。
より難しいタスク
画面上にメッセージを表示するには、さまざまな方法があります。今回は、その中でも特に変わったものを選んでみました。
まず、ユーザーが正しい答えを出したら、質問を含むボタンが自動的に停止するようにしましょう。ボタンは灰色になり、クリックに反応しなくなります。これを行うには、まだ考慮していない Enable (Disable) 関数と、すでにおなじみの"onClick" を使用します。- そして、新しいトリガーであるonStateChangeを考えます。これは、ボタンの状態が変化したときにトリガーされます。このトリガーを"? "に割り当てると、その上にメッセージが表示されます。
ボタンの無効化
ボタンの設定で、"Enable"フィールドセレクタを切り替えることで、ボタンを手動で有効または無効にすることができます。
自動切り替えを設定するには、「公爵夫人の家」ボタンの環境設定を開いて、「onClick」トリガーを追加します。Target component "フィールドで、質問ボタンの一つを選択し、"Action "フィールドで、"Disable Button"を選択する。質問を含むすべてのボタンについて、これを繰り返す。それはこのように見えるはずです。
すべての変更を保存して、公開し、アプリケーションが正しく動作しているかどうかチェックすることを忘れないでください。
では、メッセージの開始をボタン"? "にバインドしましょう（"btn_qqq "と名付けました）。これにトリガー"onStateChange"を追加しましょう。これは、ボタンの状態が変化したとき（たとえば、オフになったとき）に作動します。
「Target component"フィールドで、"Application"（メッセージがアプリケーション・ウィンドウにポップアップします）を選択し、"Action"フィールドで、"Show UI Message"（ユーザーへのメッセージを表示します）。
- Message style"欄には、状況に応じて最適なものを選んでください。この例では、「Sucess」-成功したことを示すメッセージです。
- タイトル」と「内容」の欄には、答えが正しいことを知らせたり、何か素敵なことを書いたりしてください。
保存して、公開し、テストします。
結果
正しいオプションを選択すると、不正解のボタンは隠され、問題のテキストは薄くなり、確認メッセージがポップアップ表示されるはずです。
もちろん、正解ボタンにバインドすることで、より簡単にメッセージをカスタマイズすることが可能でした。しかし、今日、私たちは簡単な方法を探しているわけではありません。また、私たちの指示がなくても、あなたはすでに十分な知識を持っています。間違った答えを選択したときに表示されるエラーメッセージをカスタマイズしてみてください。それは次のように見えるはずです。
我々は、この命令は、Appmaster.ioをよりよく知るためにあなたを助けたと確信しています。しかし、それが明確でなかった場合（または多分、逆に、あまりにも単純な）、あなたが必要な手順について私たちの技術サポートの電報チャンネルに書き込みます。私たちはそれらを書くでしょう