概要:
シンプルで魅力的なデザインのWidgetを提供します。Basic Box、Stat Box、Progress Boxよりスタイルが選択できます。
対象環境:
Web
インストール:
IgniaのExtensibility Catalogを開き、左側メニューのWEBを選択します。
AdvancedMenuコントロールを選択して、Wizardに従ってインストールを実施します。
Widget templates available
Widget Controlは、Template PropertiesでWidgetのスタイルを選択します。
Widgetによって表示されるデータは、Data Propertiesに設定された変数が表示されます。各変数は、Widgetの種類に適合したデータ構造である必要があります。
Basic Boxスタイル:
Basic Boxスタイルは、以下のように表示されます。
このスタイルのWidgetでは、次のフィールドの情報を設定できます。
- Message: 表示メッセージ
- Number: 数値 または メッセージ下部に表示するText
- Icon: アイコン Font Awesomeのアイコンを使用できます。Font Awesome http://fontawesome.io/icons/
データ構造は以下のようになっております。
Progress Boxスタイル
Progress Boxスタイルは、以下のように表示されます。
このスタイルのWidgetでは、次のフィールドの情報を設定できます。
- Message: 表示メッセージ
- Number: 数値 または メッセージ下部に表示するText
- Icon: アイコン Font Awesomeのアイコンを使用できます。Font Awesome http://fontawesome.io/icons/
- Progress: Progressバーに表示する値 0〜100の値を指定します。
- Description: Progressバーの下部に表示するText
データ構造は以下のようになっております。
Stat Boxスタイル
Stat Boxスタイルは、以下のように表示されます。
このスタイルのWidgetでは、次のフィールドの情報を設定できます。
- Message: 表示メッセージ
- NumberIcon: 数値 または メッセージ下部に表示するText
- More Info Text: Link先として表示するText
- Link: エンドユーザーが詳細情報を確認するためのLink先のページ等を指定
- Target: Link先にJumpする際のオプションパラメータ
データ構造は以下のようになっております。
Sample XPZ
XPZをインポートすると、User Controlのルート階層(Ignia/Controls/Widget )にSample Web PanelとWidget用のSDTが作成されます。
スタイルの設定
Widgetのコンポーネントのスタイルを変更する場合は、GeneXusのKBで使用されているTemaオブジェクトを利用します。Class Propertiesのクラスを編集することでスタイルを変更することができます。
Controlをインストールした際にDefaultでは、Widgetクラスが指定されております。
WidgetクラスのPropertiesを編集することでコンポーネントのスタイルを変更することができます。Temaオブジェクトなので、お好みのスタイルにWidgetをカスタマイズしてください。
各Propertiesは、Widgetスタイル毎にグルーピングされております。
カスタマイズ
User Controlインストール後のSample Web Panelは、以下のように表示されております。
Defaultでは、Widgetの色は全て水色で表示されております。以下の手順を実施することで、Widgetの色を変更してみましょう。
- WidgetSectionクラス配下のSectionDanger、SectionSuccess、SectionWarningクラスのバックグラウンドカラーを指定します。
br />
]
- Widgetクラス配下のWidgetDanger、WidgetSuccess、WidgetWarningクラスに以下のようにクラスを指定します。
Buildを実行して変更を確認してみましょう。
この例では、全てのWidgetスタイルでWidgetDanger、WidgetSuccess、WidgetWarningクラスのPropertiesを編集することでカスタマイズを実施しました。
同じやり方でパーソナライズを実施してみてください。