数値フィールドクラス
dataforms.jarには各種数値入力用のフィールドクラスが用意されています。以下にその一覧を示します。
| クラス | 機能 | Javaのデータ型 | SQLのデータ型 |
|---|---|---|---|
| NumberField | 数値入力フィールドの基本クラス | - | - |
| SmallintField | 2バイト整数の入力フィールド | Short | smallint |
| IntegerField | 4バイト整数の入力フィールド | Integer | integer |
| BigintField | 8バイト整数の入力フィールド | Long | bigint |
| NumericField | 固定小数点数値の入力フィールド | BigDecimal | numeric |
NumberFieldが各種数値入力クラスの基本クラスです。NumberField.jsは3桁ごとに「,」を設定する機能や、桁数をそろえる機能などが実装されています。また、これらのフィールドに対応するタグは全て、<input type="text".../>です。
ファイルフィールドクラス
<input type="file" />に対応するフィールドクラスには以下があります。ファイルタイプ（任意のファイル、画像、動画、音声）と保存先（フォルダ保存、BLOB保存）ごとのフィールドクラスを用意しています。画像フィールドにはサムネイル表示をサポートし、動画は<video></video>タグ、音声は<audio></audio>タグでのストリーミング再生をサポートしています。フォルダ保存のフィールドは指定されたフォルダにアップロードされたファイルを保存し、そのパスをデータベースのvarcharフィールドに保存します。BLOB保存のフィールドはアップロードされたファイルをデータベースのblobフィールドに保存します。また、Javaのデータ型であるFileObjectは、ImageData、VideoData、AudioDataのスーパークラスになっています。
| クラス | 機能 | Javaのデータ型 | SQLのデータ型 |
|---|---|---|---|
| FileField | ファイルフィールドの基底クラス | FileObject | - |
| FolderStoreFileField | フォルダ保存ファイルフィールド | FileObject | varchar |
| BlobStoreFileField | BLOB保存ファイルフィールド | FileObject | blob |
| ImageField | 画像フィールドの基底クラス | ImageData | - |
| FolderStoreImageField | フォルダ保存画像フィールド | ImageData | varchar |
| BlobStoreImageField | BLOB保存画像フィールド | ImageData | blob |
| VideoField | 動画フィールドの基底クラス | VideoData | - |
| FolderStoreVideoField | フォルダ保存動画フィールド | VideoData | varchar |
| BlobStoreVideoField | BLOB保存動画フィールド | VideoData | blob |
| AudioField | 音声フィールドの基底クラス | AudioData | - |
| FolderStoreAudioField | フォルダ保存音声フィールド | AudioData | varchar |
| BlobStoreAudioField | BLOB保存音声フィールド | AudioData | blob |
これらのフィールドクラスを含むページからHTMLを生成すると、1つの<input type="file" .../>のタグのみが出力されます。しかし、画像フィールドにはサムネイル画像、動画フィールドには<video></video>タグ、音声フィールドには<audio></audio>タグが展開されます。例として、画像フィールドをChromeで検証すると、下図のようにタグが生成されていることがわかります。
各種ファイルフィールドクラスはdataforms.jar中に含まれる以下のリソースファイルを参照し、<input type="file" .../>の後に各種タグを展開するようになっています。これらのリソースファイルをプロジェクトにエクスポートし、修正することによってファイルフィールド周りのデザインを修正することができます。
画像ファイルフィールドに展開される各種タグは「ImageField_ja.html」というファイルに設定されており、その内容は以下のようになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ImageFieldの追加コンポーネントのレイアウト</title>
</head>
<body>
<div>
<div style='width:${width}px;height:${height}px;line-height:${height}px;display:table-cell;text-align:center;vertical-align:middle;border-style:solid;border-width:1px;'>
<img id='${fieldId}_thm' style='vertical-align:middle;'/>
</div>
<div>
<a id='${fieldId}_link' href=''></a>
<input type='checkbox' id='${fieldId}_ck'><label for='${fieldId}_ck'>削除</label>
<input type='hidden' id='${fieldId}_fn' name='${fieldId}_fn' value=''>
</div>
</div>
</body>
</html>
さいごに
今回はフィールドクラス群の解説を行いました。次回は各種HtmlTableクラスの解説を行う予定です。
