見出し画像

TWLogAIAN:画面遷移の仕組みを見直す

twsnmp

今朝は５時から開発開始です。このぐらいの時間に起きるのが一番調子がよい感じです。ソフトウェアの内部構造を

のように整理したことで画面遷移に

と

を使った仕組みは必要ないように思えてきました。画面の数が多くないので
Svelteだけの制御でページの切り替えができそうです。できるだけ依存するパッケージは減らしたいのでよいことです。
そこで今朝は先週作った画面を見直して書き換えてました。
画面の切り替えは、

<script>
  import Wellcome from "./pages/Wellcome.svelte";
  import Feedback from "./pages/Feedback.svelte";
  import Start from "./pages/Start.svelte";
  let page = "wellcome";
  const handleDone = (e) => {
    if (e && e.detail  && e.detail.page) {
      page = e.detail.page;
    }
  }
</script>

<main>
  <div id="page" data-wails-no-drag>
    {#if page == "wellcome" }
     <Wellcome on:done={handleDone}/>
    {:else if page == "feedback"}
     <Feedback on:done={handleDone}/>
    {:else if page == "start"}
     <Start on:done={handleDone}/>
    {/if}
  </div>
</main>

のようにスッキリしました。表示するページもコンポーネントに分割できたのでわかりやすくなったと思います。コンポーネントの中から

import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();

const close = () => {
  dispatch("done", { page: "wellcome" });
};

のようにイベントを発生させればページ切り替えができる仕組みも習得しました。なんだか嬉しい。
画面のレイアウトは全て、

に統一できそうです。

ようこそ画面

細かいですが、ボタンを左側にして色も統一しました。

フィードバック画面
作業フォルダー選択画面

この変更は、

です。
画面を作る方法がスッキリしたので調子がでてきましたが、残念ながら今朝は時間切れです。

明日に続く


開発のための諸経費（機材、Appleの開発者、サーバー運用）に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。