.NET MAUIとMVUフレームワークCometについて

はじめに

.NET MAUIにはCometというMVUフレームワークが存在します。
今回はこのCometをちょこちょこ触ってどんな感じなのかを共有出来たらなと思います。

インストール方法

これが最新のちゃんとしたインストール方法なのかわかりませんが、とりあえずGitHubの公式ドキュメントに従ってインストール作業をしてみます。

インストールガイドはこちら、ここの1番、テンプレートのインストールのみでOKです。

VScode用みたいに書いていますがVisualStudioでも一応できました。
VScodeでサンプルアプリを立ち上げたい場合は最後まで手順に沿ってコマンドを売ってもらえばOKです。

Visual Studioでテンプレートアプリを開く

テンプレートがインストールされたのでVisualStudioの新規作成からCometTemplateを選べるようになりました。

検索窓にCometと入力すると出てきます。

追加の情報ダイアログが出てきますがスルーしてOKです。

テンプレートができたのでとりあえずWindowsでデバックしてみると、、、

？なんだこれ？めっちゃ小さくなってね？

あ、ちゃんとできてた

と思ったらウィンドウの枠広げたり位置移動させたりするとわけのわからない挙動になります。
マジか、、、

Windowsにも対応って書いていますが今のところiOSやAndroidなんかのウィンドウサイズが変わらないモバイルアプリ用なのでしょうか、、、

気を取り直してCodeを書いてみる。

サンプルコードの中身はこちら

namespace CometSample;
public class MainPage : View
{

	[State]
	readonly CometRide comet = new();

	[Body]
	View body()
		=> new VStack {
				new Text(()=> $"({comet.Rides}) rides taken:{comet.CometTrain}")
					.Frame(width:300)
					.LineBreakMode(LineBreakMode.CharacterWrap),

				new Button("Ride the Comet! ☄️", ()=>{
					comet.Rides++;
				})
					.Frame(height:44)
					.Margin(8)
					.Color(Colors.White)
					.Background(Colors.Green)
				.RoundedBorder(color:Colors.Blue)
				.Shadow(Colors.Grey,4,2,2),
		};

	public class CometRide : BindingObject
	{
		public int Rides
		{
			get => GetProperty<int>();
			set => SetProperty(value);
		}

		public string CometTrain
		{
			get
			{
				return "☄️".Repeat(Rides);
			}
		}
	}
}

まぁちょっとした機能しかないけどC#で全部書こうとするとこのくらいのコード量にはなるのかなぁ？

早速普段のMAUIのサンプルアプリみたいにイメージを追加しようとして問題が起こりました。

あれ？できないのかぁ

じゃあこれは？

？プロパティまたはインデクサーは読み取り専用で割り当てることができない？
なんじゃそれ

少し調べてみましたが、要素のプロパティには関数かプロパティを作ってしか割り当てることができないらしい。
これがMVUか、、、

こんな感じにしてやっとイメージを貼り付けることができました。

public class MainPage : View
{

	[State]
	readonly CometRide comet = new();
	[State]
	readonly string imageSource = "dotnet_bot.png";//←Stateを作りそこに定数だったりの値を入れる必要がある。

	[Body]
	View body()
		=> new VStack {
			new Image(imageSource),//←StateのimageSourceを割り当てる

Imageの因数にすでにImageSourceが割り当てられているようですね、、、

この辺のコントロールの形も若干おかしい
LabelもTextになってて()ないでTextプロパティを指定するようになってた。

new Text(()=> $"({comet.Rides}) rides taken:{comet.CometTrain}")
    .Frame(width:300)
	.LineBreakMode(LineBreakMode.CharacterWrap),

そしてボタンを押すたびイメージが横移動するように作ったのがこちら

public class MainPage : View
{
	[State]
	readonly CometRide comet = new();
	[State]
	readonly string imageSource = "dotnet_bot.png";

	[Body]
	View body()
		=> new VStack {
	     		new Image(imageSource)
                    .TranslationX(comet.Rides),//←comet.Ridesを使いまわしてみた関数やプロパティであれば引数として持ってくることは可能らしい
				new Text(()=> $"({comet.Rides}) rides taken:{comet.CometTrain}")
					.Frame(width:300)
					.LineBreakMode(LineBreakMode.CharacterWrap),

				new Button("Ride the Comet! ☄️", ()=>{
					comet.Rides++;
				})
					.Frame(height:44)
					.Margin(8)
					.Color(Colors.White)
					.Background(Colors.Green)
				.RoundedBorder(color:Colors.Blue)
				.Shadow(Colors.Grey,4,2,2),
		};

	public class CometRide : BindingObject
	{
		public int Rides
		{
			get => GetProperty<int>();
			set => SetProperty(value);
		}

		public string CometTrain
		{
			get
			{
				return "☄️".Repeat(Rides);
			}
		}
	}
}

さいごに

MVCのフレームワークに初めてチャレンジしてみましたが、なかなかこの概念を理解するのは難しそうだと思いました。

安全なんだとは思いますが、決まりきった定数にもStateつけて、、、ってのをすべてにやらないといけないとなるとかなりしんどいなと、、、
自分がFlutter入門動画を見たときなんでこんなことしてんだ？って違和感はこれだったのかもしんねぇ、、、

とりあえずMAUIにはMVVMがあるのでMVUはお預けにしようかと思います。(Windowsだと挙動もおかしいしね)