mirror of
https://github.com/ElectronNET/Electron.NET.git
synced 2026-10-01 03:11:45 +00:00
Implement HostHook logic to CLI and API. Implement an example in the Web-App.
This commit is contained in:
@@ -22,6 +22,7 @@
|
||||
<link rel="import" href="dialogs">
|
||||
<link rel="import" href="tray">
|
||||
<link rel="import" href="ipc">
|
||||
<link rel="import" href="hosthook">
|
||||
<link rel="import" href="appsysinformation">
|
||||
<link rel="import" href="clipboard">
|
||||
<link rel="import" href="pdf">
|
||||
@@ -69,6 +70,7 @@
|
||||
Communication
|
||||
</h5>
|
||||
<button type="button" id="button-ipc" data-section="ipc" class="nav-button">Communicate between the <em>two processes</em></button>
|
||||
<button type="button" id="button-hosthook" data-section="hosthook" class="nav-button">Execute your own <em>TypeScript code</em></button>
|
||||
</div>
|
||||
|
||||
<div class="nav-item u-category-system">
|
||||
|
||||
95
ElectronNET.WebApp/Views/HostHook/Index.cshtml
Normal file
95
ElectronNET.WebApp/Views/HostHook/Index.cshtml
Normal file
@@ -0,0 +1,95 @@
|
||||
<template class="task-template">
|
||||
<section id="hosthook-section" class="section js-section u-category-communication">
|
||||
<header class="communication">
|
||||
<div class="section-wrapper">
|
||||
<h1>
|
||||
<svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-communication"></use></svg>
|
||||
Execute your own TypeScript code
|
||||
</h1>
|
||||
<h3>The <code>HostHook</code> API allows you to execute your own JavaScript/TypeScript code on the host process.</h3>
|
||||
|
||||
<p>Create first an ElectronHostHook directory via the Electron.NET CLI, with the following command: <code>electronize add hosthook</code>.</p>
|
||||
<p>In this directory you can install any NPM packages and embed your own JavaScript/TypeScript code. It is also possible to respond to events from the host process.</p>
|
||||
<p>You find the sample source code in <code>Controllers\HostHookController.cs</code> and in the <code>ElectronHostHook</code> folder.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="demo">
|
||||
<div class="demo-wrapper">
|
||||
<button id="async-msg-demo-toggle" class="js-container-target demo-toggle-button">
|
||||
Execute TypeScript code
|
||||
<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="start-hoosthook-button">Create Excel-File</button>
|
||||
<span class="demo-response" id="hoosthook-reply"></span>
|
||||
</div>
|
||||
<p>Use <code>Electron.HostHook.CallAsync</code> to execute asynchronously your own JavaScript/TypeScript code, that expect a result value.</p>
|
||||
|
||||
<p>This example execute the TypeScript code, that listening on "create-excel". The TypeScript code use a NPM Package names exceljs, to create a Excel file and reply a success message.</p>
|
||||
|
||||
<h5>Main Process (C#)</h5>
|
||||
<pre><code class="csharp">
|
||||
Electron.IpcMain.On("start-hoosthook", async (args) =>
|
||||
{
|
||||
var mainWindow = Electron.WindowManager.BrowserWindows.First();
|
||||
var options = new OpenDialogOptions
|
||||
{
|
||||
Properties = new OpenDialogProperty[]
|
||||
{
|
||||
OpenDialogProperty.openDirectory
|
||||
}
|
||||
};
|
||||
var folderPath = await Electron.Dialog.ShowOpenDialogAsync(mainWindow, options);
|
||||
|
||||
var resultFromTypeScript = await Electron.HostHook.CallAsync<string>("create-excel-file", folderPath);
|
||||
Electron.IpcMain.Send(mainWindow, "excel-file-created", resultFromTypeScript);
|
||||
});
|
||||
</code>
|
||||
</pre>
|
||||
<h5>index.ts from ElectronHostHook-Folder (TypeScript)</h5>
|
||||
<pre>
|
||||
<code class="typescript">
|
||||
import * as Electron from "electron";
|
||||
import { Connector } from "./connector";
|
||||
import { ExcelCreator } from "./excelCreator";
|
||||
|
||||
export class HookService extends Connector {
|
||||
constructor(socket: SocketIO.Socket, public app: Electron.App) {
|
||||
super(socket, app);
|
||||
}
|
||||
|
||||
onHostReady(): void {
|
||||
// execute your own JavaScript Host logic here
|
||||
this.on("create-excel", async (path, done) => {
|
||||
const excelCreator: ExcelCreator = new ExcelCreator();
|
||||
const result: string = await excelCreator.create(path);
|
||||
|
||||
done(result);
|
||||
});
|
||||
}
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
const { ipcRenderer } = require("electron");
|
||||
|
||||
document.getElementById("start-hoosthook-button").addEventListener("click", () => {
|
||||
ipcRenderer.send("start-hoosthook");
|
||||
});
|
||||
|
||||
ipcRenderer.on('excel-file-created', (event, arg) => {
|
||||
const message = `Asynchronous message reply: ${arg}`;
|
||||
document.getElementById('hoosthook-reply').innerHTML = message;
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user