MrEd Designerを利用したracket GUIアプリの開発
MrEd Designerを利用したracketのGUIアプリ開発についてまとめます。
インストール
MrEd Designerのインストールはracoを利用して、以下のコマンドで実行できます。
racoに関しては、私の前回の記事を参照してください。
raco pkg install --auto --scope installation mred-designer
起動方法
以下のコマンドで起動できます。
racket -l mred-designer
起動すると、以下の３画面が表示されます。
- Hierarchy
- MrEd Designer
- Properties
使い方
基本的な使い方は公式のREADMEに書いてある通り、大体以下のような感じになります。
- Hierarchy画面で、
project-xxxxを選択する - MrEd Designer画面で、Containers の1,2番目(frame/dialog)のどちらかを選択し追加する
- MrEd Designer画面で、追加したframe/dialogにボタンなどいろいろ追加する
- Show/Hideで追加したframe/dialogを表示／非表示する
- 追加したあとは
Apply & Update Previewを押下しないと更新されないので注意
※ MrEd Designerを終了する際には、MrEd Designer画面のSave Projectを必ず実行するようにしてください。 忘れると直前の作業が全部消えます。
保存したプロジェクトを開く
プロジェクトの終了後に、保存したプロジェクトを再度開く場合は、以下のコマンドを実行してください。
プロジェクトファイルは、.medという拡張子になっているファイルになります。
racket -l mred-designer プロジェクトファイル
作成したGUIをコードにする
To <project-id>.rktボタンを押下するとコードが保存されます。
特にお知らせダイアログの類は表示されず、プロジェクトファイル(medファイル)と同階層に保存されるので注意してください。
コードだけ確認したい場合はTo frameボタンを押下すると、別ダイアログにコードが表示されます。
アプリの作成
実際にMrEd Designerを使ってアプリを作成していきます。
必要なパーツを追加する
今回は以下のような構成にします。
まず、project-4872が選択されている状態で、以下のframeボタンを押下して、フレームを追加します。
追加したフレームが frame-5028 になります。
次に frame-5028 が選択されている状態で、以下の canvasボタンを押下して、キャンバスを追加します。
追加したキャンバスが canvas-6341 になります。
canvas-6341を選択し、Propertiesダイアログを以下のように変更します。
各項目は、それぞれ以下の用途で利用します。
- code-gen-class : マウスイベントなどの実装に必要
- print-callback : 描画処理の実装に必要
- min-width, min-height : 画面サイズの指定
Hierarchy画面で、frame-5028を選択し、Show/Hideボタンを押下すると、以下のようにプレビューが表示されます。
イベントの実装
次はイベントを実装していきます。
まず、エントリポイントとなるファイルを作成します。
今回のサンプルアプリでは、myapp.rktをエントリポイントとするので、空ファイルを作成してください。
ベースとしては以下のようになると思います。
#:canvas-6341-code-gen-classの部分がイベントコールバックで、
#:canvas-6341-paint-callbakの部分が描画コールバックです。
詳細に関しては省略するので、実際の実装結果はコードを参照してください。
#lang racket
(require "project-4872.rkt")
(require racket/gui/base)
(project-4872-init
#:canvas-6341-code-gen-class
(class canvas% (super-new)
(define/override (on-event event)
(super on-event event)))
#:canvas-6341-paint-callback
(lambda (canvas dc)
(send dc flush))
)
アプリの起動
アプリは以下のコマンドで起動します。
racket myapp.rkt
今回作成した（しょうもない）サンプルは以下のような画面になります。
Touch Screenの部分をクリックすると、イベント処理が実行されるようになっています。
作成したアプリは以下になります。詳細はリンク先を参照してください。
感想
- とりあえず、MrEd Designerを使ったアプリの開発手法について、理解できたので満足
- 描画処理は、DC (Device Context)に対して色々命令をするタイプの作りになっており、慣れが必要かと思います
- ※ MFC (C++) を触ってた人であれば理解しやすいと思います。。。
- Chat GPTは、誤回答が多かったので、マニュアルが必読でした
- 背景画像はMicrosoftのImage Creatorを利用しましたが、1発でそれっぽいのができたので笑いました