forked from ElectronNET/Electron.NET
-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathIndex.cshtml
More file actions
222 lines (189 loc) · 10.3 KB
/
Copy pathIndex.cshtml
File metadata and controls
222 lines (189 loc) · 10.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<template class="task-template">
<section id="dialogs-section" class="section js-section u-category-native-ui">
<header class="section-header">
<div class="section-wrapper">
<h1>
<svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-native-ui"></use></svg>
Use system dialogs
</h1>
<h3>The <code>Electron.Dialog</code> in Electron.NET allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages.</h3>
<p>This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interupting the visible elements in your page's renderer process.</p>
<p>You find the sample source code in <code>Controllers\DialogsController.cs</code>.</p>
</div>
</header>
<div class="demo">
<div class="demo-wrapper">
<button id="open-file-demo-toggle" class="js-container-target demo-toggle-button">
Open a File or Directory
<div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
</button>
<div class="demo-box">
<div class="demo-controls">
<button class="demo-button" id="select-directory">View Demo</button>
<span class="demo-response" id="selected-file"></span>
</div>
<p>In this demo, the <code>ipcRenderer</code> is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.</p>
<h5>Renderer Process (JavaScript)</h5>
<pre><code class="language-js">const { ipcRenderer } = require("electron");
document.getElementById("select-directory").addEventListener("click", () => {
ipcRenderer.send("select-directory");
});
ipcRenderer.on("select-directory-reply", (sender, path) => {
document.getElementById("selected-file").innerText = `You selected: ${path}`;;
});</code></pre>
<h5>Main Process (C#)</h5>
<pre><code class="csharp">Electron.IpcMain.On("select-directory", async (args) => {
var mainWindow = Electron.WindowManager.BrowserWindows.First();
var options = new OpenDialogOptions {
Properties = new OpenDialogProperty[] {
OpenDialogProperty.openFile,
OpenDialogProperty.openDirectory
}
};
string[] files = await Electron.Dialog.ShowOpenDialogAsync(mainWindow, options);
Electron.IpcMain.Send(mainWindow, "select-directory-reply", files);
});</code></pre>
</div>
</div>
</div>
<div class="demo">
<div class="demo-wrapper">
<button id="error-dialog-demo-toggle" class="js-container-target demo-toggle-button">
Error Dialog
<div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
</button>
<div class="demo-box">
<div class="demo-controls">
<button id="error-dialog" class="demo-button">View Demo</button>
</div>
<p>In this demo, the <code>ipcRenderer</code> is used to send a message from the renderer process instructing the main process to launch the error dialog.</p>
<h5>Renderer Process (JavaScript)</h5>
<pre><code class="language-js">const { ipcRenderer } = require("electron");
document.getElementById("error-dialog").addEventListener("click", () => {
ipcRenderer.send("error-dialog");
});</code></pre>
<h5>Main Process (C#)</h5>
<pre><code class="csharp">Electron.IpcMain.On("error-dialog", (args) =>
{
Electron.Dialog.ShowErrorBox("An Error Message", "Demonstrating an error message.");
});</code></pre>
</div>
</div>
</div>
<div class="demo">
<div class="demo-wrapper">
<button id="information-dialog-demo-toggle" class="js-container-target demo-toggle-button">
Information Dialog
<div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
</button>
<div class="demo-box">
<div class="demo-controls">
<button class="demo-button" id="information-dialog">View Demo</button>
<span class="demo-response" id="info-selection"></span>
</div>
<p>In this demo, the <code>ipcRenderer</code> is used to send a message from the renderer process instructing the main process to launch the information dialog. Options may be provided for responses which can then be relayed back to the renderer process.</p>
<p>Note: The <code>title</code> property is not displayed in macOS.</p>
<p>An information dialog can contain an icon, your choice of buttons, title and message.</p>
<h5>Renderer Process (JavaScript)</h5>
<pre><code class="javascript">document.getElementById("information-dialog").addEventListener("click", () => {
ipcRenderer.send("information-dialog");
});
ipcRenderer.on("information-dialog-reply", (sender, index) => {
let message = 'You selected ';
if(index == 0) {
message += 'yes.'
} else {
message += 'no.'
}
document.getElementById("info-selection").innerText = message;
});</code></pre>
<h5>Main Process (C#)</h5>
<pre><code class="csharp">Electron.IpcMain.On("information-dialog", async (args) =>
{
var options = new MessageBoxOptions("This is an information dialog. Isn't it nice?")
{
Type = MessageBoxType.info,
Title = "Information",
Buttons = new string[] { "Yes", "No" }
};
var result = await Electron.Dialog.ShowMessageBoxAsync(options);
var mainWindow = Electron.WindowManager.BrowserWindows.First();
Electron.IpcMain.Send(mainWindow, "information-dialog-reply", result.Response);
});</code></pre>
</div>
</div>
</div>
<div class="demo">
<div class="demo-wrapper">
<button id="save-dialog-demo-toggle" class="js-container-target demo-toggle-button">
Save Dialog
<div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
</button>
<div class="demo-box">
<div class="demo-controls">
<button class="demo-button" id="save-dialog">View Demo</button>
<span class="demo-response" id="file-saved"></span>
</div>
<p>In this demo, the <code>ipcRenderer</code> is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.</p>
<h5>Renderer Process (JavaScript)</h5>
<pre><code class="javascript">const { ipcRenderer } = require("electron");
document.getElementById("save-dialog").addEventListener("click", () => {
ipcRenderer.send("save-dialog");
});
ipcRenderer.on("save-dialog-reply", (sender, path) => {
if (!path) path = 'No path';
document.getElementById('file-saved').innerHTML = `Path selected: ${path}`;
});</code></pre>
<h5>Main Process (C#)</h5>
<pre><code class="csharp">Electron.IpcMain.On("save-dialog", async (args) =>
{
var mainWindow = Electron.WindowManager.BrowserWindows.First();
var options = new SaveDialogOptions
{
Title = "Save an Image",
Filters = new FileFilter[]
{
new FileFilter { Name = "Images", Extensions = new string[] {"jpg", "png", "gif" } }
}
};
var result = await Electron.Dialog.ShowSaveDialogAsync(mainWindow, options);
Electron.IpcMain.Send(mainWindow, "save-dialog-reply", result);
});</code></pre>
</div>
</div>
</div>
<script>
(function(){
const { ipcRenderer } = require("electron");
document.getElementById("select-directory").addEventListener("click", () => {
ipcRenderer.send("select-directory");
});
ipcRenderer.on("select-directory-reply", (sender, path) => {
document.getElementById("selected-file").innerText = `You selected: ${path}`;
});
document.getElementById("error-dialog").addEventListener("click", () => {
ipcRenderer.send("error-dialog");
});
document.getElementById("information-dialog").addEventListener("click", () => {
ipcRenderer.send("information-dialog");
});
ipcRenderer.on("information-dialog-reply", (sender, index) => {
let message = 'You selected ';
if(index == 0) {
message += 'yes.'
} else {
message += 'no.'
}
document.getElementById("info-selection").innerText = message;
});
document.getElementById("save-dialog").addEventListener("click", () => {
ipcRenderer.send("save-dialog");
});
ipcRenderer.on("save-dialog-reply", (sender, path) => {
if (!path) path = 'No path';
document.getElementById('file-saved').innerHTML = `Path selected: ${path}`;
});
}());
</script>
</section>
</template>