Appmaster.ioを設定します。 Webアプリケーションエディタ：ボタン

ボタンはWebAppsエディターの最も単純な要素ですが、完成したアプリケーションのインターフェイスで主要な役割の1つを果たします。また、本日はボタンのみで構成するアプリをご用意しております。タスクは少し奇妙に思えるかもしれませんが、それを行うと、ボタンをカスタマイズする方法を学び、エディターの操作の基本とプラットフォーム全体のロジックを理解できます。

不思議の国のアリスの冒険という本に基づいて短いクイズを作りましょう。アリスが最初にチェシャ猫と出会った場所をユーザーが覚えているかどうかを調べてみましょう。

私たちのアプリケーションは次のようになります。

質問テキスト：アリスはどこで最初にチェシャ猫に会いましたか？
選択ボタン： Mad-Tea Party、Duchess'House、Wood、Croquet-Ground。ユーザーが間違った答えを選択した場合（ボタンのあるボタンは消えます）、ユーザーが正しい答えを選択した場合は、間違った答えのあるすべてのボタンが一度に消えます。
答えが正しかったかどうかを示すポップアップメッセージ。

ちなみに、どちらのオプションが正しいか覚えていますか？

ボタンの作成方法

「ボタン」要素をマウスポインタで（左キーをクリックして押したまま）、ボタンを配置する領域にドラッグします。

可能な回答の数に応じて、4つのボタンを追加する必要があります。

ボタンの外観をカスタマイズする

最初のボタンを1回クリックします—設定ウィンドウが開きます。ボタンの外観を担当する[Look＆Feel]タブが表示されます。

1.次のフィールドを編集します。

ラベル：ボタンのテキスト-最初の回答を入力してください： "Mad-Tea Party";
アイコン：ボタンアイコン-「ピックアイコン」をクリックして、好きなものを選択します（現在は2500以上あります）。
サイズ：ボタンサイズ-ボタンを大きくするには「大」に設定します。
名前：これは、アプリケーション内の他の要素によってボタンが「表示」されるための名前です。各ボタンには一意の名前が必要です。ボタンに「btn-mad_tea」という名前を付けます。

フィールドを編集すると、ウィンドウ上部の画像が変化し、設定が適用された後のボタンの外観が表示されます。

2.すべてのフィールドに入力したら、[保存]をクリックします。

btn-duchess_h、btn-wood、btn-croquet_gという名前を使用して、最初のボタンと同様に残りのボタンを構成します。
[変更を保存]をクリックして、アプリケーションへの変更を保存します。そうしないと、ページを更新するかエディターを閉じるとボタンが消えます。

トリガーとイベントの設定

次に、ボタンのアクションを設定する必要があります。正解の「公爵夫人の家」から始めましょう。あなたの仕事は、Webアプリエディターに「説明」することです。

ボタンのトリガーは何ですか-つまり、ボタンが正確に何に反応する必要がありますか。
この場合に発生するイベント：ボタンが消えます。
このイベントが発生する場所、変更される要素：他のボタン。

「公爵夫人の家」ボタンの設定に戻り、「トリガー」タブに移動します。追加されたすべてのトリガーが表示されます。

現在、「OnClick」は1つだけです。これは自動的に追加され、クリックするとボタンが機能することを意味します（これはまさに必要なものです）。
「OnClick」に加えて、ボタンに対して他のトリガーが可能です。説明付きの完全なリストは、プラットフォームのドキュメントにあります。

次に、イベントに関する情報を指定する必要があります（ボタンごとに1つずつ、合計3つあります）。「OnClick」の横にある「+」をクリックします。イベント設定ウィンドウが開きます。

[ターゲットコンポーネント]フィールドで、イベントが発生する場所、[アクション]フィールドで、イベントの種類を指定する必要があります。

間違った答えをすべて隠す

Mad-TeaPartyボタンを非表示にするイベントを追加します。

[ターゲットコンポーネント]フィールドをクリックして、一意の名前btn-mad_teaで検索します。 [アクション]フィールドで、適切なイベント（この場合は[ボタンを非表示]）を選択します。
「保存」をクリックします。

残りのボタンも同じように非表示に設定します。

これは、「公爵夫人の家」ボタンのトリガーのリストが完了したときにどのように表示されるかを示しています。
「保存」をクリックして変更を保存します。

次に、すべてが機能することを確認する必要があります。

変更を保存します。
アプリケーションを公開（インターネット上に配置）するためのボタンを押し、「開発」を選択します。
[アプリに移動]アイコンをクリックします。新しいタブで開きます。

アプリに移動し、正しいオプションを選択すると、残りのボタンが消えることを確認します。

クリック時に不正解を非表示

それでは、ユーザーがクリックすると、間違った答えの「Mad-TeaParty」のボタンが消えるようにしましょう。この場合、トリガー（押す）とイベント（消える）の両方が同じボタンに属します-あなたはそれを操作する必要があるだけです。

ボタン設定を開き、「トリガー」タブに移動し、「onClick」トリガーに新しいイベントを追加します。「ターゲットコンポーネント」フィールドで、「このコンポーネント（自己）」を選択して、ボタンがそれ自体のイベントをアクティブ化することを示します。「アクション」フィールドの値は、前の例の「ボタンを非表示」と同じです。

すべての変更を保存してアプリを公開し、[アプリ]タブに切り替えて、更新します。すべてが意図したとおりに機能することを確認します。

次に、Wood andCroquet-Groundを調整します。保存して公開し、もう一度テストします。

ボタンの種類

素晴らしい、答えはうまくいきます。質問を追加する時が来ました。もちろん、Appmaster.ioにはこのための特別な要素がありますが、私たちのタスクを覚えています-ボタンだけです。では、もう1つ追加しましょう。今回は、メインキャンバスではなく、ページの上部に移動します。

もっと楽しくするには、次のスクリーンショットのように質問に記入してください。

次に、さまざまなタイプのボタンの配色を使用して「色付け」します。設定に移動し、「タイプ」フィールドの値を他の値に切り替えます。

私たちはこのようにそれを手に入れました、しかしあなたはあなたのオプションを選ぶことができます、ボタンの配色はその操作に影響を与えません：

それでは、最後のタスクであるユーザーへのメッセージの設定に移りましょう。

より難しいタスク

画面にさまざまな方法でメッセージを表示できます。最も珍しいものの1つを選びました：

-まず、ユーザーが正解すると、質問を含むボタンが自動的に無効になることを確認しましょう。それらは灰色に変わり、クリックへの応答を停止します。これを行うには、まだ検討していない有効化（無効化）機能と、すでにおなじみの「onClick」を使用します。

-次に、新しいトリガーを検討します-ボタンの状態が変化したときにトリガーされるonStateChange。このトリガーを「？」に割り当てましょう。 -そしてメッセージが表示されます。

ボタンの非アクティブ化

[有効にする]フィールドセレクターを切り替えることにより、設定でボタンを手動で有効または無効にできます。

自動切り替えを設定するには、「公爵夫人の家」ボタンの設定を開き、「onClick」トリガーを追加します。 [ターゲットコンポーネント]フィールドで、質問ボタンの1つを選択し、[アクション]-[ボタンを無効にする]フィールドで選択します。質問を含むすべてのボタンについて繰り返します。次のようになります。

すべての変更を保存し、公開して、アプリケーションが正しく機能しているかどうかを確認することを忘れないでください。

それでは、メッセージの先頭をボタン「？」にバインドしましょう。（「btn_qqq」という名前を付けました）。それにトリガー「onStateChange」を追加しましょう。ボタンの状態が変化すると（たとえば、ボタンがオフになると）アクティブになります。

「ターゲットコンポーネント」フィールドで、「アプリケーション」（メッセージはアプリケーションウィンドウにポップアップ表示されます）、「アクション」フィールド-「UIメッセージの表示」（ユーザーにメッセージを表示）を選択します。

[メッセージスタイル]フィールドで、状況に最も適したものを選択します。私たちの場合、これは「成功」です。これは、正常に完了したことに関するメッセージです。
「タイトル」フィールドと「コンテンツ」フィールドに入力します。答えが正しいことをユーザーに通知するか、何かいいものを書いてください。

保存、公開、テストします。

結果

正しいオプションを選択すると、間違った答えのボタンが非表示になり、質問のテキストが消え、確認メッセージがポップアップ表示されます。

もちろん、メッセージを正解ボタンにバインドすることで、メッセージをより簡単にカスタマイズすることもできました。今日、私たちは簡単な方法を探していませんが。さらに、あなたはすでに私たちの指示なしでこれを行うのに十分知っています。間違った答えを選択したときにポップアップするエラーメッセージをカスタマイズしてみてください。次のようになります。