LoginSignup
0
1

More than 3 years have passed since last update.

Widgetの説明 Part3

Last updated at Posted at 2020-05-08

目次

各Widgetの説明
・Calendar
・Image
・Browser

Calendar

Calendar Widgetはアプリケーションで日付を選択して表示するために使用されます。
View Typeを切り替えることでプロパティ
Calendar(Web)
スクリーンショット 2020-03-13 16.23.48.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
Mode: カレンダーモードの指定
Enable Cache: このプロパティを使用するとPositional Dimension Animationのパフォーマンスが改善できます。

●Onscreen Grid
スクリーンショット 2020-03-13 16.42.18.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
Input View Type: アプリケーションで必要な特定の操作が可能になります

Calendar(Tablet)
●Default
スクリーンショット 2020-03-13 16.24.54.png

●Onscreen Grid
スクリーンショット 2020-03-13 16.43.26.png
Container Height: コンテナの利用可能な高さをパーセンテージで指定

●Popup Grid
スクリーンショット 2020-03-13 16.43.48.png

Image

Image Widgetは、アプリケーションで会社のロゴ、写真、イラストなどのグラフィック画像をPNG、JPEG、またはGIF形式で表示するために使用されます。
Image(Web)
スクリーンショット 2020-03-16 11.18.15.png
Scale Mode: スケールの設定
Source: 画像元の指定
Downloading Image: ダウンロード中のイメージ
Failed Image: 失敗時のイメージ
Tool tip: カーソルがWidgetをクリックしないでホバーするときのヒントテキストの指定
Enable Blur: ぼかしを有効にするかどうかの設定

Image(Mobile)
スクリーンショット 2020-03-16 11.21.00.png
Cache config: キャッシュレスポンスのCache PolicyとCache Storage Policyを構成します
Enable cache: このプロパティを使用するとPositional Dimension Animationのパフォーマンスが改善できます。

Image(Tablet)
スクリーンショット 2020-03-16 11.21.28.png

(参考)画像のスケールモードの違い
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Image_Layout_Properties.htm
図1.png

設定方法

ローカルからソース画像を追加する場合は、以下手順を実行してください。
Assets tabを選択 -> Media -> Common -> 右クリック -> Import Image -> フォルダからインポートするイメージを選択
スクリーンショット 2020-03-09 19.25.47.png

Browser

Browser Widgetは、アプリケーションのURLコンテンツを表示するコンテナです。 Browser Widgetは、HTML / JavaScriptのコンテンツも表示できます。
Browser(Web)
スクリーンショット 2020-03-16 11.46.19.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
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://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”

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1