Trying to the Tauri GUI on Rust : 5. MessageBox and OpenFileDialog

Photo by Maksym Kaharlytskyi on Unsplash

This time, I will challenge the message box and file selection.

Those who are proficient in the Web will run a familiar GUI framework on the front side and do something like “Abra Catabra”.✨ But i am a beginner.
If Tauri calls a native API, I’d like to use that.

In addition, I thought it would be much easier to get the file path instead of receiving the data in the file.

It is a continuation from the previous.

Trying to the Tauri GUI on Rust : 4. State management on the Rust side

Message Box

It calls the OS message box by using tauri::api::dialog::massage.
If you use Windows, you will see the familiar messaage box in Windows.

Modify src-tauri/src/main.rs from the previous source code.

use std::sync::Mutex;
use tauri::State;
use tauri::api::dialog::*; // Add tihs
use tauri::Manager; // and this
#[tauri::command]
fn call_rust(js_msg: String, window: tauri::Window) -> String {
  println!("from JS:{}", js_msg);
  let label = window.label();
  let parent_window = window.get_window(label).unwrap();
  tauri::async_runtime::spawn(async move {
    message(Some(&parent_window), "Title", &js_msg);
  });
  "ぼくRust!".into()
}

Taking tauri::window as an argument allowed us to access the Tauri-managed WebView window structure.

It seems that you can do various things by doing get_window() and getting Window<R>(= Runtime?) for that window structure. As follows.

let parent_window = 
  tauri::Manager::get_window(&window, “main”).unwrap();

This time I will use Window<R> several times, so I wrote use tauri::Manager; and did the following:

let parent_window = window.get_window(“main”).unwrap();

“main” is the label string attached to the window and is specified by tauri.config.json.

But I don’t remember specifying it. Apparently, if there is only one main window and no label is specified, it will automatically become “main”.

It seems that each window is identified by the label, so if you get the label string with label(), you can make the calling window the parent.

let label = window.label();

In the case of this example, “main” is returned after all.

Oh yeah, the message() seems to be asynchronous and can’t be called as is. So it worked when called in another thread using tauri::async_runtime::spawn(...).

“タイトル” is “Title”

Points to be worried about

The title is attached not only to the title bar but also to the top of the message body. And Is it possible to change the icon? hmm..

File selection dialog

It seems that the following import is required to use open () with js.

import { open } from “@tauri-apps/api/dialog”;

Or, it is described as “This package is also accessible with window.__TAURI__.dialog when tauri.conf.json > build > withGlobalTauri is set to true.” I’ll try this method this time too.

And it is also written as “The APIs must be allowlisted on tauri.conf.json:”.
It’s an experiment, so I’ll allow it all. However, It says “It is recommended to allowlist only the APIs you use for optimal bundle size and security.”

I edit src-tauri/tauri.conf.json .

“allowlist”: {
  “all”: true,
  “dialog”: {
    “all”: true,
    “open”: true,
    “save”: true
  }
},

Next, edit index.html .

<div>
  <button onclick=”fileselect(false)”>..</button>
  <button onclick=”fileselect(true)”>Dir</button>
</div>
<script>
  const invoke = window.__TAURI__.invoke;
  const dialog = window.__TAURI__.dialog; // This one.
  // Open File Dialog
  const fileselect = (isDirMode) => {
    let properties = {
      defaultPath: 'C:\\',
      directory: isDirMode,
      filters: [{
        extensions: ['txt', 'gif'], name: "*"
      }]
    };
    dialog.open(properties).then((pathStr) => {
      invoke('call_rust', {jsMsg: pathStr});
    });
  };
</script>

I added a file selection and directory selection button on the front side.
Display the selected path in the above message box.

Windows example.

Let’s run it.
I got the path of the selected file or directory ! 😊

Points to be worried about

• I clicked on a directory during the first debug and it crashed. Normal after the second time. why? 🤔

Thank you for reading!
If you like it, please follow me. 🤩

Originally published at https://jnsmith.blog.fc2.com.