目次

1.概要
2.Lookプロパティ
3.Skinプロパティ
4.Formプロパティ
5.Actionプロパティ

1.概要

本記事では以下画像5についての説明となります。
Kony Visualizerのプロパティの説明記事です。

2.Lookプロパティ

Lookプロパティでは次のような設定が行える。
・IDの設定
アクションの設定等でIDを特定するために必要となるため、わかりやすい名前で命名するようにする。

・レンダリングの設定(RenderのEdit押下)
特定のプラットフォームでウィジェットを使用可能にするかどうかを設定できます。
デフォルトの設定値：true Visibleプロパティとは異なり、Renderプロパティは、除外されたプラットフォーム用に生成されたコードにウィジェットを含みません。

Lookプロパティ(Web)
・WebのBreakPoint
WebのBreakPointを追加/削除する

BreakPoint：
レスポンシブWebサイトでは、ある画面サイズを境目として、適用させるスタイルを切り替えることができます。

デフォルトは、
上記のような表示になっています。

3.Skinプロパティ

__Skin__のプロパティでは、Widgetの見た目や使い勝手などの編集ができます。
SkinのNormal設定では、デフォルト表示の場合の見た目を設定します。
SkinのFocus設定では、選択された時などの表示の見た目を設定します。

1.Skinの名前設定
Skinのボックスに名前を入力すると新規でSkinが作成されます。
検索ボックスをクリックすると、既存のSkinが一覧表示され、選択すると該当のWidgetに選択したSkinが適用されます。
2.背景色の設定
3.枠線の設定
4.影の設定
5.Skinの設定をコピーします
6.コピーしたSkinを選択したWidgetに貼り付けます
7.コピーしたSkinを割り当てます
8.設定したSkinを複製します
9.Focusを有効・無効にする
10.FocusSkinの名前設定

__【備考】__Copy-PasteとCopy-Assignの違い
【Copy-Paste】
独立したSkinを新たに作成するため、Skinを編集しても元々のSkinに影響を与えません。
【Copy-Assign】
Skinは作成されずCopyしたSkinをそのまま適用するため、変更した内容が影響します。

Skinプロパティ(Web)
CSSでSkinを設定することができます。

SPAおよびデスクトップWebチャネルでは、一部のウィジェットではカスタムCSSでセレクターを使用する必要があり、
他のウィジェットではセレクターを使用する必要はありません。

記載方法は上記参照
次のウィジェットなどのセレクターとともにカスタムCSSを記述する必要があります。
Label,Segment,TabPane, Switch,DataGrid
セレクタを必要とする書き方の例：.labelskin1 { background-color: red; }

【備考】
アプリのレイアウトを作成する際に、GUIでの設定以外に、CSSによるレイアウトの設定も可能です。
独自のCSSコードを追加することにより、SPAアプリの特定のウィジェットの見た目をカスタマイズできます。
このコードは、背景、境界線、フォント、影など、ウィジェットの「スキン」タブで設定する特定のプロパティを置き換えます。

※注意
customCSSを広範囲に使用すると、デスクトップWebとネイティブ間の互換性が失われるため、
出来るだけkonyのskin設定を使用を推奨します。
customCSSは、konyのskin設定を使用できない場合にのみ使用します。

4.Formプロパティ

1.フォームの向きを変更する
2.一定時間を経過すると、タイムアウトするかどうかの設定
例：ユーザーが5分以上操作していなければ通知を出す機能などに利用される
3.画像が遷移する際のアニメーションの設定
4.画面のタイトルの設定
5.ユーザーがフォームを再表示したときに、フォームがスクロール位置を記憶する必要があるかどうかを指定する。
6.図の「a」範囲としてタイトルバーをオンにする。
7.ヘッダーがフォームと重複する必要があるかどうかを指定する。
8.フッターがフォームと重複する必要があるかどうかを指定する。
9.図の「b」範囲としてアプリメニューをオンにする。
10.メニューの位置を指定する。
11.レイアウトのタイプを選択する。
12.スクロールを有効にする。
13.スクロールビューがコンテンツの端を超えて再び戻るかどうかを指定する。
14.スクロールバウンスを水平方向で有効にするかを指定する。
15.スクロールバウンスを垂直方向で有効にするかを指定する。
16.スクロールインジケータを垂直方向に表示するかどうかを指定する。
17.ページングを有効にするかどうかを指定する
18.スクロール可能な領域の左上の「x」座標と指定する。
19.スクロール可能な領域の左上の「y」座標を指定する
20.コンテナの幅を指定して、そこに配置されるすべてのウィジェットを収容する。
21.コンテナの高さを指定して、そこに配置されるすべてのウィジェットを収容する。
22.Onにするとウィジェットがグリッドサイズに応じて移動します。23のGrid Sizeで移動するグリッド幅を指定することができます。デフォルトはONでSizeは、10dpになっています。
通常、ウィジェットを配置する場合は、数値を指定して配置します。
23.グリッドサイズを指定する。このオプションは、「Snap to Grid」が有効な場合にのみ使用できる。
24.dpやpxなどのデフォルト単位を選択する。

【iPhoneの設定】

1.閲覧タイプを入力する。
2.フォームが読み込まれる時のインジケーターを表示・非表示にする
3.フォームが読み込まれる時の透明度を設定する
4.ステータスバーを表示・非表示にする
5.アプリメニュー（上部）の下でスクロールするフォームコンテンツを指定します。
6.アプリメニュー（下部）の下でスクロールするフォームコンテンツを指定します。
5.6をOnにした場合、フォームはアプリメニューの下をスクロールします。
7.ステータスバースタイルを設定できる。
8.スケーリングが最大または最小制限を超えたときに、スクロールビューがコンテンツのスケーリングをアニメーション化するかどうかを指定する。
Zoom Scale, Min Zoom Scale, Max Zoom Scale: スクロールビューのコンテンツに適用できるスケール係数を指定する。

【Android,Windows8の設定】

【Android】

1.キーボード入力モードを変更する（Pan/Resize）
Resize :フォームのサイズを変更し、入力が必要なウィジェット内でクリックまたは入力を開始すると、フォームが上にスクロールし、入力が必要なウィジェットがキーパッドまたはフッターと重ならないようにします。
Pan:この設定では、入力を開始してもキーボード用のスペースを確保するためにサイズ変更されません。
この設定では、入力した内容が見えなくなってしまうため、通常はResizeモードを選択します。
【 Windows 8の場合】
1.アプリメニューボタンの最大数を変更する
2.フォームの遷移中に、ヘッダーとフッターがそれぞれビューから上下にスライドする必要があるかどうかを指定する。
3.キャッシュを有効にする。

5.Actionプロパティ

【共通イベント】

1.アプリのライフサイクルにおいて、一度だけ呼び出されるイベント
一度破棄されている場合は、呼び出される。
2.preShow イベントで指定されたアクションが実行された後に実行される
3.フォームが表示されるたびに実行される。戻るを実行したときも呼び出される。
4.フォームが表示された後に呼び出される。戻るを実行したときも呼び出される。
5.フォームが完全に見えなくなったときに呼び出される
例：別のフォームに遷移する時、戻るボタンをクリックした時
6.画面が破棄される直前の処理を行う
7.任意のフォームが遷移する際の処理を行う
8.ユーザーが接触面に触れたときに呼び出されるイベント
9.ユーザーが連続的に指を動かすときに呼び出されるイベント
10.ユーザーが指を離した時に、呼び出されるイベント
【iPhoneの場合】

1.フォームの向きが縦から横、またはその逆に変化したときに呼び出されるイベント
2.ズームする際にソースの子ウィジェットの1つを返す
3.ズームを開始する時に呼び出されるイベント
4.ズームしているときに呼び出されるイベント
5.ズームが終了する時に呼び出されるイベント
【Android,Windows8およびSPAの設定】

1.ユーザーがデバイスメニューにアクセスしたときに呼び出されるイベントを
指定する。
2.ユーザーがデバイスの戻るボタンを使用したときに呼び出されるイベントを指定する。
3.フォームの向きが縦から横、またはその逆に変化したときに呼び出されるイベントを指定する。

【参照】
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#AppMenu_Properties.htm?Highlight=render
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/content/FlexForm_Events.htm