본문으로 건너뛰기

멀티 윈도우

단일 애플리케이션에서 멀티 윈도우 관리하기.

윈도우 생성하기​

Tauri 구성 파일이나 런타임에서 윈도우을 정적으로 만들 수 있습니다.

정적 윈도우​

tauri.windows 구성 배열을 사용하여 여러 개의 윈도우를 만들 수 있습니다. 다음에 나오는 짧은 JSON 구성으로 여러 창을 정적으로 만드는 방법을 보여줍니다.

{
  "tauri": {
    "windows": [
      {
        "label": "external",
        "title": "Tauri Docs",
        "url": "https://tauri.app"
      },
      {
        "label": "local",
        "title": "Tauri",
        "url": "index.html"
      }
    ]
  }
}

윈도우 레이블은 고유해야 하며 런타임에 윈도우 인스턴스에 액세스하는 데 사용할 수 있습니다. 정적 윈도우에 사용할 수 있는 구성 옵션의 전체 목록은 WindowConfig 문서에서 찾을 수 있습니다.

런타임 윈도우​

Rust 계층이나 Tauri API를 통해 런타임에서 윈도우를 만들 수도 있습니다.

Rust에서 윈도우 생성​

WindowBuilder 구조체를 사용하여 런타임에서 윈도우를 생성할 수 있습니다.

윈도우를 만들려면 실행 중인 App 또는, AppHandle의 인스턴스가 있어야 합니다.

App 인스턴스를 사용하여 윈도우 생성​

App 인스턴스는 설정 후크 안에서 혹은, Builder::build 호출 후에 얻을 수 있습니다.

tauri::Builder::default()
  .setup(|app| {
    let docs_window = tauri::WindowBuilder::new(
      app,
      "external", /* the unique window label */
      tauri::WindowUrl::External("https://tauri.app/".parse().unwrap())
    ).build()?;
    let local_window = tauri::WindowBuilder::new(
      app,
      "local",
      tauri::WindowUrl::App("index.html".into())
    ).build()?;
    Ok(())
  })

설정 후크를 사용하면 정적 윈도우와 Tauri 플러그인이 초기화되는 것을 보장 해줍니다. 대안으로, App을 빌드한 후 윈도우를 만들 수 있습니다.

let app = tauri::Builder::default()
  .build(tauri::generate_context!())
  .expect("error while building tauri application");

let docs_window = tauri::WindowBuilder::new(
  &app,
  "external", /* the unique window label */
  tauri::WindowUrl::External("https://tauri.app/".parse().unwrap())
).build().expect("failed to build window");

let local_window = tauri::WindowBuilder::new(
  &app,
  "local",
  tauri::WindowUrl::App("index.html".into())
).build()?;

이 함수는 값의 소유권을 설정 클로저로 이동할 수 없을 때 유용합니다.

AppHandle 인스턴스를 사용하여 윈도우 생성​

AppHandle 인스턴스는 [App::handle] 함수를 사용하거나 Tauri 명령에 직접 삽입하여 가져올 수 있습니다.

tauri::Builder::default()
  .setup(|app| {
    let handle = app.handle();
    std::thread::spawn(move || {
      let local_window = tauri::WindowBuilder::new(
        &handle,
        "local",
        tauri::WindowUrl::App("index.html".into())
      ).build()?;
    });
    Ok(())
  })
#[tauri::command]
async fn open_docs(handle: tauri::AppHandle) {
  let docs_window = tauri::WindowBuilder::new(
    &handle,
    "external", /* the unique window label */
    tauri::WindowUrl::External("https://tauri.app/".parse().unwrap())
  ).build().unwrap();
}
정보

Tauri 명령으로 윈도우를 만들 때 wry#583 이슈로 인해 Windows에서 교착 상태가 발생하지 않도록 명령 기능이 async인지 확인해야 합니다.

JavaScript에서 윈도우 생성​

Tauri API를 사용하면 WebviewWindow 클래스를 가져와 런타임에서 쉽게 윈도우를 만들 수 있습니다.

import { WebviewWindow } from '@tauri-apps/api/window'
const webview = new WebviewWindow('theUniqueLabel', {
  url: 'path/to/page.html',
})
// since the webview window is created asynchronously,
// Tauri emits the `tauri://created` and `tauri://error` to notify you of the creation response
webview.once('tauri://created', function () {
  // webview window successfully created
})
webview.once('tauri://error', function (e) {
  // an error occurred during webview window creation
})

런타임에 윈도우 접근하기​

윈도우 인스턴스는 인스턴스 자체 레이블, Rust의 get_window 함수, JavaScript의 WebviewWindow.getByLabel을 사용하여 질의할 수 있습니다.

use tauri::Manager;
tauri::Builder::default()
  .setup(|app| {
    let main_window = app.get_window("main").unwrap();
    Ok(())
  })

App 또는 AppHandle 인스턴스에서 get_window 함수를 사용하려면 tauri::Manager를 가져와야 합니다.

import { WebviewWindow } from '@tauri-apps/api/window'
const mainWindow = WebviewWindow.getByLabel('main')

다른 윈도우와 통신하기​

윈도우 간 통신은 이벤트 시스템을 통해 할 수 있습니다. 자세한 내용은 Event 안내서를 확인하세요.