Skip to main content

コントロールとプレゼンテーション

ユーザーインターフェイス要素

ユーザーインターフェイス要素(テキスト入力やレイアウト)は、情報や実行可能な項目をユーザーインターフェイスに表示します。 

Pega Platform™のUI要素には、以下のようなすぐに使える基本的なコントロールが含まれています。

  • オートコンプリート コントロール
  • ボタン
  • チャート
  • チェックボックス
  • ドロップダウン リスト
  • リンク
  • スライダー
  • リッチテキストエディター
Different basic control options

既存のスタイルを適用すると、必要に応じてUI要素を再利用したりカスタマイズしたりでき、開発者がコントロールとスタイルを個別に管理できます。 基本ボタンなどのすぐに使用できるUI要素には、事前定義されたスタイルフォーマットが付属しています。 事前定義された、またはすぐに使用できるボタンとラベルのフォーマットは、アプリケーションスキンから取得されます。 Pega Platformでは、既存のスタイルフォーマットの修正や新規開発ができる経験豊富なUIデベロッパーがいる場合を除き、既存のスタイルフォーマットを使用することがベストプラクティスです。 事前定義されたスタイルフォーマットを使用することで、開発時間が節約され、メンテナンス作業が軽減されるほか、アプリケーションのルックアンドフィールの一貫性が向上します。

補足: アプリケーションのスタイリングの詳細については、Pega CommunityのStyling your application with design systemsの記事を参照してください。

ボタン用の事前定義されたスタイルフォーマットには、StandardSimple、およびStrongが含まれます。

configure a standard button

タイポグラフィ、境界線、背景、レイアウト、UIの配置と位置合わせを含め、インターフェイスのすべての表示要素にスタイルを設定できます。 事前定義されたスタイルフォーマットを使用して、これらのスタイルオプションの組み合わせを適用します。 たとえば、黒の境界線、白の背景、黒のフォント色、中央揃えのテキスト、および中央揃えの位置合わせになるようにボタンのスタイルを設定するスタイルフォーマットをインターフェイスに適用できます。 スタイルフォーマットを適用すると、そのスタイルフォーマットに定義されたすべてのスタイルが適用されます。 特定のコントロールタイプのスタイルフォーマットがアプリケーション全体で再利用されます。

Custom format for a button control

基本コントロールのスタイル

特定のコントロールには、表示やスタイルが定義されています。 コントロールタイプに応じて、コントロールのさまざまな要素をスタイル設定できます。 たとえば、テキストフィールドと異なり、リンクには枠線がありません。これはつまり、リンクには枠線色を適用しないことを意味します。

コントロールによっては、ラベルやキャプションの表示を変更できるものもあります。 たとえば、以下の画像に示すように、ボタンの上にボタンキャプションを追加したり、ボタンラベルをアイコンで置き換えたりできます。

styling a basic control

ボタンにテキストを指定する場合、ベストプラクティスとして、テキストには実行されるアクションとアクションが実行されるオブジェクトを記述します。 各コントロールに明確で特徴的なラベルを付けます。 たとえば、注文確認ビューには3つの説明ボタンがあります。 Modify detailsボタンをクリックすると、ユーザーが入力したメール、配送先住所、支払い方法、連絡先電話番号を修正できます。 

Example of an order summary form with different buttons that have labels
ヒント: ランタイムで一緒に表示されるコントロールのラベルの相対的な長さを考慮します。 先ほどの例では、3つのボタンの文字は同じ位の長さでした。 

アプリケーション内のボタンコントロールを一貫性のある見た目に定めて、開発時間を削減し、アプリケーションのユーザーインターフェイスをより分かりやすいものにして、ユーザーがフォームに入力しやすいようにします。 ボタンコントロールのスタイルフォーマットを指定して、ボタンの相対的な重要度に関する視覚的な手掛かりをユーザーに提供します。 たとえば、フォーム上の「Submit」ボタンの場合は、「Control format」オプションを「Strong」に設定して、そのボタンがフォーム上で実行できるプライマリアクションであることをユーザーに示します。

次の画像で「+」アイコンをクリックすると、いくつかの使用可能な基本コントロールについて詳細を表示できます。

次の問題に答えて、理解度をチェックしましょう。

トレーニングを受講中に何か問題がありましたら、こちらをご覧ください: Pega Academy サポートのよくある質問 (FAQ).

このコンテンツは役に立ちましたか?

改善できるところはありますか?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice