BizDesginerでの開発2-002 (gooブログBackup)

CV.net

まず、前の記事2-001のBizの画面を参考に左上から右下に順番にGUI部品を配置します。（表示内容等はデザイン画面でF2キーで直接修正できる）
【以下、GUI部品名とValue値かTitle値、オブジェクト名のリスト】
Label「入力日」(Label1)、DateEdit(DateEdit1)、Label「顧客コード」(Label2)、ComboBox(ComboBox1)、Label「備考」(Label3)、TextBox(TextBox1)、Label「合計数量」(Label4)、TextBox(TextBox2)、Label「合計金額」(Label5)、TextBox(TextBox3)、FlexView(FlexView1)、Button「終了」(Button1)。
各オブジェクトの位置とかサイズはだいたい適当に配置します。
FlexView1オブジェクトの中にもオブジェクトを定義しないといけませんが、FlexViewはいわゆるコンテナオブジェクトになっているため、オブジェクトビューからFlexVie1の下のFlexRecord1を選択します。

「子オブジェクトの挿入」を選び、FlexTextBoxを5個追加します。

そして、オブジェクトビューから、今追加したFlexTextBox1から5までのオブジェクトを選択してプロパティビューで表示タイトルを変更していきます。

プロパティビューのTitleに、"商品CD"、"商品名"、"単価"、"数量"、"金額"とFlexTextBox1から5までを変更します。Width値も適当に修正します。

これで画面はだいたい出来上がりました。

しかし実はここで根本的な問題があり、FlexViewを配置しただけでは、デフォルトでは行は1行もなく、行を増やすようなイベントも定義されてないので入力できないんです！
そこでFlexViewにちょっと細工をして、簡単に最終行追加、途中行挿入、行削除ができる機能を追加しておきます。
FlexView1をダブルクリックすると、スクリプトペインに移動します。
現在の状態ではこんなかんじで定義されているハズです。

FlexView FlexView1 {
X = 13;
Y = 119;
Width = 484;
Height = 309;
FlexRecord FlexRecord1 {
FlexTextBox FlexTextBox1 {
Title = "商品CD";
Width = 80;
}
FlexTextBox FlexTextBox2 {
Title = "商品名";
Width = 120;
}
FlexTextBox:number FlexTextBox3 {
Title = "単価";
}
FlexTextBox:number FlexTextBox4 {
Title = "数量";
Width = 50;
}
FlexTextBox:number FlexTextBox5 {
Title = "金額";
}
}
}

オレンジの色のあたりにコードを直接記述しましょう。
FlexView1のタイトル行をクリックしたら1行追加し(OnTitleDClicked)、入力行で右クリックすると(OnRClicked)、その行の上に1行挿入するか、選択行を削除するかのメニュー表示。

Function OnTitleDClicked(e){
FlexView1.InsertRow(1);
}
Function OnRClicked(e){
var i=popupMenu("現在行の上に挿入","現在行を削除");
if (i==1){
FlexView1.InsertRow(1,e.Row);
}
else if (i==2){
FlexView1.DeleteRow(e.Row);
}
}

これでFlexViewの列の中身には関係なく、行を追加したり削除したりできるようになりました。
これはCV.netの中で使っているやりかたです。今はCRSソースに直接記述していますが、同じような処理はどこでもやるので、CV.netは汎用的な処理としてClass化しています。 (object名に左右されないやり方で、かつ行コピーなどの処理もやれるようにしている。汎用的な行コピーは多少処理が複雑になるのでここでは触れない)
あとは、Button1オブジェクトのOnTouchイベントに次のように記述します。

Function OnTouch(e){
//.Delete();
}

ボタンを押されたらルートオブジェクト以下を全部Deleteして終了ということです。

次の回で計算部分と合計の再計算処理、あと数量や金額が現在StringになっているのでNumber型への変更などの細かい調整をやっていって終わりです。
（最後にこのCRSスクリプトのソースを全部のせます）
まだ全部説明していませんが、FlexViewなんてわかってみればすごく簡単です。
このように複数明細を入力させるような処理を実現するためには
1.Formオブジェクトの配列を使う
2.Spreadオブジェクトを使う
3.FlexViewオブジェクトを使う
という3通りありますが、CV.netではFlexViewがV4で新たに追加されたのを見て、Spreadオブジェクトのやり方から一気に全部のCRS ソースをFlexViewになおしました。未だにFormやSpreadでやっているCRSスクリプトがあるとすれば、それはFlexViewオブジェクトの使い方を知らないか、古い過去のソースを引きずっているからです。
FlexViewオブジェクトのほうがきれいで細かい制御が可能になっています。