github/wails
5
0
Fork 0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-02 14:59:25 +08:00
Code Projects Activity

Bump version to v2.3.1

Browse Source
This commit is contained in:
Lea Anthony 2022-12-30 07:38:22 +11:00
parent 1b2bc8ee27
commit 0aa056fcc5
No known key found for this signature in database
GPG Key ID: 33DAF7BB90A58405
446 changed files with 33784 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
v2/cmd/wails/internal/version.txt
View File

@ -1 +1 @@
v2.3.0
v2.3.1

38
website/i18n/en/docusaurus-plugin-content-docs/version-v2.3.1.json Normal file
View File

@ -0,0 +1,38 @@
{
"version.label": {
"message": "v2.3.1",
"description": "The label for version v2.3.1"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Reference": {
"message": "Reference",
"description": "The label for category Reference in sidebar docs"
},
"sidebar.docs.category.Runtime": {
"message": "Runtime",
"description": "The label for category Runtime in sidebar docs"
},
"sidebar.docs.category.Community": {
"message": "Community",
"description": "The label for category Community in sidebar docs"
},
"sidebar.docs.category.Showcase": {
"message": "Showcase",
"description": "The label for category Showcase in sidebar docs"
},
"sidebar.docs.category.Guides": {
"message": "Guides",
"description": "The label for category Guides in sidebar docs"
},
"sidebar.docs.category.Tutorials": {
"message": "Tutorials",
"description": "The label for category Tutorials in sidebar docs"
},
"sidebar.docs.link.Contributing": {
"message": "Contributing",
"description": "The label for link Contributing in sidebar docs, linking to /community-guide#ways-of-contributing"
}
}

26
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/links.mdx Normal file
View File

@ -0,0 +1,26 @@
---
sidebar_position: 2
---
# Liens
Cette page sert de liste pour les liens liés à la communauté. Veuillez soumettre une PR (cliquez sur `Modifier cette page` en bas) pour soumettre des liens.
## Awesome Wails
La [liste définitive](https://github.com/wailsapp/awesome-wails) de liens relatifs à Wails.
## Canaux de support
- [Gophers Slack Channel](https://gophers.slack.com/messages/CJ4P9F7MZ/)
- [Gophers Slack Channel Invite](https://invite.slack.golangbridge.org/)
- [Github Issues](https://github.com/wailsapp/wails/issues)
- [canal de discussion sur la bêta v2](https://github.com/wailsapp/wails/discussions/828)
## Réseaux sociaux
- [Twitter](https://twitter.com/wailsapp)
- [Groupe QQ pour la communauté chinoise de Wails](https://qm.qq.com/cgi-bin/qm/qr?k=PmIURne5hFGNd7QWzW5qd6FV-INEjNJv&jump_from=webapi) - Numéro de groupe : 1067173054
## Autres tutoriels et articles
- [Construction d'un Panneau d'Affichage](https://blog.customct.com/building-bulletin-board)

0
website/versioned_docs/version-v2.2.0/community/showcase/emailit.mdx → website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/emailit.mdx
View File

12
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/encrypteasy.mdx Normal file
View File

@ -0,0 +1,12 @@
# EncryptEasy
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/encrypteasy.webp").default} />
<br />
</p>
```
**[EncryptEasy](https://www.encrypteasy.app) est un outil de chiffrement PGP simple et facile à utiliser, qui gère toutes vos clés et celles de vos contacts. Le chiffrement devrait être simple. Développé avec Wails.**
Chiffrer les messages à l'aide de PGP est la norme de l'industrie. Tout le monde a une clé privée et publique. Votre clé privée, eh bien, doit être privée afin que vous seul puissiez lire les messages. Votre clé publique est distribuée à toute personne qui veut vous envoyer des messages secrets, chiffrés. Gérer les clés, chiffrer les messages et déchiffrer les messages devrait être une expérience agréable. EncryptEasy a pour but de vous simplifier la tâche.

16
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/filehound.mdx Normal file
View File

@ -0,0 +1,16 @@
# Utilitaire d'exportation FileHound
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/filehound.webp").default} />
<br />
</p>
```
[L'utilitaire d'exportation FileHound](https://www.filehound.co.uk/) est une plate-forme de gestion de documents cloud conçue pour la conservation sécurisée de fichiers, l'automatisation des processus métier et les capacités de SmartCapture.
L'utilitaire d'exportation FileHound permet aux administrateurs FileHound d'exécuter des tâches sécurisées d'extraction de documents et de données à des fins alternatives de sauvegarde et de récupération. Cette application téléchargera tous les documents et/ou métadonnées enregistrés dans FileHound en fonction des filtres que vous avez choisis. Les métadonnées seront exportées dans les formats JSON et XML.
Backend construit avec: Go 1.15 Wails 1.11.0 go-sqlite3 1.14.6 go-linq 3.2
Frontend avec: Vue 2.6.11 Vuex 3.4.0 TypeScript Tailwind 1.9.6

14
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/minecraftupdater.mdx Normal file
View File

@ -0,0 +1,14 @@
# Minecraft Updater
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img
src={
require("@site/static/img/showcase/minecraft-mod-updater.webp").default
}
/>
<br />
</p>
```
[Minecraft Updater](https://github.com/Gurkengewuerz/MinecraftModUpdater) est un outil utilitaire pour mettre à jour et synchroniser les mods Minecraft pour votre base d'utilisateurs. Il a été conçu en utilisant Wails2 et React avec [antd](https://ant.design/) comme framework frontend.

14
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/modalfilemanager.mdx Normal file
View File

@ -0,0 +1,14 @@
# Modal File Manager
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img
src={require("@site/static/img/showcase/modalfilemanager.webp").default}
/>
<br />
</p>
```
[Modal File Manager](https://github.com/raguay/ModalFileManager) est un gestionnaire de fichiers à double volet utilisant des technologies web. Mon design original était basé sur NW.js et peut être trouvé [ici](https://github.com/raguay/ModalFileManager-NWjs). Cette version utilise le même code frontend basé sur Svelte (mais il a été grandement modifié depuis le départ de NW.js), mais le backend est une implémentation de [Wails 2](https://wails.io/). En utilisant cette implémentation, je n'utilise plus de commandes en ligne de commande `rm`, `cp`, etc. Il est entièrement codé en utilisant Go et fonctionne beaucoup plus rapidement que les versions précédentes.
Ce gestionnaire de fichiers est conçu autour du même principe que Vim: l'état est contrôlé par des actions via le clavier. Le nombre d'états n'est pas fixe, mais très programmable. Par conséquent, un nombre infini de configurations de clavier qui peuvent être créées et utilisées. C'est la principale différence par rapport aux autres gestionnaires de fichiers.

10
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/mollywallet.mdx Normal file
View File

@ -0,0 +1,10 @@
# Molley Wallet
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/mollywallet.webp").default} />
<br />
</p>
```
[Molly Wallet](https://github.com/grvlle/constellation_wallet/) le portefeuille officiel $DAG du Constellation Network. Cela permettra aux utilisateurs d'interagir avec le réseau Hypergraph de différentes manières, sans se limiter à la production de transactions en $DAG.

14
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/october.mdx Normal file
View File

@ -0,0 +1,14 @@
# October
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/october.webp").default} />
<br />
</p>
```
[Octobre](https://october.utf9k.net) est une petite application Wails qui rend vraiment facile d'extraire les surlignements de [Kobo eReaders](https://en.wikipedia.org/wiki/Kobo_eReader) puis de les transférer vers [Readwise](https://readwise.io).
Il a une taille relativement petite avec toutes les versions de la plate-forme pesant en moins de 10 Mo, et c'est sans activer la [compression UPX](https://upx.github.io/)!
En revanche, les précédentes tentatives de l'auteur avec Electron ont rapidement gonflé à plusieurs centaines de mégaoctets.

10
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/optimus.mdx Normal file
View File

@ -0,0 +1,10 @@
# Optimus
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/optimus.webp").default} />
<br />
</p>
```
[Optimus](https://github.com/splode/optimus) est une application d'optimisation d'image de bureau. Il supporte la conversion et la compression entre les formats d’images WebP, JPEG et PNG.

10
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/portfall.mdx Normal file
View File

@ -0,0 +1,10 @@
# Portfall
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/portfall.webp").default} />
<br />
</p>
```
[Portfall](https://github.com/rekon-oss/portfall) - Un portail de redirection de port k8 pour un accès facile à toutes les interfaces de votre instance

12
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/restic-browser.mdx Normal file
View File

@ -0,0 +1,12 @@
# Restic Browser
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img
src={require("@site/static/img/showcase/restic-browser-2.png").default}
/>
<br />
</p>
```
[Restic-Browser](https://github.com/emuell/restic-browser) - Une interface de sauvegarde simple et multiplateforme [restic](https://github.com/restic/restic) pour la navigation et la restauration de dépôts restic.

21
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/riftshare.mdx Normal file
View File

@ -0,0 +1,21 @@
# RiftShare
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/riftshare-main.webp").default} />
<br />
</p>
```
Partage de fichiers facile, sécurisé et gratuit pour tout le monde. Apprenez-en plus sur [Riftshare.app](https://riftshare.app)
## Fonctionnalités
- Partage facile et sécurisé de fichiers entre ordinateurs à la fois sur le réseau local et via Internet
- Supporte l'envoi de fichiers ou de répertoires de manière sécurisée par le protocole [magic wormhole](https://magic-wormhole.readthedocs.io/en/latest/)
- Compatible avec toutes les autres applications utilisant magic wormhole (magic-wormhole or wormhole-william CLI, wormhole-gui, etc.)
- Compression automatique de plusieurs fichiers sélectionnés à envoyer en même temps
- Animations complètes, barre de progression et support d'annulation pour l'envoi et la réception
- Sélection de fichier natif au système d'exploitation
- Ouvrir les fichiers en un seul clic une fois reçus
- Mise à jour automatique - ne vous inquiétez pas d'avoir la dernière version!

10
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/scriptbar.mdx Normal file
View File

@ -0,0 +1,10 @@
# ScriptBar
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/scriptbar.webp").default} />
<br />
</p>
```
[Barre de scripts](https://GitHub.com/raguay/ScriptBarApp) est un programme pour afficher la sortie du serveur [Node-Red](https://nodered.org) intégré dans l'application [EmailIt](https://GitHub.com/raguay/EmailIt). Il affiche également la sortie des scripts sur votre système. ScriptBar ne les met pas dans la barre de menus, mais les a tous dans une fenêtre convenable pour une visualisation facile. Vous pouvez avoir plusieurs onglets pour voir plusieurs choses différentes. Vous pouvez également conserver les liens vers vos sites Web les plus visités.

10
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/surge.mdx Normal file
View File

@ -0,0 +1,10 @@
# Surge
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/surge.png").default} />
<br />
</p>
```
[Surge](https://getsurge.io/) est une application de partage de fichiers p2p conçue pour utiliser les technologies blockchain afin d'activer les transferts de fichiers 100 % anonymes. Surge est chiffré de bout en bout, décentralisé et open source.

10
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/wally.mdx Normal file
View File

@ -0,0 +1,10 @@
# Wally
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/wally.webp").default} />
<br />
</p>
```
[Wally](https://ergodox-ez.com/pages/wally) est le flasheur officiel du firmware pour les claviers [Ergodox](https://ergodox-ez.com/). C'est un excellent exemple de ce que vous pouvez réaliser avec Wails : la capacité de combiner la puissance de Go et les riches outils graphiques du monde du développement web.

10
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/wombat.mdx Normal file
View File

@ -0,0 +1,10 @@
# Wombat
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/wombat.webp").default} />
<br />
</p>
```
[Wombat](https://github.com/rogchap/wombat) est un client gRPC multi-plateforme.

10
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/ytd.mdx Normal file
View File

@ -0,0 +1,10 @@
# Ytd
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/ytd.webp").default} />
<br />
</p>
```
[Ytd](https://github.com/marcio199226/ytd/tree/v2-wails) est une application pour télécharger des pistes depuis youtube, créer des listes de lecture hors ligne et les partager avec vos amis, vos amis seront en mesure de lire vos playlists ou de les télécharger pour l'écoute hors ligne, a un lecteur intégré.

56
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/community/templates.mdx Normal file
View File

@ -0,0 +1,56 @@
---
sidebar_position: 1
---
# Modèles
Cette page sert de liste pour les modèles supportés par la communauté. Veuillez soumettre une PR (cliquez sur `Modifier cette page` en bas) pour inclure vos modèles. Pour construire votre propre modèle, veuillez consulter le guide [Modèles](../guides/templates.mdx).
Pour utiliser ces modèles, exécutez `wails init -n "Votre nom de projet" -t [le lien ci-dessous[@version]]`
S'il n'y a pas de suffixe de version, la branche principale du modèle de code sera alors utilisé par défaut. S'il y a un suffixe de version, le modèle de code correspondant au tag de cette version sera utilisé.
Exemple : `wails init -n "Votre nom de projet" -t https://github.com/misitebao/wails-template-vue`
:::warning Attention
**Le projet Wails n'entretient pas, et n'est pas responsable des modèles de tierces parties!**
Si vous n'êtes pas sûr d'un modèle, inspectez `package.json` et `wails.json` pour savoir quels scripts sont exécutés et quels paquets sont installés.
:::
## Vue
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - Modèle de Wails basé sur Vue (TypeScript intégré, thème sombre, internationalisation, routage de page unique, TailwindCSS)
- [wails-vite-vue-ts](https://github.com/codydbentley/wails-vite-vue-ts) - Vue 3 TypeScript avec Vite (et instructions pour ajouter des fonctionnalités)
- [wails-vite-vue-the-works](https://github.com/codydbentley/wails-vite-vue-the-works) - Vue 3 TypeScript avec Vite, Vuex, Vue Router, Sass, et ESLint + Prettier
- [wails-template-quasar-js](https://github.com/sgosiaco/wails-template-quasar-js) - Un modèle utilisant JavaScript + Quasar V2 (Vue 3, Vite, Sass, Pinia, ESLint, Prettier)
- [wails-template-quasar-ts](https://github.com/sgosiaco/wails-template-quasar-ts) - Un modèle utilisant TypeScript + Quasar V2 (Vue 3, Vite, Sass, Pinia, ESLint, Prettier, Composition API avec &lt;script setup&gt;)
## Angular
- [wails-angular-template](https://github.com/TAINCER/wails-angular-template) - Angular avec TypeScript, Sass, rechargement à chaud, découpage dynamique de code et i18n
## React
- [wails-react-template](https://github.com/AlienRecall/wails-react-template) - Un modèle utilisant reactjs
- [wails-react-template](https://github.com/flin7/wails-react-template) - Un modèle minimal pour React qui supporte le développement en direct
- [wails-template-nextjs](https://github.com/LGiki/wails-template-nextjs) - Un modèle utilisant Next.js et TypeScript
- [wails-vite-react-ts-tailwind-template](https://github.com/hotafrika/wails-vite-react-ts-tailwind-template) - Un modèle pour React + TypeScript + Vite + TailwindCSS
## Svelte
- [wails-svelte-template](https://github.com/raitonoberu/wails-svelte-template) - Un modèle utilisant Svelte
- [wails-vite-svelte-template](https://github.com/BillBuilt/wails-vite-svelte-template) - Un modèle utilisant Svelte et Vite
- [wails-vite-svelte-tailwind-template](https://github.com/BillBuilt/wails-vite-svelte-tailwind-template) - Un modèle utilisant Svelte et Vite avec TailwindCSS v3
- [wails-sveltekit-template](https://github.com/h8gi/wails-sveltekit-template) - Un modèle utilisant SvelteKit
## Elm
- [wails-elm-template](https://github.com/benjamin-thomas/wails-elm-template) - Développez votre application GUI avec de la programmation fonctionnelle et une configuration de développement en direct :tada: :rocket:
- [wails-template-elm-tailwind](https://github.com/rnice01/wails-template-elm-tailwind) - Combine les puissances :muscle: d'Elm + Tailwind CSS + Wails ! Rechargement automatique pris en charge.
## Pure JavaScript (Vanilla)
- [wails-pure-js-template](https://github.com/KiddoV/wails-pure-js-template) - Un modèle avec rien que du JavaScript, du HTML et du CSS de base

22
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/gettingstarted/building.mdx Normal file
View File

@ -0,0 +1,22 @@
---
sidebar_position: 6
---
# Compiler votre projet
À partir du répertoire du projet, exécutez `wails build`. Cela compilera votre projet et sauvegardera le binaire prêt à la production dans le répertoire `build/bin`.
Si vous exécutez le binaire, vous devriez voir l'application par défaut :
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/defaultproject.webp").default}
width="50%"
class="screenshot"
/>
</div>
<br />
```
Pour plus de détails sur les options de compilation, veuillez vous référer à la [documentation du CLI](../reference/cli.mdx#build).

16
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/gettingstarted/development.mdx Normal file
View File

@ -0,0 +1,16 @@
---
sidebar_position: 5
---
# Développez votre application
Vous pouvez exécuter votre application en mode développement en exécutant `wails dev` à partir du répertoire de votre projet. Cela fera les choses suivantes :
- Construire votre application et l'exécuter
- Lier votre code Go au frontend pour qu'il puisse être appelé à partir de JavaScript
- En utilisant la puissance de [Vite](https://vitejs.dev/), surveillera les modifications dans vos fichiers Go et reconstruira / ré-exécutera en cas de changement
- Mettra en place un [serveur web](http://localhost:34115) qui servira votre application via un navigateur. Cela vous permet d'utiliser les extensions de votre navigateur préféré. Vous pouvez même appeler votre code Go depuis la console
Pour commencer, exécutez `wails dev` dans le répertoire du projet. Plus d'informations à ce sujet peuvent être trouvées [ici](../reference/cli.mdx#dev).
Prochainement : Tutoriel

130
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/gettingstarted/firstproject.mdx Normal file
View File

@ -0,0 +1,130 @@
---
sidebar_position: 2
---
# Créer un projet
## Génération de projet
Maintenant que le CLI est installé, vous pouvez générer un nouveau projet en utilisant la commande `wails init`.
Choisissez votre framework favori :
```mdx-code-block
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
<Tabs
defaultValue="Svelte"
values={[
{label: "Svelte", value: "Svelte"},
{label: "React", value: "React"},
{label: "Vue", value: "Vue"},
{label: "Preact", value: "Preact"},
{label: "Lit", value: "Lit"},
{label: "Vanilla", value: "Vanilla"},
]}
>
<TabItem value="Svelte">
Générer un projet <a href={"https://svelte.dev/"}>Svelte</a> utilisant JavaScript avec:<br/><br/>
wails init -n myproject -t svelte
Si vous préférez utiliser TypeScript:<br/>
wails init -n myproject -t svelte-ts
</TabItem>
<TabItem value="React">
Générer un projet <a href={"https://reactjs.org/"}>React</a> utilisant JavaScript avec :<br/><br/>
wails init -n myproject -t react
Si vous préférez utiliser TypeScript:<br/>
wails init -n myproject -t react-ts
</TabItem>
<TabItem value="Vue">
Générer un projet <a href={"https://vuejs.org/"}>Vue</a> utilisant JavaScript avec:<br/><br/>
wails init -n myproject -t vue
Si vous préférez TypeScript:<br/>
wails init -n myproject -t vue-ts
</TabItem>
<TabItem value="Preact">
Générer un projet <a href={"https://preactjs.com/"}>Preact</a> utilisant JavaScript avec:<br/><br/>
wails init -n myproject -t preact
Si vous préférez TypeScript:<br/>
wails init -n myproject -t preact-ts
</TabItem>
<TabItem value="Lit">
Générer un projet <a href={"https://lit.dev/"}>Lit</a> utilisant JavaScript avec:<br/><br/>
wails init -n myproject -t lit
Si vous préférez TypeScript:<br/>
wails init -n myproject -t lit-ts
</TabItem>
<TabItem value="Vanilla">
Générer un projet Vanilla utilisant JavaScript avec :<br/><br/>
wails init -n myproject -t vanilla
Si vous préférez TypeScript:<br/>
wails init -n myproject -t vanilla-ts
</TabItem>
</Tabs>
```
<hr />
Il y a aussi [des modèles créés par la communauté](../community/templates.mdx) qui sont disponibles et qui offrent différentes possibilités.
Pour voir les autres options disponibles, vous pouvez exécuter `wails init -help`. Plus de détails peuvent être trouvés dans la [documentation du CLI](../reference/cli.mdx#init).
## Structure du projet
Les projets Wails ont la structure suivante:
```
.
├── build/
│ ├── appicon.png
│ ├── darwin/
│ └── windows/
├── frontend/
├── go.mod
├── go.sum
├── main.go
└── wails.json
```
### Récapitulatif de la structure du projet
- `/main.go` - L'application principale
- `/frontend/` - Fichiers de la partie frontend
- `/build/` - Répertoire de construction du projet
- `/build/appicon.png` - L'icône de l'application
- `/build/darwin/` - Fichiers spécifiques pour Mac
- `/build/windows/` - Fichiers spécifiques pour Windows
- `/wails.json` - La configuration du projet
- `/go.mod` - Le fichier du module Go
- `/go.sum` - Le checksum du fichier du module Go
Le répertoire `frontend` n'a rien de spécifique à Wails et n'importe quel outil de frontend peut être utilisé.
Le répertoire `build` est utilisé pendant le processus de compilation. Ces fichiers peuvent être mis à jour pour personnaliser vos builds. Si fichiers sont supprimés du répertoire de compilation, les versions par défaut seront régénérées.
Le nom du module par défaut dans `go.mod` est "changeme". Vous devriez changer cela pour quelque chose de plus approprié.

90
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/gettingstarted/installation.mdx Normal file
View File

@ -0,0 +1,90 @@
---
sidebar_position: 1
---
# Installation
## Plates-formes Prises en charge
- Windows 10/11 AMD64/ARM64
- MacOS 10.13+ AMD64
- MacOS 11.0+ ARM64
- Linux AMD64/ARM64
## Dépendances
Wails a un certain nombre de dépendances communes qui sont nécessaires avant l'installation :
- Go 1.18+
- NPM (Node 15+)
### Go
Télécharger Go à partir de la [Page de téléchargement](https://go.dev/dl/).
Assurez-vous que vous suivez les instructions officielles de [l'installation de Go](https://go.dev/doc/install). Vous devrez également vous assurer que votre variable d'environnement `PATH` inclut également le chemin vers votre répertoire `~/go/bin`. Redémarrez votre terminal et effectuez les vérifications suivantes :
- Vérifiez que Go est installé correctement : `go version`
- Vérifiez que "~/go/bin" est dans votre variable PATH : `echo $PATH | grep go/bin`
### NPM
Téléchargez le NPM à partir de la [page de téléchargement de Node](https://nodejs.org/en/download/). Il est préférable d'utiliser la dernière version car c'est avec celle-là que nous effectuons nos tests.
Exécutez `npm --version` pour vérifier.
## Dépendances spécifiques aux plateformes
Vous devrez également installer des dépendances spécifiques liés à la plateforme que vous utilisez :
```mdx-code-block
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
<Tabs
defaultValue="Windows"
values={[
{ label: "Windows", value: "Windows" },
{ label: "MacOS", value: "MacOS" },
{ label: "Linux", value: "Linux" },
]}
>
<TabItem value="MacOS">
Wails a besoin que les outils de command line xocde soient installés. Cela peut être fait
en exécutant <code>xcode-select --install</code>.
</TabItem>
<TabItem value="Windows">
Wails a besoin que <a href="https://developer.microsoft.com/en-us/microsoft-edge/webview2/">WebView2</a> runtime soit installé. Certaines installations de Windows auront déjà installé cette fonctionnalité. Vous pouvez vérifier en utilisant la commande <code>wails doctor</code>.
</TabItem>
<TabItem value={"Linux"}>
Linux a besoin de <code>gcc</code> build tools plus <code>libgtk3</code> et <code>libwebkit</code>. Plutôt que de lister une tonne de commandes pour différentes distributions, Wails peut essayer de déterminer ce que sont les commandes d'installation pour votre distribution spécifique. Exécutez <code>wails doctor</code> après l'installation pour voir de quelles dépendances vous avez besoin. Si votre gestionnaire de distribution/paquet n'est pas pris en charge, veuillez consulter le guide <a href={"/docs/guides/linux-distro-support"}>Ajouter une distribution Linux</a>.
</TabItem>
</Tabs>
```
## Dépendances optionnelles
- [UPX](https://upx.github.io/) pour compresser vos applications.
- [NSIS](https://wails.io/docs/guides/windows-installer/) pour générer des installateurs Windows.
## Installer Wails
Exécutez `go go install github.com/wailsapp/wails/v2/cmd/wails@latest` pour installer le CLI.
Note: Si vous obtenez une erreur similaire à ceci:
```shell
....\Go\pkg\mod\github.com\wailsapp\wails\v2@v2.1.0\pkg\templates\templates.go:28:12: pattern all:ides/*: no matching files found
```
vérifiez que vous avez installé Go 1.18+ :
```shell
go version
```
## Vérification du système
Exécuter `wails doctor` qui vérifiera si vous avez les bonnes dépendances installées. Si ce n'est pas le cas, il vous conseillera sur ce qui manque et vous aidera à corriger tout problème.
## La commande `wails` semble manquer ?
Si votre système signale que la commande `wails` est manquante, assurez-vous que vous avez suivi le guide d'installation correctement. Normalement, cela signifie que le répertoire `go/bin` du répertoire racine de votre utilisateur n'est pas dans la variable d'environnement `PATH` . Vous devrez également normalement fermer et réouvrir toutes les commandes ouvertes afin que les modifications apportées à l'environnement par l'installateur soient reflétées dans l'invite de commande.

14
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/angular.mdx Normal file
View File

@ -0,0 +1,14 @@
# Angular
Bien que Wails n'ait pas de modèle Angular, il est possible d'utiliser Angular avec Wails.
## Dev Mode
Pour que le mode développeur fonctionne avec Angular, vous devez ajouter ce qui suit à votre fichier `wails.json`:
```json
"frontend:build": "npx ng build",
"frontend:install": "npm install",
"frontend:dev:watcher": "npx ng serve",
"frontend:dev:serverUrl": "http://localhost:4200",
```

194
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/application-development.mdx Normal file
View File

@ -0,0 +1,194 @@
# Développement d'applications
Il n'y a pas de règles gravées dans le marbre pour le développement d'applications avec Wails, mais il y a quelques lignes directrices de base.
## Configuration de l'application
The pattern used by the default templates are that `main.go` is used for configuring and running the application, whilst `app.go` is used for defining the application logic.
The `app.go` file will define a struct that has 2 methods which act as hooks into the main application:
```go title="app.go"
type App struct {
ctx context.Context
}
func NewApp() *App {
return &App{}
}
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}
func (a *App) shutdown(ctx context.Context) {
}
```
- The startup method is called as soon as Wails allocates the resources it needs and is a good place for creating resources, setting up event listeners and anything else the application needs at startup. It is given a `context.Context` which is usually saved in a struct field. This context is needed for calling the [runtime](../reference/runtime/intro.mdx). If this method returns an error, the application will terminate. In dev mode, the error will be output to the console.
- The shutdown method will be called by Wails right at the end of the shutdown process. This is a good place to deallocate memory and perform any shutdown tasks.
The `main.go` file generally consists of a single call to `wails.Run()`, which accepts the application configuration. The pattern used by the templates is that before the call to `wails.Run()`, an instance of the struct we defined in `app.go` is created and saved in a variable called `app`. This configuration is where we add our callbacks:
```go {3,9,10} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
})
if err != nil {
log.Fatal(err)
}
}
```
More information on application lifecycle hooks can be found [here](../howdoesitwork.mdx#application-lifecycle-callbacks).
## Binding Methods
It is likely that you will want to call Go methods from the frontend. This is normally done by adding public methods to the already defined struct in `app.go`:
```go {16-18} title="app.go"
type App struct {
ctx context.Context
}
func NewApp() *App {
return &App{}
}
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}
func (a *App) shutdown(ctx context.Context) {
}
func (a *App) Greet(name string) string {
return fmt.Sprintf("Hello %s!", name)
}
```
In the main application configuration, the `Bind` key is where we can tell Wails what we want to bind:
```go {11-13} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
```
This will bind all public methods in our `App` struct (it will never bind the startup and shutdown methods).
### Dealing with context when binding multiple structs
If you want to bind methods for multiple structs but want each struct to keep a reference to the context so that you can use the runtime functions, a good pattern is to pass the context from the `OnStartup` method to your struct instances :
```go
func main() {
app := NewApp()
otherStruct := NewOtherStruct()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: func(ctx context.Context){
app.SetContext(ctx)
otherStruct.SetContext(ctx)
},
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
otherStruct
},
})
if err != nil {
log.Fatal(err)
}
}
```
More information on Binding can be found [here](../howdoesitwork.mdx#method-binding).
## Application Menu
Wails supports adding a menu to your application. This is done by passing a [Menu](../reference/menus.mdx#menu) struct to application config. It's common to use a method that returns a Menu, and even more common for that to be a method on the `App` struct used for the lifecycle hooks.
```go {11} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Menu: app.menu(),
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
```
## Assets
The great thing about the way Wails v2 handles assets is that it doesn't! The only thing you need to give Wails is an `embed.FS`. How you get to that is entirely up to you. You can use vanilla html/css/js files like the vanilla template. You could have some complicated build system, it doesn't matter.
When `wails build` is run, it will check the `wails.json` project file at the project root. There are 2 keys in the project file that are read:
- "frontend:install"
- "frontend:build"
The first, if given, will be executed in the `frontend` directory to install the node modules. The second, if given, will be executed in the `frontend` directory to build the frontend project.
If these 2 keys aren't given, then Wails does absolutely nothing with the frontend. It is only expecting that `embed.FS`.
### AssetsHandler
A Wails v2 app can optionally define a `http.Handler` in the `options.App`, which allows hooking into the AssetServer to create files on the fly or process POST/PUT requests. GET requests are always first handled by the `assets` FS. If the FS doesn't find the requested file the request will be forwarded to the `http.Handler` for serving. Any requests other than GET will be directly processed by the `AssetsHandler` if specified. It's also possible to only use the `AssetsHandler` by specifiy `nil` as the `Assets` option.
## Built in Dev Server
Running `wails dev` will start the built in dev server which will start a file watcher in your project directory. By default, if any file changes, wails checks if it was an application file (default: `.go`, configurable with `-e` flag). If it was, then it will rebuild your application and relaunch it. If the changed file was in the assets, it will issue a reload after a short amount of time.
The dev server uses a technique called "debouncing" which means it doesn't reload straight away, as there may be multiple files changed in a short amount of time. When a trigger occurs, it waits for a set amount of time before issuing a reload. If another trigger happens, it resets to the wait time again. By default this value is `100ms`. If this value doesn't work for your project, it can be configured using the `-debounce` flag. If used, this value will be saved to your project config and become the default.
## External Dev Server
Some frameworks come with their own live-reloading server, however they will not be able to take advantage of the Wails Go bindings. In this scenario, it is best to run a watcher script that rebuilds the project into the build directory, which Wails will be watching. For an example, see the default svelte template that uses [rollup](https://rollupjs.org/guide/en/). For [create-react-app](https://create-react-app.dev/), it's possible to use [this script](https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd) to achieve a similar result.
## Go Module
The default Wails templates generate a `go.mod` file that contains the module name "changeme". You should change this to something more appropriate after project generation.

136
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/dynamic-assets.mdx Normal file
View File

@ -0,0 +1,136 @@
# Dynamic Assets
If you want to load or generate assets for your frontend dynamically, you can achieve that using the [AssetsHandler](../reference/options#assetshandler) option. The AssetsHandler is a generic `http.Handler` which will be called for any non GET request on the assets server and for GET requests which can not be served from the bundled assets because the file is not found.
By installing a custom AssetsHandler, you can serve your own assets using a custom asset server.
## Example
In our example project, we will create a simple assets handler which will load files off disk:
```go title=main.go {16-35,49}
package main
import (
"embed"
"fmt"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
"net/http"
"os"
"strings"
)
//go:embed all:frontend/dist
var assets embed.FS
type FileLoader struct {
http.Handler
}
func NewFileLoader() *FileLoader {
return &FileLoader{}
}
func (h *FileLoader) ServeHTTP(res http.ResponseWriter, req *http.Request) {
var err error
requestedFilename := strings.TrimPrefix(req.URL.Path, "/")
println("Requesting file:", requestedFilename)
fileData, err := os.ReadFile(requestedFilename)
if err != nil {
res.WriteHeader(http.StatusBadRequest)
res.Write([]byte(fmt.Sprintf("Could not load file %s", requestedFilename)))
}
res.Write(fileData)
}
func main() {
// Create an instance of the app structure
app := NewApp()
// Create application with options
err := wails.Run(&options.App{
Title: "helloworld",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
Handler: NewFileLoader(),
},
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 255},
OnStartup: app.startup,
Bind: []interface{}{
app,
},
})
if err != nil {
println("Error:", err)
}
}
```
When we run the application in dev mode using `wails dev`, we will see the following output:
```
DEB | [ExternalAssetHandler] Loading 'http://localhost:3001/favicon.ico'
DEB | [ExternalAssetHandler] Loading 'http://localhost:3001/favicon.ico' failed, using AssetHandler
Requesting file: favicon.ico
```
As you can see, the assets handler is called when the default assets server is unable to serve the `favicon.ico` file.
If you right click the main application and select "inspect" to bring up the devtools, you can test this feature out by typing the following into the console:
```
let response = await fetch('does-not-exist.txt');
```
This will generate an error in the devtools. We can see that the error is what we expect, returned by our custom assets handler:
```mdx-code-block
<p className="text--center">
<img
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
/>
</p>
```
However, if we request `go.mod`, we will see the following output:
```mdx-code-block
<p className="text--center">
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
</p>
```
This technique can be used to load images directly into the page. If we updated our default vanilla template and replaced the logo image:
```html
<img id="logo" class="logo" />
```
with:
```html
<img src="build/appicon.png" style="width: 300px" />
```
Then we would see the following:
```mdx-code-block
<p className="text--center">
<img
src={require("@site/static/img/assetshandler-image.webp").default}
style={{ width: "75%" }}
/>
</p>
```
:::warning
Exposing your filesystem in this way is a security risk. It is recommended that you properly manage access to your filesystem.
:::

87
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/frameless.mdx Normal file
View File

@ -0,0 +1,87 @@
# Frameless Applications
Wails supports application that have no frames. This can be achieved by using the [frameless](../reference/options.mdx#frameless) field in [Application Options](../reference/options.mdx#application-options).
Wails offers a simple solution for dragging the window: Any HTML element that has the CSS style `--wails-draggable:drag` will act as a "drag handle". This property applies to all child elements. If you need to indicate that a nested element should not drag, then use the attribute '--wails-draggable:no-drag' on that element.
```html
<html>
<head>
<link rel="stylesheet" href="/main.css" />
</head>
<body style="--wails-draggable:drag">
<div id="logo"></div>
<div id="input" style="--wails-draggable:no-drag">
<input id="name" type="text" />
<button onclick="greet()">Greet</button>
</div>
<div id="result"></div>
<script src="/main.js"></script>
</body>
</html>
```
For some projects, using a CSS variable may not be possible due to dynamic styling. In this case, you can use the `CSSDragProperty` and `CSSDragValue` application options to define a property and value that will be used to indicate draggable regions:
```go title=main.go
package main
import (
"embed"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)
//go:embed all:frontend/dist
var assets embed.FS
func main() {
// Create an instance of the app structure
app := NewApp()
// Create application with options
err := wails.Run(&options.App{
Title: "alwaysontop",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
},
Frameless: true,
CSSDragProperty: "widows",
CSSDragValue: "1",
Bind: []interface{}{
app,
},
})
if err != nil {
println("Error:", err)
}
}
```
```html title=index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>alwaysontop</title>
</head>
<body style="widows: 1">
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>
</html>
```
:::info Fullscreen
If you allow your application to go fullscreen, this drag functionality will be disabled.
:::

72
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/frontend.mdx Normal file
View File

@ -0,0 +1,72 @@
# Frontend
## Script Injection
When Wails serves your `index.html`, by default, it will inject 2 script entries into the `<body>` tag to load `/wails/ipc.js` and `/wails/runtime.js`. These files install the bindings and runtime respectively.
The code below shows where these are injected by default:
```html
<html>
<head>
<title>injection example</title>
<link rel="stylesheet" href="/main.css" />
<!-- <script src="/wails/ipc.js"></script> -->
<!-- <script src="/wails/runtime.js"></script> -->
</head>
<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off" />
<button class="btn" onclick="greet()">Greet</button>
</div>
<script src="/main.js"></script>
</body>
</html>
```
### Overriding Default Script Injection
To provide more flexibility to developers, there is a meta tag that may be used to customise this behaviour:
```html
<meta name="wails-options" content="[options]" />
```
The options are as follows:
| Value | Description |
| ------------------- | ------------------------------------------------ |
| noautoinjectruntime | Disable the autoinjection of `/wails/runtime.js` |
| noautoinjectipc | Disable the autoinjection of `/wails/ipc.js` |
| noautoinject | Disable all autoinjection of scripts |
Multiple options may be used provided they are comma seperated.
This code is perfectly valid and operates the same as the autoinjection version:
```html
<html>
<head>
<title>injection example</title>
<meta name="wails-options" content="noautoinject" />
<link rel="stylesheet" href="/main.css" />
</head>
<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off" />
<button class="btn" onclick="greet()">Greet</button>
</div>
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
<script src="/main.js"></script>
</body>
</html>
```

127
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/ides.mdx Normal file
View File

@ -0,0 +1,127 @@
# IDEs
Wails aims to provide a great development experience. To that aim, we now support generating IDE specific configuration to provide smoother project setup.
Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but aim to support other IDEs such as Goland.
## Visual Studio Code
```mdx-code-block
<p className="text--center">
<img
src={require("@site/static/img/vscode.webp").default}
style={{ width: "75%" }}
/>
</p>
```
When generating a project using the `-ide vscode` flags, IDE files will be created alongside the other project files. These files are placed into the `.vscode` directory and provide the correct configuration for debugging your application.
The 2 files generated are `tasks.json` and `launch.json`. Below are the files generated for the default vanilla project:
```json title="tasks.json"
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}"
},
"command": "go",
"args": [
"build",
"-tags",
"dev",
"-gcflags",
"all=-N -l",
"-o",
"build/bin/myproject.exe"
]
}
]
}
```
```json title="launch.json"
{
"version": "0.2.0",
"configurations": [
{
"name": "Wails: Debug myproject",
"type": "go",
"request": "launch",
"mode": "exec",
"program": "${workspaceFolder}/build/bin/myproject.exe",
"preLaunchTask": "build",
"cwd": "${workspaceFolder}",
"env": {}
}
]
}
```
### Configuring the install and build steps
The `tasks.json` file is simple for the default project as there is no `npm install` or `npm run build` step needed. For projects that have a frontend build step, such as the svelte template, we would need to edit `tasks.json` to add the install and build steps:
```json title="tasks.json"
{
"version": "2.0.0",
"tasks": [
{
"label": "npm install",
"type": "npm",
"script": "install",
"options": {
"cwd": "${workspaceFolder}/frontend"
},
"presentation": {
"clear": true,
"panel": "shared",
"showReuseMessage": false
},
"problemMatcher": []
},
{
"label": "npm run build",
"type": "npm",
"script": "build",
"options": {
"cwd": "${workspaceFolder}/frontend"
},
"presentation": {
"clear": true,
"panel": "shared",
"showReuseMessage": false
},
"problemMatcher": []
},
{
"label": "build",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}"
},
"command": "go",
"args": [
"build",
"-tags",
"dev",
"-gcflags",
"all=-N -l",
"-o",
"build/bin/vscode.exe"
],
"dependsOn": ["npm install", "npm run build"]
}
]
}
```
:::info Future Enhancement
In the future, we hope to generate a `tasks.json` that includes the install and build steps automatically.
:::

103
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/linux-distro-support.mdx Normal file
View File

@ -0,0 +1,103 @@
# Linux Distro Support
## Overview
Wails offers Linux support but providing installation instructions for all available distributions is an impossible task. Instead, Wails tries to determine if the packages you need to develop applications are available via your system's package manager. Currently, we support the following package managers:
- apt
- dnf
- emerge
- eopkg
- nixpkgs
- pacman
- zypper
## Adding package names
There may be circumstances where your distro uses one of the supported package managers but the package name is different. For example, you may use an Ubuntu derivative, but the package name for gtk may be different. Wails attempts to find the correct package by iterating through a list of package names. The list of packages are stored in the packagemanager specific file in the `v2/internal/system/packagemanager` directory. In our example, this would be `v2/internal/system/packagemanager/apt.go`.
In this file, the list of packages are defined by the `Packages()` method:
```go
func (a *Apt) Packages() packagemap {
return packagemap{
"libgtk-3": []*Package{
{Name: "libgtk-3-dev", SystemPackage: true, Library: true},
},
"libwebkit": []*Package{
{Name: "libwebkit2gtk-4.0-dev", SystemPackage: true, Library: true},
},
"gcc": []*Package{
{Name: "build-essential", SystemPackage: true},
},
"pkg-config": []*Package{
{Name: "pkg-config", SystemPackage: true},
},
"npm": []*Package{
{Name: "npm", SystemPackage: true},
},
"docker": []*Package{
{Name: "docker.io", SystemPackage: true, Optional: true},
},
}
}
```
Let's assume that in our linux distro, `libgtk-3` is packaged under the name `lib-gtk3-dev`. We could add support for this by adding the following line:
```go {5}
func (a *Apt) Packages() packagemap {
return packagemap{
"libgtk-3": []*Package{
{Name: "libgtk-3-dev", SystemPackage: true, Library: true},
{Name: "lib-gtk3-dev", SystemPackage: true, Library: true},
},
"libwebkit": []*Package{
{Name: "libwebkit2gtk-4.0-dev", SystemPackage: true, Library: true},
},
"gcc": []*Package{
{Name: "build-essential", SystemPackage: true},
},
"pkg-config": []*Package{
{Name: "pkg-config", SystemPackage: true},
},
"npm": []*Package{
{Name: "npm", SystemPackage: true},
},
"docker": []*Package{
{Name: "docker.io", SystemPackage: true, Optional: true},
},
}
}
```
## Adding new package managers
To add a new package manager, perform the following steps:
- Create a new file in `v2/internal/system/packagemanager` called `<pm>.go`, where `<pm>` is the name of the package manager.
- Define a struct that conforms to the package manager interface defined in `pm.go`:
```go
type PackageManager interface {
Name() string
Packages() packagemap
PackageInstalled(*Package) (bool, error)
PackageAvailable(*Package) (bool, error)
InstallCommand(*Package) string
}
```
- `Name()` should return the name of the package manager
- `Packages()` should return a `packagemap`, that provides candidate filenames for dependencies
- `PackageInstalled()` should return `true` if the given package is installed
- `PackageAvailable()` should return `true` if the given package is not installed but available for installation
- `InstallCommand()` should return the exact command to install the given package name
Take a look at the other package managers code to get an idea how this works.
:::info Remember
If you add support for a new package manager, don't forget to also update this page!
:::

18
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/linux.mdx Normal file
View File

@ -0,0 +1,18 @@
# Linux
This page has miscellaneous guides related to developing Wails applications for Linux.
## Video tag doesn't fire "ended" event
When using a video tag, the "ended" event is not fired when the video is finished playing. This is a bug in WebkitGTK, however you can use the following workaround to fix it:
```js
videoTag.addEventListener("timeupdate", (event) => {
if (event.target.duration - event.target.currentTime < 0.2) {
let ended = new Event("ended");
event.target.dispatchEvent(ended);
}
});
```
Source: [Lyimmi](https://github.com/Lyimmi) on the [discussions board](https://github.com/wailsapp/wails/issues/1729#issuecomment-1212291275)

55
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/local-development.mdx Normal file
View File

@ -0,0 +1,55 @@
# Local Development
## Overview
Wails is in constant development and new releases are regularly "tagged". This usually happens when all the newer code on `master` has been tested and confirmed working. If you need a bugfix or feature that has not yet made it to a release, it's possible to use the latest "bleeding edge" version using the following steps:
- `git clone https://github.com/wailsapp/wails`
- `cd wails/v2/cmd/wails`
- `go install`
NOTE: The directory that you cloned the project into will now be called "clonedir".
The Wails CLI will now be at the very latest version.
### Updating your project
To update projects to use the latest version of the Wails library, update the project's `go.mod` and ensure the following line is at the bottom of the file:
`replace github.com/wailsapp/wails/v2 => <clonedir>`
Example:
On Windows: `replace github.com/wailsapp/wails/v2 => C:\Users\leaan\Documents\wails-v2-beta\wails\v2`
On 'nix: `replace github.com/wailsapp/wails/v2 => /home/me/projects/wails/v2`
To revert to a stable version, run:
`go install github.com/wailsapp/wails/v2/cmd/wails@latest`
## Testing a Branch
If you want to test a branch, follow the instructions above, but ensure you switch the branch you want to test before installing:
- `git clone https://github.com/wailsapp/wails`
- `cd wails`
- `git checkout -b branch-to-test --track origin/branch-to-test`
- `cd v2/cmd/wails`
- `go install`
Make sure you [update your project](#updating-your-project) as described above.
## Testing a PR
If you want to test a PR, follow the instructions above, but ensure you fetch the PR and switch the branch before installing. Please replace `[IDofThePR]` with the ID of the PR shown on github.com:
- `git clone https://github.com/wailsapp/wails`
- `cd wails`
- `git fetch -u origin pull/[IDofThePR]/head:test/pr-[IDofThePR]`
- `git checkout test/pr-[IDofThePR]`
- `git reset --hard HEAD`
- `cd v2/cmd/wails`
- `go install`
Make sure you [update your project](#updating-your-project) as described above.

83
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/mac-appstore.mdx Normal file
View File

@ -0,0 +1,83 @@
# Mac App Store Guide
This page gives a brief overview of how to submit your Wails App to the Mac App Store.
## Prerequisites
- You will need to have an Apple Developer account. Please find more information on the [Apple Developer Program](https://developer.apple.com/support/compare-memberships/) site
- You will need to have your Certificates, Identifiers, and App created on the developer portal. More on this below
- Xcode command line tools will need to be installed on your local machine
#### Create Certificates and Identifiers
1. Go to your [Apple Developer Account](https://developer.apple.com/account/)
2. Under `Certificates, Identifiers & Profiles`, click `Identifiers` and Register a New App ID. Use the format (com.example.app)
3. Under the same page click `Certificates` and generate new Certificates for Mac App Store Distribution. Download them and import the certificates into Keychain on your local machine.
#### Create App Submission
1. Go to the [App Store Connect Site](https://appstoreconnect.apple.com/apps)
2. Register a new application and link the bundle ID that you created in the previous step
3. Populate your app with the correct screen shots, descriptions, etc. as required by Apple
4. Create a new version of your app
## Mac App Store Process
#### Enable Apple's App Sandbox
Apps submitted to the Mac App Store must run under Apple's [App Sandbox](https://developer.apple.com/app-sandboxing/). You must create an `entitlements.plist` file for this to work. The recommendation is to create this file under this path `{PROJECT_DIR}/build/darwin/entitlements.plist`.
**Example Entitlements File**
This is an example entitlements file from the [RiftShare](https://github.com/achhabra2/riftshare) app. For reference please put in the entitlements your app requires. Refer to [this site](https://developer.apple.com/documentation/bundleresources/entitlements) for more information.
```xml title="entitlements.plist"
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
<key>com.apple.security.network.server</key>
<true/>
<key>com.apple.security.files.user-selected.read-write</key>
<true/>
<key>com.apple.security.files.downloads.read-write</key>
<true/>
</dict>
</plist>
```
#### Build and Sign the App Package
The following is an example script for building and signing your app for Mac App Store submission. It assumes you are running the script from your root project directory.
Note the certificates for signing the app and signing the installer are different. Please make sure both are imported into Keychain. Find the strings in Keychain and insert them below. Populate your certificate names, and app name below. Running the following script will generate a signed `app.pkg` file in the root directory of your app.
```bash title="macappstore-build.sh"
#!/bin/bash
APP_CERTIFICATE="3rd Party Mac Developer Application: YOUR NAME (CODE)"
PKG_CERTIFICATE="3rd Party Mac Developer Installer: YOUR NAME (CODE)"
APP_NAME="YourApp"
wails build -platform darwin/universal -clean
codesign --timestamp --options=runtime -s "$APP_CERTIFICATE" -v --entitlements ./build/darwin/entitlements.plist ./build/bin/$APP_NAME.app
productbuild --sign "$PKG_CERTIFICATE" --component ./build/bin/$APP_NAME.app /Applications ./$APP_NAME.pkg
```
#### Upload App Bundle
You will need to upload the generated package file and associate it to your Application before you will be able to submit it for review.
1. Download the [Transporter App](https://apps.apple.com/us/app/transporter/id1450874784) from the Mac App Store
2. Open it and sign in with your Apple ID
3. Click the + sign and select the `APP_NAME.pkg` file that you generated in the previous step. Upload it
4. Go back to the [App Store Connect](https://appstoreconnect.apple.com/apps) site and navigate back into your app submission. Select the version that you are ready to make available on the App Store. Under `Build` select the package that you uploaded via Transporter.
That's it! You can now use the site to submit your App for review. After a few business days if all goes well you should see your App live on the Mac App Store.

95
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/manual-builds.mdx Normal file
View File

@ -0,0 +1,95 @@
# Manual Builds
The Wails CLI does a lot of heavy lifting for the project, but sometimes it's desirable to manually build your project. This document will discuss the different operations the CLI does and how this may be achieved in different ways.
## Build Process
When either `wails build` or `wails dev` are used, the Wails CLI performs a common build process:
- Install frontend dependencies
- Build frontend project
- Generate build assets
- Compile application
- [optional] Compress application
### Install frontend dependencies
#### CLI Steps
- If the `-s` flag is given, this step is skipped
- Checks `wails.json` to see if there is an install command in the key `frontend:install`
- If there isn't, it skips this step
- If there is, it checks if `package.json` exists in the frontend directory. If it doesn't exist, it skips this step
- An MD5 sum is generated from the `package.json` file contents
- It checks for the existence of `package.json.md5` and if it exists, will compare the contents of it (an MD5 sum) with the one generated to see if the contents have changed. If they are the same, this step is skipped
- If `package.json.md5` does not exist, it creates it using the generated MD5 sum
- If a build is now required, or `node_modules` does not exist, or the `-f` flag is given, the install command is executed in the frontend directory
#### Manual Steps
This step could be done from the command line or a script with `npm install`.
### Build frontend project
#### Wails CLI
- If the `-s` flag is given, this step is skipped
- Checks `wails.json` to see if there is a build command in the key `frontend:build`
- If there isn't, it skips this step
- If there is, it is executed in the frontend directory
#### Manual Steps
This step could be done from the command line or a script with `npm run build` or whatever the frontend build script is.
### Generate assets
#### Wails CLI
- If `-nopackage` flag is set, this stage is skipped
- If the `build/appicon.png` file does not exist, a default one is created
- For Windows, see [Bundling for Windows](#windows)
- If `build/windows/icon.ico` does not exist, it will create it from the `build/appicon.png` image.
##### Windows
- If `build/windows/icon.ico` does not exist, it will create it from `build/appicon.png` using icon sizes of 256, 128, 64, 48, 32 and 16. This is done using [winicon](https://github.com/leaanthony/winicon).
- If the `build/windows/<projectname>.manifest` file does not exist, it creates it from a default version.
- Compiles the application as a production build (above)
- Uses [winres](https://github.com/tc-hib/winres) to bundle the icon and manifest into a `.syso` file ready for linking.
#### Manual Steps
- Create `icon.ico` using the [winicon](https://github.com/leaanthony/winicon) CLI tool (or any other tool).
- Create / Update a `.manifest` file for your application
- Use the [winres CLI](https://github.com/tc-hib/go-winres) to generate a `.syso` file.
### Compile application
#### Wails CLI
- If the `-clean` flag is provided, the `build` directory is deleted and recreated
- For `wails dev`, the following default Go flags are used: `-tags dev -gcflags "all=-N -l"`
- For `wails build`, the following default Go flags are used: `-tags desktop,production -ldflags "-w -s"`
- On Windows, `-ldflags "-w -h -H windowsgui"`
- Additional tags passed to the CLI using `-tags` are added to the defaults
- Additional ldflags passed to the CLI using `-ldflags` are added to the defaults
- The `-o` flag is passed through
- The Go compiler specified by `-compiler` will be used for compilation
#### Manual steps
- For dev build, the minimum command would be: `go build -tags dev -gcflags "all=-N -l"`
- For production build, the minimum command would be: `go build -tags desktop,production -ldflags "-w -s -H windowsgui"`
- Ensure that you compile in the same directory as the `.syso` file
### Compress application
#### Wails CLI
- If the `-upx` flag has been given, the `upx` program will be run to compress the application with the default settings
- If `-upxflags` is also passed, these flags are used instead of the default ones
#### Manual steps
- Run `upx [flags]` manually to compress the application.

191
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/migrating.mdx Normal file
View File

@ -0,0 +1,191 @@
# Migrating from v1
## Overview
Wails v2 is a significant change from v1. This document aims to highlight the changes and the steps in migrating an existing project.
### Creating the Application
In v1, the main application is created using `wails.CreateApp`, bindings are added with `app.Bind`, then the application is run using `app.Run()`.
Example:
```go title="v1"
app := wails.CreateApp(&wails.AppConfig{
Title: "MyApp",
Width: 1024,
Height: 768,
JS: js,
CSS: css,
Colour: "#131313",
})
app.Bind(basic)
app.Run()
```
In v2, there is just a single method, `wails.Run()`, that accepts [application options](../reference/options.mdx#application-options).
```go title="v2"
err := wails.Run(&options.App{
Title: "MyApp",
Width: 800,
Height: 600,
AssetServer: &assetserver.Options{
Assets: assets,
},
Bind: []interface{}{
basic,
},
})
```
### Binding
In v1, it was possible to bind both arbitrary functions and structs. In v2, this has been simplified to only binding structs. The struct instances that were previously passed to the `Bind()` method in v1, are now specified in the `Bind` field of the [application options](../reference/options.mdx#application-options):
```go title="v1"
app := wails.CreateApp(/* options */)
app.Bind(basic)
```
```go title="v2"
err := wails.Run(&options.App{
/* other options */
Bind: []interface{}{
basic,
},
})
```
In v1, bound methods were available to the frontend at `window.backend`. This has changed to `window.go`.``
### Application Lifecycle
In v1, there were 2 special methods in a bound struct: `WailsInit()` and `WailsShutdown()`. These have been replaced with 3 lifecycle hooks as part of the [application options](../reference/options.mdx#application-options):
- [OnStartup](../reference/options.mdx#onstartup)
- [OnShutdown](../reference/options.mdx#onshutdown)
- [OnDomReady](../reference/options.mdx#ondomready)
Note: [OnDomReady](../reference/options.mdx#ondomready) replaces the `wails:ready` system event in v1.
These methods can be standard functions, but a common practice is to have them part of a struct:
```go title="v2"
basic := NewBasicApp()
err := wails.Run(&options.App{
/* Other Options */
OnStartup: basic.startup,
OnShutdown: basic.shutdown,
OnDomReady: basic.domready,
})
...
type Basic struct {
ctx context.Context
}
func (b *Basic) startup(ctx context.Context) {
b.ctx = ctx
}
...
```
### Runtime
The runtime in v2 is much richer than v1 with support for menus, window manipulation and better dialogs. The signature of the methods has changed slightly - please refer the the [Runtime Reference](../reference/runtime/intro.mdx).
In v1, the [runtime](../reference/runtime/intro.mdx) was available via a struct passed to `WailsInit()`. In v2, the runtime has been moved out to its own package. Each method in the runtime takes the `context.Context` that is passed to the [OnStartup](../reference/options.mdx#onstartup) method.
```go title="Runtime Example"
package main
import "github.com/wailsapp/wails/v2/pkg/runtime"
type Basic struct {
ctx context.Context
}
// startup is called at application startup
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
runtime.LogInfo(ctx, "Application Startup called!")
}
```
### Assets
The _biggest_ change in v2 is how assets are handled.
In v1, assets were passed via 2 application options:
- `JS` - The application's JavaScript
- `CSS` - The application's CSS
This meant that the responsibility of generating a single JS and CSS file was on the developer. This essentially required the use of complicated packers such as webpack.
In v2, Wails makes no assumptions about your frontend assets, just like a webserver. All of your application assets are passed to the application options as an `embed.FS`.
**This means there is no requirement to bundle your assets, encode images as Base64 or attempt the dark art of bundler configuration to use custom fonts**.
At startup, Wails will scan the given `embed.FS` for `index.html` and use its location as the root path for all the other application assets - just like a webserver would.
Example: An application has the following project layout. All final assets are placed in the `frontend/dist` directory:
```shell
.
├── build/
├── frontend/
│ └── dist/
│ ├── index.html
│ ├── main.js
│ ├── main.css
│ └── logo.svg
├── main.go
└── wails.json
```
Those assets may be used by the application by simply creating an `embed.FS`:
```go title="Assets Example"
//go:embed all:frontend/dist
var assets embed.FS
func main() {
err := wails.Run(&options.App{
/* Other Options */
AssetServer: &assetserver.Options{
Assets: assets,
},
})
}
```
Of course, bundlers can be used if you wish to. The only requirement is to pass the final application assets directory to Wails using an `embed.FS` in the `Assets` key of the [application options](../reference/options.mdx#application-options).
### Project Configuration
In v1, the project configuration was stored in the `project.json` file in the project root. In v2, the project configuration is stored in the `wails.json` file in the project root.
The format of the file is slightly different. Here is a comparison:
<p align="center">
| v1 | v2 | Notes |
| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name | |
| description | | Removed |
| author / name | author / name | |
| author / email | author / email | |
| version | version | |
| binaryname | outputfilename | Changed |
| frontend / dir | | Removed |
| frontend / install | frontend:install | Changed |
| frontend / build | frontend:build | Changed |
| frontend / bridge | | Removed |
| frontend / serve | | Removed |
| tags | | Removed |
| | wailsjsdir | The directory to generate wailsjs modules |
| | assetdir | The directory of the compiled frontend assets for `dev` mode. This is normally inferred and could be left empty. |
| | reloaddirs | Comma separated list of additional directories to watch for changes and to trigger reloads in `dev` mode. This is only needed for some more advanced asset configurations. |
</p>

25
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/mouse-buttons.mdx Normal file
View File

@ -0,0 +1,25 @@
# Mouse Buttons
The Wails runtime intercepts mouse clicks to determine whether a frameless window needs resizing or a window needs to be moved. It has been asked how to detect when a mouse click has occurred, because `window.onclick` doesn't report the mouse buttons correctly. The following code shows how to detect mouse clicks:
```javascript
window.addEventListener("mousedown", handleMouseButtonDown);
function handleMouseButtonDown(event) {
if (event.button === 0) {
// left mouse button
} else if (event.button === 1) {
// middle mouse button
} else if (event.button === 2) {
// right mouse button
} else if (event.button === 3) {
// back mouse button
} else if (event.button === 4) {
// forward mouse button
} else {
// other mouse button
}
}
```
Reference: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

40
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/obfuscated.mdx Normal file
View File

@ -0,0 +1,40 @@
# Obfuscated Builds
Wails includes support for obfuscating your application using [garble](https://github.com/burrowers/garble).
To produce an obfuscated build, you can use the `-obfuscate` flag with the `wails build` command:
```bash
wails build -obfuscated
```
To customise the obfuscation settings, you can use the `-garbleargs` flag:
```bash
wails build -obfuscated -garbleargs "-literals -tiny -seed=myrandomseed"
```
These settings may be persisted in your [project config](../reference/project-config).
## How it works
In a standard build, all bound methods are available in the frontend under the `window.go` variable. When these methods are called, the corresponding backend method is called using the fully qualified function name. When using an obfuscated build, methods are bound using an ID instead of a name. The bindings generated in the `wailsjs` directory use these IDs to call the backend functions.
:::note
To ensure that your application will work in obfuscated mode, you must use the generated bindings under the `wailsjs` directory in your application.
:::
## Example
Importing the "Greet" method from the bindings like this:
```js
import { Greet } from "../../wailsjs/go/main/App";
// snip
Greet("World");
```
will ensure that the method will work correctly in obfuscated mode, as the bindings will be regenerated with IDs and the call mechanism updated.

10
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/overscroll.mdx Normal file
View File

@ -0,0 +1,10 @@
# Overscroll
[Overscroll](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) is the "bounce effect" you sometimes get when you scroll beyond a page's content boundaries. This is common in mobile apps. This can be disabled using CSS:
```css
html {
height: 100%;
overflow: hidden;
}
```

0
website/versioned_docs/version-v2.2.0/guides/routing.mdx → website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/routing.mdx
View File

387
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/signing.mdx Normal file
View File

@ -0,0 +1,387 @@
# Code Signing
This is a guide on how you can sign your binaries generated with Wails on MacOS and Windows. The guide will target CI environments, more specifically GitHub Actions.
## Windows
First off you need a code signing certificate. If you do not already have one, Microsoft's info page lists some providers [here](https://docs.microsoft.com/en-us/windows-hardware/drivers/dashboard/get-a-code-signing-certificate). Please note that an EV certificate is not required unless you need to write kernel-level software such as device drivers. For signing your Wails app, a standard code signing certificate will do just fine.
It may be a good idea to check with your certificate provider how to sign your binaries on your local machine before targeting automated build systems, just so you know if there are any special requirements. For instance, [here](https://www.ssl.com/how-to/using-your-code-signing-certificate/) is SSL.com's code signing guide for Windows. If you know how to sign locally, it will be easier to troubleshoot any potential issues in a CI environment. For instance, SSL.com code signing certificates require the `/tr` flag for [SignTool.exe](https://docs.microsoft.com/en-us/windows/win32/seccrypto/signtool) while other providers may only need the `/t` flag for providing the timestamping server. Popular GitHub Actions for signing Windows binaries like [this one](https://github.com/Dana-Prajea/code-sign-action) does not support the `/tr` flag on SignTool.exe. Therefore this guide will focus on signing our app manually with PowerShell commands, but you can use actions like the [code-sign-action](https://github.com/Dana-Prajea/code-sign-action) Action if you prefer.
First off, let's make sure we are able to build our Wails app in our GitHub CI. Here is a small workflow template:
```yaml
name: "example"
on:
workflow_dispatch:
# This Action only starts when you go to Actions and manually run the workflow.
jobs:
package:
strategy:
matrix:
platform: [windows-latest, macos-latest]
go-version: [1.18]
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@v3
- name: Install Go
uses: actions/setup-go@v2
with:
go-version: ${{ matrix.go-version }}
- name: setup node
uses: actions/setup-node@v2
with:
node-version: 14
# You may need to manually build you frontend manually here, unless you have configured frontend build and install commands in wails.json.
- name: Get Wails
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
- name: Build Wails app
run: |
wails build
- name: upload artifacts macOS
if: matrix.platform == 'macos-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-macos
path: build/bin/*
- name: upload artifacts windows
if: matrix.platform == 'windows-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-windows
path: build/bin/*
```
Next we need to give the GitHub workflow access to our signing certificate. This is done by encoding your .pfx or .p12 certificate into a base64 string. To do this in PowerShell, you can use the following command assuming your certificate is called 'my-cert.p12':
```PowerShell
certutil -encode .\my-cert.p12 my-cert-base64.txt
```
You should now have your .txt file with the base64 encoded certificate. It should start with _-----BEGIN CERTIFICATE-----_ and end with _-----END CERTIFICATE-----_. Now you need to make two action secrets on GitHub. Navigate to _Settings -> Secrets -> Actions_ and create the two following secrets:
- **WIN_SIGNING_CERT** with the contents of your base64 encoded certificate text.
- **WIN_SIGNING_CERT_PASSWORD** with the contents of your certificate password.
Now we're ready to implement the signing in our workflow using one of the two methods:
### Method 1: signing with commands
This method uses PowerShell commands to sign our app, and leaves you control over the entire signing process.
After the `"Build Wails app"` step, we can add the following step to our workflow:
```yaml
- name: Sign Windows binaries
if: matrix.platform == 'windows-latest'
run: |
echo "Creating certificate file"
New-Item -ItemType directory -Path certificate
Set-Content -Path certificate\certificate.txt -Value '${{ secrets.WIN_SIGNING_CERT }}'
certutil -decode certificate\certificate.txt certificate\certificate.pfx
echo "Signing our binaries"
& 'C:/Program Files (x86)/Windows Kits/10/bin/10.0.17763.0/x86/signtool.exe' sign /fd <signing algorithm> /t <timestamping server> /f certificate\certificate.pfx /p '${{ secrets.WIN_SIGNING_CERT_PASSWORD }}' <path to binary>
```
This script creates a new directory for your certificate file, creates the certificate file from our base64 secret, converts it to a .pfx file, and finally signs the binary. The following variables needs to be replaced in the last line:
- **signing algorithm**: usually sha256.
- **timestamping server**: URL to the timestamping server to use with your certificate.
- **path to binary**: path to the binary you want to sign.
Given that our Wails config has `outputfilename` set to "app.exe" and that we have a certificate from SSL.com, this would be our workflow:
```yaml
name: "example"
on:
workflow_dispatch:
# This Action only starts when you go to Actions and manually run the workflow.
jobs:
package:
strategy:
matrix:
platform: [windows-latest, macos-latest]
go-version: [1.18]
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@v3
- name: Install Go
uses: actions/setup-go@v2
with:
go-version: ${{ matrix.go-version }}
- name: setup node
uses: actions/setup-node@v2
with:
node-version: 14
# You may need to manually build you frontend here, unless you have configured frontend build and install commands in wails.json.
- name: Get Wails
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
- name: Build Wails app
run: |
wails build
- name: Sign Windows binaries
if: matrix.platform == 'windows-latest'
run: |
echo "Creating certificate file"
New-Item -ItemType directory -Path certificate
Set-Content -Path certificate\certificate.txt -Value '${{ secrets.WIN_SIGNING_CERT }}'
certutil -decode certificate\certificate.txt certificate\certificate.pfx
echo "Signing our binaries"
& 'C:/Program Files (x86)/Windows Kits/10/bin/10.0.17763.0/x86/signtool.exe' sign /fd sha256 /tr http://ts.ssl.com /f certificate\certificate.pfx /p '${{ secrets.WIN_SIGNING_CERT_PASSWORD }}' .\build\bin\app.exe
- name: upload artifacts macOS
if: matrix.platform == 'macos-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-macos
path: build/bin/*
- name: upload artifacts windows
if: matrix.platform == 'windows-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-windows
path: build/bin/*
```
### Method 2: automatically signing with Action
It is possible to use a Windows code signing Action like [this](https://github.com/marketplace/actions/code-sign-a-file-with-pfx-certificate) one, but note it requires a SHA1 hash for the certificate and a certificate name. View an example of how to configure it on the Action's [marketplace](https://github.com/marketplace/actions/code-sign-a-file-with-pfx-certificate).
---
## MacOS
First off you need your code signing certificate from Apple. If you do not have one, a simple Google search will help you acquire one. Once you have your certificate, you need to export it and encode it to base64. [This tutorial](https://localazy.com/blog/how-to-automatically-sign-macos-apps-using-github-actions) shows you how to do that in an easy manner. Once you have exported your .p12 certificate file, you can encode it to base64 as seen in the tutorial with the following command:
```bash
base64 Certificates.p12 | pbcopy
```
Now you're ready to create some GitHub project secrets, just as with Windows:
- **APPLE_DEVELOPER_CERTIFICATE_P12_BASE64** with the contents of your newly copied base64 certificate.
- **APPLE_DEVELOPER_CERTIFICATE_PASSWORD** with the contents of your certificate password.
- **APPLE_PASSWORD** with the contents of an App-Specific password to your Apple-ID account which you can generate [here](https://appleid.apple.com/account/manage).
Let's make sure we are able to build our Wails app in our GitHub Action workflow. Here is a small template:
```yaml
name: "example"
on:
workflow_dispatch:
# This Action only starts when you go to Actions and manually run the workflow.
jobs:
package:
strategy:
matrix:
platform: [windows-latest, macos-latest]
go-version: [1.18]
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@v3
- name: Install Go
uses: actions/setup-go@v2
with:
go-version: ${{ matrix.go-version }}
- name: setup node
uses: actions/setup-node@v2
with:
node-version: 14
# You may need to manually build you frontend here, unless you have configured frontend build and install commands in wails.json.
- name: Get Wails
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
- name: Build Wails app
run: |
wails build
- name: upload artifacts macOS
if: matrix.platform == 'macos-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-macos
path: build/bin/*
- name: upload artifacts windows
if: matrix.platform == 'windows-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-windows
path: build/bin/*
```
For code signing on macOS, [gon](https://github.com/mitchellh/gon) is a very handy tool for code signing and communicating with Apple servers, also written in Go, and will be used in this guide.
After the `Build Wails app` step, add the following to the workflow:
```yaml
- name: MacOS download gon for code signing and app notarization
if: matrix.platform == 'macos-latest'
run: |
brew install mitchellh/gon/gon
```
Now we need to configure some gon config files in our `build/darwin` directory:
1. gon-sign.json:
```json
{
"source": ["./build/bin/app.app"],
"bundle_id": "app.myapp",
"apple_id": {
"username": "my-appleid@email.com",
"password": "@env:APPLE_PASSWORD"
},
"sign": {
"application_identity": "Developer ID Application: My Name"
}
}
```
Where `source` is your Wails binary, `bundle_id` is your bundle ID, `apple_id` contains your Apple ID username and App-Specific password which you created earlier, and `sign.application_identity` is your identity which you can find by running the following command:
```bash
security find-identity -v -p codesigning
```
2. entitlements.plist:
```plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
<key>com.apple.security.network.server</key>
<true/>
<key>com.apple.security.files.user-selected.read-write</key>
<true/>
<key>com.apple.security.files.downloads.read-write</key>
<true/>
</dict>
</plist>
```
In this file you configure the entitlements you need for you app, e.g. camera permissions if your app uses the camera. Read more about entitlements [here](https://developer.apple.com/documentation/bundleresources/entitlements).
Make sure you have updated your `Info.plist` file with the same bundle ID as you entered in `gon-sign.json`. Here's an example `Info.plist` file:
```plist
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0"><dict>
<key>CFBundlePackageType</key><string>APPL</string>
<key>CFBundleName</key><string>MyApp</string>
<key>CFBundleExecutable</key><string>app</string>
<key>CFBundleIdentifier</key><string>app.myapp</string>
<key>CFBundleVersion</key><string>0.1.0</string>
<key>CFBundleGetInfoString</key><string>My app is cool and nice and chill and</string>
<key>CFBundleShortVersionString</key><string>0.1.0</string>
<key>CFBundleIconFile</key><string>iconfile</string>
<key>LSMinimumSystemVersion</key><string>10.13.0</string>
<key>NSHighResolutionCapable</key><string>true</string>
<key>LSApplicationCategoryType</key><string>public.app-category.utilities</string>
<key>NSHumanReadableCopyright</key><string>© Me</string>
</dict></plist>
```
Now we're ready to add the signing step in our workflow after building the Wails app:
```yaml
- name: Import Code-Signing Certificates for macOS
if: matrix.platform == 'macos-latest'
uses: Apple-Actions/import-codesign-certs@v1
with:
# The certificates in a PKCS12 file encoded as a base64 string
p12-file-base64: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_P12_BASE64 }}
# The password used to import the PKCS12 file.
p12-password: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_PASSWORD }}
- name: Sign our macOS binary
if: matrix.platform == 'macos-latest'
run: |
echo "Signing Package"
gon -log-level=info ./build/darwin/gon-sign.json
```
Please note that signing binaries with Apple could take anywhere from minutes to hours.
## Combined workflow file:
Here is our GitHub workflow file with Windows + macOS combined:
```yaml
name: "example combined"
on:
workflow_dispatch:
# This Action only starts when you go to Actions and manually run the workflow.
jobs:
package:
strategy:
matrix:
platform: [windows-latest, macos-latest]
go-version: [1.18]
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@v3
- name: Install Go
uses: actions/setup-go@v2
with:
go-version: ${{ matrix.go-version }}
- name: setup node
uses: actions/setup-node@v2
with:
node-version: 14
# You may need to manually build you frontend here, unless you have configured frontend build and install commands in wails.json.
- name: Get Wails
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
- name: Build Wails app
run: |
wails build
- name: MacOS download gon for code signing and app notarization
if: matrix.platform == 'macos-latest'
run: |
brew install mitchellh/gon/gon
- name: Import Code-Signing Certificates for macOS
if: matrix.platform == 'macos-latest'
uses: Apple-Actions/import-codesign-certs@v1
with:
# The certificates in a PKCS12 file encoded as a base64 string
p12-file-base64: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_P12_BASE64 }}
# The password used to import the PKCS12 file.
p12-password: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_PASSWORD }}
- name: Sign our macOS binary
if: matrix.platform == 'macos-latest'
run: |
echo "Signing Package"
gon -log-level=info ./build/darwin/gon-sign.json
- name: Sign Windows binaries
if: matrix.platform == 'windows-latest'
run: |
echo "Creating certificate file"
New-Item -ItemType directory -Path certificate
Set-Content -Path certificate\certificate.txt -Value '${{ secrets.WIN_SIGNING_CERT }}'
certutil -decode certificate\certificate.txt certificate\certificate.pfx
echo "Signing our binaries"
& 'C:/Program Files (x86)/Windows Kits/10/bin/10.0.17763.0/x86/signtool.exe' sign /fd sha256 /tr http://ts.ssl.com /f certificate\certificate.pfx /p '${{ secrets.WIN_SIGNING_CERT_PASSWORD }}' .\build\bin\Monitor.exe
- name: upload artifacts macOS
if: matrix.platform == 'macos-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-macos
path: build/bin/*
- name: upload artifacts windows
if: matrix.platform == 'windows-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-windows
path: build/bin/*
```
# End notes
This guide inspired by the RiftShare project and its workflow, which is highly recommended to check out [here](https://github.com/achhabra2/riftshare/blob/main/.github/workflows/build.yaml).

97
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/templates.mdx Normal file
View File

@ -0,0 +1,97 @@
# Templates
Wails generates projects from pre-created templates. In v1, this was a difficult to maintain set of projects that were subject to going out of date. In v2, to empower the community, a couple of new features have been added for templates:
- Ability to generate projects from [Remote Templates](../reference/cli.mdx#remote-templates)
- Tooling to help create your own templates
## Creating Templates
To create a template, you can use the `wails generate template` command. To generate a default template, run:
`wails generate template -name mytemplate`
This creates the directory "mytemplate" with default files:
```shell title=mytemplate/
.
|-- NEXTSTEPS.md
|-- README.md
|-- app.tmpl.go
|-- frontend
| `-- dist
| |-- assets
| | |-- fonts
| | | |-- OFL.txt
| | | `-- nunito-v16-latin-regular.woff2
| | `-- images
| | `-- logo-dark.svg
| |-- index.html
| |-- main.css
| `-- main.js
|-- go.mod.tmpl
|-- main.tmpl.go
|-- template.json
`-- wails.tmpl.json
```
### Template Overview
The default template consists of the following files and directories:
| Filename / Dir | Description |
| --------------- | -------------------------------------------- |
| NEXTSTEPS.md | Instructions on how to complete the template |
| README.md | The README published with the template |
| app.tmpl.go | `app.go` template file |
| frontend/ | The directory containing frontend assets |
| go.mod.tmpl | `go.mod` template file |
| main.tmpl.go | `main.go` template file |
| template.json | The template metadata |
| wails.tmpl.json | `wails.json` template file |
At this point it is advisable to follow the steps in `NEXTSTEPS.md`.
## Creating a Template from an Existing Project
It's possible to create a template from an existing frontend project by passing the path to the project when generating the template. We will now walk through how to create a Vue 3 template:
- Install the vue cli: `npm install -g @vue/cli`
- Create the default project: `vue create vue3-base`
- Select `Default (Vue 3) ([Vue 3] babel, eslint)`
- After the project has been generated, run:
```shell
> wails generate template -name wails-vue3-template -frontend .\vue3-base\
Extracting base template files...
Migrating existing project files to frontend directory...
Updating package.json data...
Renaming package.json -> package.tmpl.json...
Updating package-lock.json data...
Renaming package-lock.json -> package-lock.tmpl.json...
```
- The template may now be customised as specified in the `NEXTSTEPS.md` file
- Once the files are ready, it can be tested by running: `wails init -n my-vue3-project -t .\wails-vue3-template\`
- To test the new project, run: `cd my-vue3-project` then `wails build`
- Once the project has compiled, run it: `.\build\bin\my-vue3-project.exe`
- You should have a fully functioning Vue3 application:
```mdx-code-block
<div className="text--center">
<img
src={require("@site/static/img/vue3-template.png").default}
width="50%"
/>
</div>
```
## Publishing Templates
Publishing a template is simply pushing the files to GitHub. The following best practice is encouraged:
- Remove any unwanted files and directories (such as `.git`) from your frontend directory
- Ensure that `template.json` is complete, especially `helpurl`
- Push the files to GitHub
- Create a PR on the [Community Templates](../community/templates.mdx) page
- Announce the template on the [Template Announcement](https://github.com/wailsapp/wails/discussions/825) discussion board

162
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/troubleshooting.mdx Normal file
View File

@ -0,0 +1,162 @@
# Troubleshooting
An assortment of troubleshooting tips.
## The `wails` command appears to be missing?
If your system is reporting that the `wails` command is missing, make sure you have followed the Go installation guide correctly. Normally, it means that the `go/bin` directory in your User's home directory is not in the `PATH` environment variable. You will also normally need to close and reopen any open command prompts so that changes to the environment made by the installer are reflected at the command prompt.
## My application is displaying a white/blank screen
Check that your application includes the assets from the correct directory. In your `main.go` file, you will have something similar to the following code:
```go
//go:embed all:frontend/dist
var assets embed.FS
```
Check that `frontend/dist` contains your application assets.
### Mac
If this happens on Mac, try adding the following to your `Info.plist`:
```xml
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsLocalNetworking</key>
<true/>
</dict>
```
Reference: https://github.com/wailsapp/wails/issues/1504#issuecomment-1174317433
## Mac application not valid
If your built application looks like this in finder:
```mdx-code-block
<p className="text--center">
<img
src={
require("@site/static/img/troubleshooting/invalid_mac_app.png").default
}
/>
</p>
```
it's likely that your application's `info.plist` is invalid. Update the file in `build/<yourapp>.app/Contents/info.plist` and check if the data is valid, EG check the binary name is correct. To persist the changes, copy the file back to the `build/darwin` directory.
## Cannot call backend method from frontend with variadic arguments
If you have a backend method defined with variadic parameters, eg:
```go
func (a *App) TestFunc(msg string, args ...interface{}) error {
// Code
}
```
calling this method from the frontend like this will fail:
```js
var msg = "Hello: ";
var args = ["Go", "JS"];
window.go.main.App.TestFunc(msg, ...args)
.then((result) => {
//do things here
})
.catch((error) => {
//handle error
});
```
Workaround:
```js
var msg = "Hello ";
var args = ["Go", "JS"];
window.go.main.App.TestFunc(msg, args)
.then((result) => {
//without the 3 dots
//do things here
})
.catch((error) => {
//handle error
});
```
Credit: https://github.com/wailsapp/wails/issues/1186
## I'm having getting proxy errors when trying to install Wails
If you are getting errors like this:
```
"https://proxy.golang.org/github.com/wailsapp/wails/cmd/wails/@v/list": dial tcp 172.217.163.49:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
```
it's probably because the official Go Proxy is being blocked (Users in China have reported this). The solution is to set up the proxy manually, eg:
```
go env -w GO111MODULE=on
go env -w GOPROXY=https://goproxy.cn,direct
```
Source: https://github.com/wailsapp/wails/issues/1233
## The generated TypeScript doesn't have the correct types
Sometimes the generated TypeScript doesn't have the correct types. To mitigate this, it is possible to specify what types should be generated using the `ts_type` struct tag. For more details, please read [this](https://github.com/tkrajina/typescriptify-golang-structs#custom-types).
## When I navigate away from `index.html`, I am unable to call methods on the frontend
If you navigate away from `index.html` to a new html file, the context will be lost. This can be fixed by adding the following imports to the `<head>` section of any new page you navigate to:
```html
<head>
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
</head>
```
Source: https://github.com/wailsapp/wails/discussions/1512
## I get `too many open files` errors on my Mac when I run `wails dev`
By default, macOS will only allow you to open a maximum of 256 files. This can affect the `wails dev` command. This limit can be increased by running: `ulimit -n 1024` in the terminal.
FSNotify is [looking to move to Apple's fsevents](https://github.com/fsnotify/fsnotify/issues/11) for Mac. If this isn't completed soon, we will create our own implementation, tracked [here](https://github.com/wailsapp/wails/issues/1733).
## My Mac app gives me weird compilation errors
A few users have reported seeing compilation errors such as the following:
```shell
# github.com/wailsapp/wails/v2/internal/frontend/desktop/darwin
In file included from ../../pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.44.2/internal/frontend/desktop/darwin/callbacks.go:9:
In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:12:
/Library/Developer/CommandLineTools/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/NSBundle.h:91:143: error: function does not return NSString
- (NSAttributedString *)localizedAttributedStringForKey:(NSString *)key value:(nullable NSString *)value table:(nullable NSString *)tableName NS_FORMAT_ARGUMENT(1) NS_REFINED_FOR_SWIFT API_AVAILABLE(macos(12.0), ios(15.0), watchos(8.0), tvos(15.0));
~~~~~~~~~~~~~~ ^ ~
/Library/Developer/CommandLineTools/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/NSObjCRuntime.h:103:48: note: expanded from macro 'NS_FORMAT_ARGUMENT'
#define NS_FORMAT_ARGUMENT(A) __attribute__ ((format_arg(A)))
```
This is _normally_ due to a mismatch with the OS version you are running and the version of the XCode Command Line Tools installed. If you see an error like this, try upgrading your XCode Command Line Tools to the latest version.
If reinstalling Xcode Command Tools still fails, you can check the path where the toolkit is located using:
`xcode-select -p`
If `/Applications/Xcode.app/Contents/Developer` is displayed, run `sudo xcode-select --switch /Library/Developer/CommandLineTools`
Sources: https://github.com/wailsapp/wails/issues/1806 and https://github.com/wailsapp/wails/issues/1140#issuecomment-1290446496
--
## Cannot start service: Host version "x.x.x does not match binary version "x.x.x"
It's preferable to add `frontend/node_modules` and `frontend/package-lock.json` to your `.gitignore`. Otherwise when opening your repository on another machine that may have different versions of Node installed, you may not be able to run your application.
If this does happen, simply delete `frontend/node_modules` and `frontend/package-lock.json` and run your `wails build` or `wails dev` command again.

82
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/vscode.mdx Normal file
View File

@ -0,0 +1,82 @@
# Visual Studio Code
This page is for miscellaneous tips and tricks when using Visual Studio Code with Wails.
## Vetur Configuration
Many thanks to [@Lyimmi](https://github.com/Lyimmi) for this tip. Originally posted [here](https://github.com/wailsapp/wails/issues/1791#issuecomment-1228158349).
Vetur is a popular plugin for Visual Studio Code that provides syntax highlighting and code completion for Vue projects. When loading a Wails project in VSCode, Vetur will throw an error as it is expecting to find the frontend project in the root directory. To fix this, you can do the following:
Create a file named `vetur.config.js` in the project's root.
```javascript
// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
// **optional** default: `{}`
// override vscode settings
// Notice: It only affects the settings used by Vetur.
settings: {
"vetur.useWorkspaceDependencies": true,
"vetur.experimental.templateInterpolationService": true
},
// **optional** default: `[{ root: './' }]`
// support monorepos
projects: [
{
// **required**
// Where is your project?
// It is relative to `vetur.config.js`.
// root: './packages/repo1',
root: './frontend',
// **optional** default: `'package.json'`
// Where is `package.json` in the project?
// We use it to determine the version of vue.
// It is relative to root property.
package: './package.json',
// **optional**
// Where is TypeScript config file in the project?
// It is relative to root property.
tsconfig: './tsconfig.json',
// **optional** default: `'./.vscode/vetur/snippets'`
// Where is vetur custom snippets folders?
snippetFolder: './.vscode/vetur/snippets',
// **optional** default: `[]`
// Register globally Vue component glob.
// If you set it, you can get completion by that components.
// It is relative to root property.
// Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
globalComponents: [
'./src/components/**/*.vue'
]
}
]
}
```
Next, configure `frontend/tsconfig.json`:
```javascript
{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"outFile": "../../built/local/tsc.js",
"allowJs": true
},
"exclude": [
"node_modules",
"**/*.spec.ts"
],
"include": [
"src/**/*",
"wailsjs/**/*.ts"
]
}
```
This should enable you to now use Vetur as expected.

58
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/windows-installer.mdx Normal file
View File

@ -0,0 +1,58 @@
# NSIS installer
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img
src={require("@site/static/img/nsis.webp").default}
style={{ "max-width": "50%" }}
/>
<br />
</p>
```
Wails supports generating Windows installers using the [NSIS installer](https://nsis.sourceforge.io/).
## Installing NSIS
### Windows
The installer is available on the [NSIS Download](https://nsis.sourceforge.io/Download) page.
If you use the chocolatey package manager, run the following script:
```
choco install nsis
```
If you install NSIS manually, you need to add the _Bin_ folder, which contains `makensis.exe`, in your NSIS installation to your path. [Here](https://www.architectryan.com/2018/03/17/add-to-the-path-on-windows-10/) is a good tutorial on how to add to path on Windows.
### Linux
The `nsis` package should be available through your distribution's package manager.
### MacOS
NSIS is available to install through homebrew: `brew install nsis`.
## Generating the installer
When a new project is created, Wails generates the NSIS configuration files in `build/windows/installer`. The config data is read from `installer/info.json` and that is configured to use the project's `wails.json` Info section:
```json
// ...
"Info": {
"companyName": "My Company Name",
"productName": "Wails Vite",
"productVersion": "1.0.0",
"copyright": "Copyright.........",
"comments": "Built using Wails (https://wails.io)"
},
```
To generate an installer for your application, use the `-nsis` flag with `wails build`:
```
wails build -nsis
```
The installer will now be available in the `build/bin` directory.

61
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/guides/windows.mdx Normal file
View File

@ -0,0 +1,61 @@
# Windows
This page has miscellaneous guides related to developing Wails applications for Windows.
## Handling the WebView2 Runtime Dependency
Wails applications built for Windows have a runtime requirement on the Microsoft [WebView2 Runtime](https://developer.microsoft.com/en-us/microsoft-edge/webview2/). Windows 11 will have this installed by default, but some machines won't. Wails offers an easy approach to dealing with this dependency.
By using the `-webview2` flag when building, you can decide what your application will do when a suitable runtime is not detected (including if the installed runtime is too old). The four options are:
1. Download
2. Embed
3. Navigateur
4. Error
### Download
This option will prompt the user that no suitable runtime has been found and then offer to download and run the official bootstrapper from Microsoft's WebView2 site. If the user proceeds, the official bootstrapper will be downloaded and run.
### Embed
This option embeds the official bootstrapper within the application. If no suitable runtime has been found, the application will offer to run the bootstrapper. This adds ~150k to the binary size.
### Navigateur
This option will prompt the user that no suitable runtime has been found and then offer to open a browser to the official WebView2 page where the bootstrapper can be downloaded and installed. The application will then exit, leaving the installation up to the user.
### Error
If no suitable runtime is found, an error is given to the user and no further action taken.
## Fixed version runtime
Another way of dealing with webview2 dependency is shipping it yourself. You can download [fixed version runtime](https://developer.microsoft.com/microsoft-edge/webview2/#download-section) and bundle or download it with your application.
Also, you should specify path to fixed version of webview2 runtime in the `windows.Options` structure when launching wails.
```go
wails.Run(&options.App{
Windows: &windows.Options{
WebviewBrowserPath: "",
},
})
```
Note: When `WebviewBrowserPath` is specified, `error` strategy will be forced in case of minimal required version mismatch or invalid path to a runtime.
## Spawning other programs
When spawning other programs, such as scripts, you will see the window appear on the screen. To hide the window, you can use the following code:
```go
cmd := exec.Command("your_script.exe")
cmd.SysProcAttr = &syscall.SysProcAttr{
HideWindow: true,
CreationFlags: 0x08000000,
}
cmd.Start()
```
Solution provided by [sithembiso](https://github.com/sithembiso) on the [discussions board](https://github.com/wailsapp/wails/discussions/1734#discussioncomment-3386172).

369
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/howdoesitwork.mdx Normal file
View File

@ -0,0 +1,369 @@
---
sidebar_position: 20
---
# Comment ça marche ?
Une application Wails est une application Go standard, avec une interface graphique webkit. La partie Go de l'application se compose du code de l'application et d'une bibliothèque d'exécution qui fournit un certain nombre d'opérations utiles, comme le contrôle de la fenêtre de l'application. Le frontend est une fenêtre webkit qui affichera les ressources graphiques. Une version de la bibliothèque runtime de Javascript est aussi disponible depuis le frontend. Enfin, il est possible de lier les méthodes Go au frontend, et ceux-ci apparaîtront comme des méthodes Javascript qui peuvent être appelées, comme s'il s'agissait de méthodes locales Javascript.
```mdx-code-block
<div className="text--center">
<img src={require("@site/static/img/architecture.webp").default} style={{"width":"75%", "max-width":"800px"}} />
</div>
```
## L'Application Principale
### Vue d’ensemble
L'application principale consiste en un seul appel à `wails.Run()`. Il accepte la configuration de l'application qui décrit la taille de la fenêtre d'application, le titre de la fenêtre, qu'elles sont les ressources à utiliser, etc. Une application de base pourrait ressembler à ceci :
```go title="main.go"
package main
import (
"embed"
"log"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)
//go:embed all:frontend/dist
var assets embed.FS
func main() {
app := &App{}
err := wails.Run(&options.App{
Title: "Basic Demo",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
},
OnStartup: app.startup,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
type App struct {
ctx context.Context
}
func (b *App) startup(ctx context.Context) {
b.ctx = ctx
}
func (b *App) shutdown(ctx context.Context) {}
func (b *App) Greet(name string) string {
return fmt.Sprintf("Hello %s!", name)
}
```
### Description des options
Cet exemple a les options suivantes :
- `Title` - Le texte qui devrait apparaître dans la barre de titre de la fenêtre
- `Width` & `Height` - Les dimensions de la fenêtre
- `Assets` - Les ressources du frontend de l'application
- `OnStartup` - Nom de la fonction à appeler quand la fenêtre est créée et est sur le point de commencer à charger les ressources du frontend
- `OnShutdown` - Nom de la fonction à appeler quand la fenêtre est sur le point d'être fermée
- `Bind` - La liste des structures Go à exposer au frontend
Une liste complète des options d'application peut être trouvée dans la [Référence d'options](reference/options).
#### Ressources
The `Assets` option is mandatory as you can't have a Wails application without frontend assets. Those assets can be any files you would expect to find in a web application - html, js, css, svg, png, etc. **There is no requirement to generate asset bundles** - plain files will do. When the application starts, it will attempt to load `index.html` from your assets and the frontend will essentially work as a browser from that point on. It is worth noting that there is no requirement on where in the `embed.FS` the files live. It is likely that the embed path uses a nested directory relative to your main application code, such as `frontend/dist`:
```go title="main.go"
//go:embed all:frontend/dist
var assets embed.FS
```
At startup, Wails will iterate the embedded files looking for the directory containing `index.html`. All other assets will be loaded relative to this directory.
As production binaries use the files contained in `embed.FS`, there are no external files required to be shipped with the application.
When running in development mode using the `wails dev` command, the assets are loaded off disk, and any changes result in a "live reload". The location of the assets will be inferred from the `embed.FS`.
More details can be found in the [Application Development Guide](guides/application-development.mdx).
#### Application Lifecycle Callbacks
Just before the frontend is about to load `index.html`, a callback is made to the function provided in [OnStartup](reference/options.mdx#onstartup). A standard Go context is passed to this method. This context is required when calling the runtime so a standard pattern is to save a reference to in this method. Just before the application shuts down, the [OnShutdown](reference/options.mdx#onshutdown) callback is called in the same way, again with the context. There is also an [OnDomReady](reference/options.mdx#ondomready) callback for when the frontend has completed loading all assets in `index.html` and is equivalent of the [`body onload`](https://www.w3schools.com/jsref/event_onload.asp) event in JavaScript. It is also possible to hook into the window close (or application quit) event by setting the option [OnBeforeClose](reference/options.mdx#onbeforeclose).
#### Method Binding
The `Bind` option is one of the most important options in a Wails application. It specifies which struct methods to expose to the frontend. Think of structs like "controllers" in a traditional web application. When the application starts, it examines the struct instances listed in the `Bind` field in the options, determines which methods are public (starts with an uppercase letter) and will generate JavaScript versions of those methods that can be called by the frontend code.
:::info Note
Wails requires that you pass in an _instance_ of the struct for it to bind it correctly
:::
In this example, we create a new `App` instance and then add this instance to the `Bind` option in `wails.Run`:
```go {16,24} title="main.go"
package main
import (
"embed"
"log"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)
//go:embed all:frontend/dist
var assets embed.FS
func main() {
app := &App{}
err := wails.Run(&options.App{
Title: "Basic Demo",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
},
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
type App struct {
ctx context.Context
}
func (a *App) Greet(name string) string {
return fmt.Sprintf("Hello %s!", name)
}
```
You may bind as many structs as you like. Just make sure you create an instance of it and pass it in `Bind`:
```go {8-10}
//...
err := wails.Run(&options.App{
Title: "Basic Demo",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
},
Bind: []interface{}{
app,
&mystruct1{},
&mystruct2{},
},
})
```
When you run `wails dev` (or `wails generate module`), a frontend module will be generated containing the following:
- JavaScript bindings for all bound methods
- TypeScript declarations for all bound methods
- TypeScript definitions for all Go structs used as inputs or outputs by the bound methods
This makes it incredibly simple to call Go code from the frontend, using the same strongly typed datastructures.
## Le frontend
### Vue d’ensemble
The frontend is a collection of files rendered by webkit. It's like a browser and webserver in one. There is virtually[^1] no limit to which frameworks or libraries you can use. The main points of interaction between the frontend and your Go code are:
- Calling bound Go methods
- Calling runtime methods
### Calling bound Go methods
When you run your application with `wails dev`, it will automatically generate JavaScript bindings for your structs in a directory called `wailsjs/go` (You can also do this by running `wails generate module`). The generated files mirror the package names in your application. In the example above, we bind `app`, which has one public method `Greet`. This will lead to the generation of the following files:
```bash
wailsjs
└─go
└─main
├─App.d.ts
└─App.js
```
Here we can see that there is a `main` package that contains the JavaScript bindings for the bound `App` struct, as well as the TypeScript declaration file for those methods. To call `Greet` from our frontend, we simply import the method and call it like a regular JavaScript function:
```javascript
// ...
import { Greet } from "../wailsjs/go/main/App";
function doGreeting(name) {
Greet(name).then((result) => {
// Do something with result
});
}
```
The TypeScript declaration file gives you the correct types for the bound methods:
```ts
export function Greet(arg1: string): Promise<string>;
```
The generated methods return a Promise. A successful call will result in the first return value from the Go call to be passed to the `resolve` handler. An unsuccessful call is when a Go method that has an error type as it's second return value, passes an error instance back to the caller. This is passed back via the `reject` handler. In the example above, `Greet` only returns a `string` so the JavaScript call will never reject - unless invalid data is passed to it.
All data types are correctly translated between Go and JavaScript. Even structs. If you return a struct from a Go call, it will be returned to your frontend as a JavaScript class.
:::info Note
Struct fields *must* have a valid `json` tag to be included in the generated TypeScript.
Anonymous nested structs are not supported at this time.
:::
It is possible to send structs back to Go. Any JavaScript map/class passed as an argument that is expecting a struct, will be converted to that struct type. To make this process a lot easier, in `dev` mode, a TypeScript module is generated, defining all the struct types used in bound methods. Using this module, it's possible to construct and send native JavaScript objects to the Go code.
There is also support for Go methods that use structs in their signature. All Go structs specified by a bound method (either as parameters or return types) will have TypeScript versions auto generated as part of the Go code wrapper module. Using these, it's possible to share the same data model between Go and JavaScript.
Example: We update our `Greet` method to accept a `Person` instead of a string:
```go title="main.go"
type Person struct {
Name string `json:"name"`
Age uint8 `json:"age"`
Address *Address `json:"address"`
}
type Address struct {
Street string `json:"street"`
Postcode string `json:"postcode"`
}
func (a *App) Greet(p Person) string {
return fmt.Sprintf("Hello %s (Age: %d)!", p.Name, p.Age)
}
```
The `wailsjs/go/main/App.js` file will still have the following code:
```js title="App.js"
export function Greet(arg1) {
return window["go"]["main"]["App"]["Greet"](arg1);
}
```
But the `wailsjs/go/main/App.d.ts` file will be updated with the following code:
```ts title="App.d.ts"
import { main } from "../models";
export function Greet(arg1: main.Person): Promise<string>;
```
As we can see, the "main" namespace is imported from a new "models.ts" file. This file contains all the struct definitions used by our bound methods. In this example, this is a `Person` struct. If we look at `models.ts`, we can see how the models are defined:
```ts title="models.ts"
export namespace main {
export class Address {
street: string;
postcode: string;
static createFrom(source: any = {}) {
return new Address(source);
}
constructor(source: any = {}) {
if ("string" === typeof source) source = JSON.parse(source);
this.street = source["street"];
this.postcode = source["postcode"];
}
}
export class Person {
name: string;
age: number;
address?: Address;
static createFrom(source: any = {}) {
return new Person(source);
}
constructor(source: any = {}) {
if ("string" === typeof source) source = JSON.parse(source);
this.name = source["name"];
this.age = source["age"];
this.address = this.convertValues(source["address"], Address);
}
convertValues(a: any, classs: any, asMap: boolean = false): any {
if (!a) {
return a;
}
if (a.slice) {
return (a as any[]).map((elem) => this.convertValues(elem, classs));
} else if ("object" === typeof a) {
if (asMap) {
for (const key of Object.keys(a)) {
a[key] = new classs(a[key]);
}
return a;
}
return new classs(a);
}
return a;
}
}
}
```
So long as you have TypeScript as part of your frontend build configuration, you can use these models in the following way:
```js title="mycode.js"
import { Greet } from "../wailsjs/go/main/App";
import { main } from "../wailsjs/go/models";
function generate() {
let person = new main.Person();
person.name = "Peter";
person.age = 27;
Greet(person).then((result) => {
console.log(result);
});
}
```
The combination of generated bindings and TypeScript models makes for a powerful development environment.
More information on Binding can be found in the [Binding Methods](guides/application-development.mdx#binding-methods) section of the [Application Development Guide](guides/application-development.mdx).
### Appeler les méthodes runtime
The JavaScript runtime is located at `window.runtime` and contains many methods to do various tasks such as emit an event or perform logging operations:
```js title="mycode.js"
window.runtime.EventsEmit("my-event", 1);
```
More details about the JS runtime can be found in the [Runtime Reference](reference/runtime/intro).
[^1]: There is a very small subset of libraries that use features unsupported in WebViews. There are often alternatives and workarounds for such cases.

75
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/introduction.mdx Normal file
View File

@ -0,0 +1,75 @@
---
sidebar_position: 1
---
# Introduction
Wails est un projet qui vous permet d'écrire des applications de bureau en utilisant les technologies Go et web.
Considérez cela comme une alternative légère et rapide d'Electron pour Go. Vous pouvez facilement construire des applications avec la flexibilité et la puissance de Go, combinée à un frontend riche et moderne.
### Fonctionnalités
- Menus natifs, Boîtes de dialogues, Thèmes et Translucidité
- Prise en charge de Windows, macOS et Linux
- Modèles intégrés pour Svelte, React, Preact, Vue, Lit et Vanilla JS
- Appeler facilement les méthodes Go depuis JavaScript
- Génération automatique du modèle TypeScript à partir des struct Go
- Aucun CGO ou DLL externe requis sous Windows
- Mode développement en direct en utilisant la puissance de [Vite](https://vitejs.dev/)
- CLI puissant pour créer, construire et empaqueter facilement des applications
- Une riche bibliothèque [runtime](/docs/reference/runtime/intro)
- Les applications construites avec Wails sont conformes aux Stores Apple & Microsoft
Ceci est [varly](https://varly.app) - une application de bureau pour MacOS & Windows écrite à l'aide de Wails. Non seulement elle est belle, elle utilise les menus natifs et la translucidité - tout ce que vous pouvez attendre d'une application native moderne.
```mdx-code-block
<p class="text--center">
<a href="https://varly.app/">
<img
src={require("@site/static/img/showcase/varly2.webp").default}
style={{ width: "75%", "max-width": "800px" }}
/>
</a>
</p>
```
### Modèles de créations rapides
Wails est livré avec un certain nombre de modèles préconfigurés qui vous permettent de faire fonctionner votre application rapidement. Il y a des modèles pour les frameworks suivants : Svelte, React, Vue, Preact, Lit et Vanilla. Il existe à la fois des versions JavaScript et TypeScript pour chaque modèle.
### Éléments natifs
Wails utilise une bibliothèque conçue pour gérer les éléments natifs tels que les fenêtres, menus, boîtes de dialogues, etc, pour que vous puissiez construire des applications de bureau riches en fonctionnalités.
**Il n'embarque pas de navigateur**, il est donc efficace sur les ressources. Au lieu de cela, il utilise le moteur de rendu natif de la plate-forme. Sous Windows, c'est la nouvelle bibliothèque Microsoft Webview2, construite sur Chromium.
### Interopérabilité Go & Javascript
Wails met automatiquement vos méthodes Go à la disposition de Javascript, afin que vous puissiez les appeler par nom depuis votre frontend ! Il génère même des modèles Typescript pour les structures utilisées par vos méthodes Go, pour que vous puissiez passer les mêmes structures de données entre Go et Javascript.
### Librairie d'exécution
Wails fournit une bibliothèque runtime, pour Go et Javascript, qui gère beaucoup de choses dont les applications modernes ont besoin, comme Logging, Boîtes de dialogue, etc.
### Expérience de développement en direct
#### Reconstructions automatiques
Lorsque vous exécutez votre application en mode "dev", Wails construira votre application en tant qu'application de bureau native, mais lira vos ressources depuis le disque. Il détectera toutes les modifications apportées à votre code Go, puis reconstruira et relancera automatiquement votre application .
#### Rechargement automatique
Lorsque des changements sont détectés dans les ressources de votre application, votre application en cours d'exécution sera "rechargée", reflétant presque immédiatement vos modifications .
#### Développez votre application dans un navigateur
Si vous préférez déboguer et vous développer dans un navigateur, Wails vous couvre. L'application en cours d'exécution a également un serveur web qui exécutera votre application depuis n'importe quel navigateur qui s'y connecte. Il sera aussi actualisé lorsque vos fichiers seront modifiés.
### Binaires natifs prêts à la production
Lorsque vous êtes prêt à faire une version finale de votre application, le CLI le compilera en un seul exécutable, avec tous les actifs qui y sont intégrés. Sous Windows et MacOS, il est possible de créer un paquet natif pour la distribution. Les ressources utilisées dans la compilation de l'application (icône, info. list, fichier manifest, etc) font partie de votre projet et peuvent être personnalisés, ce qui vous donne le contrôle total sur la façon dont vos applications sont construites.
### Outils
Le CLI Wails fournit un moyen sans tracas de générer, de construire et de regrouper vos applications. Il s'occupera de la lourde tâche de créer des icônes, de compiler votre application avec des paramètres optimaux et de fournir un binaire distribuable et prêt à la production. Choisissez parmi un certain nombre de modèles de démarrage pour démarrer rapidement !

229
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/cli.mdx Normal file
View File

@ -0,0 +1,229 @@
---
sidebar_position: 2
---
# CLI
Le CLI Wails a un certain nombre de commandes qui sont utilisées pour gérer vos projets. Toutes les commandes sont exécutées de la manière suivante:
`wails <commande> <options>`
## init
`wails init` est utilisé pour générer des projets.
| Option | Description | Par défaut |
|:------------------------- |:---------------------------------------------------------------------------------------------------------------------- |:-------------:|
| -n "nom du projet" | Nom du projet. **Obligatoire**. | |
| -d "Répertoire du projet" | Dossier de projet à créer | Nom du projet |
| -g | Initialisation du dépôt git | |
| -l | Liste des modèles de projet disponibles | |
| -q | Supprimer les logs dans la console | |
| -t "nom du modèle" | Modèle de projet à utiliser. Cela peut être le nom d'un modèle par défaut ou d'une URL d'un projet hébergé sur github. | vanilla |
| -ide | Générer les fichiers du projet IDE | |
| -f | Forcer la compilation de l'application | false |
Exemple: `wails init -n test -d mytestproject -g -ide vscode -q`
Cela va générer un projet appelé "test" dans le répertoire "mytestproject", initialiser git, générer des fichiers de projet vscode et le faire silencieusement.
Plus d'informations sur l'utilisation des IDEs avec Wails peuvent être trouvées [ici](../guides/ides.mdx).
### Modèles à distance
Les modèles distants (hébergés sur GitHub) sont pris en charge et peuvent être installés en utilisant l'URL du projet du modèle.
Exemple : `wails init -n test -t https://github.com/leaanthony/testtemplate[@v1.0.0]`
Une liste de modèles gérés par la communauté peut être trouvée [ici](../community/templates.mdx)
:::warning Attention
**Le projet Wails n'entretient pas, n'est pas responsable ni responsable des modèles tiers !**
Si vous n'êtes pas sûr d'un modèle, inspectez les fichiers `package.json` et `wails.json` pour savoir quels scripts sont exécutés et quels paquets sont installés.
:::
## build
`wails build` est utilisé pour compiler votre projet vers un binaire prêt à la production.
| Option | Description | Par défaut |
|:-------------------- |:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| -platform | Construit pour les [plates-formes](../reference/cli.mdx#platforms) données (séparées par des virgules) par exemple. `windows/arm64`. Notez que si vous ne donnez pas l'architecture, `runtime.GOARCH` est utilisé. | platform = le contenu de la variable d'environnement `GOOS` si elle existe, autrement `runtime.GOOS`.<br/>arch = le contenu de la variable d'environnement `GOARCH` si elle existe, autrement `runtime.GOARCH`. |
| -clean | Nettoie le répertoire `build/bin` | |
| -compiler "compiler" | Utiliser un autre compilateur pour compiler, par exemple go1.15beta1 | go |
| -ldflags "flags" | Options supplémentaires à passer au compilateur | |
| -nopackage | Ne pas empaqueter l'application | |
| -o filename | Nom du fichier de sortie | |
| -s | Ignorer la construction du frontend | false |
| -f | Forcer la compilation de l'application | false |
| -tags "extra tags" | Options de compilation à passer au compilateur Go. Doivent être entre guillemets. Séparés par un espace ou une virgule (pas les deux) | |
| -upx | Compresser le binaire final en utilisant "upx" | |
| -upxflags | Options à passer à upx | |
| -v int | Niveau de verbosité (0 - silencieux, 1 - par défaut, 2 - verbeux) | 1 |
| -webview2 | Stratégie d'installation WebView2 : download,embed,browser,error | download |
| -u | Met à jour le `go.mod de votre projet` pour utiliser la même version de Wails que le CLI | |
| -debug | Conserve les informations de débogage dans l'application. Permet l'utilisation des outils de développement dans la fenêtre de l'application | false |
| -trimpath | Supprimer tous les chemins vers les fichiers système de l'exécutable final. | false |
| -race | Construire avec le détecteur Go race | false |
| -windowsconsole | Garder la fenêtre de la console lors de la construction d'une version pour Windows | |
| -obfuscate | Cacher le code de l'application en utilisant [garble](https://github.com/burrowers/garble) | false |
| -garbleargs | Arguments à passer à garble | `-literals -tiny -seed=random` |
Pour une description détaillée des options `webview2` , veuillez vous référer au Guide de [Windows](../guides/windows.mdx).
Si vous préférez construire en utilisant l'outil Go standard, veuillez consulter le guide [Constructions manuelles](../guides/manual-builds.mdx) .
Exemple:
`wails build -clean -o myproject.exe`
:::Info
Sur Mac, l'application sera livrée avec `Info.plist`, pas `Info.dev.plist`.
:::
:::info UPX sur Apple Silicon
Il y a [problèmes](https://github.com/upx/upx/issues/446) avec l'utilisation de UPX avec Apple Silicon.
:::
:::info UPX sur Windows
Certains antivirus marquent de manière erronée les binaires compressés d'`upx` comme virus, voir [la description du problème](https://github.com/upx/upx/issues/437).
:::
### Platformes
Plateformes supportées:
| Plateforme | Description |
|:---------------- |:-------------------------------------------------- |
| darwin | MacOS + Architecture de la machine de construction |
| darwin/amd64 | MacOS 10.13+ AMD64 |
| darwin/arm64 | MacOS 11.0+ ARM64 |
| darwin/universal | Application universelle MacOS AMD64+ARM64 |
| windows | Windows 10/11 + architecture de la machine |
| windows/amd64 | Windows 10/11 AMD64 |
| windows/arm64 | Windows 10/11 ARM64 |
| linux | Linux + architecture de la machine |
| linux/amd64 | Linux AMD64 |
| linux/arm64 | Linux ARM64 |
## doctor
`wails doctor` effectuera des diagnostics pour vous assurer que votre système est prêt pour développer avec wails.
Exemple:
```
Wails CLI v2.0.0-beta
Scanning system - Please wait (this may take a long time)...Done.
System
------
OS: Windows 10 Pro
Version: 2009 (Build: 19043)
ID: 21H1
Go Version: go1.18
Platform: windows
Architecture: amd64
Dependency Package Name Status Version
---------- ------------ ------ -------
WebView2 N/A Installed 93.0.961.52
npm N/A Installed 6.14.15
*upx N/A Installed upx 3.96
* - Optional Dependency
Diagnosis
---------
Your system is ready for Wails development!
```
## dev
`wails dev` est utilisé pour exécuter votre application en mode « développement en direct ». Ceci signifie que :
- Le fichier `go.mod` de l'application sera mis à jour pour utiliser la même version de Wails que le CLI
- L'application est compilée et exécutée automatiquement
- A watcher is started and will trigger a rebuild of your dev app if it detects changes to your go files
- A webserver is started on `http://localhost:34115` which serves your application (not just frontend) over http. This allows you to use your favourite browser development extensions
- All application assets are loaded from disk. If they are changed, the application will automatically reload (not rebuild). All connected browsers will also reload
- A JS module is generated that provides the following:
- JavaScript wrappers of your Go methods with autogenerated JSDoc, providing code hinting
- TypeScript versions of your Go structs, that can be constructed and passed to your go methods
- A second JS module is generated that provides a wrapper + TS declaration for the runtime
- On macOS, it will bundle the application into a `.app` file and run it. It will use a `build/darwin/Info.dev.plist` for development.
| Option | Description | Par défaut |
|:---------------------------- |:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:--------------------- |
| -assetdir "./path/to/assets" | Serve assets from the given directory instead of using the provided asset FS | Value in `wails.json` |
| -browser | Opens a browser to `http://localhost:34115` on startup | |
| -compiler "compiler" | Utiliser un autre compilateur pour compiler, par exemple go1.15beta1 | go |
| -e | Extensions to trigger rebuilds (comma separated) | go |
| -reloaddirs | Additional directories to trigger reloads (comma separated) | Value in `wails.json` |
| -ldflags "flags" | Options supplémentaires à passer au compilateur | |
| -tags "extra tags" | Build tags to pass to compiler (quoted and space separated) | |
| -loglevel "loglevel" | Loglevel to use - Trace, Debug, Info, Warning, Error | Debug |
| -noreload | Disable automatic reload when assets change | |
| -nocolour | Turn off colour cli output | false |
| -nogen | Disable generate module | |
| -v | Verbosity level (0 - silent, 1 - standard, 2 - verbose) | 1 |
| -wailsjsdir | The directory to generate the generated Wails JS modules | Value in `wails.json` |
| -debounce | The time to wait for reload after an asset change is detected | 100 (milliseconds) |
| -devserver "host:port" | The address to bind the wails dev server to | "localhost:34115" |
| -frontenddevserverurl "url" | Use 3rd party dev server url to serve assets, EG Vite | "" |
| -appargs "args" | Arguments passed to the application in shell style | |
| -save | Saves the given `assetdir`, `reloaddirs`, `wailsjsdir`, `debounce`, `devserver` and `frontenddevserverurl` flags in `wails.json` to become the defaults for subsequent invocations. | |
| -race | Construire avec le détecteur Go race | false |
| -s | Ignorer la construction du frontend | false |
Exemple:
`wails dev -assetdir ./frontend/dist -wailsjsdir ./frontend/src -browser`
This command will do the following:
- Build the application and run it (more details [here](../guides/manual-builds.mdx)
- Generate the Wails JS modules in `./frontend/src`
- Watch for updates to files in `./frontend/dist` and reload on any change
- Open a browser and connect to the application
There is more information on using this feature with existing framework scripts [here](../guides/application-development.mdx#live-reloading).
## generate
### template
Wails uses templates for project generation. The `wails generate template` command helps scaffold a template so that it may be used for generating projects.
| Option | Description |
|:---------------- |:------------------------------------------- |
| -name | The template name (Mandatory) |
| -frontend "path" | Path to frontend project to use in template |
For more details on creating templates, consult the [Templates guide](../guides/templates.mdx).
### module
The `wails generate module` command allows you to manually generate the `wailsjs` directory for your application.
## update
`wails update` will update the version of the Wails CLI.
| Option | Description |
|:------------------ |:------------------------------------- |
| -pre | Update to latest pre-release version |
| -version "version" | Install a specific version of the CLI |
## version
`wails version` will simply output the current CLI version.

227
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/menus.mdx Normal file
View File

@ -0,0 +1,227 @@
---
sidebar_position: 4
---
# Menus
It is possible to add an application menu to Wails projects. This is achieved by defining a [Menu](#menu) struct and setting it in the [`Menu`](../reference/options.mdx#menu) application config, or by calling the runtime method [MenuSetApplicationMenu](../reference/runtime/menu.mdx#menusetapplicationmenu).
An example of how to create a menu:
```go
AppMenu := menu.NewMenu()
FileMenu := AppMenu.AddSubmenu("File")
FileMenu.AddText("&Open", keys.CmdOrCtrl("o"), openFile)
FileMenu.AddSeparator()
FileMenu.AddText("Quit", keys.CmdOrCtrl("q"), func(_ *menu.CallbackData) {
runtime.Quit()
})
if runtime.GOOS == "darwin" {
AppMenu.Append(menu.EditMenu()) // on macos platform, we should append EditMenu to enable Cmd+C,Cmd+V,Cmd+Z... shortcut
}
err := wails.Run(&options.App{
Title: "Menus Demo",
Width: 800,
Height: 600,
Menu: AppMenu,
Bind: []interface{}{
app,
},
)
// ...
```
It is also possible to dynamically update the menu, by updating the menu struct and calling [MenuUpdateApplicationMenu](../reference/runtime/menu.mdx#menuupdateapplicationmenu).
The example above uses helper methods, however it's possible to build the menu structs manually.
## Menu
A Menu is a collection of MenuItems:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
type Menu struct {
Items []*MenuItem
}
```
For the Application menu, each MenuItem represents a single menu such as "Edit".
A simple helper method is provided for building menus:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
func NewMenuFromItems(first *MenuItem, rest ...*MenuItem) *Menu
```
This makes the layout of the code more like that of a menu without the need to add the menu items manually after creating them. Alternatively, you can just create the menu items and add them to the menu manually.
## MenuItem
A MenuItem represents an item within a Menu.
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
// MenuItem represents a menu item contained in a menu
type MenuItem struct {
Label string
Role Role
Accelerator *keys.Accelerator
Type Type
Disabled bool
Hidden bool
Checked bool
SubMenu *Menu
Click Callback
}
```
| Field | Type | Notes |
| ----------- | ------------------------------------ | ------------------------------------------------------------- |
| Label | string | The menu text |
| Accelerator | [\*keys.Accelerator](#accelerator) | Key binding for this menu item |
| Type | [Type](#type) | Type of MenuItem |
| Disabled | bool | Disables the menu item |
| Hidden | bool | Hides this menu item |
| Checked | bool | Adds check to item (Checkbox & Radio types) |
| SubMenu | [\*Menu](#menu) | Sets the submenu |
| Click | [Callback](#callback) | Callback function when menu clicked |
| Role | string | Defines a [role](#role) for this menu item. Mac only for now. |
### Accelerator
Accelerators (sometimes called keyboard shortcuts) define a binding between a keystroke and a menu item. Wails defines an Accelerator as a combination or key + [Modifier](#modifier). They are available in the `"github.com/wailsapp/wails/v2/pkg/menu/keys"` package.
Example:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
// Defines cmd+o on Mac and ctrl-o on Window/Linux
myShortcut := keys.CmdOrCtrl("o")
```
Keys are any single character on a keyboard with the exception of `+`, which is defined as `plus`. Some keys cannot be represented as characters so there are a set of named characters that may be used:
| | | | |
|:-----------:|:-----:|:-----:|:---------:|
| `backspace` | `f1` | `f16` | `f31` |
| `tab` | `f2` | `f17` | `f32` |
| `return` | `f3` | `f18` | `f33` |
| `enter` | `f4` | `f19` | `f34` |
| `escape` | `f5` | `f20` | `f35` |
| `left` | `f6` | `f21` | `numlock` |
| `right` | `f7` | `f22` | |
| `up` | `f8` | `f23` | |
| `down` | `f9` | `f24` | |
| `space` | `f10` | `f25` | |
| `delete` | `f11` | `f36` | |
| `home` | `f12` | `f37` | |
| `end` | `f13` | `f38` | |
| `page up` | `f14` | `f39` | |
| `page down` | `f15` | `f30` | |
Wails also supports parsing accelerators using the same syntax as Electron. This is useful for storing accelerators in config files.
Example:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
// Defines cmd+o on Mac and ctrl-o on Window/Linux
myShortcut, err := keys.Parse("Ctrl+Option+A")
```
#### Modifier
The following modifiers are keys that may be used in combination with the accelerator key:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
const (
// CmdOrCtrlKey represents Command on Mac and Control on other platforms
CmdOrCtrlKey Modifier = "cmdorctrl"
// OptionOrAltKey represents Option on Mac and Alt on other platforms
OptionOrAltKey Modifier = "optionoralt"
// ShiftKey represents the shift key on all systems
ShiftKey Modifier = "shift"
// ControlKey represents the control key on all systems
ControlKey Modifier = "ctrl"
)
```
A number of helper methods are available to create Accelerators using modifiers:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
func CmdOrCtrl(key string) *Accelerator
func OptionOrAlt(key string) *Accelerator
func Shift(key string) *Accelerator
func Control(key string) *Accelerator
```
Modifiers can be combined using `keys.Combo(key string, modifier1 Modifier, modifier2 Modifier, rest ...Modifier)`:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
// Defines "Ctrl+Option+A" on Mac and "Ctrl+Alt+A" on Window/Linux
myShortcut := keys.Combo("a", ControlKey, OptionOrAltKey)
```
### Type
Each menu item must have a type and there are 5 types available:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
const (
TextType Type = "Text"
SeparatorType Type = "Separator"
SubmenuType Type = "Submenu"
CheckboxType Type = "Checkbox"
RadioType Type = "Radio"
)
```
For convenience, helper methods are provided to quickly create a menu item:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
func Text(label string, accelerator *keys.Accelerator, click Callback) *MenuItem
func Separator() *MenuItem
func Radio(label string, selected bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func Checkbox(label string, checked bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func SubMenu(label string, menu *Menu) *Menu
```
You can also create menu items directly on a menu by using the "Add" helpers:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
func (m *Menu) AddText(label string, accelerator *keys.Accelerator, click Callback) *MenuItem
func (m *Menu) AddSeparator() *MenuItem
func (m *Menu) AddRadio(label string, selected bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func (m *Menu) AddCheckbox(label string, checked bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func (m *Menu) AddSubMenu(label string, menu *Menu) *MenuI
```
A note on radio groups: A radio group is defined as a number of radio menu items that are next to each other in the menu. This means that you do not need to group items together as it is automatic. However, that also means you cannot have 2 radio groups next to each other - there must be a non-radio item between them.
### Callback
Each menu item may have a callback that is executed when the item is clicked:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
type Callback func(*CallbackData)
type CallbackData struct {
MenuItem *MenuItem
}
```
The function is given a `CallbackData` struct which indicates which menu item triggered the callback. This is useful when using radio groups that may share a callback.
### Role
:::info Roles
Roles are currently supported on Mac only.
:::
A menu item may have a role, which is essentially a pre-defined menu item. We currently support the following roles:
| Role | Description |
| ------------ | ------------------------------------------------------------------------ |
| AppMenuRole | The standard Mac application menu. Can be created using `menu.AppMenu()` |
| EditMenuRole | The standard Mac edit menu. Can be created using `menu.EditMenu()` |

737
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/options.mdx Normal file
View File

@ -0,0 +1,737 @@
---
sidebar_position: 3
---
# Options
## Application Options
The `Options.App` struct contains the application configuration. It is passed to the `wails.Run()` method:
```go title="Example"
import (
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
"github.com/wailsapp/wails/v2/pkg/options/linux"
"github.com/wailsapp/wails/v2/pkg/options/mac"
"github.com/wailsapp/wails/v2/pkg/options/windows"
)
func main() {
err := wails.Run(&options.App{
Title: "Menus Demo",
Width: 800,
Height: 600,
DisableResize: false,
Fullscreen: false,
WindowStartState: options.Maximised,
Frameless: true,
MinWidth: 400,
MinHeight: 400,
MaxWidth: 1280,
MaxHeight: 1024,
StartHidden: false,
HideWindowOnClose: false,
BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 255},
AlwaysOnTop: false,
AssetServer: &assetserver.Options{
Assets: assets,
Handler: assetsHandler,
Middleware: assetsMidldeware,
},
Menu: app.applicationMenu(),
Logger: nil,
LogLevel: logger.DEBUG,
LogLevelProduction: logger.ERROR,
OnStartup: app.startup,
OnDomReady: app.domready,
OnShutdown: app.shutdown,
OnBeforeClose: app.beforeClose,
CSSDragProperty: "--wails-draggable",
CSSDragValue: "drag",
ZoomFactor: 1.0,
IsZoomControlEnabled: false,
Bind: []interface{}{
app,
},
Windows: &windows.Options{
WebviewIsTransparent: false,
WindowIsTranslucent: false,
BackdropType: windows.Mica,
DisableWindowIcon: false,
DisableFramelessWindowDecorations: false,
WebviewUserDataPath: "",
WebviewBrowserPath: "",
Theme: windows.SystemDefault,
CustomTheme: &windows.ThemeSettings{
DarkModeTitleBar: windows.RGB(20, 20, 20),
DarkModeTitleText: windows.RGB(200, 200, 200),
DarkModeBorder: windows.RGB(20, 0, 20),
LightModeTitleBar: windows.RGB(200, 200, 200),
LightModeTitleText: windows.RGB(20, 20, 20),
LightModeBorder: windows.RGB(200, 200, 200),
},
// User messages that can be customised
Messages *windows.Messages
// OnSuspend is called when Windows enters low power mode
OnSuspend func()
// OnResume is called when Windows resumes from low power mode
OnResume func()
},
Mac: &mac.Options{
TitleBar: &mac.TitleBar{
TitlebarAppearsTransparent: true,
HideTitle: false,
HideTitleBar: false,
FullSizeContent: false,
UseToolbar: false,
HideToolbarSeparator: true,
},
Appearance: mac.NSAppearanceNameDarkAqua,
WebviewIsTransparent: true,
WindowIsTranslucent: false,
About: &mac.AboutInfo{
Title: "My Application",
Message: "© 2021 Me",
Icon: icon,
},
},
Linux: &linux.Options{
Icon: icon,
WindowIsTranslucent: false,
},
Debug: options.Debug{
OpenInspectorOnStartup: false,
},
})
if err != nil {
log.Fatal(err)
}
}
```
### Title
The text shown in the window's title bar.
Name: Title<br/> Type: `string`
### Width
The initial width of the window.
Name: Width<br/> Type: `int`<br/> Default: 1024.
### Height
The initial height of the window.
Name: Height<br/> Type: `int`<br/> Default: 768
### DisableResize
By default, the main window is resizable. Setting this to `true` will keep it a fixed size.
Name: DisableResize<br/> Type: `bool`
### Fullscreen
Deprecated: Please use [WindowStartState](#windowstartstate).
### WindowStartState
Defines how the window should present itself at startup.
| Value | Win | Mac | Lin |
| ---------- | --- | --- | --- |
| Fullscreen | ✅ | ✅ | ✅ |
| Maximised | ✅ | ✅ | ✅ |
| Minimised | ✅ | ❌ | ✅ |
Name: WindowStartState<br/> Type: `options.WindowStartState`
### Frameless
When set to `true`, the window will have no borders or title bar. Also see [Frameless Windows](../guides/frameless.mdx).
Name: Frameless<br/> Type: `bool`
### MinWidth
This sets the minimum width for the window. If the value given in `Width` is less than this value, the window will be set to `MinWidth` by default.
Name: MinWidth<br/> Type: `int`
### MinHeight
This sets the minimum height for the window. If the value given in `Height` is less than this value, the window will be set to `MinHeight` by default.
Name: MinHeight<br/> Type: `int`
### MaxWidth
This sets the maximum width for the window. If the value given in `Width` is more than this value, the window will be set to `MaxWidth` by default.
Name: MaxWidth<br/> Type: `int`
### MaxHeight
This sets the maximum height for the window. If the value given in `Height` is more than this value, the window will be set to `MaxHeight` by default.
Name: MaxHeight<br/> Type: `int`
### StartHidden
When set to `true`, the application will be hidden until [WindowShow](../reference/runtime/window.mdx#windowshow) is called.
Name: StartHidden<br/> Type: `bool`
### HideWindowOnClose
By default, closing the window will close the application. Setting this to `true` means closing the window will
hide the window instead.
Name: HideWindowOnClose<br/> Type: `bool`
### BackgroundColour
This value is the default background colour of the window. Example: options.NewRGBA(255,0,0,128) - Red at 50% transparency
Name: BackgroundColour<br/> Type: `*options.RGBA`<br/> Default: white
### AlwaysOnTop
Indicates that the window should stay above other windows when losing focus.
Name: AlwaysOnTop<br/> Type: `bool`
### Assets
Deprecated: Please use Assets on [AssetServer specific options](#assetserver).
### AssetsHandler
Deprecated: Please use AssetsHandler on [AssetServer specific options](#assetserver).
### AssetServer
This defines AssetServer specific options. It allows to customize the AssetServer with static assets, serving assets dynamically with an `http.Handler` or hook into the request chain with an `assetserver.Middleware`.
Not all features of an `http.Request` are currently supported, please see the following feature matrix:
| Feature | Win | Mac | Lin |
| ----------------------- | --- | --- | ------ |
| GET | ✅ | ✅ | ✅ |
| POST | ✅ | ✅ | ✅ [^1] |
| PUT | ✅ | ✅ | ✅ [^1] |
| PATCH | ✅ | ✅ | ✅ [^1] |
| DELETE | ✅ | ✅ | ✅ [^1] |
| Request Headers | ✅ | ✅ | ✅ [^1] |
| Request Body | ✅ | ✅ | ❌ |
| Request Body Streaming | ❌ | ❌ | ❌ |
| Response StatusCodes | ✅ | ✅ | ✅ [^1] |
| Response Headers | ✅ | ✅ | ✅ [^1] |
| Response Body | ✅ | ✅ | ✅ |
| Response Body Streaming | ❌ | ❌ | ✅ |
| WebSockets | ❌ | ❌ | ❌ |
| HTTP Redirects 30x | ✅ | ❌ | ❌ |
Name: AssetServer<br/> Type: `*assetserver.Options`
#### Assets
The static frontend assets to be used by the application.
A GET request is first tried to be served from this `fs.FS`. If the `fs.FS` returns `os.ErrNotExist` for that file, the request handling will fallback to the [Handler](#handler) and tries to serve the GET request from it.
If set to nil, all GET requests will be forwarded to [Handler](#handler).
Name: Assets<br/> Type: `fs.FS`
#### Handler
The assets handler is a generic `http.Handler` for fallback handling of assets that can't be found.
The handler will be called for every GET request that can't be served from [Assets](#assets), due to `os.ErrNotExist`. Furthermore all non GET requests will always be served from this Handler. If not defined, the result is the following in cases where the Handler would have been called:
- GET request: `http.StatusNotFound`
- Other request: `http.StatusMethodNotAllowed`
NOTE: When used in combination with a Frontend DevServer there might be limitations, eg. Vite serves the index.html on every path, that does not contain a file extension.
Name: AssetsHandler<br/> Type: `http.Handler`
#### Middleware
Middleware is a HTTP Middleware which allows to hook into the AssetServer request chain. It allows to skip the default request handler dynamically, e.g. implement specialized Routing etc. The Middleware is called to build a new `http.Handler` used by the AssetSever and it also receives the default handler used by the AssetServer as an argument.
If not defined, the default AssetServer request chain is executed.
Name: Middleware<br/> Type: `assetserver.Middleware`
### Menu
The menu to be used by the application. More details about Menus in the [Menu Reference](../reference/runtime/menu.mdx).
:::note
On Mac, if no menu is specified, a default menu will be created.
:::
Name: Menu<br/> Type: `*menu.Menu`
### Logger
The logger to be used by the application. More details about logging in the [Log Reference](../reference/runtime/log.mdx).
Name: Logger<br/> Type: `logger.Logger`<br/> Default: Logs to Stdout
### LogLevel
The default log level. More details about logging in the [Log Reference](../reference/runtime/log.mdx).
Name: LogLevel<br/> Type: `logger.LogLevel`<br/> Default: `Info` in dev mode, `Error` in production mode
### LogLevelProduction
The default log level for production builds. More details about logging in the [Log Reference](../reference/runtime/log.mdx).
Name: LogLevelProduction<br/> Type: `logger.LogLevel`<br/> Default: `Error`
### OnStartup
This callback is called after the frontend has been created, but before `index.html` has been loaded. It is given the application context.
Name: OnStartup<br/> Type: `func(ctx context.Context)`
### OnDomReady
This callback is called after the frontend has loaded `index.html` and its resources. It is given the application context.
Name: OnDomReady<br/> Type: `func(ctx context.Context)`
### OnShutdown
This callback is called after the frontend has been destroyed, just before the application terminates. It is given the application context.
Name: OnShutdown<br/> Type: `func(ctx context.Context)`
### OnBeforeClose
If this callback is set, it will be called when the application is about to quit, either by clicking the window close button or calling `runtime.Quit`. Returning true will cause the application to continue, false will continue shutdown as normal. This is good for confirming with the user that they wish to exit the program.
Example:
```go title=windowsapp.go
func (b *App) beforeClose(ctx context.Context) (prevent bool) {
dialog, err := runtime.MessageDialog(ctx, runtime.MessageDialogOptions{
Type: runtime.QuestionDialog,
Title: "Quit?",
Message: "Are you sure you want to quit?",
})
if err != nil {
return false
}
return dialog != "Yes"
}
```
Name: OnBeforeClose<br/> Type: `func(ctx context.Context) bool`
### CSSDragProperty
Indicates the CSS property to use to identify which elements can be used to drag the window. Default: `--wails-draggable`.
Name: CSSDragProperty<br/> Type: `string`
### CSSDragValue
Indicates what value the `CSSDragProperty` style should have to drag the window. Default: `drag`.
Name: CSSDragValue<br/> Type: `string`
### ZoomFactor
Name: ZoomFactor<br/> Type: `float64`
This defines the zoom factor for the WebView2. This is the option matching the Edge user activated zoom in or out.
### IsZoomControlEnabled
Name: IsZoomControlEnabled<br/> Type: `bool`
This enables the zoom factor to be changed by the user. Please note that the zoom factor can be set in the options while disallowing the user to change it at runtime (f.e. for a kiosk application or similar).
### Bind
A slice of struct instances defining methods that need to be bound to the frontend.
Name: Bind<br/> Type: `[]interface{}`
### Windows
This defines [Windows specific options](#windows).
Name: Windows<br/> Type: `*windows.Options`
#### WebviewIsTransparent
Setting this to `true` will make the webview background transparent when an alpha value of `0` is used. This means that if you use `rgba(0,0,0,0)` for `background-color` in your CSS, the host window will show through. Often combined with [WindowIsTranslucent](#WindowIsTranslucent) to make frosty-looking applications.
Name: WebviewIsTransparent<br/> Type: `bool`
#### WindowIsTranslucent
Setting this to `true` will make the window background translucent. Often combined with [WebviewIsTransparent](#WebviewIsTransparent).
For Windows 11 versions before build 22621, this will use the [BlurBehind](https://learn.microsoft.com/en-us/windows/win32/dwm/blur-ovw) method for translucency, which can be slow. For Windows 11 versions after build 22621, this will enable the newer translucency types that are much faster. By default, the type of translucency used will be determined by Windows. To configure this, use the [BackdropType](#BackdropType) option.
Name: WindowIsTranslucent<br/> Type: `bool`
#### BackdropType
:::note
Requires Windows 11 build 22621 or later.
:::
Sets the translucency type of the window. This is only applicable if [WindowIsTranslucent](#WindowIsTranslucent) is set to `true`.
Name: BackdropType<br/> Type `windows.BackdropType`
The value can be one of the following:
| Value | Description |
| ------- | ----------------------------------------------------------------------------------------- |
| Auto | Let Windows decide which backdrop to use |
| None | Do not use translucency |
| Acrylic | Use [Acrylic](https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic) effect |
| Mica | Use [Mica](https://learn.microsoft.com/en-us/windows/apps/design/style/mica) effect |
| Tabbed | Use Tabbed. This is a backdrop that is similar to Mica. |
#### DisableWindowIcon
Setting this to `true` will remove the icon in the top left corner of the title bar.
Name: DisableWindowIcon<br/> Type: `bool`
#### DisableFramelessWindowDecorations
Setting this to `true` will remove the window decorations in [Frameless](#Frameless) mode. This means there will be no 'Aero Shadow' and no 'Rounded Corners' shown for the window. Please note that 'Rounded Corners' are only supported on Windows 11.
Name: DisableFramelessWindowDecorations<br/> Type: `bool`
#### WebviewUserDataPath
This defines the path where the WebView2 stores the user data. If empty `%APPDATA%\[BinaryName.exe]` will be used.
Name: WebviewUserDataPath<br/> Type: `string`
#### WebviewBrowserPath
This defines the path to a directory with WebView2 executable files and libraries. If empty, webview2 installed in the system will be used.
Important information about distribution of fixed version runtime:
- [How to get and extract runtime](https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution#details-about-the-fixed-version-runtime-distribution-mode)
- [Known issues for fixed version](https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution#known-issues-for-fixed-version)
- [The path of fixed version of the WebView2 Runtime should not contain \Edge\Application\.](https://docs.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-1.0.1245.22#createcorewebview2environmentwithoptions)
Name: WebviewBrowserPath<br/> Type: `string`
#### Theme
Minimum Windows Version: Windows 10 2004/20H1
This defines the theme that the application should use:
| Value | Description |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| SystemDefault | _Default_. The theme will be based on the system default. If the user changes their theme, the application will update to use the new setting |
| Dark | The application will use a dark theme exclusively |
| Light | The application will use a light theme exclusively |
Name: Theme<br/> Type: `windows.Theme`
#### CustomTheme
:::note
Minimum Windows Version: Windows 10/11 2009/21H2 Build 22000
:::
Allows you to specify custom colours for TitleBar, TitleText and Border for both light and dark mode, as well as when the window is active or inactive.
Name: CustomTheme<br/> Type: `windows.CustomTheme`
##### CustomTheme type
The CustomTheme struct uses `int32` to specify the colour values. These are in the standard(!) Windows format of: `0x00BBGGAA`. A helper function is provided to do RGB conversions into this format: `windows.RGB(r,g,b uint8)`.
NOTE: Any value not provided will default to black.
```go
type ThemeSettings struct {
DarkModeTitleBar int32
DarkModeTitleBarInactive int32
DarkModeTitleText int32
DarkModeTitleTextInactive int32
DarkModeBorder int32
DarkModeBorderInactive int32
LightModeTitleBar int32
LightModeTitleBarInactive int32
LightModeTitleText int32
LightModeTitleTextInactive int32
LightModeBorder int32
LightModeBorderInactive int32
}
```
Example:
```go
CustomTheme: &windows.ThemeSettings{
// Theme to use when window is active
DarkModeTitleBar: windows.RGB(255, 0, 0), // Red
DarkModeTitleText: windows.RGB(0, 255, 0), // Green
DarkModeBorder: windows.RGB(0, 0, 255), // Blue
LightModeTitleBar: windows.RGB(200, 200, 200),
LightModeTitleText: windows.RGB(20, 20, 20),
LightModeBorder: windows.RGB(200, 200, 200),
// Theme to use when window is inactive
DarkModeTitleBarInactive: windows.RGB(128, 0, 0),
DarkModeTitleTextInactive: windows.RGB(0, 128, 0),
DarkModeBorderInactive: windows.RGB(0, 0, 128),
LightModeTitleBarInactive: windows.RGB(100, 100, 100),
LightModeTitleTextInactive: windows.RGB(10, 10, 10),
LightModeBorderInactive: windows.RGB(100, 100, 100),
},
```
#### Messages
A struct of strings used by the webview2 installer if a valid webview2 runtime is not found.
Name: Messages<br/> Type: `*windows.Messages`
Customise this for any language you choose to support.
#### ResizeDebounceMS
ResizeDebounceMS is the amount of time to debounce redraws of webview2 when resizing the window. The default value (0) will perform redraws as fast as it can.
Name: ResizeDebounceMS<br/> Type: `uint16`
#### OnSuspend
If set, this function will be called when Windows initiates a switch to low power mode (suspend/hibernate)
Name: OnSuspend<br/> Type: `func()`
#### OnResume
If set, this function will be called when Windows resumes from low power mode (suspend/hibernate)
Name: OnResume<br/> Type: `func()`
### Mac
This defines [Mac specific options](#mac).
Name: Mac<br/> Type: `*mac.Options`
#### TitleBar
The TitleBar struct provides the ability to configure the look and feel of the title bar.
Name: TitleBar<br/> Type: [`*mac.TitleBar`](#titlebar-struct)
##### Titlebar struct
The titlebar of the application can be customised by using the TitleBar options:
```go
type TitleBar struct {
TitlebarAppearsTransparent bool
HideTitle bool
HideTitleBar bool
FullSizeContent bool
UseToolbar bool
HideToolbarSeparator bool
}
```
| Name | Description |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| TitlebarAppearsTransparent | Makes the titlebar transparent. This has the effect of hiding the titlebar and the content fill the window. [Apple Docs](https://developer.apple.com/documentation/appkit/nswindow/1419167-titlebarappearstransparent?language=objc) |
| HideTitle | Hides the title of the window. [Apple Docs](https://developer.apple.com/documentation/appkit/nswindowtitlevisibility?language=objc) |
| HideTitleBar | Removes [NSWindowStyleMaskTitled](https://developer.apple.com/documentation/appkit/nswindowstylemask/nswindowstylemasktitled/) from the style mask |
| FullSizeContent | Makes the webview fill the entire window. [Apple Docs](https://developer.apple.com/documentation/appkit/nswindowstylemask/nswindowstylemaskfullsizecontentview) |
| UseToolbar | Adds a default toolbar to the window. [Apple Docs](https://developer.apple.com/documentation/appkit/nstoolbar?language=objc) |
| HideToolbarSeparator | Removes the line beneath the toolbar. [Apple Docs](https://developer.apple.com/documentation/appkit/nstoolbar/1516954-showsbaselineseparator?language=objc) |
Preconfigured titlebar settings are available:
| Setting | Example |
| --------------------------- | ---------------------------------------------- |
| `mac.TitleBarDefault()` | ![](/img/reference/titlebar-default.webp) |
| `mac.TitleBarHidden()` | ![](/img/reference/titlebar-hidden.webp) |
| `mac.TitleBarHiddenInset()` | ![](/img/reference/titlebar-hidden-inset.webp) |
Example:
```go
Mac: &mac.Options{
TitleBar: mac.TitleBarHiddenInset(),
}
```
Click [here](https://github.com/lukakerr/NSWindowStyles) for some inspiration on customising the titlebar.
#### Appearance
Appearance is used to set the style of your app in accordance with Apple's [NSAppearance](https://developer.apple.com/documentation/appkit/nsappearancename?language=objc) names.
Name: Appearance<br/> Type: [`mac.AppearanceType`](#appearance-type)
##### Appearance type
You can specify the application's [appearance](https://developer.apple.com/documentation/appkit/nsappearance?language=objc).
| Value | Description |
| ----------------------------------------------------- | --------------------------------------------------------------- |
| DefaultAppearance | DefaultAppearance uses the default system value |
| NSAppearanceNameAqua | The standard light system appearance |
| NSAppearanceNameDarkAqua | The standard dark system appearance |
| NSAppearanceNameVibrantLight | The light vibrant appearance |
| NSAppearanceNameAccessibilityHighContrastAqua | A high-contrast version of the standard light system appearance |
| NSAppearanceNameAccessibilityHighContrastDarkAqua | A high-contrast version of the standard dark system appearance |
| NSAppearanceNameAccessibilityHighContrastVibrantLight | A high-contrast version of the light vibrant appearance |
| NSAppearanceNameAccessibilityHighContrastVibrantDark | A high-contrast version of the dark vibrant appearance |
Example:
```go
Mac: &mac.Options{
Appearance: mac.NSAppearanceNameDarkAqua,
}
```
#### WebviewIsTransparent
Setting this to `true` will make the webview background transparent when an alpha value of `0` is used. This means that if you use `rgba(0,0,0,0)` for `background-color` in your CSS, the host window will show through. Often combined with [WindowIsTranslucent](#WindowIsTranslucent) to make frosty-looking applications.
Name: WebviewIsTransparent<br/> Type: `bool`
#### WindowIsTranslucent
Setting this to `true` will make the window background translucent. Often combined with [WebviewIsTransparent](#WebviewIsTransparent) to make frosty-looking applications.
Name: WindowIsTranslucent<br/> Type: `bool`
#### About
This configuration lets you set the title, message and icon for the "About" menu item in the app menu created by the "AppMenu" role.
Name: About<br/> Type: [`*mac.AboutInfo`](#about-struct)
##### About struct
```go
type AboutInfo struct {
Title string
Message string
Icon []byte
}
```
If these settings are provided, an "About" menu item will appear in the app menu (when using the `AppMenu` role). Given this configuration:
```go
//go:embed build/appicon.png
var icon []byte
func main() {
err := wails.Run(&options.App{
...
Mac: &mac.Options{
About: &mac.AboutInfo{
Title: "My Application",
Message: "© 2021 Me",
Icon: icon,
},
},
})
```
The "About" menu item will appear in the app menu:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/reference/about-menu.webp").default}
class="screenshot"
/>
</div>
<br />
```
When clicked, that will open an about message box:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/reference/about-dialog.webp").default}
width="40%"
class="screenshot"
/>
</div>
<br />
```
### Linux
This defines [Linux specific options](#linux).
Name: Linux<br/> Type: `*linux.Options`
#### Icon
Sets up the icon representing the window. This icon is used when the window is minimized (also known as iconified).
Name: Icon<br/> Type: `[]byte`
Some window managers or desktop environments may also place it in the window frame, or display it in other contexts. On others, the icon is not used at all, so your mileage may vary.
NOTE: Gnome on Wayland at least does not display this icon. To have a application icon there, a `.desktop` file has to be used. On KDE it should work.
The icon should be provided in whatever size it was naturally drawn; that is, don’t scale the image before passing it. Scaling is postponed until the last minute, when the desired final size is known, to allow best quality.
#### WindowIsTranslucent
Setting this to `true` will make the window background translucent. Some window managers may ignore it, or result in a black window.
Name: WindowIsTranslucent<br/> Type: `bool`
### Debug
This defines [Debug specific options](#Debug) that apply to debug builds.
Name: Debug<br/> Type: `options.Debug`
#### OpenInspectorOnStartup
Setting this to `true` will open the WebInspector on startup of the application.
Name: OpenInspectorOnStartup<br/> Type: `bool`
[^1]: This requires WebKit2GTK 2.36+ support and your app needs to be build with the build tag `webkit2_36` to activate support for this feature. This also bumps the minimum requirement of WebKit2GTK to 2.36 for your app.

57
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/project-config.mdx Normal file
View File

@ -0,0 +1,57 @@
---
sidebar_position: 5
---
# Configuration du projet
La configuration du projet se trouve dans le fichier `wails.json` du répertoire du projet. La structure de la configuration est :
```json
{
"name": "[Le nom du projet]",
"assetdir": "[Chemin relatif vers le répertoire contenant les ressources compilées, ceci est normalement déduit et pourrait être laissé vide]",
"reloaddirs": "[Répertoires supplémentaires pour déclencher des recharges automatiques (séparés par des virgules), ceci n'est utilisé que pour certaines configurations d'actifs avancées]",
"build:dir": "[Le répertoire où se trouvent les fichiers de compilation. Par défaut, 'build']",
"frontend:dir": "[Chemin relatif vers le répertoire du frontend. Par défaut, 'frontend']',
"frontend:install": "[La commande pour installer les dépendances de node, exécuté dans le répertoire du frontend - souvent `npm install`]",
"frontend:build": "[La commande pour construire l'application, exécuté dans le répertoire frontend - souvent `npm run build`]",
"frontend:dev": "[Cette commande a été remplacée par frontend:dev:build. Si frontend:dev:build n'est pas spécifié, cela retombera dans cette commande. \nSi cette commande n'est pas non plus spécifiée va revenir sur frontend:build]",
"frontend:dev:build": "[Cette commande est l'équivalent en dev de frontend:build. Si non spécifié, revient à frontend:dev]",
"frontend:dev:install": "[Cette commande est l'équivalent en dev de frontend:install. Si non spécifié, revient à frontend:install]",
"frontend:dev:watcher": "[Cette commande est exécutée dans un processus séparé sur `wails dev`. Utile pour les observateurs tiers ou les serveurs de développement de parties tierces]",
"frontend:dev:serverUrl": "[URL vers un serveur de développement tiers pour exposer l'application, EG Vite. \nSi cette valeur est définie à 'auto', alors le devServerUrl sera déduit de la sortie Vite]",
"wailsjsdir": "[Chemin relatif au répertoire qui vont contenir les modules JS automatiquement créés]",
"version": "[Version de configuration du projet]",
"outputfilename": "[Le nom du binaire]",
"debounceMS": 100, // Nombre de millisecondes durant lesquelles le serveur de dev attend de se recharger quand il détecte un changement dans les ressourcces
"devServer": "[Adresse pour se connecter au serveur de dev de wails. Par défaut: localhost:34115]",
"appargs": "[Arguments passés à l'application en mode shell lors du mode dev]",
"runNonNativeBuildHooks": false, // Définit si les évènements de compilation doivent être exécutés même s'ils sont définis pour un système d'exploitation autre que le système d'exploitation hôte.
"preBuildHooks": {
"GOOS/GOARCH": "[La commande qui sera exécutée avant une compilation du GOOS/GOARCH: ${platform} est remplacée par le "GOOS/GOARCH". The "GOOS/GOARCH" hook is executed before the "GOOS/*" and "*/*" hook.]",
"GOOS/*": "[The command that will be executed before a build of the specified GOOS: ${platform} is replaced with the "GOOS/GOARCH". The "GOOS/*" hook is executed before the "*/*" hook.]",
"*/*": "[The command that will be executed before every build: ${platform} is replaced with the "GOOS/GOARCH".]"
},
"postBuildHooks": {
"GOOS/GOARCH": "[The command that will be executed after a build of the specified GOOS/GOARCH: ${platform} is replaced with the "GOOS/GOARCH" and ${bin} with the path to the compiled binary. The "GOOS/GOARCH" hook is executed before the "GOOS/*" and "*/*" hook.]",
"GOOS/*": "[The command that will be executed after a build of the specified GOOS: ${platform} is replaced with the "GOOS/GOARCH" and ${bin} with the path to the compiled binary. The "GOOS/*" hook is executed before the "*/*" hook.]",
"*/*": "[The command that will be executed after every build: ${platform} is replaced with the "GOOS/GOARCH" and ${bin} with the path to the compiled binary.]"
},
"info": { // Data used to populate manifests and version info.
"companyName": "[The company name. Default: [The project name]]",
"productName": "[The product name. Default: [The project name]]",
"productVersion": "[The version of the product. Default: '1.0.0']",
"copyright": "[The copyright of the product. Default: 'Copyright.........']",
"comments": "[A short comment of the app. Default: 'Built using Wails (https://wails.app)']"
},
"nsisType": "['multiple': One installer per architecture. 'single': Single universal installer for all architectures being built. Default: 'multiple']",
"obfuscated": "[Whether the app should be obfuscated. Default: false]",
"garbleargs": "[The arguments to pass to the garble command when using the obfuscated flag]"
}
```
This file is read by the Wails CLI when running `wails build` or `wails dev`.
The `assetdir`, `reloaddirs`, `wailsjsdir`, `debounceMS`, `devserver` and `frontenddevserverurl` flags in `wails build/dev` will update the project config and thus become defaults for subsequent runs.
The JSON Schema for this file is located [here](https://wails.io/schemas/config.v2.json).

13
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/runtime/browser.mdx Normal file
View File

@ -0,0 +1,13 @@
---
sidebar_position: 7
---
# Navigateur
Ces méthodes sont liées au navigateur du système.
### BrowserOpenURL
Ouvre l'URL donnée dans le navigateur système.
Go: `BrowserOpenURL(ctx context.Context, url string)`<br/> JS: `BrowserOpenURL(url string)`

302
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/runtime/dialog.mdx Normal file
View File

@ -0,0 +1,302 @@
---
sidebar_position: 5
---
# Boîte de dialogue
Cette partie du runtime fournit un accès aux boîtes de dialogue natives, telles que les sélecteurs de fichiers et les boîtes de messages.
:::info JavaScript
La boîte de dialogue n'est actuellement pas prise en charge dans l'exécuteur JS.
:::
### OpenDirectoryDialog
Ouvre une boîte de dialogue qui invite l'utilisateur à sélectionner un répertoire. Peut être personnalisé en utilisant [OpenDialogOptions](#opendialogoptions).
Go: `OpenDirectoryDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
Renvoie : le répertoire sélectionné (vide si l'utilisateur a annulé) ou une erreur
### OpenFileDialog
Ouvre une boîte de dialogue qui invite l'utilisateur à sélectionner un fichier. Peut être personnalisé en utilisant [OpenDialogOptions](#opendialogoptions).
Go: `OpenFileDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
Renvoie : le fichier sélectionné (vide si l'utilisateur a annulé) ou une erreur
### OpenFileDialog
Ouvre une boîte de dialogue qui invite l'utilisateur à sélectionner plusieurs fichiers. Peut être personnalisé en utilisant [OpenDialogOptions](#opendialogoptions).
Go: `OpenMultipleFilesDialog(ctx context.Context, dialogOptions OpenDialogOptions) ([]string, error)`
Renvoie : les fichiers sélectionnés (nil si l'utilisateur a annulé) ou une erreur
### SaveFileDialog
Ouvre une boîte de dialogue qui invite l'utilisateur à saisir un nom pour le fichier à enregistrer. Peut être personnalisé en utilisant [SaveDialogOptions](#savedialogoptions).
Go: `SaveFileDialog(ctx context.Context, dialogOptions SaveDialogOptions) (string, error)`
Renvoie : le fichier sélectionné (vide si l'utilisateur a annulé) ou une erreur
### MessageDialog
Affiche un message en utilisant une boîte de dialogue. Peut être personnalisé en utilisant [MessageDialogOptions](#messagedialogoptions).
Go: `MessageDialog(ctx context.Context, dialogOptions MessageDialogOptions) (string, error)`
Renvoie : Le texte du bouton sélectionné ou une erreur
## Options
### OpenDialogOptions
```go
type OpenDialogOptions struct {
DefaultDirectory string
DefaultFilename string
Title string
Filters []FileFilter
ShowHiddenFiles bool
CanCreateDirectories bool
ResolvesAliases bool
TreatPackagesAsDirectories bool
}
```
| Champ | Description | Win | Mac | Lin |
| -------------------------- | -------------------------------------------------------------- | --- | --- | --- |
| DefaultDirectory | Le répertoire que la boîte de dialogue affichera à l'ouverture | ✅ | ✅ | ✅ |
| DefaultFilename | Le nom du fichier par défaut | ✅ | ✅ | ✅ |
| Title | Titre pour la boite de dialogue | ✅ | ✅ | ✅ |
| [Filters](#filefilter) | Une liste de filtres de fichiers | ✅ | ✅ | ✅ |
| ShowHiddenFiles | Afficher les fichiers cachés par le système | | ✅ | ✅ |
| CanCreateDirectories | Autoriser l'utilisateur de créer des dossiers | | ✅ | |
| ResolvesAliases | Si vrai, retourne le fichier et non l'alias | | ✅ | |
| TreatPackagesAsDirectories | Autoriser la navigation dans les dossiers | | ✅ | |
### SaveDialogOptions
```go
type SaveDialogOptions struct {
DefaultDirectory string
DefaultFilename string
Title string
Filters []FileFilter
ShowHiddenFiles bool
CanCreateDirectories bool
TreatPackagesAsDirectories bool
}
```
| Champ | Description | Win | Mac | Lin |
| -------------------------- | -------------------------------------------------------------- | --- | --- | --- |
| DefaultDirectory | Le répertoire que la boîte de dialogue affichera à l'ouverture | ✅ | ✅ | ✅ |
| DefaultFilename | Le nom du fichier par défaut | ✅ | ✅ | ✅ |
| Title | Titre pour la boite de dialogue | ✅ | ✅ | ✅ |
| [Filters](#filefilter) | Une liste de filtres de fichiers | ✅ | ✅ | ✅ |
| ShowHiddenFiles | Afficher les fichiers cachés par le système | | ✅ | ✅ |
| CanCreateDirectories | Autoriser l'utilisateur de créer des dossiers | | ✅ | |
| TreatPackagesAsDirectories | Autoriser la navigation dans les dossiers | | ✅ | |
### MessageDialogOptions
```go
type MessageDialogOptions struct {
Type DialogType
Title string
Message string
Buttons []string
DefaultButton string
CancelButton string
}
```
| Champ | Description | Win | Mac | Lin |
| ------------- | ---------------------------------------------------------------------------------------------- | -------------- | --- | --- |
| Type | Le type de boîte de dialogue de message: question, info... | ✅ | ✅ | ✅ |
| Title | Titre pour la boite de dialogue | ✅ | ✅ | ✅ |
| Message | Le message à afficher à l'utilisateur | ✅ | ✅ | ✅ |
| Buttons | La liste des noms des boutons | | ✅ | |
| DefaultButton | Le bouton avec ce texte doit être traité comme le bouton par défaut. Lié à la touche `entrée`. | ✅[*](#windows) | ✅ | |
| CancelButton | Le bouton avec ce texte doit être traité permettant d'annuler. Lié à la touche `echap` | | ✅ | |
#### Windows
Windows has standard dialog types in which the buttons are not customisable. The value returned will be one of: "Ok", "Cancel", "Abort", "Retry", "Ignore", "Yes", "No", "Try Again" or "Continue".
For Question dialogs, the default button is "Yes" and the cancel button is "No". This can be changed by setting the `DefaultButton` value to `"No"`.
Example:
```go
result, err := runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
Type: runtime.QuestionDialog,
Title: "Question",
Message: "Do you want to continue?",
DefaultButton: "No",
})
```
#### Linux
Linux has standard dialog types in which the buttons are not customisable. The value returned will be one of: "Ok", "Cancel", "Yes", "No"
#### Mac
A message dialog on Mac may specify up to 4 buttons. If no `DefaultButton` or `CancelButton` is given, the first button is considered default and is bound to the `return` key.
For the following code:
```go
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
Title: "It's your turn!",
Message: "Select a number",
Buttons: []string{"one", "two", "three", "four"},
})
```
the first button is shown as default:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_no_defaults.png").default}
width="30%"
class="screenshot"
/>
</div>
<br />
```
And if we specify `DefaultButton` to be "two":
```go
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
Title: "It's your turn!",
Message: "Select a number",
Buttons: []string{"one", "two", "three", "four"},
DefaultButton: "two",
})
```
the second button is shown as default. When `return` is pressed, the value "two" is returned.
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_default_button.png").default}
width="30%"
class="screenshot"
/>
</div>
<br />
```
If we now specify `CancelButton` to be "three":
```go
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
Title: "It's your turn!",
Message: "Select a number",
Buttons: []string{"one", "two", "three", "four"},
DefaultButton: "two",
CancelButton: "three",
})
```
the button with "three" is shown at the bottom of the dialog. When `escape` is pressed, the value "three" is returned:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_default_cancel.png").default}
width="30%"
class="screenshot"
/>
</div>
<br />
<br />
<br />
```
#### DialogType
```go
const (
InfoDialog DialogType = "info"
WarningDialog DialogType = "warning"
ErrorDialog DialogType = "error"
QuestionDialog DialogType = "question"
)
```
### FileFilter
```go
type FileFilter struct {
DisplayName string // Filter information EG: "Image Files (*.jpg, *.png)"
Pattern string // semi-colon separated list of extensions, EG: "*.jpg;*.png"
}
```
#### Windows
Windows allows you to use multiple file filters in dialog boxes. Each FileFilter will show up as a separate entry in the dialog:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_win_filters.png").default}
width="50%"
class="screenshot"
/>
</div>
<br />
<br />
<br />
```
#### Linux
Linux allows you to use multiple file filters in dialog boxes. Each FileFilter will show up as a separate entry in the dialog:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_lin_filters.png").default}
width="50%"
class="screenshot"
/>
</div>
<br />
<br />
<br />
```
#### Mac
Mac dialogs only have the concept of a single set of patterns to filter files. If multiple FileFilters are provided, Wails will use all the Patterns defined.
Exemple:
```go
selection, err := runtime.OpenFileDialog(b.ctx, runtime.OpenDialogOptions{
Title: "Select File",
Filters: []runtime.FileFilter{
{
DisplayName: "Images (*.png;*.jpg)",
Pattern: "*.png;*.jpg",
}, {
DisplayName: "Videos (*.mov;*.mp4)",
Pattern: "*.mov;*.mp4",
},
},
})
```
This will result in the Open File dialog using `*.png,*.jpg,*.mov,*.mp4` as a filter.

37
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/runtime/events.mdx Normal file
View File

@ -0,0 +1,37 @@
---
sidebar_position: 2
---
# Events
The Wails runtime provides a unified events system, where events can be emitted or received by either Go or JavaScript. Optionally, data may be passed with the events. Listeners will receive the data in the local data types.
### EventsOn
This method sets up a listener for the given event name. When an event of type `eventName` is [emitted](#EventsEmit), the callback is triggered. Any additional data sent with the emitted event will be passed to the callback. It returns a function to cancel the listener.
Go: `EventsOn(ctx context.Context, eventName string, callback func(optionalData ...interface{})) func()`<br/> JS: `EventsOn(eventName string, callback function(optionalData?: any)): () => void`
### EventsOff
This method unregisters the listener for the given event name, optionally multiple listeneres can be unregistered via `additionalEventNames`.
Go: `EventsOff(ctx context.Context, eventName string, additionalEventNames ...string)`<br/> JS: `EventsOff(eventName string, ...additionalEventNames)`
### EventsOnce
This method sets up a listener for the given event name, but will only trigger once. It returns a function to cancel the listener.
Go: `EventsOnce(ctx context.Context, eventName string, callback func(optionalData ...interface{})) func()`<br/> JS: `EventsOnce(eventName string, callback function(optionalData?: any)): () => void`
### EventsOnMultiple
This method sets up a listener for the given event name, but will only trigger a maximum of `counter` times. It returns a function to cancel the listener.
Go: `EventsOnMultiple(ctx context.Context, eventName string, callback func(optionalData ...interface{}), counter int) func()`<br/> JS: `EventsOnMultiple(eventName string, callback function(optionalData?: any), counter int): () => void`
### EventsEmit
This method emits the given event. Optional data may be passed with the event. This will trigger any event listeners.
Go: `EventsEmit(ctx context.Context, eventName string, optionalData ...interface{})`<br/> JS: `EventsEmit(ctx context, optionalData function(optionalData?: any))`

84
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/runtime/intro.mdx Normal file
View File

@ -0,0 +1,84 @@
---
sidebar_position: 1
---
# Introduction
The runtime is a library that provides utility methods for your application. There is both a Go and JavaScript runtime and the aim is to try and keep them at parity where possible.
It has utility methods for:
- [Window](window.mdx)
- [Menu](menu.mdx)
- [Boîte de dialogue](dialog.mdx)
- [Événements](events.mdx)
- [Browser](browser.mdx)
- [Log](log.mdx)
The Go Runtime is available through importing `github.com/wailsapp/wails/v2/pkg/runtime`. All methods in this package take a context as the first parameter. This context should be obtained from the [OnStartup](../options.mdx#onstartup) or [OnDomReady](../options.mdx#ondomready) hooks.
:::info Note
Whilst the context will be provided to the [OnStartup](../options.mdx#onstartup) method, there's no guarantee the runtime will work in this method as the window is initialising in a different thread. If you wish to call runtime methods at startup, use [OnDomReady](../options.mdx#ondomready).
:::
The JavaScript library is available to the frontend via the `window.runtime` map. There is a runtime package generated when using `dev` mode that provides TypeScript declarations for the runtime. This should be located in the `wailsjs` directory in your frontend directory.
### Cacher
Go: `Hide(ctx context.Context)`<br/> JS: `Hide()`
Cache l'application.
:::info Note
On Mac, this will hide the application in the same way as the `Hide` menu item in standard Mac applications. This is different to hiding the window, but the application still being in the foreground. For Windows and Linux, this is currently the same as `WindowHide`.
:::
### Afficher
Affiche l'application.
:::info Note
On Mac, this will bring the application back into the foreground. For Windows and Linux, this is currently the same as `WindowShow`.
:::
Go: `Show(ctx context.Context)`<br/> JS: `Show()`
### Quitter
Quitte l'application.
Go: `Quit(ctx context.Context)`<br/> JS: `Quit()`
### Environnement
Renvoie les détails de l'environnement actuel.
Go: `Environment(ctx context.Context) EnvironmentInfo`<br/> JS: `Environment(): Promise<EnvironmentInfo>`
#### EnvironmentInfo
Go:
```go
type EnvironmentInfo struct {
BuildType string
Platform string
Arch string
}
```
JS:
```ts
interface EnvironmentInfo {
buildType: string;
platform: string;
arch: string;
}
```

130
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/runtime/log.mdx Normal file
View File

@ -0,0 +1,130 @@
---
sidebar_position: 3
---
# Log
The Wails runtime provides a logging mechanism that may be called from Go or JavaScript. Comme la plupart des loggers, il y a un certain nombre de niveaux de log :
- Trace
- Debug
- Info
- Warning
- Error
- Fatal
Le logger affichera tous les messages de log au niveau actuel ou supérieur. Exemple : Le niveau `Debug` affichera tous les messages sauf ceux du niveau `Trace`.
### LogPrint
Ajoute le message donné dans les logs en tant que message brut.
Go: `LogPrint(ctx context.Context, message string)`<br/> JS: `LogPrint(message: string)`
### LogPrintf
Ajoute le message donné dans les logs en tant que message brut.
Go: `LogPrintf(ctx context.Context, format string, args ...interface{})`<br/>
### LogTrace
Ajoute le message donné dans les logs avec le niveau de log `Trace`.
Go: `LogTrace(ctx context.Context, message string)`<br/> JS: `LogTrace(message: string)`
### LogTracef
Ajoute le message donné dans les logs avec le niveau de log `Trace`.
Go: `LogTracef(ctx context.Context, format string, args ...interface{})`<br/>
### LogDebug
Ajoute le message donné dans les logs avec le niveau de log `Debug`.
Go: `LogDebug(ctx context.Context, message string)`<br/> JS: `LogDebug(message: string)`
### LogDebugf
Ajoute le message donné dans les logs avec le niveau de log `Debug`.
Go: `LogDebugf(ctx context.Context, format string, args ...interface{})`<br/>
### LogInfo
Ajoute le message donné dans les logs avec le niveau de log `Info`.
Go: `LogInfo(ctx context.Context, message string)`<br/> JS: `LogInfo(message: string)`
### LogInfof
Ajoute le message donné dans les logs avec le niveau de log `Info`.
Go: `LogInfof(ctx context.Context, format string, args ...interface{})`<br/>
### LogWarning
Ajoute le message donné dans les logs avec le niveau de log `Warning`.
Go: `LogWarning(ctx context.Context, message string)`<br/> JS: `LogWarning(message: string)`
### LogWarningf
Ajoute le message donné dans les logs avec le niveau de log `Warning`.
Go: `LogWarningf(ctx context.Context, format string, args ...interface{})`<br/>
### LogError
Ajoute le message donné dans les logs avec le niveau de log `Error`.
Go: `LogError(ctx context.Context, message string)`<br/> JS: `LogError(message: string)`
### LogErrorf
Ajoute le message donné dans les logs avec le niveau de log `Error`.
Go: `LogErrorf(ctx context.Context, format string, args ...interface{})`<br/>
### LogFatal
Ajoute le message donné dans les logs avec le niveau de log `Fatal`.
Go: `LogFatal(ctx context.Context, message string)`<br/> JS: `LogFatal(message: string)`
### LogFatalf
Ajoute le message donné dans les logs avec le niveau de log `Fatal`.
Go: `LogFatalf(ctx context.Context, format string, args ...interface{})`<br/>
### LogSetLogLevel
Définit le niveau des logs. In JavaScript, the number relates to the following log levels:
| Valeur | Niveau de log |
| ------ | ------------- |
| 1 | Trace |
| 2 | Debug |
| 3 | Info |
| 4 | Warning |
| 5 | Error |
Go: `LogSetLogLevel(ctx context.Context, level logger.LogLevel)`<br/> JS: `LogSetLogLevel(level: number)`
## Utiliser un Logger Personnalisé
Un logger personnalisé peut être utilisé en le définissant dans l'option de l'application [Logger](../options.mdx#logger) . La seule condition est que le logger implémente l'interface `logger.Logger` définie dans `github.com/wailsapp/wails/v2/pkg/logger`:
```go title="logger.go"
type Logger interface {
Print(message string)
Trace(message string)
Debug(message string)
Info(message string)
Warning(message string)
Error(message string)
Fatal(message string)
}
```

25
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/runtime/menu.mdx Normal file
View File

@ -0,0 +1,25 @@
---
sidebar_position: 6
---
# Menu
Ces méthodes sont liées au menu de l'application.
:::info JavaScript
Le menu n'est actuellement pas pris en charge lors de l'exécution de JS.
:::
### MenuSetApplicationMenu
Définit le menu de l'application dans le [menu](../menus.mdx) donné.
Go: `MenuSetApplicationMenu(ctx context.Context, menu *menu.Menu)`
### MenuUpdateApplicationMenu
Met à jour le menu de l'application, avec toutes les autres modifications déjà appliquées via `MenuSetApplicationMenu`.
Go: `MenuUpdateApplicationMenu(ctx context.Context)`

221
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/reference/runtime/window.mdx Normal file
View File

@ -0,0 +1,221 @@
---
sidebar_position: 4
---
# Fenêtre
Ces méthodes donnent le contrôle de la fenêtre de l'application.
### WindowSetTitle
Définit le texte dans la barre de titre de la fenêtre.
Go: `WindowSetTitle(ctx context.Context, title string)`<br/> JS: `WindowSetTitle(title: string)`
### WindowFullscreen
Mets la fenêtre en plein écran.
Go: `WindowFullscreen(ctx context.Context)`<br/> JS: `WindowFullscreen()`
### WindowUnfullscreen
Restaure les dimensions et la position de la fenêtre avant le plein écran.
Go: `WindowUnfullscreen(ctx context.Context)`<br/> JS: `WindowUnfullscreen()`
### WindowIsFullscreen
Renvoie vrai si la fenêtre est en plein écran.
Go: `WindowIsFullscreen(ctx context.Context) bool`<br/> JS: `WindowIsFullscreen() bool`
### WindowCenter
Centre la fenêtre sur le moniteur sur laquelle la fenêtre est actuellement ouverte.
Go: `WindowCenter(ctx context.Context)`<br/> JS: `WindowCenter()`
### WindowExecJS
Exécute du code JS dans la fenêtre.
Cette méthode exécute le code dans le navigateur de manière asynchrone et retourne immédiatement le résultat. Si le script cause des erreurs, elles ne seront disponibles que dans la console du navigateur.
Go: `WindowExecJS(ctx context.Context, js string)`
### WindowReload
Effectue un "rechargement" (Recharge la page courante).
Go: `WindowReload(ctx context.Context)`<br/> JS: `WindowReload()`
### WindowReloadApp
Recharge le frontend de l'application.
Go: `WindowReloadApp(ctx context.Context)`<br/> JS: `WindowReloadApp()`
### WindowSetSystemDefaultTheme
Windows seulement.
Go: `WindowSetSystemDefaultTheme(ctx context.Context)`<br/> JS: `WindowSetSystemDefaultTheme()`
Définit le thème de fenêtre à la valeur par défaut du système (sombre/clair).
### WindowSetLightTheme
Windows seulement.
Go: `WindowSetLightTheme(ctx context.Context)`<br/> JS: `WindowSetLightTheme()`
Définit le thème clair à la fenêtre.
### WindowSetDarkTheme
Windows seulement.
Go: `WindowSetDarkTheme(ctx context.Context)`<br/> JS: `WindowSetDarkTheme()`
Définit le thème sombre à la fenêtre.
### WindowShow
Affiche la fenêtre, si elle est actuellement masquée.
Go: `WindowShow(ctx context.Context)`<br/> JS: `WindowShow()`
### WindowHide
Masque la fenêtre, si elle est actuellement visible.
Go: `WindowHide(ctx context.Context)`<br/> JS: `WindowHide()`
### WindowIsNormal
Renvoie vrai si la fenêtre n'est pas minimisée, maximisée ou plein écran.
Go: `WindowIsNormal(ctx context.Context) bool`<br/> JS: `WindowIsNormal() bool`
### WindowSetSize
Définit la largeur et la hauteur de la fenêtre.
Go: `WindowSetSize(ctx context.Context, width int, height int)`<br/> JS: `WindowSetSize(size: Size)`
### WindowGetSize
Retourne la largeur et la hauteur de la fenêtre.
Go: `WindowGetSize(ctx context.Context) (width int, height int)`<br/> JS: `WindowGetSize() : Size`
### WindowSetMinSize
Définit la taille minimale de la fenêtre. Redimensionnera la fenêtre si la fenêtre est actuellement plus petite que les dimensions données.
Définir une taille de `0,0` désactivera cette contrainte.
Go: `WindowSetMinSize(ctx context.Context, width int, height int)`<br/> JS: `WindowSetMinSize(size: Size)`
### WindowSetMaxSize
Définit la taille maximale de la fenêtre. Redimensionnera la fenêtre si la fenêtre est actuellement plus grande que les dimensions données.
Définir une taille de `0,0` désactivera cette contrainte.
Go: `WindowSetMaxSize(ctx context.Context, width int, height int)`<br/> JS: `WindowSetMaxSize(size: Size)`
### WindowSetAlwaysOnTop
Paramètre pour faire en sorte que la fenêtre soit toujours au dessus des autres ou non.
Go: `WindowSetAlwaysOnTop(ctx context.Context, b bool)`<br/> JS: `WindowSetAlwaysOnTop(b: Boolen)`
### WindowSetPosition
Définit la position de la fenêtre par rapport au moniteur sur lequel la fenêtre est activée.
Go: `WindowSetPosition(ctx context.Context, x int, y int)`<br/> JS: `WindowSetPosition(position: Position)`
### WindowGetPosition
Récupère la position de la fenêtre relative au moniteur sur lequel la fenêtre est activée.
Go: `WindowGetPosition(ctx context.Context) (x int, y int)`<br/> JS: `WindowGetPosition() : Position`
### WindowMaximiseWindowMaximise
Maximise la fenêtre pour remplir l'écran.
Go: `WindowMaximise(ctx context.Context)`<br/> JS: `WindowMaximise()`
### WindowUnmaximise
Restaure la fenêtre aux dimensions et à la position avant qu'elle soit maximisée.
Go: `WindowUnmaximise(ctx context.Context)`<br/> JS: `WindowUnmaximise()`
### WindowIsMaximised
Renvoie vrai si la fenêtre est maximisée.
Go: `WindowIsMaximised(ctx context.Context) bool`<br/> JS: `WindowIsMaximised() bool`
### WindowToggleMaximise
Option permettant de basculer entre la maximisation de la fenêtre et sa non maximisation.
Go: `WindowToggleMaximise(ctx context.Context)`<br/> JS: `WindowToggleMaximise()`
### WindowMinimise
Minimise la fenêtre.
Go: `WindowMinimise(ctx context.Context)`<br/> JS: `WindowMinimise()`
### WindowUnminimise
Restaure la fenêtre aux dimensions et à la position avant qu'elle soit minimisée.
Go: `WindowUnminimise(ctx context.Context)`<br/> JS: `WindowUnminimise()`
### WindowIsMinimised
Renvoie vrai si la fenêtre est minimisée.
Go: `WindowIsMinimised(ctx context.Context) bool`<br/> JS: `WindowIsMinimised() bool`
### WindowSetBackgroundColour
Définit la couleur de fond de la fenêtre avec la couleur RGBA donnée. Cette couleur sera visible au travers de tous les pixels transparents.
Les valeurs valides pour R, G, B et A sont entre 0 et 255 inclus.
:::info Windows
Sous Windows, seules les valeurs 0 et 255 sont prises en charge pour A. Toute valeur qui n'est pas 0 sera considérée comme 255.
:::
Go: `WindowSetBackgroundColour(ctx context.Context, R, G, B, A uint8)`<br/> JS: `WindowSetBackgroundColour(R, G, B, A)`
## TypeScript Object Definitions
### Position
```ts
interface Position {
x: number;
y: number;
}
```
### Size (taille)
```ts
interface Size {
w: number;
h: number;
}
```

245
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/tutorials/dogsapi.mdx Normal file
View File

@ -0,0 +1,245 @@
---
sidebar_position: 20
---
# API Chiens
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/tutorials/dogsapi/img.webp").default}
width="50%"
className="screenshot"
/>
</div>
<br />
```
:::note
Ce tutoriel a été gracieusement fourni par [@tatadan](https://twitter.com/tatadan) et fait partie de leur [dépôt d'exemples Wails](https://github.com/tataDan/wails-v2-examples).
:::
Dans ce tutoriel, nous allons développer une application qui récupère des photos de chiens du web et les affiche.
### Créer le projet
Créons l'application. Depuis un terminal saisissez : `wails init -n dogs-api -t svelte`
Note: Nous pouvons ajouter l'une des options suivantes `-ide vscode` ou `-ide goland` à la fin de la commande si vous voulez ajouter le support d'un IDE.
Maintenant, exécutons `cd dogs-api` et commençons à éditer les fichiers du projet.
### Retirer le code inutilisé
Nous allons commencer par supprimer certains éléments que nous savons que nous n'utiliserons pas :
- Ouvrez `app.go` et supprimez les lignes suivantes :
```go
// Greet returns a greeting for the given name
func (a *App) Greet(name string) string {
return fmt.Sprintf("Hello %s, It's show time!", name)
}
```
- Ouvrez `frontend/src/App.svelte` et supprimez toutes les lignes.
- Supprimer le fichier `frontend/src/assets/images/logo-universal.png`
### Créer notre application
Ajoutons maintenant notre nouveau code Go.
Ajoutez les déclarations struct suivantes dans `app.go` avant la déclaration des fonctions:
```go
type RandomImage struct {
Message string
Status string
}
type AllBreeds struct {
Message map[string]map[string][]string
Status string
}
type ImagesByBreed struct {
Message []string
Status string
}
```
Ajouter les fonctions suivantes dans `app.go` (après la déclaration de la fonction déjà existante):
```go
func (a *App) GetRandomImageUrl() string {
response, err := http.Get("https://dog.ceo/api/breeds/image/random")
if err != nil {
log.Fatal(err)
}
responseData, err := ioutil.ReadAll(response.Body)
if err != nil {
log.Fatal(err)
}
var data RandomImage
json.Unmarshal(responseData, &data)
return data.Message
}
func (a *App) GetBreedList() []string {
var breeds []string
response, err := http.Get("https://dog.ceo/api/breeds/list/all")
if err != nil {
log.Fatal(err)
}
responseData, err := ioutil.ReadAll(response.Body)
if err != nil {
log.Fatal(err)
}
var data AllBreeds
json.Unmarshal(responseData, &data)
for k := range data.Message {
breeds = append(breeds, k)
}
sort.Strings(breeds)
return breeds
}
func (a *App) GetImageUrlsByBreed(breed string) []string {
url := fmt.Sprintf("%s%s%s%s", "https://dog.ceo/api/", "breed/", breed, "/images")
response, err := http.Get(url)
if err != nil {
log.Fatal(err)
}
responseData, err := ioutil.ReadAll(response.Body)
if err != nil {
log.Fatal(err)
}
var data ImagesByBreed
json.Unmarshal(responseData, &data)
return data.Message
}
```
Modifiez la section `import` de `app.go` pour ressembler à ceci :
```go
import (
"context"
"fmt"
"encoding/json"
"io/ioutil"
"log"
"net/http"
"sort"
)
```
Ajouter les lignes suivantes dans `frontend/src/App.svelte`:
<!-- prettier-ignore-start -->
```html
<script>
import { GetRandomImageUrl } from "../wailsjs/go/main/App.js";
import { GetBreedList } from "../wailsjs/go/main/App.js";
import { GetImageUrlsByBreed } from "../wailsjs/go/main/App.js";
let randomImageUrl = "";
let breeds = [];
let photos = [];
let selectedBreed;
let showRandomPhoto = false;
let showBreedPhotos = false;
function init() {
getBreedList();
}
init();
function getRandomImageUrl() {
showRandomPhoto = false;
showBreedPhotos = false;
GetRandomImageUrl().then((result) => (randomImageUrl = result));
showRandomPhoto = true;
}
function getBreedList() {
GetBreedList().then((result) => (breeds = result));
}
function getImageUrlsByBreed() {
init();
showRandomPhoto = false;
showBreedPhotos = false;
GetImageUrlsByBreed(selectedBreed).then((result) => (photos = result));
showBreedPhotos = true;
}
</script>
<h3>Dogs API</h3>
<div>
<button class="btn" on:click={getRandomImageUrl}>
Fetch a dog randomly
</button>
Click on down arrow to select a breed
<select bind:value={selectedBreed}>
{#each breeds as breed}
<option value={breed}>
{breed}
</option>
{/each}
</select>
<button class="btn" on:click={getImageUrlsByBreed}>
Fetch by this breed
</button>
</div>
<br />
{#if showRandomPhoto}
<img id="random-photo" src={randomImageUrl} alt="No dog found" />
{/if}
{#if showBreedPhotos}
{#each photos as photo}
<img id="breed-photos" src={photo} alt="No dog found" />
{/each}
{/if}
<style>
#random-photo {
width: 600px;
height: auto;
}
#breed-photos {
width: 300px;
height: auto;
}
.btn:focus {
border-width: 3px;
}
</style>
```
<!-- prettier-ignore-end -->
### Tester l'application
Pour générer les liaisons et tester l'application, exécutez `wails dev`.
### Compiler l'application
Pour compiler l'application en un seul binaire, exécutez `wails build`.

122
website/i18n/fr/docusaurus-plugin-content-docs/version-v2.3.1/tutorials/helloworld.mdx Normal file
View File

@ -0,0 +1,122 @@
---
sidebar_position: 10
---
# Hello World
Le but de ce tutoriel est de vous faire créer l'application la plus basique en utilisant Wails. Vous serez capables de :
- Créer une nouvelle application Wails
- Compiler l'application
- Démarrer l'application
:::note
Ce tutoriel utilise Windows comme plate-forme cible. La sortie variera légèrement selon votre système d'exploitation.
:::
## Créer une nouvelle application Wails
Pour créer une nouvelle application Wails utilisant le template Vanilla JS par défaut, vous devez exécuter la commande suivante :
```bash
wails init -n helloworld
```
Vous devriez voir quelque chose de similaire à ce qui suit :
```
Wails CLI v2.0.0
Initialising Project 'helloworld'
---------------------------------
Project Name: helloworld
Project Directory: C:\Users\leaan\tutorial\helloworld
Project Template: vanilla
Template Support: https://wails.io
Initialised project 'helloworld' in 232ms.
```
Cela va créer un nouveau dossier nommé `helloworld` dans le dossier actuel. Dans ce dossier, vous trouverez un certain nombre de fichiers :
```
build/ - Contains the build files + compiled application
frontend/ - Contains the frontend files
app.go - Contains the application code
main.go - The main program with the application configuration
wails.json - The project configuration file
go.mod - The go module file
go.sum - The go module checksum file
```
## Compiler l'application
Pour compiler l'application, déplacez-vous dans le dossier du nouveau projet `helloworld` et exécutez la commande suivante :
```bash
wails build
```
Vous devriez voir quelque chose comme ça :
```
Wails CLI v2.0.0
App Type: desktop
Platforms: windows/amd64
Compiler: C:\Users\leaan\go\go1.18.3\bin\go.exe
Build Mode: Production
Skip Frontend: false
Compress: false
Package: true
Clean Build Dir: false
LDFlags: ""
Tags: []
Race Detector: false
Building target: windows/amd64
------------------------------
- Installing frontend dependencies: Done.
- Compiling frontend: Done.
- Generating bundle assets: Done.
- Compiling application: Done.
Built 'C:\Users\leaan\tutorial\helloworld\build\bin\helloworld.exe' in 10.616s.
```
Cela a compilé l'application et l'a enregistré dans le dossier `build/bin`.
## Démarrer l'application
Si on voit le dossier `build/bin` dans l'explorateur Windows, nous devrions voir le binaire de notre projet :
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/helloworld-app-icon.webp").default}
width="134px"
/>
</div>
<br />
```
On peut l'exécuter en simplement double-cliquant sur le fichier `helloworld.exe`.
Sur Max, Wails va générer un fichier `helloworld.app` qui peut être exécuté en simplement double-cliquant dessus.
Sur Linux, vous pouvez exécuter l'application en utilisant `./helloworld` depuis le répertoire `build/bin`.
Vous devriez voir l'application fonctionner comme prévu :
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/windows-default-app.webp").default}
width="50%"
className="screenshot"
/>
</div>
<br />
```

0
website/versioned_docs/version-v2.2.0/appendix/_category_.json → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/appendix/_category_.json
View File

0
website/versioned_docs/version-v2.2.0/community/_category_.json → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/_category_.json
View File

26
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/links.mdx Normal file
View File

@ -0,0 +1,26 @@
---
sidebar_position: 2
---
# リンク
このページは、コミュニティ関連のリンクの一覧です。 リンクを追加したい場合は、プルリクエストを送信(ページ下部の`このページを編集`をクリック) してください。
## Awesome Wails
Wailsに関する[最高のリンク一覧](https://github.com/wailsapp/awesome-wails)です。
## サポートチャネル
- [Gophers Slack Channel](https://gophers.slack.com/messages/CJ4P9F7MZ/)
- [Gophers Slack Channel Invite](https://invite.slack.golangbridge.org/)
- [Github Issues](https://github.com/wailsapp/wails/issues)
- [v2ベータディスカッションボード](https://github.com/wailsapp/wails/discussions/828)
## ソーシャルメディア
- [Twitter](https://twitter.com/wailsapp)
- [Wails中国語コミュニティQQグループ](https://qm.qq.com/cgi-bin/qm/qr?k=PmIURne5hFGNd7QWzW5qd6FV-INEjNJv&jump_from=webapi) - グループナンバー: 1067173054
## その他のチュートリアルや記事
- [掲示板を作ってみる](https://blog.customct.com/building-bulletin-board)

0
website/versioned_docs/version-v2.2.0/community/showcase/_category_.json → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/_category_.json
View File

10
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/emailit.mdx Normal file
View File

@ -0,0 +1,10 @@
# EmailIt
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/emailit.webp").default} />
<br />
</p>
```
[EmailIt](https://github.com/raguay/EmailIt/) is a Wails 2 program that is a markdown based email sender only with nine notepads, scripts to manipulate the text, and templates. It also has a builtin [Node-Red](https://nodered.org/) server, scripts terminal, and the [ScriptBar](https://github.com/raguay/ScriptBarApp) program for displaying results from Node-Red or a script on your system. Documentation is very scarce, but the programs works. It’s built using Wails2 and Svelte, and the download is a universal macOS application.

0
website/versioned_docs/version-v2.2.0/community/showcase/encrypteasy.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/encrypteasy.mdx
View File

16
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/filehound.mdx Normal file
View File

@ -0,0 +1,16 @@
# FileHound Export Utility
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/filehound.webp").default} />
<br />
</p>
```
[FileHound Export Utility](https://www.filehound.co.uk/) FileHound is a cloud document management platform made for secure file retention, business process automation and SmartCapture capabilities.
The FileHound Export Utility allows FileHound Administrators the ability to run a secure document and data extraction tasks for alternative back-up and recovery purposes. This application will download all documents and/or meta data saved in FileHound based on the filters you choose. The metadata will be exported in both JSON and XML formats.
Backend built with: Go 1.15 Wails 1.11.0 go-sqlite3 1.14.6 go-linq 3.2
Frontend with: Vue 2.6.11 Vuex 3.4.0 TypeScript Tailwind 1.9.6

0
website/versioned_docs/version-v2.2.0/community/showcase/minecraftupdater.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/minecraftupdater.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/modalfilemanager.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/modalfilemanager.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/mollywallet.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/mollywallet.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/october.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/october.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/optimus.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/optimus.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/portfall.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/portfall.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/restic-browser.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/restic-browser.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/riftshare.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/riftshare.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/scriptbar.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/scriptbar.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/surge.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/surge.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/wally.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/wally.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/wombat.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/wombat.mdx
View File

0
website/versioned_docs/version-v2.2.0/community/showcase/ytd.mdx → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/showcase/ytd.mdx
View File

56
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/community/templates.mdx Normal file
View File

@ -0,0 +1,56 @@
---
sidebar_position: 1
---
# テンプレート
このページでは、コミュニティがサポートしているテンプレートを紹介しています。 このページに新たにテンプレートを含めたい場合は、このページの下側にある`このページを編集`をクリックして、プルリクエストを出してください。 独自テンプレートの作成方法については、[テンプレート](../guides/templates.mdx)ガイドをご覧ください。
これらのテンプレートを使用するには、`wails init -n "プロジェクト名" -t [テンプレートのリンク[@バージョン]]`コマンドを実行してください。
バージョンサフィックスが無い場合は、デフォルトで、メインブランチのコードテンプレートが使用されます。 バージョンサフィックスがある場合は、当該バージョンのタグに対応するコードテンプレートが使用されます。
例: `wails init -n "プロジェクト名" -t https://github.com/misitebao/wails-template-vue`
:::warning 注意
**Wailsプロジェクトでは、サードパーティ製テンプレートのメンテナンスは行っておらず、責任も負いません!**
テンプレートについてよく分からない場合は、`package.json`および`wails.json`を確認し、どのようなスクリプトが実行されるのかや、どのようなパッケージがインストールされるのかを調べてください。
:::
## Vue
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - VueのエコシステムをベースにしたWailsテンプレート (TypeScript、ダークテーマ、i18n、シングルページルーティング、TailwindCSSを統合)
- [wails-vite-vue-ts](https://github.com/codydbentley/wails-vite-vue-ts) - Viteを使用したVue 3 TypeScript (および機能を追加する手順)
- [wails-vite-vue-the-works](https://github.com/codydbentley/wails-vite-vue-the-works) - Vite、Vuex、Vue Router、SaaS、ESLint + Prettier を使用した Vue 3 TypeScript
- [wails-template-quasar-js](https://github.com/sgosiaco/wails-template-quasar-js) - JavaScript + Quasar V2 (Vue 3, Vite, Sass, Pinia, ESLint, Prettier) を使用したテンプレート
- [wails-template-quasar-ts](https://github.com/sgosiaco/wails-template-quasar-ts) - TypeScript + Quasar V2 (Vue 3, Vite, Sass, Pinia, ESLint, Prettier, &lt;script setup&gt;によるComposition API) を使用したテンプレート
## Angular
- [wails-angular-template](https://github.com/TAINCER/wails-angular-template) - TypeScript、Sass、ホットリロード、コード分割、i18n を使用した Angular
## React
- [wails-react-template](https://github.com/AlienRecall/wails-react-template) - reactjsを使用したテンプレート
- [wails-react-template](https://github.com/flin7/wails-react-template) - ライブ開発をサポートしたReactの最小テンプレート
- [wails-template-nextjs](https://github.com/LGiki/wails-template-nextjs) - Next.js、TypeScript を使用したテンプレート
- [wails-vite-react-ts-tailwind-template](https://github.com/hotafrika/wails-vite-react-ts-tailwind-template) - React + TypeScript + Vite + TailwindCSSを使用したテンプレート
## Svelte
- [wails-svelte-template](https://github.com/raitonoberu/wails-svelte-template) - Svelteを使用したテンプレート
- [wails-vite-svelte-template](https://github.com/BillBuilt/wails-vite-svelte-template) - SvelteおよびViteを使用したテンプレート
- [wails-vite-svelte-tailwind-template](https://github.com/BillBuilt/wails-vite-svelte-tailwind-template) - TailwindCSS v3を含んだ、SvelteおよびViteを使用したテンプレート
- [wails-sveltekit-template](https://github.com/h8gi/wails-sveltekit-template) - SvelteKitを使用したテンプレート
## Elm
- [wails-elm-template](https://github.com/benjamin-thomas/wails-elm-template) - 関数型プログラミングと**高速な**ホットリロードを使ったGUIアプリ開発 :tada: :rocket:
- [wails-template-elm-tailwind](https://github.com/rnice01/wails-template-elm-tailwind) - Elm + Tailwind CSS + Wailsのパワー:muscle:を組み合わせたテンプレート (ホットリロードサポートあり)
## ピュアJavaScript (バニラ)
- [wails-pure-js-template](https://github.com/KiddoV/wails-pure-js-template) - 基本的なJavaScript、HTML、CSSのみを含むテンプレート

0
website/versioned_docs/version-v2.2.0/gettingstarted/_category_.json → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/gettingstarted/_category_.json
View File

22
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/gettingstarted/building.mdx Normal file
View File

@ -0,0 +1,22 @@
---
sidebar_position: 6
---
# プロジェクトのコンパイル
プロジェクトディレクトリ上で、`wails build`コマンドを実行しましょう。 そうすることで、プロジェクトがコンパイルされ、`build/bin`ディレクトリ内に本番配布用のバイナリが出力されます。
バイナリを起動すると、デフォルト仕様のアプリを確認することができます:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/defaultproject.webp").default}
width="50%"
class="screenshot"
/>
</div>
<br />
```
コンパイルオプションについて詳しくは、[CLIリファレンス](../reference/cli.mdx#build)をご覧ください。

16
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/gettingstarted/development.mdx Normal file
View File

@ -0,0 +1,16 @@
---
sidebar_position: 5
---
# アプリの開発
プロジェクトディレクトリのルート上で`wails dev`コマンドを実行すると、アプリを開発モードで起動することができます。 コマンドを実行すると下記の処理が実行されます:
- アプリをビルドしたのち、起動する
- Goのコードをフロントエンドにバインドして、JavaScriptから呼び出せるようにする
- [Vite](https://vitejs.dev/)の機能を使用して、Goファイルの変更を監視し、変更された際には自動的にリビルド/再起動する
- ブラウザからアプリを操作できるようにする[Webサーバ](http://localhost:34115)を立ち上げる。 これにより、任意のブラウザ拡張機能を利用できる。 JavascriptのコンソールからGoのコードを呼び出すこともできる
アプリ開発を始めるときは、プロジェクトディレクトリ上で`wails dev`コマンドを実行しましょう。 詳しくは、[こちら](../reference/cli.mdx#dev)をご覧ください。
近日中にチュートリアルを公開予定です。

130
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/gettingstarted/firstproject.mdx Normal file
View File

@ -0,0 +1,130 @@
---
sidebar_position: 2
---
# プロジェクトの開始
## プロジェクトの生成
CLIのインストールが終わったら、`wails init`コマンドで新しいプロジェクトを生成しましょう。
好きなフレームワークを選択してください:
```mdx-code-block
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
<Tabs
defaultValue="Svelte"
values={[
{label: "Svelte", value: "Svelte"},
{label: "React", value: "React"},
{label: "Vue", value: "Vue"},
{label: "Preact", value: "Preact"},
{label: "Lit", value: "Lit"},
{label: "Vanilla", value: "Vanilla"},
]}
>
<TabItem value="Svelte">
JavaScriptによる<a href={"https://svelte.dev/"}>Svelte</a>プロジェクトを生成する場合:<br/><br/>
wails init -n myproject -t svelte
TypeScriptによるプロジェクトを生成する場合:<br/>
wails init -n myproject -t svelte-ts
</TabItem>
<TabItem value="React">
JavaScriptによる<a href={"https://reactjs.org/"}>React</a>プロジェクトを生成する場合:<br/><br/>
wails init -n myproject -t react
TypeScriptによるプロジェクトを生成する場合:<br/>
wails init -n myproject -t react-ts
</TabItem>
<TabItem value="Vue">
JavaScriptによる<a href={"https://vuejs.org/"}>Vue</a>プロジェクトを生成する場合:<br/><br/>
wails init -n myproject -t vue
TypeScriptによるプロジェクトを生成する場合:<br/>
wails init -n myproject -t vue-ts
</TabItem>
<TabItem value="Preact">
JavaScriptによる<a href={"https://preactjs.com/"}>Preact</a>プロジェクトを生成する場合:<br/><br/>
wails init -n myproject -t preact
TypeScriptによるプロジェクトを生成する場合:<br/>
wails init -n myproject -t preact-ts
</TabItem>
<TabItem value="Lit">
JavaScriptによる<a href={"https://lit.dev/"}>Lit</a>プロジェクトを生成する場合:<br/><br/>
wails init -n myproject -t lit
TypeScriptによるプロジェクトを生成する場合:<br/>
wails init -n myproject -t lit-ts
</TabItem>
<TabItem value="Vanilla">
JavaScriptによるバニラなプロジェクトを生成する場合:<br/><br/>
wails init -n myproject -t vanilla
TypeScriptによるプロジェクトを生成する場合:<br/>
wails init -n myproject -t vanilla-ts
</TabItem>
</Tabs>
```
<hr />
様々な機能やフレームワークを提供する[コミュニティテンプレート](../community/templates.mdx)を利用することもできます。
プロジェクト生成時に使用可能なオプションを確認するには、`wails init -help`を実行してください。 詳しくは、[CLIリファレンス](../reference/cli.mdx#init)を参照してください。
## プロジェクトのディレクトリ構成
Wailsのプロジェクトディレクトリの構成は次のとおりです:
```
.
├── build/
│ ├── appicon.png
│ ├── darwin/
│ └── windows/
├── frontend/
├── go.mod
├── go.sum
├── main.go
└── wails.json
```
### プロジェクトの構造
- `/main.go` - アプリのメインコード
- `/frontend/` - フロントエンドのプロジェクトディレクトリ
- `/build/` - ビルドディレクトリ
- `/build/appicon.png` - アプリアイコン
- `/build/darwin/` - Mac固有のプロジェクトディレクトリ
- `/build/windows/` - Windows固有のプロジェクトディレクトリ
- `/wails.json` - プロジェクト構成ファイル
- `/go.mod` - Goモジュール定義ファイル
- `/go.sum` - Goモジュールチェックサムファイル
`frontend`ディレクトリ内は、Wailsで決まったファイル構成等は無く、お好きなフロントエンドプロジェクトを配置することができます。
`build`ディレクトリは、アプリのビルド時に使用されます。 この中のファイルは、ビルドの挙動をカスタマイズするために、適宜ファイル内容を書き換えることができます。 buildディレクトリ内のファイルを削除すると、デフォルトのファイルが再生成されます。
`go.mod`のモジュール名は、最初は"changeme"になっています。 このモジュール名は、あなたのプロジェクトに適切な名前に変更しましょう。

89
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/gettingstarted/installation.mdx Normal file
View File

@ -0,0 +1,89 @@
---
sidebar_position: 1
---
# インストール
## サポートされているプラットフォーム
- Windows 10/11 AMD64/ARM64
- MacOS 10.13+ AMD64
- MacOS 11.0+ ARM64
- Linux AMD64/ARM64
## 依存関係
Wailsをインストールする前に、下記のものを導入しておく必要があります。
- Go 1.18+
- NPM (Node 15+)
### Go
[Goのダウンロードページ](https://go.dev/dl/)からGoをダウンロードしてください。
公式の[Goインストール手順](https://go.dev/doc/install)に従って、Goをインストールしてください。 その際、`PATH`環境変数に`~/go/bin`ディレクトリへのパスが含まれていることも確認してください。 それらが終わったら、ターミナルを再起動し、以下の確認をしてください:
- Goが正しくインストールされているかを確認する: `go version`
- "~/go/bin"のディレクトリパスがPATH環境変数に含まれているか確認する: `echo $PATH | grep go/bin`
### NPM
[Nodeダウンロードページ](https://nodejs.org/ja/download/)からNPMをダウンロードしてください。 最新版を利用することをお勧めします。なぜなら、私たちは最新版に対してテストを実施しているためです。
`npm --version`を実行して、インストールが完了しているかを確認してください。
## プラットフォーム固有の依存関係
開発作業を行うプラットフォームによって、必要な依存関係が存在します:
```mdx-code-block
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
<Tabs
defaultValue="Windows"
values={[
{ label: "Windows", value: "Windows" },
{ label: "MacOS", value: "MacOS" },
{ label: "Linux", value: "Linux" },
]}
>
<TabItem value="MacOS">
Wailsを使用するには、xcodeのコマンドラインツールがインストールされている必要があります。 <code>xcode-select --install</code>コマンドを実行することでインストールできます。
</TabItem>
<TabItem value="Windows">
Wailsを使用するには、<a href="https://developer.microsoft.com/en-us/microsoft-edge/webview2/">WebView2</a>ランタイムがインストールされている必要があります。 最新のWindowsでは、すでにインストールされている場合もあります。 <code>wails doctor</code>コマンドで、インストール状況を確認できます。
</TabItem>
<TabItem value={"Linux"}>
Linuxでは、標準の<code>gcc</code>ビルドツール、 <code>libgtk3</code>、<code>libwebkit</code>が必要です。 Wailsは、様々なディストリビューション向けに大量のコマンドを列挙することはせず、現在使用されているディストリビューションのインストールコマンドを自動的に判定します。 Wailsをインストールした後に、<code>wails doctor</code>コマンドを実行して、別途インストールが必要な依存関係を確認してください。 あなたが利用しているディストリビューションやパッケージマネージャーがサポートされていない場合は、<a href={"/docs/guides/linux-distro-support"}>Linuxディストリビューションサポート</a>ガイドを参照してください。
</TabItem>
</Tabs>
```
## 任意の依存関係
- [UPX](https://upx.github.io/)を導入することで、構築したアプリを圧縮できます。
- [NSIS](https://wails.io/docs/guides/windows-installer/)を導入することで、Windowsのインストーラを生成できます。
## Wailsのインストール
`go install github.com/wailsapp/wails/v2/cmd/wails@latest`を実行して、Wails CLIをインストールしてください。
注意: 次のようなエラーが発生した場合:
```shell
....\Go\pkg\mod\github.com\wailsapp\wails\v2@v2.1.0\pkg\templates\templates.go:28:12: pattern all:ides/*: no matching files found
```
下記コマンドで、Go 1.18以上がインストールされているかを確認してください:
```shell
go version
```
## システムチェック
`wails doctor`を実行すると、必要な依存関係が正しくインストールされているかを確認することができます。 正しくインストールされていない場合は、その内容をあなたにお知らせして、どうすれば解決できるかを教えてくれます。
## `wails`コマンドが見つからないのですが?
`wails`コマンドが見つからないとシステムに怒られた場合は、Goが、公式のGoインストール手順に従って導入されているかを確認してください。 コマンドが見つからないほとんどの理由は、あなたのホームディレクトリ配下にある`go/bin`ディレクトリのパスが、`PATH`環境変数に含まれていないからです。 また、インストールによって行われた環境変更を反映させるために、もともと開いていたコマンドプロンプト(ターミナル)がある場合はそれらをいったん閉じて、再度開きなおしてください。

0
website/versioned_docs/version-v2.2.0/guides/_category_.json → website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/_category_.json
View File

14
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/angular.mdx Normal file
View File

@ -0,0 +1,14 @@
# Angular
Wailsでは、Angular向けのテンプレートは用意されていませんが、Angular自体を使用することはできます。
## 開発モード
Angularで開発モードを使用するには、`wails.json`で下記のように設定してください:
```json
"frontend:build": "npx ng build",
"frontend:install": "npm install",
"frontend:dev:watcher": "npx ng serve",
"frontend:dev:serverUrl": "http://localhost:4200",
```

194
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/application-development.mdx Normal file
View File

@ -0,0 +1,194 @@
# アプリケーション開発
Wailsでアプリケーションを作成する際に、厳格なルールはありませんが、基本的なガイドラインがいくつかあります。
## アプリケーションセットアップ
デフォルトのテンプレートを使用した場合、`main.go`にはアプリケーションの構成および起動コードが記述され、`app.go`にはアプリケーションのロジック定義が記述されています。
`app.go`ファイルには、メインアプリケーションのフックとして機能する2つのメソッドを持った構造体を定義します。
```go title="app.go"
type App struct {
ctx context.Context
}
func NewApp() *App {
return &App{}
}
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}
func (a *App) shutdown(ctx context.Context) {
}
```
- startupメソッドは、Wailsが起動時に、必要リソースの割り当てが完了した際にすぐに呼び出されます。このメソッド内は、リソースの作成、イベントリスナーの設定、その他アプリケーションに必要な初期処理を実施するのに適しています。 メソッド呼び出し時に与えられる`context.Context`は、通常は、構造体のフィールドに格納するようにしてください。 なぜならば、このcontextは[runtime](../reference/runtime/intro.mdx)を呼び出す際に必要なためです。 このstartupメソッドがエラーを返却した場合、アプリケーションは終了します。 開発モードの場合、コンソールにエラーが出力されます。
- shutdownメソッドは、シャットダウンプロセスの最後に、Wailsによって呼び出されます。 このメソッド内は、メモリを解放し、任意のシャットダウンタスクを実施するのに適しています。
通常、`main.go`ファイルでは、アプリケーション構成を受け取る`wails.Run()`メソッドを1回だけ呼び出すようにします。 テンプレートでは、`wails.Run()`を呼び出す前に、`app.go`で定義した構造体のインスタンスを作成して、`app`に格納しています。 アプリケーション構成では、コールバックを追加できます:
```go {3,9,10} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
})
if err != nil {
log.Fatal(err)
}
}
```
アプリケーションのライフサイクルフックについて詳しくは、[こちら](../howdoesitwork.mdx#application-lifecycle-callbacks)をご覧ください。
## メソッドのバインディング
フロントエンドからGoのメソッドを呼び出したいことがありますよね。 そのようなときは、`app.go`ですでに定義している構造体に、パブリックメソッドを追加しましょう:
```go {16-18} title="app.go"
type App struct {
ctx context.Context
}
func NewApp() *App {
return &App{}
}
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}
func (a *App) shutdown(ctx context.Context) {
}
func (a *App) Greet(name string) string {
return fmt.Sprintf("Hello %s!", name)
}
```
アプリケーション構成の`Bind`キーで、Wailsに何をバインドさせたいかを指定できます:
```go {11-13} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
```
これにより、`App`構造体のすべてのパブリックメソッドがバインドされます（startupメソッド・shutdownメソッドはバインドされません）。
### 複数の構造体をバインドするときのcontextの扱い
もし、複数の構造体のメソッドをバインドしたくて、かつ、各構造体でランタイム関数を呼び出せるようにcontextを共有したい場合は、`OnStartup`のコールバック内で、各構造体にcontextを渡してあげるのが良いでしょう:
```go
func main() {
app := NewApp()
otherStruct := NewOtherStruct()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: func(ctx context.Context){
app.SetContext(ctx)
otherStruct.SetContext(ctx)
},
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
otherStruct
},
})
if err != nil {
log.Fatal(err)
}
}
```
バインディングの詳細については、[こちら](../howdoesitwork.mdx#method-binding)をご覧ください。
## アプリケーションメニュー
Wailsでは、アプリケーションにメニューを追加することができます。 追加したい場合は、アプリケーション構成に[Menu](../reference/menus.mdx#menu)構造体を渡してください。 通常は、Menuを返すようなメソッドを使用するようにします。ライフサイクルフックに使用される`App`構造体のメソッドとして用意するのが良いでしょう。
```go {11} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Menu: app.menu(),
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
```
## アセット
Wails v2にアセットを処理させるための方法は複雑ではありません。 Wailsに与える必要があるのは、`embed.FS`だけです。 任意の方法で与えてあげてください。 バニラテンプレートで使用されているように、素のhtml/css/jsファイルをアセットとして使用できます。 もちろん、複雑なビルドシステムを使用することも可能ですが、必須要件ではありません。
`wails build`コマンドを実行すると、プロジェクトルートディレクトリに存在するプロジェクト構成ファイルである`wails.json`のチェックが行われます。 プロジェクトファイルには、次の2つのキーを含めることができます:
- "frontend:install"
- "frontend:build"
1番目のキーは、`frontend`ディレクトリにおいて、nodeモジュールをインストールするためのコマンドを指定します。 2番目のキーは、`frontend`ディレクトリにおいて、フロントエンドをビルドするためのコマンドを指定します。
2つのキーのどちらともが指定されていない場合、Wailsはフロントエンドプロジェクトに対する操作を一切行いません。 `embed.FS`で指定されたディレクトリを参照するのみとなります。
### アセットハンドラ
Wails v2では必要に応じて、`options.App`の中に`http.Handler`を定義することができます。これにより、アセットサーバにフックして、その場でファイルを作成したり、POST/PUTリクエストを処理したりすることができます。 GETリクエストが要求されたときは、まず初めに、`assets` FSにハンドリングされます。 リクエストされたファイルをFSが見つけられなかった場合、そのリクエストは`http.Handler`に転送されます。 GET以外のリクエストは、`AssetsHandler`が指定されていれば、当該ハンドラによって直接処理されます。 なお、`Assets`オプションに`nil`を指定することで、`AssetsHandler`のみを使用することも可能です。
## ビルトイン開発サーバ
`wails dev`コマンドを実行すると、ビルトイン開発サーバが起動し、プロジェクトディレクトリ内のファイル監視が開始されます。 デフォルトでは、ファイルの中身が変更された場合、Wailsはそのファイルがアプリケーションファイルであるかどうかをチェックします(デフォルト: `.go`、 `-e`フラグで制御可能)。 アプリケーションファイルであった場合は、アプリケーションをリビルドして再起動します。 アセットディレクトリ内でファイルが変更された場合は、少し経ってからリロードが実行されます。
開発サーバは"デバウンシング"と呼ばれるテクニックを使用しています。これにより、短時間で複数のファイルが更新されたとしても、すぐに再読み込みされることはありません。 トリガーが起動すると、再読み込みを実行する前に一定時間待機します。 待機中に別のトリガーが起動した場合、待機時間はリセットされます。 デフォルトでは、待機時間は`100ms`です。 この待機時間の値があなたのプロジェクトで適切ではない場合、`-debounce`フラグを使用して変更することができます。 このフラグを使用すると、値がプロジェクト構成ファイルに保存され、次回以降のデフォルト値となります。
## 外部開発サーバ
フレームワークによっては独自のライブリロードサーバが付属しているものがありますが、それらはWailsのGoバインディングを使用することができません。 このような場面では、Wailsが監視するビルドディレクトリ内で、プロジェクトをリビルドする監視スクリプトを実行すると良いでしょう。 例としては、[rollup](https://rollupjs.org/guide/en/)を使用するデフォルトのsvelteテンプレートをご覧ください。 また[create-react-app](https://create-react-app.dev/)を使用する場合、[このスクリプト](https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd)を使用すると同様の結果を得ることができます。
## Goモジュール
デフォルトのWailsテンプレートは、モジュール名が"changeme"となっている`go.mod`ファイルを生成します。 プロジェクトの生成が完了したら、適切なモジュール名に変更してください。

136
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/dynamic-assets.mdx Normal file
View File

@ -0,0 +1,136 @@
# 動的アセット
[AssetsHandler](../reference/options#assetshandler)オプションを使用することで、フロントエンドアセットを動的に読み込んだり生成させることができます。 AssetsHandlerは、ジェネリックな`http.Handler`です。アセットサーバへのGET以外のすべてのリクエスト、および、アセットファイルとして存在しなかったがために転送されてきたGETリクエストに対して、ハンドラが呼び出されます。
カスタムされたAssetsHandlerを導入すると、カスタムアセットサーバを使用して独自のアセットを提供することができます。
## 例
このサンプルプロジェクトでは、ディスクからファイルを読み込むシンプルなアセットハンドラを作成します:
```go title=main.go {16-35,49}
package main
import (
"embed"
"fmt"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
"net/http"
"os"
"strings"
)
//go:embed all:frontend/dist
var assets embed.FS
type FileLoader struct {
http.Handler
}
func NewFileLoader() *FileLoader {
return &FileLoader{}
}
func (h *FileLoader) ServeHTTP(res http.ResponseWriter, req *http.Request) {
var err error
requestedFilename := strings.TrimPrefix(req.URL.Path, "/")
println("Requesting file:", requestedFilename)
fileData, err := os.ReadFile(requestedFilename)
if err != nil {
res.WriteHeader(http.StatusBadRequest)
res.Write([]byte(fmt.Sprintf("Could not load file %s", requestedFilename)))
}
res.Write(fileData)
}
func main() {
// App構造体のインスタンスを作成
app := NewApp()
// オプション付きでアプリケーションを作成
err := wails.Run(&options.App{
Title: "helloworld",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
Handler: NewFileLoader(),
},
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 255},
OnStartup: app.startup,
Bind: []interface{}{
app,
},
})
if err != nil {
println("Error:", err)
}
}
```
`wails dev`コマンドでアプリケーションを開発モードで実行すると、次のように出力されます:
```
DEB | [ExternalAssetHandler] Loading 'http://localhost:3001/favicon.ico'
DEB | [ExternalAssetHandler] Loading 'http://localhost:3001/favicon.ico' failed, using AssetHandler
Requesting file: favicon.ico
```
これを見ると分かるように、アセットハンドラは、デフォルトのアセットサーバが`favicon.ico`を提供できない場合に呼び出されています。
メインアプリケーションをクリックし、"検証(開発者ツールで調査する)"を選択して、開発者ツールを起動します。そして、コンソールに次のように入力して実行することで、機能をテストできます:
```
let response = await fetch('does-not-exist.txt');
```
これにより、開発者ツールでエラーが発生します。 カスタムアセットハンドラによって、想定どおりのエラーが返却されていることが分かります。
```mdx-code-block
<p className="text--center">
<img
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
/>
</p>
```
もし、`go.mod`をリクエストした場合は、次のような出力となります:
```mdx-code-block
<p className="text--center">
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
</p>
```
このテクニックを使用して、ページ上に画像を直接読み込ませることができます。 デフォルトのバニラテンプレートで、ロゴ画像を指定している、下記コードを、
```html
<img id="logo" class="logo" />
```
次のように書き換えます:
```html
<img src="build/appicon.png" style="width: 300px" />
```
すると、画面上は次のような表示となります:
```mdx-code-block
<p className="text--center">
<img
src={require("@site/static/img/assetshandler-image.webp").default}
style={{ width: "75%" }}
/>
</p>
```
:::warning
この例のようにファイルシステムを公開することは、セキュリティ上のリスクとなります。 ファイルシステムへのアクセスは、適切に管理することを推奨します。
:::

87
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/frameless.mdx Normal file
View File

@ -0,0 +1,87 @@
# フレームレスアプリケーション
Wailsでは、フレームのないアプリケーションの作成をサポートしています。 [アプリケーションオプション](../reference/options.mdx#application-options)の[frameless](../reference/options.mdx#frameless)フィールドで設定することが可能です。
Wailsでは、フレームレスウィンドウをドラッグできるようにするための簡単な仕組みを提供しています。`--wails-draggable:drag`というCSSスタイルをもつ任意のHTML要素は、"ドラッグハンドル"として機能します。 このプロパティは、すべての子要素にも継承されます。 ネストされている子要素で、ドラッグを明示的に無効化したい場合は、当該子要素で'--wails-draggable:no-drag'を指定します。
```html
<html>
<head>
<link rel="stylesheet" href="/main.css" />
</head>
<body style="--wails-draggable:drag">
<div id="logo"></div>
<div id="input" style="--wails-draggable:no-drag">
<input id="name" type="text" />
<button onclick="greet()">Greet</button>
</div>
<div id="result"></div>
<script src="/main.js"></script>
</body>
</html>
```
一部のプロジェクトでは、動的なスタイリングが原因で、これらのCSSプロパティが使用できない場合があるでしょう。 そのような場合、アプリケーションオプションの`CSSDragProperty`および`CSSDragValue`を使用して、ドラッグ可能な領域を示すプロパティ名と値を独自に定義することができます。
```go title=main.go
package main
import (
"embed"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)
//go:embed all:frontend/dist
var assets embed.FS
func main() {
// アプリケーション構造体のインスタンスを作成
app := NewApp()
// オプション付きでアプリケーションを作成
err := wails.Run(&options.App{
Title: "alwaysontop",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
},
Frameless: true,
CSSDragProperty: "widows",
CSSDragValue: "1",
Bind: []interface{}{
app,
},
})
if err != nil {
println("Error:", err)
}
}
```
```html title=index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>alwaysontop</title>
</head>
<body style="widows: 1">
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>
</html>
```
:::info フルスクリーン
アプリケーションをフルスクリーン状態にすると、このドラッグ機能は無効になります。
:::

72
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/frontend.mdx Normal file
View File

@ -0,0 +1,72 @@
# フロントエンド
## スクリプトの注入
Wailsが`index.html`を提供するとき、デフォルトでは、`<body>`タグ内に`/wails/ipc.js`および`/wails/runtime.js`の2つのスクリプトを読み込む行を注入します。 これらのスクリプトファイルは、バインディングおよびランタイムを提供しています。
デフォルトでどの位置にスクリプトが注入されるかを、下記のコードに示します:
```html
<html>
<head>
<title>injection example</title>
<link rel="stylesheet" href="/main.css" />
<!-- <script src="/wails/ipc.js"></script> -->
<!-- <script src="/wails/runtime.js"></script> -->
</head>
<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off" />
<button class="btn" onclick="greet()">Greet</button>
</div>
<script src="/main.js"></script>
</body>
</html>
```
### デフォルトのスクリプト注入の上書き
開発者がより柔軟に対応できるように、これらの動作をカスタマイズするためのメタタグが用意されています:
```html
<meta name="wails-options" content="[options]" />
```
オプションは次のとおりです:
| 値 | 説明 |
| ------------------- | ------------------------------- |
| noautoinjectruntime | `/wails/runtime.js`の自動注入を無効化します |
| noautoinjectipc | `/wails/ipc.js`の自動注入を無効化します |
| noautoinject | すべてのスクリプトの自動注入を無効化します |
カンマで区切ることで、複数のオプションを指定できます。
次のコードは、自動注入版のコードと完全に同じ挙動となります:
```html
<html>
<head>
<title>injection example</title>
<meta name="wails-options" content="noautoinject" />
<link rel="stylesheet" href="/main.css" />
</head>
<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off" />
<button class="btn" onclick="greet()">Greet</button>
</div>
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
<script src="/main.js"></script>
</body>
</html>
```

127
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/ides.mdx Normal file
View File

@ -0,0 +1,127 @@
# 統合開発環境
Wailsでは、優れた開発体験の提供を目指しています。 その一環として、統合開発環境特有の構成設定の生成をサポートしており、より快適にプロジェクトをセットアップできるようになっています。
現在は[Visual Studio Code](https://code.visualstudio.com/)をサポートしていますが、今後、Golandなど他の統合開発環境もサポートしていく予定です。
## Visual Studio Code
```mdx-code-block
<p className="text--center">
<img
src={require("@site/static/img/vscode.webp").default}
style={{ width: "75%" }}
/>
</p>
```
プロジェクト生成時のコマンドに`-ide vscode`フラグを付与すると、統合開発環境用の構成ファイルが、他のプロジェクトファイルと共に作成されます。 これらのファイルは`.vscode`ディレクトリ内に配置され、アプリケーションをデバッグするための正しい構成設定が記述されています。
生成されるのは`tasks.json`ファイルおよび`launch.json`ファイルの2つです。 デフォルトのバニラプロジェクトの場合、次のような内容となります:
```json title="tasks.json"
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}"
},
"command": "go",
"args": [
"build",
"-tags",
"dev",
"-gcflags",
"all=-N -l",
"-o",
"build/bin/myproject.exe"
]
}
]
}
```
```json title="launch.json"
{
"version": "0.2.0",
"configurations": [
{
"name": "Wails: Debug myproject",
"type": "go",
"request": "launch",
"mode": "exec",
"program": "${workspaceFolder}/build/bin/myproject.exe",
"preLaunchTask": "build",
"cwd": "${workspaceFolder}",
"env": {}
}
]
}
```
### インストールおよびビルドステップの構成
デフォルトのプロジェクトでは、`npm install`や`npm run build`などのステップが必要ないため、`tasks.json`ファイルの内容なシンプルなものになっています。 Svelteテンプレートのように、フロントエンドのビルドステップが必要なプロジェクトの場合、`tasks.json`を編集して、インストールおよびビルドのステップを追加する必要があります。
```json title="tasks.json"
{
"version": "2.0.0",
"tasks": [
{
"label": "npm install",
"type": "npm",
"script": "install",
"options": {
"cwd": "${workspaceFolder}/frontend"
},
"presentation": {
"clear": true,
"panel": "shared",
"showReuseMessage": false
},
"problemMatcher": []
},
{
"label": "npm run build",
"type": "npm",
"script": "build",
"options": {
"cwd": "${workspaceFolder}/frontend"
},
"presentation": {
"clear": true,
"panel": "shared",
"showReuseMessage": false
},
"problemMatcher": []
},
{
"label": "build",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}"
},
"command": "go",
"args": [
"build",
"-tags",
"dev",
"-gcflags",
"all=-N -l",
"-o",
"build/bin/vscode.exe"
],
"dependsOn": ["npm install", "npm run build"]
}
]
}
```
今後の機能強化予定
将来的に、インストールおよびビルドステップを含んだ`tasks.json`を自動生成できるように計画しています。
:::

103
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/linux-distro-support.mdx Normal file
View File

@ -0,0 +1,103 @@
# Linuxディストリビューションサポート
## 概要
WailsはLinuxをサポートしていますが、すべてのLinuxディストリビューションに対してインストール手段を提供することは困難であるため、行っていません。 その代わりにWailsでは、アプリケーション開発に必要なパッケージが、システムのパッケージマネージャを介して利用可能かどうかを判断します。 現在、以下のパッケージマネージャをサポートしています:
- apt
- dnf
- emerge
- eopkg
- nixpkgs
- pacman
- zypper
## パッケージ名の追加
あなたが使用しているディストリビューションが、Wailsがサポートしているパッケージマネージャを使用していたとしても、パッケージ名が想定と異なっている場合があります。 例えば、Ubuntuの派生ディストリビューションを使用している場合、gtkのパッケージ名が異なる場合があります。 Wailsは、パッケージ名のリストを繰り返し処理することで、正しいパッケージを見つけようと試みます。 パッケージ名のリストは、`v2/internal/system/packagemanager`ディレクトリ内に、パッケージマネージャごとのファイルで格納されています。 下記は、`v2/internal/system/packagemanager/apt.go`の例です。
このファイルでは、パッケージのリストは`Packages()`メソッドによって定義されています:
```go
func (a *Apt) Packages() packagemap {
return packagemap{
"libgtk-3": []*Package{
{Name: "libgtk-3-dev", SystemPackage: true, Library: true},
},
"libwebkit": []*Package{
{Name: "libwebkit2gtk-4.0-dev", SystemPackage: true, Library: true},
},
"gcc": []*Package{
{Name: "build-essential", SystemPackage: true},
},
"pkg-config": []*Package{
{Name: "pkg-config", SystemPackage: true},
},
"npm": []*Package{
{Name: "npm", SystemPackage: true},
},
"docker": []*Package{
{Name: "docker.io", SystemPackage: true, Optional: true},
},
}
}
```
お使いのLinuxディストリビューションが、`libgtk-3`パッケージが`lib-gtk3-dev`という名前で配布されていると仮定しましょう。 その場合、次の行を追加することで、対応することができます:
```go {5}
func (a *Apt) Packages() packagemap {
return packagemap{
"libgtk-3": []*Package{
{Name: "libgtk-3-dev", SystemPackage: true, Library: true},
{Name: "lib-gtk3-dev", SystemPackage: true, Library: true},
},
"libwebkit": []*Package{
{Name: "libwebkit2gtk-4.0-dev", SystemPackage: true, Library: true},
},
"gcc": []*Package{
{Name: "build-essential", SystemPackage: true},
},
"pkg-config": []*Package{
{Name: "pkg-config", SystemPackage: true},
},
"npm": []*Package{
{Name: "npm", SystemPackage: true},
},
"docker": []*Package{
{Name: "docker.io", SystemPackage: true, Optional: true},
},
}
}
```
## パッケージマネージャの追加
新しいパッケージマネージャを追加するには、次の手順を実行します:
- `v2/internal/system/packagemanager`に、`<pm>.go`という名前の新しいファイルを作成します。`<pm>`はパッケージマネージャの名前です。
- `pm.go`の中で、PackageManagerインターフェースを実装した構造体を定義します:
```go
type PackageManager interface {
Name() string
Packages() packagemap
PackageInstalled(*Package) (bool, error)
PackageAvailable(*Package) (bool, error)
InstallCommand(*Package) string
}
```
- `Name()`メソッドで、パッケージマネージャの名前を返すように実装します。
- `Packages()`メソッドで、依存関係の候補ファイル名を提供する`packagemap`を返すように実装します。
- `PackageInstalled()`メソッドで、引数で渡されたパッケージがすでにインストールされている場合は`true`を返すように実装します。
- `PackageAvailable()`メソッドで、引数で指定されたパッケージがインストールはされていないけれどもインストール可能であるなら`true`を返すように実装します。
- `InstallCommand()`メソッドで、引数で指定されたパッケージをインストールするための正確なコマンドを返すように実装します。
他のパッケージマネージャのコードを参考にして、これらのコードがどのように動作するか把握してください。
:::info リマインド
新しいパッケージマネージャを追加した場合は、このページも忘れずに更新してください。
:::

18
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/linux.mdx Normal file
View File

@ -0,0 +1,18 @@
# Linux
このページでは、Linux向けのWailsアプリケーション開発に関する、様々なガイドを掲載しています。
## videoタグが"ended"イベントを発火しない
videoタグを使用している場合、ビデオの再生が終了しても"ended"イベントが発火しません。 これはWebkitのバグであり、次のような回避策を講じることで修正できます:
```js
videoTag.addEventListener("timeupdate", (event) => {
if (event.target.duration - event.target.currentTime < 0.2) {
let ended = new Event("ended");
event.target.dispatchEvent(ended);
}
});
```
出典: [ディスカッションボード](https://github.com/wailsapp/wails/issues/1729#issuecomment-1212291275)における[Lyimmi](https://github.com/Lyimmi)のコメント

55
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/local-development.mdx Normal file
View File

@ -0,0 +1,55 @@
# ローカル開発
## 概要
Wailsは現在も継続的に開発されており、定期的に、新しいリリースに対して"タグ付け"が行われています。 "タグ付け"は通常、`master`ブランチに存在する新しいコードがすべてテストされ、正常な動作が確認されたときに行われます。 まだリリースされていない新機能やバグフィックスを利用したい場合、以下の手順で"ブリーディング・エッジ"版を使用できます:
- `git clone https://github.com/wailsapp/wails`
- `cd wails/v2/cmd/wails`
- `go install`
注意: このページでは、Wailsプロジェクトをクローンしたディレクトリのことを"clonedir"と記します。
この手順により、Wails CLIは一番最新のバージョンとなります。
### 自身のプロジェクトの更新
クローンした最新バージョンのWailsライブラリを自身のプロジェクトで使用させたい場合、`go.mod`ファイルの末尾に次の行を追記してください:
`replace github.com/wailsapp/wails/v2 => <clonedir>`
例:
Windowsの場合: `replace github.com/wailsapp/wails/v2 => C:\Users\leaan\Documents\wails-v2-beta\wails\v2`
'nixの場合: `replace github.com/wailsapp/wails/v2 => /home/me/projects/wails/v2`
安定バージョンに戻す場合は、次のコマンドを実行します:
`go install github.com/wailsapp/wails/v2/cmd/wails@latest`
## ブランチのテスト
先述の手順に従えば、ブランチをテストすることができますが、インストールを実行する前に、テスト対象のブランチに切り替えるようにしてください:
- `git clone https://github.com/wailsapp/wails`
- `cd wails`
- `git checkout -b branch-to-test --track origin/branch-to-test`
- `cd v2/cmd/wails`
- `go install`
そして、先述のとおり[自身のプロジェクトを更新](#updating-your-project)してください。
## プルリクエストのテスト
先述の手順に従えば、プルリクエストをテストすることができますが、インストールを実行する前に、テスト対象のプルリクエストを取得してブランチを切り替えるようにしてください。 下記手順の`[IDofThePR]`の部分は、github.comで表示されているプルリクエストのIDに置き換えてください:
- `git clone https://github.com/wailsapp/wails`
- `cd wails`
- `git fetch -u origin pull/[IDofThePR]/head:test/pr-[IDofThePR]`
- `git checkout test/pr-[IDofThePR]`
- `git reset --hard HEAD`
- `cd v2/cmd/wails`
- `go install`
そして、先述のとおり[自身のプロジェクトを更新](#updating-your-project)してください。

83
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/mac-appstore.mdx Normal file
View File

@ -0,0 +1,83 @@
# Mac App Storeガイド
このページでは、WailsアプリをMac App Storeで公開する方法について、概要を説明します。
## 前提条件
- Apple Developerアカウントを所持しておく必要があります。 詳しくは、[Apple Developer Program](https://developer.apple.com/support/compare-memberships/)のサイトを確認してください。
- 開発者ポータルで、証明書、ID、アプリを作成しておく必要があります。 詳しくは以下の手順に従ってください。
- Xcodeコマンドラインツールを、あなたのローカルマシンにインストールしておく必要があります。
#### 証明書とIDの作成
1. [Apple Developerアカウント](https://developer.apple.com/account/)へアクセスします。
2. `Certificates, Identifiers & Profiles`内にある`Identifiers`をクリックし、新しいApp IDを登録します。 (com.example.app) のような形式にしてください。
3. 同じページで`Certificates`をクリックし、Mac App Storeディストリビューション用の新しい証明書を生成します。 それらの証明書をダウンロードし、ローカルマシンのKeychainにインポートしてください。
#### アプリ提出物の作成
1. [App Store Connectサイト](https://appstoreconnect.apple.com/apps)へアクセスします。
2. 新しいアプリケーションを登録し、前のステップで作成済みのバンドルIDをリンクします。
3. Appleの要求する正規のスクリーンショットや説明文などを、アプリに追加します。
4. アプリの新しいバージョンを作成します。
## Mac App Storeへの公開手順
#### AppleのApp Sandboxの有効化
Mac App Storeへ提出されるアプリは、Appleの[App Sandbox](https://developer.apple.com/app-sandboxing/)内で動作する必要があります。 そのためには、`entitlements.plist`ファイルを作成しておく必要があります。 ファイルは、`{PROJECT_DIR}/build/darwin/entitlements.plist`配下に作成することを推奨します。
**entitlementsファイルの例**
ここでは、[RiftShare](https://github.com/achhabra2/riftshare)というアプリのentitlementsファイルを例として示します。 参考として、アプリが必要とする権限を入力してください。 詳しくは、[こちらのサイト](https://developer.apple.com/documentation/bundleresources/entitlements)をご覧ください。
```xml title="entitlements.plist"
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
<key>com.apple.security.network.server</key>
<true/>
<key>com.apple.security.files.user-selected.read-write</key>
<true/>
<key>com.apple.security.files.downloads.read-write</key>
<true/>
</dict>
</plist>
```
#### アプリパッケージのビルドと署名
以下は、Mac App Storeへの提出用に、アプリをビルドおよび署名するスクリプトの例です。 プロジェクトのルートディレクトリからスクリプトを実行することを前提としています。
アプリへ署名するための証明書と、インストーラへ署名するための証明書は異なりますので、ご注意ください。 両方の証明書がKeychainにインポートされていることを確認してください。 Keychainで文字列を探し、下記スクリプトに挿入してください。 具体的には、証明書名およびアプリ名を入力します。 以下のスクリプトを実行すると、アプリケーションのルートディレクトリに、署名済みの`app.pkg`ファイルが生成されます。
```bash title="macappstore-build.sh"
#!/bin/bash
APP_CERTIFICATE="3rd Party Mac Developer Application: YOUR NAME (CODE)"
PKG_CERTIFICATE="3rd Party Mac Developer Installer: YOUR NAME (CODE)"
APP_NAME="YourApp"
wails build -platform darwin/universal -clean
codesign --timestamp --options=runtime -s "$APP_CERTIFICATE" -v --entitlements ./build/darwin/entitlements.plist ./build/bin/$APP_NAME.app
productbuild --sign "$PKG_CERTIFICATE" --component ./build/bin/$APP_NAME.app /Applications ./$APP_NAME.pkg
```
#### アプリバンドルのアップロード
審査向けに提出が可能となる前に、生成されたパッケージファイルをアップロードし、アプリケーションに関連付ける必要があります。
1. Mac App Storeから[Transporter App](https://apps.apple.com/us/app/transporter/id1450874784)をダウンロードします。
2. アプリを起動し、Apple IDでサインインします。
3. +マークをクリックし、前のステップで生成済みの`APP_NAME.pkg`ファイルを選択します。 そしてアップロードします。
4. [App Store Connect](https://appstoreconnect.apple.com/apps)サイトへ戻り、アプリ提出物ページへ戻ります。 App Storeで公開する準備できているバージョンを選択します。 `Build`内で、Transporter経由でアップロードしたパッケージを選択します。
以上で終了です! サイトで、アプリを審査のために提出できるようになりました。 数営業日後、審査結果に問題が無ければ、アプリがMac App Storeに公開されます。

95
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/manual-builds.mdx Normal file
View File

@ -0,0 +1,95 @@
# Manual Builds
The Wails CLI does a lot of heavy lifting for the project, but sometimes it's desirable to manually build your project. This document will discuss the different operations the CLI does and how this may be achieved in different ways.
## Build Process
When either `wails build` or `wails dev` are used, the Wails CLI performs a common build process:
- Install frontend dependencies
- Build frontend project
- Generate build assets
- Compile application
- [optional] Compress application
### Install frontend dependencies
#### CLI Steps
- If the `-s` flag is given, this step is skipped
- Checks `wails.json` to see if there is an install command in the key `frontend:install`
- If there isn't, it skips this step
- If there is, it checks if `package.json` exists in the frontend directory. If it doesn't exist, it skips this step
- An MD5 sum is generated from the `package.json` file contents
- It checks for the existence of `package.json.md5` and if it exists, will compare the contents of it (an MD5 sum) with the one generated to see if the contents have changed. If they are the same, this step is skipped
- If `package.json.md5` does not exist, it creates it using the generated MD5 sum
- If a build is now required, or `node_modules` does not exist, or the `-f` flag is given, the install command is executed in the frontend directory
#### Manual Steps
This step could be done from the command line or a script with `npm install`.
### Build frontend project
#### Wails CLI
- If the `-s` flag is given, this step is skipped
- Checks `wails.json` to see if there is a build command in the key `frontend:build`
- If there isn't, it skips this step
- If there is, it is executed in the frontend directory
#### Manual Steps
This step could be done from the command line or a script with `npm run build` or whatever the frontend build script is.
### Generate assets
#### Wails CLI
- If `-nopackage` flag is set, this stage is skipped
- If the `build/appicon.png` file does not exist, a default one is created
- For Windows, see [Bundling for Windows](#windows)
- If `build/windows/icon.ico` does not exist, it will create it from the `build/appicon.png` image.
##### Windows
- If `build/windows/icon.ico` does not exist, it will create it from `build/appicon.png` using icon sizes of 256, 128, 64, 48, 32 and 16. This is done using [winicon](https://github.com/leaanthony/winicon).
- If the `build/windows/<projectname>.manifest` file does not exist, it creates it from a default version.
- Compiles the application as a production build (above)
- Uses [winres](https://github.com/tc-hib/winres) to bundle the icon and manifest into a `.syso` file ready for linking.
#### Manual Steps
- Create `icon.ico` using the [winicon](https://github.com/leaanthony/winicon) CLI tool (or any other tool).
- Create / Update a `.manifest` file for your application
- Use the [winres CLI](https://github.com/tc-hib/go-winres) to generate a `.syso` file.
### Compile application
#### Wails CLI
- If the `-clean` flag is provided, the `build` directory is deleted and recreated
- For `wails dev`, the following default Go flags are used: `-tags dev -gcflags "all=-N -l"`
- For `wails build`, the following default Go flags are used: `-tags desktop,production -ldflags "-w -s"`
- On Windows, `-ldflags "-w -h -H windowsgui"`
- Additional tags passed to the CLI using `-tags` are added to the defaults
- Additional ldflags passed to the CLI using `-ldflags` are added to the defaults
- The `-o` flag is passed through
- The Go compiler specified by `-compiler` will be used for compilation
#### Manual steps
- For dev build, the minimum command would be: `go build -tags dev -gcflags "all=-N -l"`
- For production build, the minimum command would be: `go build -tags desktop,production -ldflags "-w -s -H windowsgui"`
- Ensure that you compile in the same directory as the `.syso` file
### Compress application
#### Wails CLI
- If the `-upx` flag has been given, the `upx` program will be run to compress the application with the default settings
- If `-upxflags` is also passed, these flags are used instead of the default ones
#### Manual steps
- Run `upx [flags]` manually to compress the application.

191
website/i18n/ja/docusaurus-plugin-content-docs/version-v2.3.1/guides/migrating.mdx Normal file
View File

@ -0,0 +1,191 @@
# Migrating from v1
## Overview
Wails v2 is a significant change from v1. This document aims to highlight the changes and the steps in migrating an existing project.
### Creating the Application
In v1, the main application is created using `wails.CreateApp`, bindings are added with `app.Bind`, then the application is run using `app.Run()`.
Example:
```go title="v1"
app := wails.CreateApp(&wails.AppConfig{
Title: "MyApp",
Width: 1024,
Height: 768,
JS: js,
CSS: css,
Colour: "#131313",
})
app.Bind(basic)
app.Run()
```
In v2, there is just a single method, `wails.Run()`, that accepts [application options](../reference/options.mdx#application-options).
```go title="v2"
err := wails.Run(&options.App{
Title: "MyApp",
Width: 800,
Height: 600,
AssetServer: &assetserver.Options{
Assets: assets,
},
Bind: []interface{}{
basic,
},
})
```
### Binding
In v1, it was possible to bind both arbitrary functions and structs. In v2, this has been simplified to only binding structs. The struct instances that were previously passed to the `Bind()` method in v1, are now specified in the `Bind` field of the [application options](../reference/options.mdx#application-options):
```go title="v1"
app := wails.CreateApp(/* options */)
app.Bind(basic)
```
```go title="v2"
err := wails.Run(&options.App{
/* other options */
Bind: []interface{}{
basic,
},
})
```
In v1, bound methods were available to the frontend at `window.backend`. This has changed to `window.go`.``
### Application Lifecycle
In v1, there were 2 special methods in a bound struct: `WailsInit()` and `WailsShutdown()`. These have been replaced with 3 lifecycle hooks as part of the [application options](../reference/options.mdx#application-options):
- [OnStartup](../reference/options.mdx#onstartup)
- [OnShutdown](../reference/options.mdx#onshutdown)
- [OnDomReady](../reference/options.mdx#ondomready)
Note: [OnDomReady](../reference/options.mdx#ondomready) replaces the `wails:ready` system event in v1.
These methods can be standard functions, but a common practice is to have them part of a struct:
```go title="v2"
basic := NewBasicApp()
err := wails.Run(&options.App{
/* Other Options */
OnStartup: basic.startup,
OnShutdown: basic.shutdown,
OnDomReady: basic.domready,
})
...
type Basic struct {
ctx context.Context
}
func (b *Basic) startup(ctx context.Context) {
b.ctx = ctx
}
...
```
### Runtime
The runtime in v2 is much richer than v1 with support for menus, window manipulation and better dialogs. The signature of the methods has changed slightly - please refer the the [Runtime Reference](../reference/runtime/intro.mdx).
In v1, the [runtime](../reference/runtime/intro.mdx) was available via a struct passed to `WailsInit()`. In v2, the runtime has been moved out to its own package. Each method in the runtime takes the `context.Context` that is passed to the [OnStartup](../reference/options.mdx#onstartup) method.
```go title="Runtime Example"
package main
import "github.com/wailsapp/wails/v2/pkg/runtime"
type Basic struct {
ctx context.Context
}
// startup is called at application startup
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
runtime.LogInfo(ctx, "Application Startup called!")
}
```
### Assets
The _biggest_ change in v2 is how assets are handled.
In v1, assets were passed via 2 application options:
- `JS` - The application's JavaScript
- `CSS` - The application's CSS
This meant that the responsibility of generating a single JS and CSS file was on the developer. This essentially required the use of complicated packers such as webpack.
In v2, Wails makes no assumptions about your frontend assets, just like a webserver. All of your application assets are passed to the application options as an `embed.FS`.
**This means there is no requirement to bundle your assets, encode images as Base64 or attempt the dark art of bundler configuration to use custom fonts**.
At startup, Wails will scan the given `embed.FS` for `index.html` and use its location as the root path for all the other application assets - just like a webserver would.
Example: An application has the following project layout. All final assets are placed in the `frontend/dist` directory:
```shell
.
├── build/
├── frontend/
│ └── dist/
│ ├── index.html
│ ├── main.js
│ ├── main.css
│ └── logo.svg
├── main.go
└── wails.json
```
Those assets may be used by the application by simply creating an `embed.FS`:
```go title="Assets Example"
//go:embed all:frontend/dist
var assets embed.FS
func main() {
err := wails.Run(&options.App{
/* Other Options */
AssetServer: &assetserver.Options{
Assets: assets,
},
})
}
```
Of course, bundlers can be used if you wish to. The only requirement is to pass the final application assets directory to Wails using an `embed.FS` in the `Assets` key of the [application options](../reference/options.mdx#application-options).
### Project Configuration
In v1, the project configuration was stored in the `project.json` file in the project root. In v2, the project configuration is stored in the `wails.json` file in the project root.
The format of the file is slightly different. Here is a comparison:
<p align="center">
| v1 | v2 | Notes |
| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | name | |
| description | | Removed |
| author / name | author / name | |
| author / email | author / email | |
| version | version | |
| binaryname | outputfilename | Changed |
| frontend / dir | | Removed |
| frontend / install | frontend:install | Changed |
| frontend / build | frontend:build | Changed |
| frontend / bridge | | Removed |
| frontend / serve | | Removed |
| tags | | Removed |
| | wailsjsdir | The directory to generate wailsjs modules |
| | assetdir | The directory of the compiled frontend assets for `dev` mode. This is normally inferred and could be left empty. |
| | reloaddirs | Comma separated list of additional directories to watch for changes and to trigger reloads in `dev` mode. This is only needed for some more advanced asset configurations. |
</p>

Some files were not shown because too many files have changed in this diff Show More