Widgetの説明 Part3

#目次
各Widgetの説明
・Calendar
・Image
・Browser

##Calendar
Calendar Widgetはアプリケーションで日付を選択して表示するために使用されます。
View Typeを切り替えることでプロパティ
__Calendar(Web)__
![スクリーンショット 2020-03-13 16.23.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9ffee50c-54b3-ec1c-ac43-401090e5ded9.png)
Start Date: 開始日により日付の範囲の設定
End Date: 終了日により日付の範囲の設定
View Type: 閲覧タイプの選択(Default・Onscreen Grid・Popup Grid)
Grid Calendarテンプレートを使用すると、Calendar Dayセルのテンプレートを定義できます。各カレンダーに使用できるテンプレートは1つだけです。これは主に開発者がカレンダーの日のセルの外観をカスタマイズするのに役立ちます。
Placeholder: 入力欄の初期値の設定
Default Date: デフォルトの日付の設定
Date Format: 日付形式の設定
Calendar Icon: カレンダーアイコンの変更
Left Nav Image: 左のナビゲートイメージの設定
Right Nav Image: 右のナビゲートイメージの設定
Weekend Selectable: 週末を選択できるかどうかの選択
Enable Blur: ぼかしを有効にするかどうかの設定
Tool Tip: カーソルがWidgetをクリックしないでホバーするときのヒントテキストの指定
No of Months: カレンダーが選択された時に表示される月数を示す1~12の数値を指定
Popup Title: カレンダーに表示されるタイトルテキストの指定

__Calendar(Mobile)__
●Default
![スクリーンショット 2020-03-13 16.24.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/75627615-6cb6-34f2-9d0b-6eaca88aed83.png)
Mode: カレンダーモードの指定
Enable Cache: このプロパティを使用するとPositional Dimension Animationのパフォーマンスが改善できます。

●Onscreen Grid
![スクリーンショット 2020-03-13 16.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4ba4fbd2-cee7-65e7-03f9-ebc29711b460.png)
Hide Days Header: グリッドカレンダーのヘッダーで平日を非表示にするかどうか指定
Hide Months Header: グリッドカレンダーのヘッダーで月を非表示にするかどうか指定
Day Text Alignment In Cell: Calendar Dayセルのテキストの配置を指定。アライメント値は以下のとおりです
・左上：テキストをCalendar Dayセルの左上隅に揃える必要があることを指定
・中央上：テキストをカレンダーの日のセルの中央上に揃える必要があることを指定
・右上：カレンダーの日のセルの右上に揃えるテキストを指定
・左中：テキストをカレンダーの日のセルの左中に揃える必要があることを指定
・中央：テキストをカレンダーの日のセルの中央に揃える必要があることを指定
・中右：カレンダーの日のセルの中央右にテキストを揃える必要があることを指定
・左下：カレンダーの日のセルの左下にテキストを配置することを指定
・中央下：テキストをカレンダーの日のセルの中央下に揃える必要があることを指定
・右下：カレンダーの日のセルの右下に揃えるテキストを指定
Cell Template: Calendar Dayセルに使用される共通テンプレートを指定
Data: 各セルでレンダリングされる実際のデータを表します

●Popup Grid
![スクリーンショット 2020-03-13 16.42.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e665f72c-43d3-8534-6677-f8053c084809.png)
Input View Type: アプリケーションで必要な特定の操作が可能になります

__Calendar(Tablet)__
●Default
![スクリーンショット 2020-03-13 16.24.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0f011b52-7c73-e9f1-6c39-b9ebd205d784.png)

●Onscreen Grid
![スクリーンショット 2020-03-13 16.43.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ac13de59-da3d-0f52-762b-3ff1bea53964.png)
Container Height: コンテナの利用可能な高さをパーセンテージで指定

●Popup Grid
![スクリーンショット 2020-03-13 16.43.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/95cf6992-0dd9-76dd-5d73-b89b26f0b8f5.png)

#Image
Image Widgetは、アプリケーションで会社のロゴ、写真、イラストなどのグラフィック画像をPNG、JPEG、またはGIF形式で表示するために使用されます。
__Image(Web)__
![スクリーンショット 2020-03-16 11.18.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cdc046ad-ffac-1c0e-2ec1-2853df49b73e.png)
Scale Mode: スケールの設定
Source: 画像元の指定
Downloading Image: ダウンロード中のイメージ
Failed Image: 失敗時のイメージ
Tool tip: カーソルがWidgetをクリックしないでホバーするときのヒントテキストの指定
Enable Blur: ぼかしを有効にするかどうかの設定

__Image(Mobile)__
![スクリーンショット 2020-03-16 11.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6ab9afb3-341a-7024-0951-4f8e75b28838.png)
Cache config: キャッシュレスポンスのCache PolicyとCache Storage Policyを構成します
Enable cache: このプロパティを使用するとPositional Dimension Animationのパフォーマンスが改善できます。

__Image(Tablet)__
![スクリーンショット 2020-03-16 11.21.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9b8316e0-ba3c-dbf7-4b1f-666aa742bf97.png)

（参考）画像のスケールモードの違い
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Image_Layout_Properties.htm
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6b18c80c-149f-8d6e-b68e-eec000839de6.png)
##設定方法
ローカルからソース画像を追加する場合は、以下手順を実行してください。
Assets tabを選択 -> Media -> Common -> 右クリック -> Import Image -> フォルダからインポートするイメージを選択
![スクリーンショット 2020-03-09 19.25.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a5abb6bd-ff8e-617f-a2ff-44772fa714b9.png)

  
#Browser
Browser Widgetは、アプリケーションのURLコンテンツを表示するコンテナです。 Browser Widgetは、HTML / JavaScriptのコンテンツも表示できます。
__Browser(Web)__
![スクリーンショット 2020-03-16 11.46.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0c3e62c6-63d1-7483-aa8e-442bc0ef7b01.png)
Master Data: Editボタンをタップすると以下のことができます
・Content：表示されるためのHTMLコンテンツを入力または貼り付けるテキストフィールドを表示
・URL：表示されるHTMLページのURLを指定するテキストボックスを表示
・Local File： Webアプリなど、ローカルHTMLコンテンツを起動するためのローカルWebベースファイルを指定するテキストボックスを表示
Native communication: Browser Widgetで実行されているWebアプリをJavaScriptのモジュールを有効にして、KonyネイティブコンテキストでJavaScriptコードを実行するかどうかを指定

__Browser(Mobile)__
![スクリーンショット 2020-03-16 11.47.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/14a61806-5b64-19bd-47f0-248bf15bf3b2.png)
Detect phone number:Browser WidgetがWebページでの電話番号の検出をサポートしているかどうかを指定し、クリック可能な電話リンクとして電話番号を表示
Zoom: ズーム（表示領域のスケールを変更する機能）を有効にする必要があるかどうかを指定
Base URL: ブラウザのレンダリング時に表示されるベースURLを構成するために使用
Bounces: スクロールビューがコンテンツの端を超えて跳ね返り再び戻るかどうかを指定
Browder Type: ブラウザのタイプの指定
Enable Cache: このプロパティを使用するとPositional Dimension Animationのパフォーマンスが改善できます。

__Browser(Tablet)__
![スクリーンショット 2020-03-16 11.47.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/30a32056-d3b9-0dbd-4948-d7388243b827.png)

#参考
“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”