TWSNMP MW開発4日目：Windowの表示内容を切り替える方法が見えてきた

浦和レッズ　残念！
昨日、サッカーの試合を観て寝るのが遅くなったので６時近くまで寝てしまいました。助手の猫さんが大騒ぎして起こしてくれました。

昨日の夜、wails v3のマルチWindowとSolid.jsを組み合わせてWindowの表示内容を切り替える方法を考えながら寝ました。思いついたWindowを作成する時のURLにパラメータを渡す方法を試してみした。

	app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
		Title: "TWSNMP MV Main",
		Mac: application.MacWindow{
			Backdrop: application.MacBackdropTranslucent,
		},
		URL: "/?page=main",
	})

	app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
		Title: "TWSNMP MV Map SiteName",
		Mac: application.MacWindow{
			Backdrop: application.MacBackdropTranslucent,
		},
		URL: "/?page=map&id=1",
	})

のようにURLにパラメータを指定して Windowを作成して画面を表示するJSX側で

import 'flowbite';
import { Match, Switch } from 'solid-js';

function App() {
  const url = new URL(window.location.href);
  const params = url.searchParams;

  console.log(params.get("page"));
  console.log(params.get("id"));

  const page = params.get("page");
  const id = params.get("page");

  return (
  <>
  <Switch>
    <Match when={page =="main"} >
      <p class="text-4xl text-red-600">Main Page</p>
    </Match>
    <Match when={page =="map"} >
      <p class="text-4xl text-blue-600">MAP Page id={id}</p>
    </Match>
  </Switch>
  </>
  )
}

export default App

のように受け取るようにすることでWindowの表示内容を変えることができました。

本当に、これでよいか不安なところもありますが、wailsのruntimeのソースコードなどを調べた限りでは、この方法が今の時点では良いのかと思っています。
ここまでできたところで今朝は時間切れです。

明日に続く