Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

Widgetの説明 Part1

Last updated at Posted at 2020-03-10

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

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

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

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

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

・方法2
フォームのController.jsにコーディングすることでWidgetを生成できます。
下記画像参照
図39.png
#3.共通のプロパティの説明
Lookプロパティ
図40.png
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の色などデザインを設定するのに役立ちます
図41.png
Skinプロパティでは次のことができる:
カスタムCSSの設定(CustomCSSにチェックを入れて設定)
背景の設定(BackGround)
枠線(Borderで設定)
影とテキスト影(Shadowで設定)
#4.各Widgetの説明
##FlexContainer
FlexContainerはコンテナWidgetであり、通常アプリケーションに追加する最初のWidgetとなります。
画面上の他のすべてのWidgetのコンテナとして機能します。スクリーンショット 2020-03-12 16.35.08.png

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

Sizeの設定でグリッド幅を変更することができる。
##FlexScrollContainer
FlexScrollContainerは、コンテンツを水平方向または垂直方向にスクロールできるスクロール可能なコンテナです。
FlexScrollContainer(web)
図43.png
Scroll Direction:スクロールする方向を指定する
contentOffset:dpに測定されたスクロール可能領域の左上のxとy座標を指定する。
contentSize:コンテンツの幅と高さを指定する
FlexScrollContainer(Mobile/Tablet)
スクリーンショット 2020-03-12 16.50.01.png
zoomScale:FlexScrollContainerに適用される現在の倍率を指定します。
maxZoomScale:スクロールビューに適用できる最大スケール係数を指定します。
minZoomScale:スクロールビューに適用できる最小スケール係数を指定します。
bouncesZoom:スケーリングが最大制限または最小制限を超えたときに、スクロールビューのスケーリングをアニメーション化するかどうかを指定します。
##Tab
タブwigdetを使用して、TabPaneにタブを追加することができます。
Tab(web)
図44.png
Image:表示する画像を指定する
editをクリックすると画像を指定できる。
Tab name:タブのタイトル
Layout Type:wigdetのアレンジメントをフリーフォーム、
水平または垂直のいずれにするかを指定する。
他のプロパティはデフォルトに設定される。

Tab(Tablet/Mobile)
tablet/Mobileでもこちらは表示変わりません。
##TabPane
TabPanewigdetは、その中に複数のタブを整理できるコンテナwigdetです。
tabPane(web)
図45.png
Active tabs: 選択したタブインデックスを示す。
インデックスは0から始まる。
ViewType:Tab Paneが表示するビュータイプを指定する。
Position:タブの位置を指定する。
Header Container Weight:タブの幅の割合を指定します
Left/Top image:タブの左上の画像を指定する
Right/Bottom Image:タブの右下の画像を指定する

tabPane(tablet/mobile)
スクリーンショット 2020-03-12 17.14.02.png
tabHeaderHeight:タブヘッダーの高さをピクセル単位で指定します。
##Textbox
Textboxウィジェットを使用すると、ユーザーから単一行の入力を取得できます。
例:ログイン画面でユーザー名とパスワードを取得する際の入力部分など。
Textbox(web)
図46.png
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)
スクリーンショット 2020-03-12 17.28.53.png
PasteBoardType:システム全体またはアプリケーション固有のペーストボードを使用して、アプリケーション内または別のアプリケーションとデータを共有できます。
closeButton:キーパッドに表示される「完了」ボタンのon/offを切り替えます。
closeButtonText:キーパッドに表示される「完了」ボタンを置き換えるテキストを指定します。
KeyboardActionLabel:キーボードのアクションキーに表示するテキストを指定します。
##Label
ラベルウィジェットは、フォームに固定のテキストを表示するために使用されます。
Label(web)
図47.png
Tool Tip:カーソルがウィジェットをクリックしないでホバーするときのヒントテキストを指定する。
Enable Blur:ウィジェットのぼかし効果を有効または無効にすることができる。
Label(tablet/mobile)
スクリーンショット 2020-03-12 18.09.48.png
maxNumberOfLine:ラベルウィジェットで許可されるテキストの最大行数を定義します。
wrapping:ラベルが境界値までに達すると、ラッピングする。
textCopyable:ウィジェットが有効な状態のときに、ラベルウィジェットからテキストをコピーできます。
##RichText
リッチテキストウィジェットは、ユーザー定義のHTML文字列を表示します。
テキスト、リンク、画像を表示できます。
RichText(web)
図48.png
Tool Tip :カーソルがウィジェットをクリックしないでホバーするときのヒントテキストを指定する。
RichText(tablet/mobile)
tablet/Mobileでもこちらは表示変わりません。
##TextArea
TextAreaウィジェットを使用すると、複数行のテキストを入力できます。
例:コメントや、フィードバック等
TextArea(web)
図49.png
Max Characters:入力できる最大文字数を指定する。
Placeholder:入力欄の期待値を記述する短いヒントを指定する。
Tool tip:カーソルがウィジェットをクリックしないでホバーするときのヒントテキストを指定する。
Auto Capitalize:先頭の大文字化を自動で行うかどうかを指定する。
TextArea(tablet/mobile)
スクリーンショット 2020-03-12 18.41.16.png
PasteBoardType:システム全体またはアプリケーション固有のペーストボードを使用して、アプリケーション内または別のアプリケーションとデータを共有できます。
closeButton:キーパッドに表示される「完了」ボタンのon/offを切り替えます。
closeButtonText:キーパッドに表示される「完了」ボタンを置き換えるテキストを指定します。
KeyboardActionLabel:キーボードのアクションキーに表示するテキストを指定します。

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

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?