プロデル入門02・その2

今回は、その1で用いたサンプルプログラム「プロデルでSQLite.rdr」について触れながら次のステップに進む。

プロデルデザイナで表示された内容を見ると

基本的な内容が19行目(SQLiteから切断する)

で終わっていることが想像できると思う。それ以降に記述してあるものは、各オブジェクト(パーツごとに分けたプログラム)で19行目までのプログラムによって呼び出されている。

最初の処理

4行目から8行目までがデータベースを使うために設定するとなる

4 「Produire.Data.SQLite.dll」を利用する
5 SQLiteというSQLiteデータベースを作る

7 SQLiteのデータソースを、「database.db」に変える
8 SQLiteへ接続する

4行目はSQLiteを使うために必要なDLL(ダイナミック・リンク・ライブラリ)で必ず入れなければならない。この記述をすることでプログラムに必要なツールを内部で呼び出すようになる。

5行目は「SQLiteデータベースを作る」と書いてありますが、SQLiteを使用するために必要なので4行目とペアで利用すると覚えておいてください。

7行目で使用するデータベースを指定しています。青文字の名前を利用するデータベースの名前に設定します。

8行目でデータベースに接続することで利用できるようになりました。

その1ではこの下に画面を表示するオブジェクトを追加しました。今回は追加した部分は無視します。(今見ているプログラムはサンプルそのものです。)

————
メイン画面を表示する
待機する
————

今回のサンプルプログラムを動かすまでデータベースファイル(以下、DB)は存在していませんから10行目で中で使用するテーブルを作成します。

10 テーブルを作成する  ・・・ オブジェクトを呼び出します。

10行目で「テーブルを作成する」オブジェクトを呼び出します。

23行目から29行目にかかれているプログラムが実行されます。

23 テーブルを、作成する手順
24 ーーテーブルの作成
25 SQLiteで「CREATE TABLE 楽曲 (
26 曲名 TEXT,
27 アーティスト TEXT,
28 アルバムID NUMBER);」を実行する
29 終わり

テーブルを作成する命令の詳細についてはSQLの説明になるので割愛します。

11
12 データを取得する
13 データを追加する
14 データを更新する
15 データを削除する

この部分は、それぞれ目的としたオブジェクトを呼び出すものです。

ここから「その1」で作成したプログラムに戻ります。

ここでは「その1」で作成した「入力画面」と13行目「データを追加する」に限定して書きます。

先ほど無視した9行目に追加した

————
メイン画面を表示する
待機する
————

により、10行目以降のプログラムは「待機」状態になる為、画面からボタンを押すなどしない限りプログラムは画面を表示したまま待機するようになっています。

画面に入れたものをデータベースに登録する為に「登録する」ボタンを押した時の処理を追加します。

前回、作成途中のボタンをクリックしたのでプログラムの下の方に

「ボタン1がクリックされた時の手順」が追加されています。前回、コメントに「登録ボタンが押された処理」と追記しました。

この中に書いていきます。

画面上のテキスト項目は3つあります。プログラムの「メイン画面」の部分を見ると「テキスト1・2・3」と名前が付いていることが分かります。

画面があるという事は入力した文字がPC内に書き込まれた訳ですから、それを取り出してDBに渡す必要があります。

画面の項目をDBテーブルに渡します。テーブルで使用している項目は「曲名,アーティスト,アルバムID」なので、今回はそのまま使用します。

画面のテキストの内容をDBテーブルの項目に割り当てます。

曲名=テキスト1の内容

アーティスト=テキスト2の内容

アルバムID=テキスト3の内容

と書けば、内容をセットすることが出来ます。

セット出来たらDBに書き込みます。

サンプルプログラムの書き込む箇所は次のようになっています。

ーーデータの追加
SQL文は、「INSERT INTO 楽曲 (曲名,アーティスト) VALUES (?, ?)」
バインド値は、{「I am your singer」、「サザンオールスターズ」}
SQL文をバインド値としてSQLiteで実行して、件数1とする

これを参考に変更していきます。

バインド値の中に書き込む内容をセットすれば良いので、テキスト項目からセットした変数をここにセットします。

「曲名・アーティスト・アルバムID」の3項目の内容をセットするには、変数名を[]で囲みます。

ーーデータの追加
SQL文は、「INSERT INTO 楽曲 (曲名,アーティス,アルバムID) VALUES (?, ?, ?)

バインド値は、{[曲名]、[アーティスト]、[アルバムID]}

ここで赤字で書いた違いに注意してください。

この作業を「ボタン1がクリックされた時の手順」に記入して余計な部分を削除します。

————-このような感じになります。

ボタン1がクリックされた時の手順
//登録ボタンが押された処理
ーーデータの追加
SQL文は、「INSERT INTO 楽曲 (曲名,アーティス,アルバムID) VALUES (?, ?, ?)

バインド値は、{[曲名]、[アーティスト]、[アルバムID]}
SQL文をバインド値としてSQLiteで実行しする

ーー内容の確認
SQLiteから「SELECT 曲名,アーティスト FROM 楽曲」を取得して、結果とする
「追加後」として「[件数1]件、追加しました。[改行][結果の内容]」を情報アイコンで表示する
終わり

————-このような感じになります。

次に続きます。

プロデル入門02・その1

画面の作り方とボタンの作り方をやったので、SQLiteを使って入力したデータを保存と呼び出しをすることにする。いままでもSQLについては書いているので、ここでは画面に入力したデータをSQLに書き込んでみる。

最初に、今回はSQLを使用するので、サンプルプログランからPC単体で動くSQliteのサンプルを呼び出します。

サンプルの位置は下記の場所を参考にしてください。

C:\Program Files (x86)\Produire\サンプル\データ操作\データベース

利用するサンプルは「プロデルでSQLite.rdr」です。

このサンプルプログラムには画面がありません。そこで、先ほど作成した画面を追加して分かりやすいものにしたいと思います。

その前に、呼び出したサンプルプログラムを別の名前で保存してください

尚、サンプルでは決まったデータの書き込みをしていますが。画面を付ける事により、自由なデータを入力して検索できるようになります。

前回までに作成した画面と同じようなものを作って行きます。

このような感じで作成してください。作成したボタンをクリックし。分かるようにコメントを書き入れます。(コメントの開始は // です。)

サンプルプログラムを読んで項目名を一致するように変更します。

サンプルプログラムの中にテーブルを作詞する手順が書いてあるので、その内容に従って画面の項目(ラベル)を設定します。

曲名 TEXT,
アーティスト TEXT,
アルバムID NUMBER

画面の作成が終わったら。作成された画面プログラムが動作するように画面を呼び出す命令の位置を変更します。

画面プログラムは「メイン画面とは」と書かれている部分の数行上に

—————–

メイン画面を表示する
待機する

—————–

と記載されているので。その部分をすべて9行目にカット&ペーストで移動してください。この2行の命令を9行目に映す事で、画面を表示して待機する事で画面に処理の主導権を渡すようになります。(ボタンを押さないと動かない状態にする)

次回に続きます。

プロデル入門01

先日、2回に分けて書いたプロデル入門ゼロに「終了」ボタンを付けなかったことに後悔が残っている。そこで、今回は趣向を変えてプロデルの画面デザインについて少し書いてみようかと考えている。相変わらずその場しのぎで読みづらい文章で申し訳ない。

 前回作成したプログラムにはテキストが3か所、それに「ボタン1」という名前のボタンが画面にあるだけで、作った人にしか意味が分からないものになっている。

このままでは分かりづらいので改良していく。

まずは前回作成したプログラムファイルを開く。

 前回作成したプログラムを開く。右側にある「メイン画面」をクリックする

 「メイン画面」のタグが追加され画面が表示されました。

ここから改造を始めます。ボタンの名前を変更します。

画面上の「ボタン1」をクリックし画面の右下の固有(プロパティ)の一番下の方にある「内容」があるので、そこを「ボタン1」から「登録する」に変更します。

改行すると画面上のボタン名が変更されます。

次に、テキスト蘭の前に何も書かれていないと判らないので、テキスト蘭の前にラベルを入れます。現行のテキスト蘭を右寄りに変えます。

文字で説明すると分かりづらいので動画を入れます。

テキスト蘭を移動し終えたら、次にラベルをテキスト蘭の前に入れます。

こんな感じになります。

先ほどの「ボタン」の名前の変更と同様に表示する文字を変更してください。

プログラムを終了させるためのボタンを追加します。

画面上の「終了ボタン」をクリックしプログラムを追加します。

終了する。と入力してください。

これで「終了」ボタンが追加されました。

 

プロデル入門ゼロに、書込みを追加する

今回作るもので、こんな感じで動作するようになります。ボタンでファイルに書き込みをします。終了ボタンが無いので右上の×で終了させてください。

プロデル入門・ゼロで書いたものでは画面を作るだけなのでファイルを保存することが出来ない
そこで今回はファイルを書き込むことにする。
プロデルリファレンス「CSVファイルで読み書きする」を開くとこのようなサンプルがある。

データ表を作ってデータとする
データに{「たろう」、「abc@xxx.com」、「http://www.xxx.com/」}を加える
データに{「はなこ」、「def@xxx.com」、「http://www.xxx.com/」}を加える
データを「data.csv」へ保存する

前回作成した画面にファイルを書き込むプログラムを書き足します。

サンプルプログラムフォルダにあるものを使った方が使い勝ってが良さそうなので今回はそちらを使います。

開くファイルは「CSVファイルの操作.rdr」

ファイル名の上でマウスの左ボタンをクリックした編集を選びます。(プロデルにドラッグでも良い)

こんな感じになると思います。

リファレンスとはちょっと異なりますが、内容はほぼ同じです。

新しいウィンドウを追加します。

こんな画面になるはずです。

前回書いたプロデル入門ゼロで書いたものを追加します。

タグ「CSVファイルの操作.rdr」を選択した見てください。この段階でプログラムに画面の作成が追加されています。

このままプログラムとして動作すれば良いのですが、継ぎ足しなので現状では2つのプログラムが独立して存在しています。

ここで画面に入れた内容を書き込むようにする方法を考えます。

画面に入れたテキスト(入力した文字)は画面に書き込んだ段階でPCに存在しています。今回の画面では入力する場所を3か所作りました。それを取り出すことを考えましょう。

「メイン画面」のタグを選択して、「ボタン1」をダブルクリックします。

プログラムに「ボタン1がクリックされた時の手順」が追加されます。

何にどのような名前を付ければ良いのか?という事ですが画面上に作成したテキスト蘭には自動的に名前が付けられています。(変更できます)

画面の右下にあるプロパティの一番下のほうを見てください。名前が書いてあります。

その名前を「ボタン1がクリックされた時の手順」の中に書き入れていきます。

その際、ファイルに渡す際に使う変数名を用意します。

今回使用する書き込むデータは、「名前01」「名前02」「名前03」を今回使う変数名にします。

こんな感じで変数にセットします。

セットするのは「テキスト1の内容」です。「テキスト1」だけだと違うものがセットされるようになってしまいます。

元にしたプログラムを2つに分けてファイルに書く部分をその下に追加します。

元プログラム

データ表を作ってデータとする -—– この部分で分ける

この下のプログラムを「ボタン1がクリックされた時の手順」に移動します。

もし「data.csv」というファイルが存在するなら、データへ「data.csv」から読み込む

データを「data.csv」へ保存する
データの一覧を表示する

ここまで作ったプログラムを見てみましょう

————————ここから

データ表を作ってデータとする
メイン画面を表示する
待機する

メイン画面とは
ウィンドウを継承する
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この内容を「メイン画面」に変える
ボタン1というボタンを作る
その位置と大きさを{184,199,50,25}に変える
その内容を「ボタン1」に変える
その移動順を3に変える
テキスト1というテキストを作る
その位置と大きさを{32,51,157,19}に変える
その移動順を4に変える
テキスト2というテキストを作る
その位置と大きさを{32,93,157,19}に変える
その移動順を1に変える
テキスト3というテキストを作る
その位置と大きさを{32,137,157,19}に変える
その移動順を2に変える
終わり

ボタン1がクリックされた時の手順
名前01=テキスト1の内容
名前02=テキスト2の内容
名前03=テキスト3の内容

もし「data.csv」というファイルが存在するなら、データへ「data.csv」から読み込む

データに{今、[名前01]、[名前02]、[名前03]}を追加する
データを「data.csv」へ保存する
データの一覧を表示する

終わり
終わり

————————ここまで