Créez une application de barre de menus avec Tauri. Un tutoriel rapide sur la façon de créer un… | par 4gray | janvier 2023

Posté Par: Windows2022tutosur: janvier 20, 2023Dans: application, avec, barre, menus, Node Js, rapide, tutoriel, unePas De Commentaires

Imprimer E-mail

Tirons parti du framework Rust

Application de barre de menus avec Tauri

L’état des JS 2022 résultats m’a motivé à regarder de près Épreuves comme alternative à Electron. L’un des principaux avantages du cadre est sans aucun doute la taille du bundle d’applications final.

Le principal obstacle qui m’a empêché de créer/convertir une application d’Electron en Tauri était mon manque de connaissance de Rust. Mais en regardant la liste des applications dans le génial-tauri repo, j’ai vu quelques applications vivre dans la barre de menus et j’ai finalement décidé de créer quelque chose par moi-même.

Comme je n’ai rien trouvé de semblable à un barre de menu module pour Tauri, je souhaite partager mon expérience dans la création d’une simple application de barre de menus / plateau à partir de zéro dans cet article. La partie JavaScript du code ne sera pas touchée, car nous ajouterons tout le code nécessaire aux fichiers Rust.

Pour ceux qui veulent jeter un coup d’œil à l’ensemble du code tout de suite, veuillez vérifier ce référentiel.

En tant que documentation de démarrage rapide de Tauri suggèreprenons le npm create commande et générer une nouvelle application :

$ npm create tauri-app

Entrez le nom de l’application, choisissez n’importe quel gestionnaire de packages et le cadre de base. j’ai pris pnpm et vue-ts.

La commande créera un nouveau dossier avec la structure de base d’une application Tauri.

Maintenant, lancez l’application avec le $ pnpm tauri dev commande et passez au code.

Au fait, voici quelques extensions VS Code recommandées :

– Épreuves – ajoute la saisie semi-automatique et la validation du fichier de configuration, ainsi que des commandes pour démarrer, construire, etc.
– analyseur de rouille — Prise en charge de la rouille

Comme dans Electron, le API de la barre d’état système affiche les icônes dans la barre de menus/le plateau. Ce que j’aime chez Tauri à ce stade, c’est que la configuration de base de l’application est stockée dans un fichier JSON séparé.

Ouvrir tauri.conf.jsonet ajoutez la configuration pour systemTray à celui-ci :

"systemTray": {
"iconPath": "icons/icon.png",
"iconAsTemplate": true
}

Passons maintenant au code Rust. Pour ceux qui, comme moi, sont nouveaux sur Rust, il existe des exemples de base de gestionnaires de plateaux dans le documents officiels, que nous prendrons pour commencer. Ouvrir src-tauri/main.ts, et ajoutez le code responsable de l’événement de clic gauche. Voici le code pour le faire :

use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
fn main() {
let system_tray_menu = SystemTrayMenu::new();
tauri::Builder::default()
.system_tray(SystemTray::new().with_menu(system_tray_menu))
.on_system_tray_event(|app, event| match event {
SystemTrayEvent::LeftClick {
position: _,
size: _,
..
} => {
let window = app.get_window("main").unwrap();
// toggle application window
if window.is_visible().unwrap() {
window.hide().unwrap();
} else {
window.show().unwrap();
window.set_focus().unwrap();
}
},
_ => {}
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

Maintenant, une icône par défaut devrait apparaître dans la barre de menus et vous pouvez basculer la fenêtre de l’application en cliquant dessus.

Git commit avec modifications

Ce n’est pas mal, mais nous devons changer la position de la fenêtre pour qu’elle soit à côté de l’icône elle-même. Vous pouvez essayer de calculer la position vous-même, mais pour cela, nous allons procéder autrement et utiliser le tauri_plugin_positioner forfait pour cela. En même temps, découvrons comment ajouter des plugins à Tauri/Rust.

C’est vraiment facile, il suffit d’ouvrir cargo.tomlet ajoutez cette ligne avec la dépendance :

[dependencies]
tauri-plugin-positioner = { version = "1.0.4", features = ["system-tray"] }

Maintenant, revenez au main.rs et utilisez la dépendance dans notre code :

use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
use tauri_plugin_positioner::{Position, WindowExt};fn main() {
let system_tray_menu = SystemTrayMenu::new();
tauri::Builder::default()
.plugin(tauri_plugin_positioner::init())
.system_tray(SystemTray::new().with_menu(system_tray_menu))
.on_system_tray_event(|app, event| {
tauri_plugin_positioner::on_tray_event(app, &event);
match event {
SystemTrayEvent::LeftClick {
position: _,
size: _,
..
} => {
let window = app.get_window("main").unwrap();
// use TrayCenter as initial window position
let _ = window.move_window(Position::TrayCenter);
if window.is_visible().unwrap() {
window.hide().unwrap();
} else {
window.show().unwrap();
window.set_focus().unwrap();
}
}
_ => {}
}
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

Git commit avec modifications

Super, maintenant notre fenêtre s’affiche à la position que nous voulons. Nous devons maintenant corriger certaines propriétés de la fenêtre. Par exemple, nous devons supprimer le titlebar qui a des boutons trop proches et agrandit et minimise l’application. Pour ce faire, ouvrez tauri.conf.json à nouveau, et retrouvez son window paramètres de l’objet.

J’ai utilisé la configuration suivante :

{
"fullscreen": false,
"height": 600,
"resizable": false,
"title": "menubar",
"width": 600,
"visible": false,
"hiddenTitle": true,
"decorations": false,
"focus": false,
"transparent": false
}

Une liste complète des propriétés prises en charge est disponible dans le documents officiels.

Git commit avec modifications

Il manque un autre détail à notre application : la possibilité de masquer l’application lorsque vous cliquez en dehors de la fenêtre. C’est facile à faire car vous pouvez vérifier l’état du focus de la fenêtre en utilisant on_window_event():

fn main() {
...tauri::Builder::default()
.plugin(tauri_plugin_positioner::init())
.system_tray(SystemTray::new().with_menu(system_tray_menu))
.on_system_tray_event(|app, event| {
...
})
.on_window_event(|event| match event.event() {
tauri::WindowEvent::Focused(is_focused) => {
// detect click outside of the focused window and hide the app
if !is_focused {
event.window().hide().unwrap();
}
}
_ => {}
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

Git commit avec modifications

La configuration de l’API de la barre d’état système contient un autre paramètre utile : menuOnLeftClick avec la valeur par défaut true. Puisque le clic gauche est déjà utilisé pour le basculement de fenêtre, dans notre cas, désactivons cette propriété avec le code suivant :

"systemTray": {
"iconPath": "icons/icon.png",
"iconAsTemplate": true,
"menuOnLeftClick": false
}

Et maintenant, nous allons utiliser le code suivant pour créer un menu contextuel simple avec un élément de menu qui s’ouvre avec un clic droit sur le menubar icône:

fn main() {
let quit = CustomMenuItem::new("quit".to_string(), "Quit").accelerator("Cmd+Q");
let system_tray_menu = SystemTrayMenu::new().add_item(quit);

    tauri::Builder::default()
...

En plus de id et titlevous pouvez également spécifier le raccourci clavier, qui apparaîtra automatiquement dans le menu contextuel à côté du titre.

Git commit avec modifications

Dans la dernière étape, nous nous occuperons à nouveau de l’apparence visuelle de notre fenêtre, à savoir ajouter une flèche en haut de l’application pour lui donner un aspect déroulant et arrondir les coins de la fenêtre.

Pour cela, il va falloir activer la propriété transparent et la macOSPrivateApi propriété pour le faire fonctionner sur macOS. Encore une fois, ouvrez tauri.conf.json et ajoutez les deux lignes suivantes :

...,
"macOSPrivateApi": true,
"windows": [
{
...,
"transparent": true
}

Pour afficher la flèche, nous utiliserons l’un des exemples d’Electron menubar module et ajoutez (adaptez) le code suivant dans style.css:

body {
margin: 0; 
}.arrow {
position: relative;
padding: 12px 0;
}
.arrow:before {
content: '';
height: 0;
width: 0;
border-width: 0 8px 12px 8px;
border-style: solid;
border-color: transparent transparent #2f2f2f transparent;
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
}
@media (prefers-color-scheme: dark) {
.container {
border-radius: 7px;
padding: 10px;
color: #f6f6f6;
background-color: #2f2f2f;
}
}