Widgetの説明 Part4

#目次
各Widgetの説明
・Segment
・ListBox

##Segment
Segment Widgetは、データのリストまたはページを表示するために一般的に使用されるUIコンポーネントです。
Segment(Web)

Master Data: テンプレートのマスターデータの設定(*1)
Row Template: セグメントの各行に使用される共通テンプレートの選択(*2)
Section Header Template: セクションヘッダーの作成およびデータの入力中に各セクションに使用される共通テンプレートの指定
Group Cells: セグメント内のすべての行をグループ化するかどうかを指定
Retain Selection: ユーザーがフォームから移動してフォームを再表示した場合でも、セグメントが行った選択を保持するかどうかを指定
Separator: 境界線を表示するかどうかの設定
Separator Thickness: 境界線の太さ
Separator Color: 境界線の色
Separator Transparency: 境界線の透明度
Show Scrollbars: スクロールバーの表示・非表示の設定
View Type: 閲覧タイプの選択
Selection Behavior: 選択肢のタイプの設定(default・single select・multi select)
※「Selection Behavior」で「single select」または「multi select」を選択すると「Image Identifier」が設定できます

Segment(Mobile)

Hidden Columns: 列を隠すことができます。
Enable Reordering: セグメント内の行の並べ替えを有効または無効にできます。
Enable Haptic Feedback: このプロパティを使用すると、WidgetのHaptic Feedback(*)を有効または無効にすることができます
※Haptic Feedback とは、ユーザーアクションに対してハードウェアを振動させる触覚フィードバックのことです。
例えば、App Storeでアプリを購入する時、間違ったパスワードを入力した時などに発生する振動が「Haptic Feedback」にあたります。

Dictionary: このプロパティを有効にすると、AからZのアルファベットが画面に表示され、選択したアルファベットで始まる全ての結果が表示されます。
Indicator: インディケータータイプをselect・click・noneから指定することができます。
Edit Style: 行に適用される編集スタイルの指定
Progress Indicator: Progress Indicatorの有効または無効にすることができます
Progress Indicator Color: Progress Indicatorの色を白または灰色で指定
Scroll Bounce: スクロールビューがコンテンツの端を超えて跳ね返り再び戻るかどうかを指定
Dock Section Header: セクションコンテンツをスクロールしながら、セグメントの上部にセクションヘッダーをドッキングまたは配置できます。
Enable Cache: このプロパティを使用するとPositional Dimension Animationのパフォーマンスが改善できます。

Segment(Tablet)

*1) TemplateのMaster Dataを設定する方法
「Master Data」を設定する前に、最初に「Row Template」を選択する必要がある。
「Master Data」 の「Edit」ボタンをクリックして、各列で表示する項目名と項目に対するデータを入れる。

*2)Row Template・Section Header Templateの作成・設定方法
None: Row Templateを選択しません。
Create New: 新しいRow Templateを作成します。
SampleRowTemplate: 既成のRow Templateを使用します。
SampleSectionHeaderTemplate: 既成のSectionHeaderTemplateを使用します

Create Newをクリックし、新規でテンプレートを作成すると、「Template」タブに再利用可能なテンプレートとしてに配置されます。

★その他の方法：次のコマンドを使用して、Segmentのデータを設定できる。

setDateSegment : function(){
/*
まず、"Segment内のWidget名"に対して"ID"を定義します。
左にWidget名、右にID名を記載する。
例：lblHeading（表示名） : “heading”  (ID名)
*/
  this.view.Segment名.widgetDataMap = {
    lblSample1 : "Sample1"
    lblSample2 : "Sample2"
    lblSample3 : "Sample3"
    lblSample4 : "Sample4"
  };

/*
定義したIDに従ってSegmentに値を渡します。
データ以外にも、イベントや属性を渡すことができます。
*/
  var rowData = [
    {
      Sample1 : "sample1_1",
      Sample2 : "sample2_1",
      Sample3 : "sample3_1",
      Sample4 : "sample4_1"
    },
    {
      Sample1 : "sample1_2",
      Sample2 : "sample2_2",
      Sample3 : "sample3_2",
      Sample4 : "sample4_2"
    },
  ];

/*
セグメントにデータを設定します。
*/
  this.view.Segment名.setData(rowData);
}

##ListBox
ListBox Widgetは、アイテムのリストをドロップダウンボックスとして表示し、リストから1つ以上のアイテムを選択できます。
ListBox(Web)

Master Data: ユーザーが利用可能な選択肢から選択するために表示する必要がある値のセットを指定(＊1)
Enable Blur: Widgetのぼかし効果を有効または無効にすることができます
Tool Tip: Widgetの上にマウスポインターを移動することでメッセージを表示できます
Placeholder: 入力欄の初期値の設定
Multi Select: ドロップダウンリストから複数の値を選択できるかを指定

ListBox(Mobile)

Drop Down Image: Drop Down Boxインジケーターに使用する画像を指定(＊2)
Selected Image: リストから一つ選択した時に表示される画像を指定
Unselected Image: 選択がクリアされた時に表示される画像を指定
Enable Haptic Feedback: このプロパティを使用すると、WidgetのHaptic Feedback(*)を有効または無効にすることができます
※Haptic Feedback とは、ユーザーアクションに対してハードウェアを振動させる触覚フィードバックのことです。
例えば、App Storeでアプリを購入する時、間違ったパスワードを入力した時などに発生する振動が「Haptic Feedback」にあたります。

View Type: 閲覧タイプの選択(＊5)
Input View Type: アプリケーションで必要な特定の操作が可能になります
Popup Icon: リストボックスを選択する際に表示される、ポップアップのタイトル領域（ポップアップの左上）に表示されるアイコンの指定
Popup Title: ListBoxに表示されるタイトルテキストの指定
Apply Skins To Popup: ポップアップのスキンを適用するかどうかを指定
Enable Cache: このプロパティを使用するとPositional Dimension Animationのパフォーマンスが改善できます。

ListBox(Tablet)

＊1)Master Dataを設定する方法　
●方法1 「Master Data」プロパティの「Edit」をクリックして→ダイアログボックスが次のように表示されます。
・Key: 各List Box値の一意の識別子です。
・Display Value： この値は、フォームのList Boxウィジェットに表示されます。
・Selected Key： グループから個々のList Boxの値を選択できる。 必要に応じて、List Boxの値をWidgetに追加するには、「Add」をクリックします。 List Boxの行を削除するには、セル内をクリックし、「Delete」をクリックします。 必要な詳細を入力して、「Apply」をクリックしてMaster Dataを作成します。

●方法2 次のコード行を使用します
・データをlistboxに設定する。
frmList: formのID
myList: listboxのID

var dateList = [
  ["Key1", "value1"],
  ["Key2", "value2"],
  ["Key3", "value3"],
];
frmList.myList.masterDAta = dataList;

＊2)Drop Down Image
Drop Down Boxインジケーターに使用する画像を指定します。
デフォルトでは、左の画像のような表示となります。
プラットフォーム固有の画像を指定するには、Drop Down Image の「Edit」ボタンをクリックして、Drop Down Imageダイアログボックスを開き、必要なPlatformを選択し、対応するValueフィールド内をクリックします。

＊3)Selected Image
リストから一つ選択した時に表示される画像を指定します。
設定方法は、2と同じです。
次のいずれかを実行できます。
・リソースから画像の選択
・画像のURLの指定

＊4)Unselected Image
選択がクリアされた時に表示される画像を指定します。
設定方法は、2と同じです
次のいずれかを実行できます。
・リソースから画像の選択
・画像のURLの指定

＊5)View Type
iOSとAndroidの間で利用可能なオプションは互いに異なります。  

iOSで利用可能な閲覧タイプ

iOSで利用可能な閲覧タイプ

Androidで利用可能な閲覧タイプ

#参考
“https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/PopulatingWidgets.htm”
“https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#WidgetReferences.htm”