Widgetの説明 Part1

#目次
1.Widgetとは？
2.Widgetの作成方法
3.共通のプロパティの説明
4.各Widgetの説明
本記事では
・FlexContainer
・FlexScrollContainer
・Tab
・TabPane
・Label
・RichText
・TextArea
の紹介をしています。

#1.Widgetとは？
Wigdetとは、アプリ作成の際に使える便利な部品のこと。
ラベルや、テキストボックス、フレックスボックスやカレンダーなどが標準搭載されている。

フォームにWigdetを追加したい場合は、
下記画像参照
2のメニューから使いたいWigdetを3のエディタ画面にドラックアンドドロップすることで
Wigdetを設置することができます。

1.ナビゲーターエリア
アプリ開発に必要なファイル一覧を表示
Project：画面の構成要素とスクリプトファイルを表示
Skin：Wigdetのスキンの一覧を表示
Template：Wigdetのテンプレートやコンポーネントを表示
Assets：メディアファイルやフォントを表示
2.ライブラリーエリア
Wigdet等を一覧で表示
3.エディタエリア
画面編集やスクリプト編集が可能
4.デバックエリア
各種デバック機能を提供
5.ユーティリティエリア
詳細の設定が可能

#2.Widgetの作成方法
Widgetを作成する方法は２通りあります。
・方法１
左下2のパネルから、必要なウィジェットを３のエリアにドラッグ&ドロップします。

・方法2
フォームのController.jsにコーディングすることでWidgetを生成できます。
下記画像参照

#3.共通のプロパティの説明
Lookプロパティ

Left、Right、Top、Bottom：ウィジェットの位置を指定できます。
Width、Height、Max Width、Min Width, Max Height：Widgetの幅、高さなどのサイズを指定できます。
CenterX, CenterY:Widgetの中心のX軸、Y軸の位置を指定する。Widgetを中央寄せにしたい場合は、50%に設定できます。
Z Index:Widgetの並び順を指定します。Z Indexが高いものが低いものよりも前に来るようになります。
↑描画ツールなどのレイヤーの考え方と同じ。

Skinプロパティ
Widgetの色などデザインを設定するのに役立ちます

Skinプロパティでは次のことができる：
カスタムCSSの設定(CustomCSSにチェックを入れて設定)
背景の設定(BackGround)
枠線(Borderで設定)
影とテキスト影(Shadowで設定)
#4.各Widgetの説明
##FlexContainer
FlexContainerはコンテナWidgetであり、通常アプリケーションに追加する最初のWidgetとなります。
画面上の他のすべてのWidgetのコンテナとして機能します。

Clip Bounds:子Widgetが境界外に配置される時、切り取りするかどうかを指定する。フレックスコンテナに影を付けたい場合などは、この設定をOffに設定する。
Layout Type:WidgetのLayout Typeをフリーフォーム、
水平または垂直のいずれにするかを指定する。
Enable Blur:Widgetがぼやけてみえるようにする。
Snap to Grid:グリット線に応じてWidgetが移動するかを設定する。

Sizeの設定でグリッド幅を変更することができる。
##FlexScrollContainer
FlexScrollContainerは、コンテンツを水平方向または垂直方向にスクロールできるスクロール可能なコンテナです。
FlexScrollContainer(web)

Scroll Direction:スクロールする方向を指定する
contentOffset:dpに測定されたスクロール可能領域の左上のxとy座標を指定する。
contentSize:コンテンツの幅と高さを指定する
FlexScrollContainer(Mobile/Tablet)

zoomScale:FlexScrollContainerに適用される現在の倍率を指定します。
maxZoomScale:スクロールビューに適用できる最大スケール係数を指定します。
minZoomScale:スクロールビューに適用できる最小スケール係数を指定します。
bouncesZoom:スケーリングが最大制限または最小制限を超えたときに、スクロールビューのスケーリングをアニメーション化するかどうかを指定します。
##Tab
タブwigdetを使用して、TabPaneにタブを追加することができます。
Tab(web)

Image:表示する画像を指定する
editをクリックすると画像を指定できる。
Tab name:タブのタイトル
Layout Type:wigdetのアレンジメントをフリーフォーム、
水平または垂直のいずれにするかを指定する。
他のプロパティはデフォルトに設定される。

Tab(Tablet/Mobile)
tablet/Mobileでもこちらは表示変わりません。
##TabPane
TabPanewigdetは、その中に複数のタブを整理できるコンテナwigdetです。
tabPane(web)

Active tabs: 選択したタブインデックスを示す。
インデックスは0から始まる。
ViewType:Tab Paneが表示するビュータイプを指定する。
Position:タブの位置を指定する。
Header Container Weight:タブの幅の割合を指定します
Left/Top image:タブの左上の画像を指定する
Right/Bottom Image:タブの右下の画像を指定する

tabPane(tablet/mobile)

tabHeaderHeight:タブヘッダーの高さをピクセル単位で指定します。
##Textbox
Textboxウィジェットを使用すると、ユーザーから単一行の入力を取得できます。
例：ログイン画面でユーザー名とパスワードを取得する際の入力部分など。
Textbox(web)

Max Characters: 入力できる最大文字数を指定する。
Input Mode: AnyとNumeric onlyを指定できる。
Numeric onlyの場合は数字のみ入力可能となる。
Height Mode:固有のコンテンツまたはシステムのデフォルトによって、テキストボックスの高さを決定する方法を指定します。
デフォルトのオプションは、iPhoneおよびSPAプラットフォームでのみ使用可能です。
Keyboard Style
Default→ デフォルトのキーボード
Decimal→ 小数点ありのナンバーパッド
Number Pad→ 暗証番号を入れるための、数字のみのキーボード
Phone Pad→ 電話用。ゆえに"#"や"*"のボタンがある
Placeholder:入力欄の例を指定する。
Tool tip:カーソルがウィジェットをクリックしないでホバーするときのヒントテキストを指定する。

Textbox(tablet/mobile)

PasteBoardType:システム全体またはアプリケーション固有のペーストボードを使用して、アプリケーション内または別のアプリケーションとデータを共有できます。
closeButton:キーパッドに表示される「完了」ボタンのon/offを切り替えます。
closeButtonText:キーパッドに表示される「完了」ボタンを置き換えるテキストを指定します。
KeyboardActionLabel:キーボードのアクションキーに表示するテキストを指定します。
##Label
ラベルウィジェットは、フォームに固定のテキストを表示するために使用されます。
Label(web)

Tool Tip:カーソルがウィジェットをクリックしないでホバーするときのヒントテキストを指定する。
Enable Blur:ウィジェットのぼかし効果を有効または無効にすることができる。
Label(tablet/mobile)

maxNumberOfLine:ラベルウィジェットで許可されるテキストの最大行数を定義します。
wrapping:ラベルが境界値までに達すると、ラッピングする。
textCopyable:ウィジェットが有効な状態のときに、ラベルウィジェットからテキストをコピーできます。
##RichText
リッチテキストウィジェットは、ユーザー定義のHTML文字列を表示します。
テキスト、リンク、画像を表示できます。
RichText(web)

Tool Tip :カーソルがウィジェットをクリックしないでホバーするときのヒントテキストを指定する。
RichText(tablet/mobile)
tablet/Mobileでもこちらは表示変わりません。
##TextArea
TextAreaウィジェットを使用すると、複数行のテキストを入力できます。
例：コメントや、フィードバック等
TextArea(web)

Max Characters:入力できる最大文字数を指定する。
Placeholder:入力欄の期待値を記述する短いヒントを指定する。
Tool tip:カーソルがウィジェットをクリックしないでホバーするときのヒントテキストを指定する。
Auto Capitalize:先頭の大文字化を自動で行うかどうかを指定する。
TextArea(tablet/mobile)

PasteBoardType:システム全体またはアプリケーション固有のペーストボードを使用して、アプリケーション内または別のアプリケーションとデータを共有できます。
closeButton:キーパッドに表示される「完了」ボタンのon/offを切り替えます。
closeButtonText:キーパッドに表示される「完了」ボタンを置き換えるテキストを指定します。
KeyboardActionLabel:キーボードのアクションキーに表示するテキストを指定します。

【参考】
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm