Axure RP-条件ロジック

この章では、Axure RPで使用される条件付きロジックについて説明します。

If-Then-Else in Axure

他のプログラミングツールと同様に、Axureは条件付きロジックもサポートしており、プロトタイプで強化された相互作用を作成します。インタラクションを提供する方法に慣れたら、次のレベルはインタラクションに条件付きロジックを提供することです。

以下は、条件付きロジックのシンプルで簡潔なフローです-

これをよりよく理解するために、前の例からの流れを再開しましょう。この目的のために、条件ビルダーに精通する必要があります。

OnClickなどのインタラクションのいずれかをダブルクリックします。次のスクリーンショットに示すように、ケースエディターを表示できます。

[ケース名]の近くにある[条件の追加]ボタンをクリックします。以下のダイアログボックスに表示されます。

「説明」に示すように、条件ビルダーは、条件セクションで選択された条件に従ってIf-Then-Elseフローを作成します。

このボタンに条件を作成しましょう。

動的パネルが表示されたら、画像非表示ボタンを表示します。前の例の[画像の表示]ボタンのクリックで動的パネルを表示しました。次に、別のボタンHide Image Hideを作成しましょう。

条件ビルダーを閉じて、設計領域に戻ります。

共通ライブラリの下のライブラリから「画像を隠す」ボタンを挿入します。繰り返しますが、UIエレメントにデザイン領域に挿入した直後に名前を付けることをお勧めします。

[画像を隠す]ボタンを右クリックして、[非表示に設定]をクリックします。次のスクリーンショットに示すように、ボタンはデザイン領域から非表示になります。

それでは、Show Imageボタンのインタラクションに戻りましょう。

最初に、[画像の表示]ボタンのインタラクションで[ケース1]をダブルクリックすると、ケースエディターが表示されます。 Show/Hideアクションを使用して、hideImageButtonを選択し、その可視性を表示に設定します。

同様に、Show/Hideアクションを使用して、showImageButtonを選択し、その可視性を非表示に設定します。

[画像を非表示]ボタンの可視性を管理して、[画像を表示]ボタンをクリックするとボタンが表示されるようにしました。

完全な状態は、次のスクリーンショットに示すとおりです。

条件を構築しましょう。

デザイン領域の下で、「画像を隠す」ボタンをクリックします。 [インスペクター]セクションで、[ケースの追加]をクリックします。

[ケースの追加]で、[条件の追加]ボタンをクリックします。前述の背景に従って、条件ビルダーのドロップダウン値を使用して条件セットを作成します。

簡単に言えば、上記の条件で、動的パネルshowImageDynamicPanelが表示されているかどうかを確認しています

ここで、[画像を隠す]ボタンの相互作用を設計し、次のように構成します。

同様に、showImageButtonを表示し、hideImageButtonを非表示にするためのドリルを繰り返します。

完了したら、[OK]をクリックしてケースエディターを閉じます。

次に、[プレビュー]をクリックして、変更内容を確認します。

成功した結果は、次のスクリーンショットに示すとおりです。

[画像を表示]ボタンをクリックすると-

[画像を隠す]ボタンをクリックすると-