AJUI_ProgressbarによるUXの向上

アクションを実行しても何も起こらないように見え、もう一度クリックすべきか、それとも待ち続けるべきか、わからなくなったことはありませんか？アプリケーションがバックグラウンドでアクションを実行しているにもかかわらず、フィードバックが提供されない？アクションが結果を返すのに時間がかかるのでは？ご存知のように、4Dは、すでにビルトインの プログレスバーコンポーネントを提供し、実行時間をより許容できるようにしています。しかし、もし、よりウェブライクなデザインのものが欲しいなら、読み進めてください。

AJUI_Progressbarとは？

AJUI ProgressBarは、4D 17 R3で開発されたコンポーネントで、SVGと4D Workerの技術をベースにしています。これを使えば、非常に簡単にプログレスバーを生成することができます。このコンポーネントでは、プログレスバーの特性やビジュアルレンダリングを定義するプロパティのセットを作成します。また、プログレスバーを生成するためのアセッサーやメソッドにアクセスするための数式も用意されています。

このコンポーネントには、2種類のインスタンスがあり、利用可能なプログレスバーの2つの特定のバリエーションを表します。最初のデザインは線形スタイルで、2番目は円形です。それぞれのバリアントは、そのデザインに固有のプロパティを持っています。

バーには 0 から 100 までの数値を割り当てることができますが、表示されるテキストをカスタマイズできるため、他の値を視覚的に表現することも可能です。このコンポーネントでは、プログレスバーを生成する際に、Workerを使ってページを更新しています。Workerにはもう一つ用途があり、アニメーションを管理する機能を提供しています。

このコンポーネントでは、オブジェクトと関数を使ってプログレスバーをカスタマイズしたり操作したりするメソッドをいくつか提供しています。また、各タイプのプログレスバーのインスタンスを取得するための2つのメソッドを提供します。

• 新しいAJUI_ProgressBar。リニアプログレスバー。
• 新しいAJUI CircularProgressBar。円形のプログレスバー。

どちらのメソッドも、バーのプロパティとそのデフォルト値、そしてそれらを操作するための数式を含むオブジェクトを返します。

その他のメソッドには、”HDI” (How do I) というプレフィックスがつけられています。これらのメソッドを使用すると、コンポーネントの機能の使用方法の例を含むフォームを呼び出すことができます。

線形プログレスバーの設定

• まず、フォームに画像オブジェクトを追加します。このオブジェクトは、プログレスバーをホストするために使用されます。複数のプログレスバーを同時に生成したい場合は、複数のイメージオブジェクトを追加することができます。
• 次に、プログレスバーのインスタンスを作成します。上で説明した 2 つのメソッドのうち、1 つを起動するように選択することができます。選択したメソッドから返されるオブジェクトは、変数 “Form” に格納されるのが理想的です。また、”Form” オブジェクトにレベルを追加することをお勧めします。

それが終わったら、インスタンスに画像オブジェクトの名前を追加してください。そして、テストのために、進行度の値（デフォルト：0）を変更し、アニメーションを有効にすることをお勧めします。プログレスバーを生成するには、対応する “launch “式を起動するだけです。

複数の画像オブジェクトを追加した場合は、それぞれについて、2番目のステップを繰り返します（画像オブジェクトごとに1つのインスタンス）。

以下は、リニアプログレスバーのコードの例です。

AJUI_Progressbarの詳細

詳細と、コンポーネントの使用と設定に関するステップバイステップのチュートリアルは、こちらでご覧になれます。AJUI_Progressbarを使うにしても、4Dに内蔵されているプログレスバーコンポーネントを使うにしても、実際に何かが起こっていることをユーザーに安心させることができます。楽しんでください。