家計簿アプリを作成する⑦【ログイン画面（UI）】

Flet

ログイン画面

家計簿アプリを使用するためのログイン画面

ログイン画面

Loginクラス

概要

通常fletでの画面の作成はViewで作成するが、自作コントロールのMy_Control.MyViewを使用する

エラーメッセージを表示するコントロールは、自作コントロールのMy_Control.Msgboxを使用する

自作コントロールを使用することで、元のコントロールでの設定が省略され、デザインの統一化できる

【Loginクラスのイニシャライザ】
・ログインアダプターのインスタンス化
・画面のコントロール・ウィンドウの設定
を行う

【ログインボタン】
ログインボタンを押した時
・ユーザーID
・パスワード
が空欄の場合、エラーメッセージを表示する

ユーザーIDとパスワードが入力されている場合
・ログインアダプターにユーザーID、パスワードを渡し、ログイン認証を行う
・ログインアダプターからユーザー情報を受け取る

ログインアダプターから受け取った情報にユーザー情報がない場合
・エラーメッセージを表示する

DB操作時に例外エラーが発生した場合
・例外エラーメッセージを表示する

ログインアダプターから受け取った情報にユーザー情報がある場合
・pageのdataにユーザー情報を設定する（ログ出力の際に使用する）
・家計簿一覧画面を表示する

ソースコード
import flet as ft
from db.login_adapter import Login_Adapter
from common.my_control import My_Control
from common.message import Message
from common.const import Const
from common.method import CommonMethod
from config.config import Config


# ログイン画面
class Login(My_Control.MyView):
    def __init__(self, arg_page: ft.Page):
        self.page = arg_page
        self.config = Config()
        # オーバーレイ作成
        self.overlay = My_Control.MyOverlay(self.page).overlay
        # ログインアダプターをインスタンス化
        self.login_adapter = Login_Adapter()
        # 画面ラベル作成
        self.display_label = ft.Container(
            content=ft.Text(
                Const.Display.LOGIN,
                size=30,
                weight=ft.FontWeight.BOLD,
            ),
            alignment=ft.alignment.center,
        )
        # ユーザーID入力エリア作成
        self.id_TextField = ft.TextField(
            label=ft.Text("ユーザーID", size=18), bgcolor=ft.Colors.WHITE, text_size=18
        )
        # パスワード入力エリア作成
        # password=Trueで入力した値がマスクされるように設定
        self.password_TextField = ft.TextField(
            label=ft.Text("パスワード", size=18),
            password=True,
            bgcolor=ft.Colors.WHITE,
            text_size=18,
        )
        # ログインボタン作成
        # ボタンクリック時にlogin_submit_clickを呼び出す
        self.submit = ft.FilledButton(
            content=ft.Text("ログイン", size=18),
            width=100,
            height=40,
            on_click=lambda e: Login.login_submit_click(self),
        )
        # controlに作成したコントロールを追加する
        # ユーザーID入力エリア、パスワード入力エリア、ログインボタンは縦並びかつ枠線内にあるデザインにするため
        # ft.Container内にft.Column(縦並び)で配置し、ft.Containerに枠線を設定する
        control = [
            ft.Column(
                controls=[
                    self.display_label,
                    ft.Container(
                        content=ft.Column(
                            controls=[
                                self.id_TextField,
                                self.password_TextField,
                                self.submit,
                            ]
                        ),
                        border=ft.border.all(2.0, ft.Colors.BLACK),
                        padding=20,
                    ),
                ],
                expand=True,
            ),
            self.overlay,
        ]
        # ウィンドウサイズと表示位置を設定
        arg_page.window.width = self.config.window_size.login.width
        arg_page.window.height = self.config.window_size.login.height
        CommonMethod.center_non_update(arg_page)
        # "/login"が呼び出された時にcontrolが表示されるように設定
        super().__init__("/login", control)

    def login_submit_click(self):
        """
        ログインボタンクリックイベント
        """
        # 画面を非活性にする
        self.overlay.visible = True
        self.update()
        # idにユーザーIDを代入する
        id = self.controls[0].controls[1].content.controls[0].value
        # idの入力値チェック
        if id == "":
            msg = My_Control.Msgbox(
                "HAB005C",
                Message.Message_Box.HAB005C.format("ユーザーID"),
            )
            # 自作コントロールのメッセージボックスをログイン画面上に表示する
            self.page.open(msg)
            # 画面を活性にする
            self.overlay.visible = False
            self.update()
            return
        # passwordにパスワードを代入する
        password = self.controls[0].controls[1].content.controls[1].value
        # passwordの入力値チェック
        if password == "":
            msg = My_Control.Msgbox(
                "HAB005C",
                Message.Message_Box.HAB005C.format("パスワード"),
            )
            # 自作コントロールのメッセージボックスをログイン画面上に表示する
            self.page.open(msg)
            # 画面を活性にする
            self.overlay.visible = False
            self.update()
            return
        # ログインアダプターを使用し、ログイン認証を行う
        # user_rowにはユーザー情報、ログイン失敗メッセージが代入されている
        user_row = self.login_adapter.login(
            id,
            password,
        )
        # user_row.return_rowにユーザー情報がない場合
        if user_row.return_row is None:
            # user_row.return_message_boxに代入されたメッセージ情報を
            # 自作コントロールのメッセージボックスに渡しインスタンス化
            msg = My_Control.Msgbox(
                user_row.return_message_box.message_id,
                user_row.return_message_box.message_text,
            )
            # 自作コントロールのメッセージボックスをログイン画面上に表示する
            self.page.open(msg)
            # 画面を活性にする
            self.overlay.visible = False
            self.update()
        else:
            # self.page.dataにユーザー情報を代入し、どの画面でもユーザー情報を参照できるようにする
            self.page.data = user_row.return_row
            # 家計簿一覧画面を表示する
            self.page.go("/HAB_list")

全体コード（GitHub）

household_account_book/display/login.py at main · SakumaTakayuki/household_account_book
Contribute to SakumaTakayuki/household_account_book development by creating an account on GitHub.
github.com