進行状況表示バー
特定のユーザーによる特定の操作の進行状況を視覚的に確認することができます。
進行状況表示バー・ビューの視覚的な表示により、処理が完了しているタブ、ページ、入力フィールドの数を一目で把握することができます。 通常、進行状況表示バー・コントロールは、Web 上のフォームやタブのヘッダーとして使用します。
構成プロパティー
「構成」で、ビューの外観および動作プロパティーを設定または変更します。 「イベント」で、数式構成プロパティーを設定します。
- 画面サイズ
- プロパティー名の横に画面サイズ・アイコン
がある構成プロパティーは、画面サイズごとに異なる値を持つことができます。 値を設定しない場合、画面サイズはそのデフォルト値として次に大きい画面サイズの値を継承します。
- テーマ定義
- テーマ定義は、ビューの色およびスタイルを指定し、その外観を決定します。 ビューのルック・アンド・フィールをテーマ・エディターでプレビューできます。 テーマを参照してください。
以下の表に、進行状況表示バー・ビューの外観構成プロパティーを示します。
| 外観構成プロパティー | 説明 | データ・タイプ |
|---|---|---|
| 色のスタイル | 進行状況表示バーの塗りつぶす色の色スタイルを指定します。 色は、指定したテーマの変数に対応します。 デフォルトの色のスタイルはデフォルト (グレー) です。 | TooltipColorStyle |
| ストライプ | このプロパティーを選択すると、進行状況表示バーにストライプが追加されます。 | Boolean |
| アクティブ | このプロパティーとともに「ストライプ」を選択すると、進行状況表示バーのストライプが動きます。 | Boolean |
| 半径 | 進行状況表示バーの角の丸さを、ピクセル単位または em 単位で指定します。 例: 15px または 1em。 単位なしで数値のみが指定されている場合、数値はピクセル数として解釈されます。 デフォルトでは、境界半径は指定されていません。 |
String |
| 幅 |
進行状況表示バーの幅を、ピクセル単位、パーセント単位、または em 単位で指定します。 例: 800px、または 80% または 50em。 単位なしで数値のみが指定されている場合、数値はピクセル数として解釈されます。 | String |
| 高さ |
ウェルの高さを、ピクセル単位、または em 単位で指定します。 例: 15px または 1em。 単位なしで数値のみが指定されている場合、数値はピクセル数として解釈されます。 デフォルトでは、高さは指定されていません。 | String |
以下の表に、進行状況表示バー・ビューの動作構成プロパティーを示します。
| 動作構成プロパティー | 説明 | データ・タイプ |
|---|---|---|
| 最大値 | 進行状況の合計数値を指定します (「幅」と混同しないでください)。 例えば、100です。 | Integer |
例
この例では、進行状況表示バー・ビューに対して、以下の構成プロパティーが設定されています。
- 動作構成プロパティー
- 「最大値」 は 100に設定されます。
- 外観構成プロパティー:
- 「色のスタイル」 は Infoに設定されています。
- 「ストライプ」 が選択されています。
- 「アクティブ」 が選択されています。
- Radius は 1に設定されます。
- 「幅」 は 25%に設定されます。
- イベント構成プロパティー:
- 「ロード時」 イベントの場合、
setProgressメソッドを使用して、進行状況表示バーを 50 に設定します。 me.setProgress(50);
- 「ロード時」 イベントの場合、
上記のように各プロパティー値が設定されている場合、薄い青色の、角の丸い進行状況表示バーが、アニメーション化されたストライプ模様で半分塗りつぶされた状態で作成されます。バーの幅は、ページ幅の 25% になります。
イベント
「イベント」プロパティーで数式構成プロパティーおよびビューのイベント・ハンドラーの設定や変更を行います。 イベントをプログラムでトリガーするかユーザーがビューと対話したときにトリガーするように設定できます。 イベントの定義方法およびコーディング方法については、 ユーザー定義イベントを参照してください。以下の表に、進行状況表示バー・ビューの数式構成プロパティーを示します。
| 数式構成プロパティー | 説明 | データ・タイプ |
|---|---|---|
| 数式 | 進行状況を計算するための式。 数式について詳しくは、 数式を参照してください。 |
String |
進行状況表示バー・ビューには、以下のタイプのイベント・ハンドラーがあります。
- On load: ページのロード時にアクティブ化されます。
- On click: 進行状況表示バーをクリックするとアクティブ化されます。
方法
このビューでは、以下のメソッドを使用することができます。
setWidth(): 進行状況表示バーの幅を設定します。getWidth(): 進行状況表示バーの幅として設定されているサイズを、単位とともに取得します。setHeight(): 進行状況表示バーの高さを設定します。getHeight(): 進行状況表示バーの高さとして設定されているサイズを、単位とともに取得します。setColorStyle(): 進行状況表示バーの色のスタイルを設定します。setRadius(): 進行状況表示バーの半径 (丸さ) を設定します。setProgress(): 進行状況を設定します。getProgress(): 進行状況を取得します。setMaximum(): 進行状況表示バーの最大値を設定します。
これらのメソッドの使用方法について詳しくは、 進行状況表示バー JavaScript API を参照してください。
その他のリソース
Coach またはページの作成方法については、 Coach の作成を参照してください。
標準プロパティー (「一般」、 「構成」、 「位置決め」、 「可視性」、および 「HTML 属性」) について詳しくは、 「プロパティーの表示」を参照してください。