桐の釣魚大全のトップ > 新 フォームアプリケーション入門 §1
トップページに戻る

鋭意校正中です。
念のためにブラウザでF5キーを押してリロードしてからお読みください。

新 フォームアプリケーション入門 §1 ― 桐のイベント処理の入門講座

 ―はじめに

 "フォームアプリケーション"とは2000年当時の著者(ONnoji)の造語です。
桐ver.8 以降の桐でフォーム(.wfm/.wfx)とイベント処理(.kev/.kex)を組み合わせてアプリケーションを作成する手法を
"フォームアプリケーション"と呼ぶことにします。
これに対して一括処理(.cmd/.cmx)でアプリケーションを作成する手法を"一括アプリケーション"と呼ぶことにします。

 本編は"フォームアプリケーション"を理解していただくための入門編です。
旧入門編は2000年から2001年に「桐のイベント道場」で連載しましたが、ジオシティーズのサービス終了に伴い2019年3月に公開終了しました。

 この度、桐10sを元に旧作をリニューアルした内容で「新 フォームアプリケーション入門 §1」をお届けいたします。 2021年3月 著者しるす

 追記 2021年8月13日 画像を追加して、誤記を訂正しました。

 §1 三角形の面積を求める

 これから作成する"三角形の面積を求める"フォームアプリケーションは実用的ではありませんが、フォームアプリケーションの基本が必ず習得できるはずです。
どうぞご自分の桐10sでお試しください。

   〈ヒントとコツ〉
    このコンテンツはフォームアプリケーションの独習書です。
    学習する際には、単に一読するよりも実際に桐10sを操作してフォームを完成する事を強くお勧めします。
    所要時間は約30分〜約1時間です。
    慣れている人ならばもっと短時間でフォームを完成できます。


 <ご注意ください>
 すべての説明は、桐sでは[リボンを使用しない]で利用する場合に該当します。


 目次

 フォーム(.wfx)を作成する
 イベント処理(.kex)を作成する
 [開始時実行コマンド]ボタンを作成する
 テキストボックスの[ソース値更新]イベントをオンにして[手続き]を作成する
 [コマンドボタン]とコマンドボタンから実行する[一般手続き]を作成する
 [フォカス設定]メソッドを追加する
 <付録>
 オブジェクトのリスト
 コマンドボタンの設定
 [名札  メイン]と[手続き]
 入門講座に関して 2024.03.02追記

 ―フォーム(.wfx)を作成する

 <材料>

   NULLフォーム   1個
   テキストボックス 3個
   ラベル      3個
   コマンドボタン  1個

 <作り方>

 1.[ファイル]メニュー → [新規作成] →"フォーム"→ [OK] → ファイル名に"三角形の面積を求める"と入力して[作成]ボタンをクリックします。
   "白紙→フォーム定義へ"を選択して[完了]ボタンをクリックします。

   

 2.[ファイル]メニュー → [新規作成] →"フォーム"→ [OK] → ファイル名に"三角形の面積を求める"と入力して[作成]ボタンをクリックします。
   "白紙→フォーム定義へ"を選択して[完了]ボタンをクリックします。

   〈ヒントとコツ〉
    表(.tbx)を持たないフォームは"NULLフォーム"と呼びます。

    

 3.[書式]メニュー → [オブジェクトの属性] を選択して[オブジェクトの属性]ウィンドウを表示します。

   〈ヒントとコツ〉
    桐9sまでの桐では、[オブジェクトの属性]ウィンドウのピンク色の画鋲をクリックして画鋲を立てた状態にします。
    こうすると定義中のフォームにフォーカスがある間[オブジェクトの属性]ウィンドウが常に表示されるようになります。

   

 4.[フォームツールパレット]の[テキスト]アイコンをクリックして、[オブジェクトの属性]ウィンドウに"標準テキスト"の内容が表示されたことを確かめます。

   〈ヒントとコツ〉
    もしも、[フォームツールパレット]が表示されていない場合には、[表示]メニュー → [ツールバー]を選び、
    [フォームツールパレット]のチェックをオンにします。

   

 5.[オブジェクトの属性]ウィンドウの[表示]タブを選び、[ラベルの自動生成]のチェックをオフにします。

   〈ヒントとコツ〉
    こうするとテキストボックスだけが作成できるようになります。

   

 6.[フォームツールパレット]でテキストを選択したのでフォーム上にマウスポインタを移動させるとマウスカーソルは十字形をしています。
   十字形カーソルをフォーム上に持っていき新規作成するテキストボックスの左上隅の辺りにあわせます。
   テキストボックスを作成するにはマウスボタンをクリックした状態のまま、対角線の右下の方向にドラッグします。

   こうして一個めのテキストボックスを作成します。
   後の操作でテキストボックスの左側に[ラベル]オブジェクトを作りますので、配置できる余地を残してください。

   

 7.一個めのテキストボックスにハンドル(6個の正方形)が付いていることを確かめて、[編集]メニュー → [コピー]を選びます。

   
 8.[編集]メニュー → [貼り付け]を選び、二個めのテキストボックスを作ります。

   

 9.もう一度[編集]メニュー → [貼り付け]を選び、三個めのテキストボックスを作ります。

   

10.[フォームツールパレット]の[ラベル]アイコンをクリックして、テキストボックスの左側に一個めのラベルオブジェクトを作ります。

   

11.一個めのラベルにハンドル(6個の正方形)が付いていることを確かめて、[編集]メニュー → [コピー]を選びます。

12.[編集]メニュー → [貼り付け]を選び、二個めのラベルを作ります。

13.もう一度[編集]メニュー → [貼り付け]を選び、三個めのラベルを作ります。

   

14.それぞれ三個のラベルの標題を設定します。上から順番に"底辺"、"高さ"、"面積"とします。

   

15.[ツール]メニュー → [変数管理]を選び、[変数管理]ウィンドウの[変数種別]リストから"局所変数"を選びます。
   [<新規作成>の行]をクリックするか[新規作成]アイコンをクリックして次の三個の変数を登録して[変数管理]ウィンドウを閉じます。

  変数名 種別 データ型 変数の値
  m底辺  局所 数値   999999
  m高さ  局所 数値   999999
  m面積  局所 数値   999999

   

   

16.それぞれ三個のテキストボックスの[ソース]の値を[オブジェクトの属性]ウィンドウで設定します。
   上から順番に&m底辺 、&m高さ 、&m面積 とします。

   〈ヒントとコツ〉
    局所変数名は[式入力]ダイアログの"変数名"→"局所"で入力できます。

   

17.[書式]メニュー → [オブジェクトのリスト]を選び、[オブジェクトのリスト]ウィンドウで三個のテキストボックスのオブジェクト名を変更します。
   [オブジェクトのリスト]ウィンドウの左側に一覧されている[テキスト_3]を選択し、もう一度[テキスト_3]をクリックして少し待つとオブジェクト名が変更できます。

     テキスト_3 → txt底辺
     テキスト_4 → txt高さ
     テキスト_5 → txt面積

   オブジェクト名はとても重要なのですが、テキスト_nのままではこのオブジェクトが何を意味するかわかりません。
   そこでこのように意味のあるオブジェクト名を必ず指定してください。
   後でオブジェクト名を変更しようとすると大変な作業になるのでこの時点でオブジェクト名を変更しておきます。

   〈ヒントとコツ〉
    桐9sまでの桐と桐10では、オブジェクト名は次のようになります。

     テキスト_1 → txt底辺
     テキスト_2 → txt高さ
     テキスト_3 → txt面積

   

   〈ヒントとコツ〉
   [オブジェクトのリスト]ウィンドウには、[一覧]サイド(左面)と[属性]サイド(右面)があります。
    片方のサイド(面)しか見えない時には、サイド(面)を右クリックして右メニューの[一覧 属性 両方]で "両方" を選びます。
    左面と右面の境界の上にマウスポインタを位置付けると、ポインタの形状が変わりマウスドラッグで幅を変更できます。

   

18.[フォームツールパレット]の[コマンドボタン]アイコンをクリックして、フォームの右下あたりにコマンドボタンを作ります。

   〈ヒントとコツ〉
    桐10sでは、[オブジェクトのリスト]のフォームの[スタイル名]のデフォルト値が"フラットスタイル1"になっているのでコマンドボタンはフラットUIで表示されます。
    もしも、コマンドボタンを立体UIで表示したい場合には、[書式]メニュー → [オブジェクトのリスト]を選び、フォームの[スタイル名]を"標準"にしてください。

   

19.コマンドボタンのオブジェクトの属性で[コマンドボタン]タブの設定を次のようにします。

   ┌───────────────────────┐
   │オブジェクト名:cmd閉じる           │
   │標題     :閉じる(&X)          │
   │                       │
   │ 機能名     機能パラメータリスト    │
   │1 閉じる                   │
   │2 なし                    │
   │3 なし                    │
   │4 なし                    │
   └───────────────────────┘

   〈ヒントとコツ〉
    [標題]の文字列:終了(&X) の、&X は半角文字で指定します。アクセスキー"X"の意味です。

   〈ヒントとコツ〉
    1番めの[機能名]の"閉じる"は、[…]クリックして[機能名の選択]で"ファイル"から選びます。

   

20.[書式]メニュー → [オブジェクトのリスト]を選び、[オブジェクトのリスト]ウィンドウのオブジェクト名のツリーの先頭の[フォーム]をクリックします。
   [オブジェクトの属性]ウィンドウをフォーカスを移動して[オブジェクトの属性]ウィンドウに[フォーム]の内容が表示されていることを確かめます。
  
   〈ヒントとコツ〉
    [オブジェクトのリスト]ウィンドウと[オブジェクトの属性]ウィンドウはリンク(連動)しています。
    [オブジェクトの属性]ウィンドウで表示される内容は、[オブジェクトのリスト]ウィンドウでも表示されます。
    [オブジェクトの属性]ウィンドウはよく利用する属性をまとめた要約であり、[オブジェクトのリスト]ウィンドウは全ての属性を表示する詳細です。

   

21.[フォーム]のオブジェクトの属性で[フォント]タブの[サイズ]を任意の値に設定します。

22.[ファイル]メニュー → [閉じる]を選び、[三角形の面積を求める.WFX は更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

   

 ―イベント処理(.kex)を作成する

 <作り方>

 1.[表示]メニュー → [再定義へ]を選びます。

 2.[書式]メニュー → [イベントの定義]を選びます。

   

 3.[イベント処理ファイルの選択]ウィンドウの[ファイル名]に"三角形の面積を求める"と入力して[OK]ボタンをクリックします。
   イベント処理(.kex)は、フォーム(.wfx)と組み合わせて使用するのでファイル名はフォーム(.wfx)と同じにします。

   〈ヒントとコツ〉
   また、イベント処理(.kex)を作成するフォルダはフォーム(.wfx)と同じ場所にします。
   こうすると後々の管理が楽になります。

   〈ヒントとコツ〉
    [三角形の面積を求める.WFX]は、NULLフォームなのでフォームの編集対象表がありませんが、
    しかし、フォームの編集対象表がある場合には、フォーム(.wfx)とイベント処理(.kex)は編集対象表と同じフォルダに作成します。
    こうすると後々の管理が楽になります。

   

 4.[三角形の面積を求める.kex]ウィンドウが現れます。
   先頭行に[名札  メイン]が自動的に作られていることに注目してください。
   イベント処理(.kex)では先頭行に[名札  メイン]が必要です。

   

 5.[三角形の面積を求める.kex]ウィンドウのタイトルバーの下には[イベント定義のツールバー]があります。
   左から二番めの[ファイル編集]ボタンをクリックして[ファイル編集モード]にします。

   

  〈ヒントとコツ〉
   ツールバーボタンは、手続きの表示単位を切り替えるときに使用します。
   ツールバー上の ドロップダウン リストボックスをクリックすると、イベント処理ファイルに保存されている手続きの一覧と、
   その手続きを使用するオブジェクト名の一覧が表示されます。
   ドロップダウン リストボックスでオブジェクト名とイベント名を選択すると、画面に表示する手続きを切り替えることができます。
   すべての手続きを表示しているときにドロップダウン リストボックスを使用すると、該当する手続きにジャンプできます。
   イベントハンドラ以外の一般手続きを追加する場合は、すべての手続きを表示してから作業します。
   一般手続きを追加しているとき、ドロップダウン リストボックスの一覧に、追加した手続きを表示させる場合は[手続き定義リストの作成]ボタンをクリックします。

 6.行番号2の行に次のコマンドを記述します。

   変数宣言 局所,数値{ &m底辺, &m高さ, &m面積 }

   もうお気づきかもしれません。これらの局所変数は[三角形の面積を求める.WFX]を作成した際に登録済みでした。
   あえて同じ局所変数を宣言するのは次の理由からです。

   a.フォーム定義の[変数管理]で局所変数を登録したのは、テキストボックスに表示される文字の大きさ等がフォーム定義画面上で確かめられて好都合だからです。

   b.[名札  メイン]の直後に局所変数を宣言するのは、イベント処理(.kex)の中で使う局所変数を明示して内容を理解しやすくするためです。
     イベント処理(.kex)はプログラミングですから、どのような変数が用いられているのかを冒頭で明確にするとプログラムが読み易くなります。

   〈ヒントとコツ〉
    変数を表す接頭辞のアンパサンド記号(&)は、半角と全角のどちらでもOKです。
    コンマ(,)とかっこ({ })は、半角と全角のどちらでもOKです。

   〈ヒントとコツ〉
    [名札  メイン]の範囲は、アスタリスク記号(*)までと考えても良いですが、正確には最初に現れた[手続き]の手前までです。
    [名札  メイン]の範囲では、コマンドを字下げ(インデント)して書くとプログラムが読み易くなります。
    [名札  メイン]の範囲では、空行を挿入するとプログラムが読み易くなります。

   

 7.[ウィンドウ]メニューで"三角形の面積を求める.WFX"を選び、フォームの再定義ウィンドウをフォーカスします。

   

 8.[三角形の面積を求める.WFX]ウィンドウへフォーカスを切り替えて[表示]メニュー → [編集へ]を選びます。

 9.[三角形の面積を求める.kevは更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

10.[三角形の面積を求める.WFXは更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

11.フォーム編集の状態になりましたが、前回と今回でどこが変化したか気がつきましたか?。
   テキストボックスの値が 999999 ではなく 空欄 になっていることに注目してください。
   こうなった理由は次のことによります。

   フォーム定義の[変数管理]で登録した変数と、今回[名札  メイン]で宣言した変数は、同じ名前で同じデータ型で同じ種類です。
   このような場合には最初にフォーム定義の[変数管理]で登録した変数が作成されますが、
   次に[名札  メイン]が実行されて変数宣言コマンドによって作成済みの変数が上書きされたのです。

   

12.[表示]メニュー → [再定義へ]を選び、[書式]メニュー → [イベントの定義]を選び、
   行を挿入して行番号3の行以降に次の3行のコマンドを記述して変数の値をゼロに変更します。

    &m底辺 = 0
    &m高さ = 0
    &m面積 = 0

   〈ヒントとコツ〉
    変数に値を代入する場合には、"代入"というコマンドを省略できます。
    等号記号(=)は、半角と全角のどちらでもOKです。
    代入文は、次のように1行にしてもOKです。ただし、変数の数が多くなると読み難くなります。
    &m底辺 = 0, &m高さ = 0, &m面積 = 0
    このように1行にしても実行速度が向上するわけではありませんので、見易く複数行で記述することをお勧めします。

   

13.[三角形の面積を求める.WFX]ウィンドウへフォーカスを切り替えて[表示]メニュー → [編集へ]を選びます。

14.[三角形の面積を求める.kexは更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

15.[三角形の面積を求める.WFX]ウィンドウがフォーム編集の状態になりましたが、前回と今回でどこが変化したか気がつきましたか?。
   テキストボックスの値が 空欄 ではなく 0(ぜロ) になっていることに注目してください。

  【まとめ:イベント処理(.kex)を作成する [名札  メイン]】

   ・イベント処理(.kex)の先頭行には[名札  メイン]が自動的に作られます。
   ・[名札  メイン]は必ず実行されます。
   ・[名札  メイン]の主な用途は局所変数を宣言することです。

   

 ―[開始時実行コマンド]ボタンを作成する

 1.フォーム編集状態で[表示]メニュー → [再定義へ]を選びます。

 2.[オブジェクトの属性]ウィンドウが[三角形の面積を求める.WFX]の前面に表示されていることを確かめてください。

   〈ヒントとコツ〉
   [オブジェクトの属性]ウィンドウが現れていない場合には[書式]メニュー → [オブジェクトの属性] を選択して[オブジェクトの属性]ウィンドウを表示します。
   桐9sまでの桐では、[オブジェクトの属性]ウィンドウのコントロールメニューの下付近にあるピンク色の画鋲をクリックして画鋲を立てた状態にします。
   こうすると定義中のフォームにフォーカスがある間[オブジェクトの属性]ウィンドウが常に表示されるようになります。

 3.[三角形の面積を求める.WFX]はとても単純なフォームです。
   オブジェクトの数が少ないので今までに作成したオブジェクトを一通り眺めてみましょう。
   一番上のテキストボックスをクリックしてハンドル(6個の正方形)が付いたことを確かめてください。

 4.[オブジェクトの属性]ウィンドウのタイトルバーには "txt底辺" と表示されているはずです。
   このように[オブジェクトの属性]ウィンドウのタイトルバーを見れば、[オブジェクトの属性]ウィンドウがどのオブジェクトの詳細内容が示しているのかわかります。

 5.同じように他のテキストボックスやラベルやコマンドボタンをクリックして[オブジェクトの属性]ウィンドウのタイトルバーに表示されるオブジェクト名を確認してみてください。

 6.これまではハンドル(6個の正方形)が付いたオブジェクトの詳細内容を[オブジェクトの属性]ウィンドウで眺めてきましたが、ハンドルが付かないオブジェクトもあります。
   今度はフォーム上のテキストボックスやラベルやコマンドボタンが配置されていない部分をクリックしてください。
  [オブジェクトの属性]ウィンドウのタイトルバーには"フォーム明細部"と表示されているはずです。

 7.次にフォームの外(つまり[ワークスペース])をクリックしてください。
  [オブジェクトの属性]ウィンドウのタイトルバーには"フォーム"と表示されているはずです。

 8.それではワークスペースの詳細内容を眺めるにはどうしたらいいでしょうか?。
   上のルーラー(目盛り)と左のルーラー(目盛り)の交差するところ、つまり[三角形の面積を求める.WFX]の左上隅にある灰色の正方形の部分をクリックしてください。
   [オブジェクトの属性]ウィンドウのタイトルバーには"ワークスペース"と表示されているはずです。

   〈ヒントとコツ〉
    灰色の正方形の部分は常に表示されているわけではありません。

   

 9.もう一度フォームの外(つまりワークスペース)をクリックしてください。[オブジェクトの属性]ウィンドウのタイトルバーには"フォーム"と表示されているはずです。

10.[フォームツールパレット]の[コマンドボタン]アイコンをクリックして、フォームの外(つまり[ワークスペース])にコマンドボタンを作ります。

   〈ヒントとコツ〉
    桐10sでは、[オブジェクトのリスト]のフォームの[スタイル名]のデフォルト値が"フラットスタイル1"になっているのでコマンドボタンはフラットUIで表示されます。
    もしも、コマンドボタンを立体UIで表示したい場合には、フォームの[スタイル名]を"標準"にしてください。

   

11.コマンドボタンのオブジェクトの属性で[コマンドボタン]タブの設定を次のようにします。

   ┌───────────────────────┐
   │オブジェクト名:cmdStartup          │
   │標題     :cmdStartup          │
   │                       │
   │ 機能名     機能パラメータリスト    │
   │1 訂正                    │
   │2 なし                    │
   │3 なし                    │
   │4 なし                    │
   └───────────────────────┘

   〈ヒントとコツ〉
    1番めの[機能名]の"訂正"は、[…]クリックして[機能名の選択]で"編集"から選びます。

   

12.フォームの外(つまり[ワークスペース])をクリックしてください。
   [オブジェクトの属性]ウィンドウのタイトルバーには"フォーム"と表示されているはずです。

13.[オブジェクトの属性]ウィンドウの[オプション]タブをクリックしてください。

   〈ヒントとコツ〉
   [オプション]タブが見つからない場合には、次のように設定してください。
   [書式]メニュー → [定義画面の設定]を選び、[詳細プロパティを使用する]のチェックをオンにします。
    さらに、桐9-2012/桐9sの場合には、[操作ナビを消去する]のチェックをオンにします。

   

14.左下の[開始時]の[∨]をクリックしてリストを表示すると、

    cmd閉じる
    cmdStartup

   が表示されますので"cmdStartup"をクリックします。

   

15.[三角形の面積を求める.WFX]ウィンドウにフォーカスを切り替えて[表示]メニュー → [編集へ]を選びます。

16.[三角形の面積を求める.WFXは更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

17.フォーム編集の状態になりましたが、前回と今回でどこが変化したか気がつきましたか?。
   今回はフォームが開いた時点で直ちにテキストボックスの入力が出来るようになりました。

  【まとめ:[開始時実行コマンド]ボタンを作成する】

   ・フォームが開いて描画(ドロー)された後に自動実行されるコマンドボタンです。
   ・ワークスペース・フォーム明細部・フォームヘッダ部・フォームフッタ部のいずれに配置してもOKです。
   ・NULLフォームの場合では、訂正モードに遷移するため使います。

   

 ―テキストボックスの[ソース値更新]イベントをオンにして[手続き]を作成する

 1.フォーム編集状態で[表示]メニュー → [再定義へ]を選びます。

 2.[オブジェクトの属性]ウィンドウが[三角形の面積を求める.WFX]の前面に表示されていることを確かめてください。

   〈ヒントとコツ〉
    もしも[オブジェクトの属性]ウィンドウが現れていない場合には[書式]メニュー → [オブジェクトの属性] を選択して[オブジェクトの属性]ウィンドウを表示します。
    桐9sまでの桐では、[オブジェクトの属性]ウィンドウのピンク色の画鋲をクリックして画鋲を立てた状態にします。
    こうすると定義中のフォームにフォーカスがある間[オブジェクトの属性]ウィンドウが常に表示されるようになります。

 3.一番上のテキストボックスをクリックしてハンドル(6個の正方形)が付いたことを確かめてください。

   

 4.[オブジェクトの属性]ウィンドウのタイトルバーには"txt底辺"と表示されているはずです。

 5.[オブジェクトの属性]ウィンドウの[イベント]タブをクリックしてください。

   

 6."イベント"のボックスにはイベントの一覧が表示されています。
   ここでは[ソース値更新]イベントを作成します。
   "イベント"のボックスのスクロールバーを操作して"ソース値更新"のチェックをオンにしてください。
   "ソース値更新"は下から2番めにあります。

   

 7.次に "ソース値更新" の上をダブルクリックします。
   そうすると自動的に"三角形の面積を求める.kev"のウィンドウが開き、
   自動的に[txt底辺]オブジェクトの[ソース値更新]イベントの[手続き]が作成されます。

   

   〈ヒントとコツ〉
    イベントが発生した時に実行する[手続き]を[イベントハンドラ]と言います。
    [手続き]の範囲は、[手続き定義開始]コマンドで始まり、[手続き定義終了]コマンドで終わる範囲です。

 8."手続き定義開始"と"手続き定義終了"の範囲内に実行する内容を記述します。
   今回はテキストボックスの編集が終わりテキストボックスエディタから脱出した時点で面積の計算をするようにします。
   次の代入コマンドを記述してください。

   &m面積 = &m底辺 * &m高さ / 2

   〈ヒントとコツ〉
   "代入"のキーワードは省略できます。省略しない場合には次のように記述します。
    代入 &m面積 = &m底辺 * &m高さ / 2

   〈ヒントとコツ〉
    アスタリスク記号(*)とスラッシュ記号(/)は、半角と全角のどちらでもOKです。

   〈ヒントとコツ〉
    [手続き]の範囲ではコマンドを字下げ(インデント)して書くとプログラムが読み易くなります。
    [手続き]の範囲では空行を挿入して行間を広げるとプログラムが読み易くなります。

   〈ヒントとコツ〉
    テキストボックスを編集する時、文字カーソルが出現している状態をエディタの中にいると呼びます。
    この状態から別のオブジェクトへフォーカスを移動することによって、
    元のテキストボックスの文字カーソルが無くなることをエディタから脱出すると呼びます。

   〈ヒントとコツ〉
    テキストボックスの[ソース値更新]イベントは[Esc]キーを押す以外の方法でエディタから脱出した時に発生します。
    つまり、[F4]キーを押して[訂正]モードから[表示]モードへ遷移した場合でもテキストボックス[ソース値更新]イベントが発生します。
    エディタの中にいる時に、フォームのタイトルバーの[×]ボタンでフォームを閉じる時にも発生しますので、
    時間がかかる処理を記述しないように注意してください。

   〈ヒントとコツ〉
    トグルボタン(チェックボックス・オプションボタン・プッシュボタン)の[ソース値更新]イベントはオンとオフの操作に対応して発生します。

   

 9.[三角形の面積を求める.WFX]ウィンドウにフォーカスを切り替えてください。

10.二番めのテキストボックスをクリックしてハンドル(6個の正方形)が付いたことを確かめてください。

11.[オブジェクトの属性]ウィンドウのタイトルバーには "txt高さ" と表示されているはずです。
   [txt高さ]オブジェクトで設定するイベントは先程と同じ[ソース値更新]イベントです。
   今までの復習のつもりになって同じ要領で設定してください。

12.[オブジェクトの属性]ウィンドウの[イベント]タブをクリックしてください。

13."イベント"のボックスにはイベントの一覧が表示されています。
   同じ要領で[ソース値更新]イベントを作成します。
   "イベント"のボックスの "ソース値更新" のチェックをオンにしてください。

14.次に "ソース値更新" の上をダブルクリックします。
   そうすると自動的に"三角形の面積を求める.kev"のウィンドウにフォーカスが移り、
   自動的に[txt高さ]オブジェクトの[ソース値更新]イベントの[手続き]が作成されます。

   

15."手続き定義開始"と"手続き定義終了"の範囲内に実行する内容を記述します。
   次の代入コマンドを記述してください。

   &m面積 = &m底辺 * &m高さ / 2

   〈ヒントとコツ〉
    この代入コマンドは、手順8と同じ内容です。

   

16.[三角形の面積を求める.WFX]ウィンドウにフォーカスを切り替えて[表示]メニュー → [編集へ]を選びます。

17.[三角形の面積を求める.kevは更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

18.[三角形の面積を求める.WFXは更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

19.フォーム編集の状態になりましたが、前回と今回でどこが変化したか気がつきましたか?。
   今回は底辺や高さに値を入力すると三角形の面積が表示されるようになりました。

  【まとめ:テキストボックスの[ソース値更新]イベントをオンにして[手続き]を作成する】

   ・イベントのチェックをオンにします。
   ・イベントハンドラを作成します。
   ・イベントが発生した時に実行する[手続き]を[イベントハンドラ]と言います。
   ・[手続き]の範囲は、[手続き定義開始]コマンドで始まり、[手続き定義終了]コマンドで終わる範囲です。
   ・このイベントは[Esc]キーを押してテキストボックスのエディタから脱出した場合には発生しません。
   ・このイベントは値を変更しないで、[Enter]キーや[Tab]キーを押してテキストボックスのエディタから脱出した場合にも発生します。
   ・このイベントは値を変更しないで、[F4]キーを押してテキストボックスのエディタから脱出した場合にも発生します。
   ・このイベントはフォームのタイトルバーの[×]ボタンでフォームを閉じる時に発生することもあります。

   

 ―[コマンドボタン]とコマンドボタンから実行する[一般手続き]を作成する

 1.フォーム編集状態で[表示]メニュー → [再定義へ]を選びます。

 2.[フォームツールパレット]の"コマンドボタン"をクリックして、フォームの右上あたりにコマンドボタンを作ります。

   

 3.コマンドボタンのオブジェクトの属性で[コマンドボタン]タブの設定を次のようにします。

   ┌───────────────────────┐
   │オブジェクト名:cmdクリア           │
   │標題     :クリア            │
   │                       │
   │ 機能名     機能パラメータリスト    │
   │1 表示                    │
   │2 手続き実行   cmdクリアClick       │
   │3 訂正                    │
   │4 なし                    │
   └───────────────────────┘

   〈ヒントとコツ〉
    1番めの[機能名]の"表示"は、   […]クリックして[機能名の選択]で"編集"から選びます。
    2番めの[機能名]の"手続き実行"は、[…]クリックして"手続き実行"を選びます。
    2番めの[機能パラメータリスト]には、cmdクリアClick と入力します。
    3番めの[機能名]の"訂正"は、   […]クリックして[機能名の選択]で"編集"から選びます。

   〈ヒントとコツ〉
    手続き実行する[手続き]名を[標題]+ "Click" とすると、[コマンドボタン]と[手続き]の相互関係が明確になって便利です。

   

 4.[書式]メニュー → [イベントの定義]を選びます。

 5.[三角形の面積を求める.kex]ウィンドウが現れたことを確かめてください。

 6.[三角形の面積を求める.kex]ウィンドウのタイトルバーの下には[イベント定義のツールバー]があります。
   左から二番めの[ファイル編集]ボタンをクリックして[ファイル編集モード]にします。

   〈ヒントとコツ〉
    [イベント定義のツールバー]は、手続きの表示単位を切り替えるときに使用します。
    アイコンは左から順に[手続き編集][ファイル編集][手続き定義リスト作成]です。
    [手続き定義リスト作成]は、[手続き選択リスト]で表示する内容を最新の状態にするために使います。
    [オブジェクト選択]リストでは、[メイン・一般手続き]と[個々のオブジェクト]を選べます。
    [手続き選択]リストでは、任意の[手続き]へジャンプできます。

   

 7.終端行以降に次のコマンドを追加記述します。

   手続き定義開始 cmdクリアClick( )

    &m底辺 = #未定義
    &m高さ = #未定義
    &m面積 = #未定義

   手続き定義終了 

   〈ヒントとコツ〉
    丸括弧とシャープ記号(#)は、半角と全角のどちらでもOKです。
    丸括弧(始まり)と括弧(終わり)の間に空白文字を入れても、入れなくてもOKです。

   〈ヒントとコツ〉
    代入文は、次のように1行にしてもOKです。ただし、変数の数が多くなると読み難くなります。
    &m底辺 = #未定義, &m高さ = #未定義, &m面積 = #未定義
    このように1行にしても実行速度が向上するわけではありませんので、見易く複数行で記述することをお勧めします。
    #未定義は #u でもOKです。

   〈ヒントとコツ〉
    [手続き]の範囲ではコマンドを字下げ(インデント)して書くとプログラムが読み易くなります。
    [手続き]の範囲では空行を挿入するとプログラムが読み易くなります。

   

 8.[三角形の面積を求める.WFX]ウィンドウへフォーカスを切り替えて[表示]メニュー → [編集へ]を選びます。

 9.[三角形の面積を求める.kevは更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

10.[三角形の面積を求める.WFXは更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

11.フォーム編集の状態になりました。
   底辺と高さの値を入力してから今回新しく追加した[クリア]コマンドボタンをクリックしてみてください。
   各テキストボックスの内容が空欄になることを確かめてください。

  【まとめ:[コマンドボタン]から実行する[一般手続き]を作成する】

   ・[イベントハンドラ]ではない[手続き]を[一般手続き]と言います。
   ・[手続き]の範囲は、[手続き定義開始]コマンドで始まり、[手続き定義終了]コマンドで終わる範囲です。
   ・コマンドボタンの機能名:手続き実行で手続き名を指定する時には、丸括弧は省略します。

   

 ―[フォーカス設定]メソッドを追加する

 1.フォーム編集状態で[表示]メニュー → [再定義へ]を選びます。

 2.[書式]メニュー → [イベントの定義]を選びます。

 3.[三角形の面積を求める.kex]ウィンドウが現れたことを確かめてください。

 4.[三角形の面積を求める.kex]ウィンドウのタイトルバーの下には[イベント定義のツールバー]があります。

 5.一般手続き:cmdクリアClick( ) に[メソッド呼び出し @txt底辺.フォーカス設定( )]コマンドを追加します。

   手続き定義開始 cmdクリアClick( )

    &m底辺 = #未定義
    &m高さ = #未定義
    &m面積 = #未定義

    メソッド呼び出し @txt底辺.フォーカス設定( )

   手続き定義終了 

   〈ヒントとコツ〉
   オブジェクト名( txt底辺 )の前にはアットマーク記号(@)が、後にはドット記号(.)が必要です。
   アットマーク記号(@)とドット記号(.)は、半角と全角のどちらでもOKです。

 8.[三角形の面積を求める.WFX]ウィンドウへフォーカスを切り替えて[表示]メニュー → [編集へ]を選びます。

   

 9.[三角形の面積を求める.kevは更新されています.保存しますか?]に対して[はい]ボタンをクリックします。

10.フォーム編集の状態になりました。
   底辺と高さの値を入力してから[クリア]ボタンをクリックしてみてください。
   各テキストボックスの内容が空欄になると共に"txt底辺"テキストボックスへフォーカスが設定されることを確かめてください。

  【まとめ:[フォーカス設定]メソッドを追加する】

   ・自分自身のフォームのオブジェクトのメソッドを呼び出す時には、ハンドル = <ハンドル>パラメータは省略します。

   

 <付録>

 【オブジェクトのリスト】

 〈ヒントとコツ〉
  桐のフォームの場合の[オブジェクト]とは、フォームやUI部品や明細部セクションなどのことです。
  従って、単にモノや部品と理解してください。

 〈ヒントとコツ〉
  桐のイベント処理は、順次(順接)、if(分岐)、繰り返し(反復)の三つの制御構造によって処理の流れを記述する構造化プログラミング言語です。
  桐には、部品としてのオブジェクトの属性の[値]を変更・参照する[オブジェクト操作]コマンドと、
  部品としてのオブジェクトに予め組み込まれている[手続き]を実行する[メソッド実行]コマンドがありますが、
  決してOOP(オブジェクト指向プログラミング)言語ではありません。
  その証拠としては、
  「桐ヘルプのどこを探しても"オブジェクト指向プログラミング"や"クラス"というキーワードが見つからない」
  という事実を指摘するだけで十分でしょう。

 ■三角形の面積を求める.WFX

  フォーム
  │
  ├ ファミリ
  │
  ├ ワークスペース
  │ │
  │ └ cmdStartup
  │
  ├ フォーム操作バー
  │
  └ フォーム明細部
    │
    ├ txt底辺
    │
    ├ txt高さ
    │
    ├ txt面積
    │
    ├ ラベル_4
    │
    ├ ラベル_5
    │
    ├ ラベル_6
    │
    ├ cmd閉じる
    │
    └ cmdクリア

 【コマンドボタンの設定】

  オブジェクト名: cmdStartup
  標題     : cmdStartup

   機能名     機能パラメータリスト
  1 訂正
  2 なし
  3 なし
  4 なし

  オブジェクト名: cmd閉じる
  標題     : 閉じる(&X)

   機能名     機能パラメータリスト
  1 閉じる
  2 なし
  3 なし
  4 なし

  オブジェクト名: cmdクリア
  標題     : クリア

   機能名     機能パラメータリスト
  1 表示
  2 手続き実行   cmdクリアClick
  3 訂正
  4 なし

 【[名札  メイン]と[手続き]】

 ■三角形の面積を求める.kex

 名札    メイン
  変数宣言 局所,数値{ &m底辺, &m高さ, &m面積 }

  &m底辺 = 0
  &m高さ = 0
  &m面積 = 0

 *

 手続き定義開始 txt底辺::ソース値更新()
  &m面積 = &m底辺 * &m高さ / 2
 手続き定義終了

 手続き定義開始 txt高さ::ソース値更新()
  &m面積 = &m底辺 * &m高さ / 2
 手続き定義終了

 手続き定義開始 cmdクリアClick( )

  &m底辺 = #未定義
  &m高さ = #未定義
  &m面積 = #未定義

  メソッド呼び出し @txt底辺.フォーカス設定( )

 手続き定義終了

入門講座に関して 2024.03.02追記

 この入門講座は、NULLフォームを使用した[ダイアログボックスの作り方]を紹介したものです。
ちなみに[ダイアログボックスの作り方]を紹介した講座は珍しいハズです。
もしも、この教材フォームに[OK][キャンセル][はい][いいえ]等の応答用のボタンを用意すれば立派なダイアログボックスになりますが、
教材フォームの呼び出し元のフォームがありませんので、単純に[閉じる]ボタンを配置している次第です。
これは、[変数を編集する形式]のフォームの応用範囲が非常に広いので、敢えてダイアログボックスを教材にしたと言うわけです。
一方、例えば[住所録フォーム]のようなものであれば、[フォームの新規作成]のウィザードで誰でも簡単に作れますね。
なので、誰でも簡単に作れてしまうフォームは入門講座の教材にしていないのです。
まとめると、[住所録フォーム]のような編集対象表を持つフォームと、
ダイアログボックスのような[変数を編集する形式]のNULLフォームでは根本的に違いがあるということです。
そして、昔ながらのメニューフォーム、これはランチャーと見做すのが妥当ですが、これもNULLフォームで作ることが出来ます。


トップページに戻る
桐の釣魚大全のトップ > 新 フォームアプリケーション入門 §1