mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

docs: Update represented-file fiddle tutorial (#29245)

Browse source 
* Update represented-file fiddle.

* add index and code back to guide

Co-authored-by: Ethan Arrowood <ethan.arrowood@gmail.com>
This commit is contained in:
Kevin Hartman 2021-06-14 21:29:51 -04:00 committed by GitHub
parent 56ac67e059
commit 3e2ec0e2ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/fiddles/features/represented-file/index.html
View file

@ -4,13 +4,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Hello World!</title> <title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link rel="stylesheet" type="text/css" href="./styles.css">
</head> </head>
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
<p> <p>
We are using node <script>document.write(process.versions.node)</script>, Click on the title with the <pre>Command</pre> or <pre>Control</pre> key pressed.
Chrome <script>document.write(process.versions.chrome)</script>, You should see a popup with the represented file at the top.
and Electron <script>document.write(process.versions.electron)</script>.
</p> </p>
</body>
</body> </body>
</html> </html>

5
docs/fiddles/features/represented-file/main.js
View file

@ -4,10 +4,7 @@ const os = require('os');
function createWindow () { function createWindow () {
const win = new BrowserWindow({ const win = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600
webPreferences: {
nodeIntegration: true
}
}) })
win.loadFile('index.html') win.loadFile('index.html')

BIN
docs/images/represented-file.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 32 KiB

29
docs/tutorial/represented-file.md
View file

@ -20,23 +20,40 @@ To set the represented file of window, you can use the
## Example ## Example
Starting with a working application from the
[Quick Start Guide](quick-start.md), add the following lines to the
`main.js` file:
```javascript fiddle='docs/fiddles/features/represented-file' ```javascript fiddle='docs/fiddles/features/represented-file'
const { app, BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
const os = require('os');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
}
app.whenReady().then(() => { app.whenReady().then(() => {
const win = new BrowserWindow() const win = new BrowserWindow()
win.setRepresentedFilename('/etc/passwd') win.setRepresentedFilename(os.homedir())
win.setDocumentEdited(true) win.setDocumentEdited(true)
}) })
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
``` ```
After launching the Electron application, click on the title with `Command` or After launching the Electron application, click on the title with `Command` or
`Control` key pressed. You should see a popup with the file you just defined: `Control` key pressed. You should see a popup with the represented file at the top.
In this guide, this is the current user's home directory:
![Represented file](../images/represented-file.png) ![Represented file](../images/represented-file.png)