このチュートリアルでは、学習に使えるフラッシュカードアプリを作成します。カードは小型DBに保存されます。学習モードだけでなく、データベースアプリの基本機能であるCRUD機能（作成：Create、読み取り：Read、更新：Update、削除：Delete）もあります。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。
このアプリでは三つのスクリーンを使っていますが、スクリーン毎に同じグローバル変数を設定したり小型DBなどの同じコンポーネントを使うのは煩雑なので、Screen1だけを使って三つのスクリーンを切り替えて使う、仮想スクリーンテクノロジーを使っています。仮想スクリーンではScreen1に複数の垂直配置コンポーネントを配置してブロック編集内で「目に見える」をON/OFFしてスクリーンを切り替えます。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"FlashCard“と名前を付けます。
デザイン編集
Screen1のタイトルを"フラッシュカードアプリ“にします。
仮想スクリーンを作成
レイアウト パレットから 垂直配置コンポーネント を3個追加し、ビューア上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順にメインスクリーン、一覧スクリーン、編集スクリーンという名前にしてください。それぞれの垂直配置コンポーネントが仮想スクリーンになります。それぞれの垂直配置コンポーネント(スクリーン)にコンポーネントを追加するときは他のスクリーンの目に見えるのチェックを外して作業してください。スクリーン切り替えにはこれらのプロシージャを使います。
“メインスクリーン“
- ユーザーインターフェース パレットから ラベル を1個追加し、名前をラベルカードに、高さは"親要素に合わせる"、横幅は"親要素に合わせる"、テキストは空白にします。
- レイアウト パレットから 水平配置コンポーネント を ラベルカードの下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置1になります。
- 水平配置1 の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前はボタンはじめ、ボタン切り替え、ボタン次、テキストは"始めから"、"表裏切り替え"、"次のカード"にします。
- レイアウト パレットから 水平配置コンポーネント を 水平配置1 の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置2になります。
- 水平配置2 の中にユーザーインターフェース パレットから ボタン を2個追加し、左から順に名前はボタン追加、ボタン一覧、テキストは"カード追加"、"カード一覧"にします。
“一覧スクリーン“
- ユーザーインターフェース パレットから リストビュー を追加し、高さと横幅は"親要素に合わせる"に、リストビューレイアウトを"本文"にします。名前はリストビュー1になります。
- レイアウト パレットから 水平配置コンポーネント を リストビュー1 の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置3になります。
- 水平配置3 の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前はボタンバック、ボタン編集、ボタン削除に、テキストは"戻る"、"編集"、"削除"にします。
“編集スクリーン“
- ユーザーインターフェース パレットから ラベル、テキストボックス、ラベル、テキストボックス をこの順番で追加し、名前をそれぞれラベル質問、テキストボックス質問、ラベル回答、テキストボックス回答 に、テキストは"質問入力"、""、"回答入力"、""にします。テキストボックス質問、テキストボックス回答の横幅は"親要素に合わせる"にし、マルチラインはチェックしてください。
- レイアウト パレットから 水平配置コンポーネント を テキストボックス回答 の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置4になります。
- 水平配置4 の中にユーザーインターフェース パレットから ボタン を2個追加し、左から順に名前はボタンキャンセル、ボタン保存 に、テキストは"キャンセル"、"保存"にします。
非可視コンポーネントの追加
ストレージパレットから小型DBを、ユーザーインターフェース パレットから通知機能を追加します。
ここまでで下図のようになります。
