NiceGUI ネイティブアプリの作成向けTIPS

自分の備忘録としても。

ストレージパスの設定

NiceGUI は、アプリケーション内でデータを永続化するための仕組みとして「Storage」が用意されています。

ネイティブアプリ向けには app.storage.general を利用することになると思います。デフォルトでは実行フォルダに .nicegui/storage-general.jsonという JSONファイルが作成され、ここに app.storage.generalの値が保存されるようになっています。

JSONファイルをどこ作るかは環境変数 NICEGUI_STORAGE_PATH を参照していて、定義がなければ、実行ディレクトリの .nicegui以下に作られます。
なので、ui.run を実行する前に適切なパスで環境変数を設定しておくと適当な位置に設定ファイルを保存することができる。パスについては platformdirs モジュールを利用すると適切なパスが取得できるため便利。

例えば以下によって、

import platformdirs

os.environ["NICEGUI_STORAGE_PATH"] = platformdirs.user_config_path(
    ensure_exists=True
).as_posix()

C:\Users\(UserName)\AppData\Roaming 以下に保存されるようになる。

ファイルダイアログの表示

NiceGUIのドキュメントではファイルのアップロードに関してはFile Uploadエレメントがあるが、フォルダ選択やファイル保存のダイアログ表示については記載がありません。ネイティブアプリの場合はそれらが必要になることがあります。

例えば tkinter などを利用すればそれらダイアログを表示することもできますが、排他制御されないので、ダイアログが表示されている間もボタンなどはクリックできてしまいます。

どうするかというと、ドキュメントに

In native mode the app.native.main_window object allows you to access the underlying window. It is an async version of Window from pywebview.

とあり、ネイティブモードでは app.native.main_window でNcieGUIアプリのpywebview.Window オブジェクト（実際にはNiceGUIとの同期制御を含むラッパーになっている）にアクセスできるので、pywebviewのAPIを使用してダイアログを表示することができます。

例えば、ボタンのクリックからフォルダ選択のダイアログを表示するには、

async def onClickToPickFolder():
  selectedFolder = await app.native.main_window.create_file_dialog(
      dialog_type=webview.FOLDER_DIALOG
  )
  if selectedFolder is None:
    ui.label("canceled")
  else:
    ui.label(selectedFolder[0])

ui.button("Pick Folder", on_click=lambda: onClickToPickFolder())

のようにします。

ちなみに現時点でフォルダ選択のダイアログはツリー表示の形式であまり操作性というか見栄えが良くないのですが、今後より新しいスタイルのものに修正される見込みのようです。