ここでは、画面設計時に使用するUnifinityコントロールについて説明します。
Unifinityコントロールとは
Unifinityアプリケーションの画面に情報を表示したり、利用者がUnifinityアプリケーションを操作したりするためのインターフェース部品を「Unifinityコントロール」といいます(以降、「コントロール」と表記します)。コントロールには、「ボタン」や「テキストボックス」などがあります。
Unifinityアプリケーションを使用するアプリユーザーは、コントロールを操作することで、Unifinityアプリケーションが用意する処理を実行したり、データの内容を確認・変更したりできます。
コントロールの種類
コントロールには、以下の16種類があります。
- ボタン
- ラベル
- 表
- テキストボックス
- チェックボックス
- ラジオボタン
- スライダー
- コンボボックス
- カレンダー(月)
- カレンダー(週)
- カレンダー(週:日毎)
- カレンダー(日)
- カレンダー(日付予約)
- サブフォーム
- ウェブビュー
- 手書きビュー
このほか、複数のコントロールやデータベース、ロジックを一括で追加できる「コントロールセット」が12種類あります。
コントロールの一覧
ボタン
アプリユーザーがマウスクリックやタップを行うことでアクションを実行できるコントロールです。
ボタンに紐づける処理は、プロパティーエリアの[オブジェクト]ペイン⇒[動作設定]タブで設定します。
項目名 |
説明 |
---|---|
遷移先 |
マウスクリック時やタップ時に遷移先となる画面の指定です。 |
実行処理 |
マウスクリック時やタップ時で、押して離した時に実行する処理 |
長押処理 |
ボタンを長押しした時に実行する処理の指定です。 |
押下瞬間時処理 |
マウスクリック時やタップ時で、押した瞬間に実行する処理の指定です。 |
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「ボタン」を参照してください。
ラベル
アプリユーザーが編集することのできない文字列または画像を表示するコントロールです。
表示する文字列は、プロパティーエリアの[データ]ペイン⇒[内容]タブ⇒[文字]で設定します。
表示する画像は、プロパティーエリアの[デザイン]ペイン⇒[画像]タブで設定します。
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「ラベル」を参照してください。
表
DB設計と連動し、データを行と列で構成された表形式で表示できる読み取り専用のコントロールです。「グリッド」とも呼ばれます。
表示内容の取得先の指定などは、プロパティーエリアの[データ]ペイン⇒[内容]タブで設定します。
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「表」を参照してください。
テキストボックス
アプリユーザーが文字を入力できるコントロールです。
複数行を入力できるようにしたり、テキストを折り返して表示したりするには、プロパティーエリアの[デザイン]ペイン⇒[色と形]タブ⇒[折り返し]や[複数行]で設定できます。
また、入力内容を制限するには、プロパティーエリアの[オブジェクト]ペイン⇒[動作設定]タブ⇒[入力内容]で設定できます。
[入力内容]で[日付]を選択した場合は、実行時にマウスクリックやタップを行うと、日付入力のインターフェース(「日時の選択」画面)が表示されます。
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「テキストボックス」を参照してください。
チェックボックス
ON/OFFの切り替えができるコントロールです。
1つの項目のON/OFFを切り替えるために使用できるほか、いくつかあるオプションの中から、複数の項目を選択する場合に使用します。ONのときに、アプリユーザーがマウスクリックやタップを行うとチェックボックスはOFFとなります。OFFのときであれば、ONになります。
ON/OFFそれぞれの状態の時にロジックコンポーネント「処理/コントロール/内容取得」が取得できる値は、プロパティーエリアの[オブジェクト]ペイン⇒[動作設定]タブ⇒[ON値]や[OFF値]で設定します。
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「チェックボックス」を参照してください。
ラジオボタン
複数の選択肢から1つを選択するコントロールです。
同じグループ名が指定されている複数のラジオボタンは1つのグループとして扱われます。同じグループの中から、アプリユーザーは1つのラジオボタンを選択できます。同じグループの別のラジオボタンを選択すると、前に選択していたラジオボタンは未選択状態になります。
ラジオボタンのグループ名は、プロパティーエリアの[オブジェクト]ペイン⇒[動作設定]タブ⇒[ラジオグループ]で設定します。
また、ONの状態の時にロジックコンポーネント「処理/コントロール/内容取得」が取得できる値は、プロパティーエリアの[オブジェクト]ペイン⇒[動作設定]タブ⇒[ON値]で設定します。
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「ラジオボタン」を参照してください。
スライダー
インジケーター上のつまみを移動させることによって、数値を設定できるコントロールです。
アプリユーザーはつまみを動かすことで、視覚的に位置を調整できます。
スライダーの初期位置(①)、最小値や最大値(②)は、プロパティーエリアの[データ]ペイン⇒[内容]タブで設定します。
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「スライダー」を参照してください。
コンボボックス
リスト形式の単一選択コントロールです。
アプリユーザーがマウスクリックやタップを行うと、「値の選択」画面が表示されます。アプリユーザーは、表示されたコンボリスト(選択項目の一覧)から1つを選択できます。
コンボリストの取得先は、プロパティーエリアの[データ]ペイン⇒[リスト]タブ⇒[値入力]や[テーブル]で設定します。
取得先の設定 |
説明 |
---|---|
値入力 |
コンボリストの値を直接入力できます。複数の選択肢を入力する場合は |
テーブル |
DB設計と連動し、データをコンボリストの値に設定できます。 コンボリスト用のテーブルをDB定義リストに登録し、そのテーブルを コンボリスト用テーブルの例 |
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「コンボボックス」を参照してください。
カレンダー
カレンダーのコントロールには、以下の5種類があります。各コントロールのプロパティーについては、『コントロールリファレンス』の「カレンダー」を参照してください。
コントロール名 |
説明 |
---|---|
カレンダー(月) |
月日や時間を表示したり、月日を選択したりできるコントロール アプリユーザーが上下左右にマウスドラッグやスワイプを行う、 |
カレンダー(週) |
1週間の予定を時間軸で並べて表示したり、日時を選択したり アプリユーザーが上下左右にマウスドラッグやスワイプを行う、 |
カレンダー(週:日毎) |
1週間の予定を日で並べて表示したり、日を選択したりできる アプリユーザーがカレンダー上部の三角マークをマウスクリ |
カレンダー(日) |
1日の予定を時間軸で並べて表示できるコントロールです。 アプリユーザーが上下にマウスドラッグやスワイプを行う、 |
日付予約 |
特定の日の時間帯における情報を見出し列ごとに表示できる |
サブフォーム
フォームの中に他のフォームを表示できるコントロールです。
サブフォーム内にはサブフォームのサイズよりも大きいフォームを表示することもできます。その場合、サブフォーム内でマウスドラッグやスワイプを行うことでスクロールできます。
※サブフォームを使った画面設計については、「11. サブフォームによる画面設計について」を参照してください。
サブフォーム内に表示する別の画面の指定は、[オブジェクト]ペイン⇒[動作設定]タブ⇒[明細]と[レイアウト]で設定します。[レイアウト]が未指定の場合は、指定した画面の作業エリアで一番左にあるレイアウトが表示されます。
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「サブフォーム」を参照してください。
ウェブビュー
Webページを表示するコントロールです。
表示するページの指定は、プロパティーエリアの[データ]ペイン⇒[内容]タブ⇒[文字]にURLを入力します。
※プロパティーエリアの他の設定については、『コントロールリファレンス』の「ウェブビュー」を参照してください。
【参考】ロジックでURLを動的に制御したいときは
ロジックコンポーネント「コントロール/内容セット」を利用し、下図のようにURLを設定します。
例:https://unifinity.co.jpを表示する場合
ロジックコンポーネントの使用方法は、『アプリ作成《処理設計編》』を参照してください。
手書きビュー
アプリユーザーが手書き入力できるコントロールです。
手書きビューにはラスター(点の集合)とベクター(図形の集合)の2つのタイプがあります。
プロパティーエリアの[データ]ペイン⇒[内容]タブで、以下の設定ができます。また、下記ボタンのON/OFFを制御できます。
設定内容、ボタンの種類 |
ラスター |
ベクター |
|
---|---|---|---|
設定内容 |
背景画像選択 |
○ |
○ |
マーカー画像選択 |
- |
○ |
|
パレット(カンマ区切りで色指定) |
○ |
- |
|
ペンサイズ(カンマ区切りでドットサイズ指定) |
○ |
- |
|
ボタンの種類 |
ツール縮小ボタン |
○ |
○ |
ツール非表示ボタン |
○ |
○ |
|
削除ボタン |
○ |
○ |
|
選択ボタン |
- |
○ |
|
ペンボタン |
- |
○ |
|
移動ボタン |
- |
○ |
|
ズームボタン |
- |
○ |
詳細は、『コントロールリファレンス』の「手書きビュー」を参照してください。
コントロールセットの一覧
一行テキスト・複数行テキスト
テキストで自由入力する形式のデータベース項目を表示・編集できるコントロールセットです。「商品名」や「項目の記入者」など1行で入力する短いテキストには「一行テキスト」が、「備考」や「メモ」など複数行入力されることのある長いテキストには「複数行テキスト」が適しています。
【参考】「DB連携」カテゴリーのコントロールセットで追加される項目について
Unifinity Studioで「DB連携」カテゴリーに含まれるコントロールセットを画面に追加すると、そのコントロールセットの動作に必要なデータベースやロジックが自動で追加されます。追加されたデータベース項目やロジックは、コントロールへの紐付けがなくなると、自動的に削除されます。
日付選択
日時形式のデータベース項目を表示・編集できるコントロールセットです。「項目の記入日」など日付で入力する項目に適しています。実行時にテキストボックスの部分をタップすると、日付を選択するダイアログが表示されます。
数値増減
数値形式のデータベース項目を表示・編集できるコントロールセットです。「備品の数」など値が小さかったり頻繁に細かく増減したりする項目に適しています。
チェック項目
「はい」「いいえ」の2択の選択肢から選択するデータベース項目を表示・編集できるコントロールセットです。画面の見た目は「チェックボックス」コントロールと変わりありませんが、他のコントロールセットと同様に値を保存するためのデータベースの項目が自動的に追加される点が、「チェックボックス」コントロールと異なります。
ラジオ選択・コンボ選択
複数の選択肢から値を1つ選択するデータベース項目を表示・編集できるコントロールセットです。項目の数が少ない場合は「ラジオ選択」を、多い場合は「コンボ選択」を使用します。
写真撮影・画像選択
画像形式のデータベース項目を表示・編集できるコントロールセットです。端末搭載のカメラで画像を撮影して値を設定する「写真撮影」コントロールセットと、端末内に保存されているファイルから選択して値を設定する「画像選択」コントロールセットがあります。
手書き項目
手書きで入力した画像のデータベース項目を表示・編集できるコントロールセットです。項目の記録者のサインなどにお使いいただけます。
バーコードリーダー・QRコードリーダー
テキストで自由入力する形式のデータベース項目を表示・編集できるコントロールセットです。「一行テキスト」や「複数行テキスト」とは異なり、カメラを起動して一次元バーコードや二次元バーコード(QRコード)から読み取った値を設定できます。
なお、「バーコードリーダー」「QRコードリーダー」のいずれも動作は変わらず、「バーコードリーダー」で二次元バーコードを読み取ったり逆に「QRコードリーダー」で一次元バーコードを読み取ったりすることができます。読み取りボタンに表示するアイコンによって使い分けてください。