 |
VOOZH | about |
|
VOOZH | about |
We’re so glad you’re here. You can expect all the best TNS content to arrive Monday through Friday to keep you on top of the news and at the top of your game.
Check your inbox for a confirmation email where you can adjust your preferences and even join additional groups.
Follow TNS on your favorite social media networks.
Become a TNS follower on LinkedIn.
Check out the latest featured and trending stories while you wait for your first TNS newsletter.
We get the security of Rust but the familiarity and flexibility of web development.We’ll try and see if the path has gotten a bit smoother to building a UI app that I can run fully packaged on my Mac. Tauri still refers to itself a ‘toolkit’, which is still true. Conceptually, Tauri acts as a static web host. So Tauri works with Rust crates and the system’s native web view to output a modest-sized executable application. In theory, we get the security of Rust but the familiarity and flexibility of web development. The getting started route is looking a bit fresher, with the now popular single line start. Before we do, I suspect that I have an old Rust installation, so I should update this. Using the prerequisite instructions: 👁 Image
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="styles.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tauri App</title> <script type="module" src="/main.js" defer></script> </head> <body> <div class="container"> <h1>Welcome to Tauri!</h1> <div class="row"> <a href="https://tauri.app" target="_blank"> <img src="/assets/tauri.svg" class="logo tauri" alt="Tauri logo" /> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" > <img src="/assets/javascript.svg" class="logo vanilla" alt="JavaScript logo" /> </a> </div> <p>Click on the Tauri logo to learn more about the framework</p> <form class="row" id="greet-form"> <input id="greet-input" placeholder="Enter a name..." /> <button type="submit">Greet</button> </form> <p id="greet-msg"></p> </div> </body> </html>
div displays an image in an anchor, which deals with the link behavior. Note that the JavaScript is in main.js, and that the app title on the window itself is not that which is defined here. And we have a very old school form for entering the input text. So we know that we will have to process that form to extract the entered name, and place the result in the final p. This is the content of main.js:
const { invoke } = window.__TAURI__.core;
let greetInputEl;
let greetMsgEl;
async function greet() {
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
}
window.addEventListener("DOMContentLoaded", () => {
greetInputEl = document.querySelector("#greet-input");
greetMsgEl = document.querySelector("#greet-msg");
document.querySelector("#greet-form").addEventListener("submit", (e) => {
e.preventDefault();
greet();
});
});
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}! You've been greeted from Rust!", name)
}
fn main() {
tauri::Builder::default()
.plugin(tauri_plugin_shell::init())
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
{
"productName": "thenewstack",
"version": "0.0.0",
"identifier": "com.tauri.dev",
"build": { "frontendDist": "../src" },
"app": { "withGlobalTauri": true, "windows": [
{
"title": "thenewstack",
"width": 800,
"height": 600
}
],
"security": { "csp": null } },
"bundle": { "active": true,
"targets": "all",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
...
]
}
}
{
...
"identifier": "io.thenewsatck",
...
"app" : {
"windows": [
{
"title": "Welcome to TheNewStack",
"width": 600,
"height": 200
}
...
},
...
}
}
