Merge pull request #3059 from osanyin/docs-translation
Some docs translated to pt-BR
This commit is contained in:
Cheng Zhao
commit
2820fa8fd4
3 changed files with 347 additions and 4 deletions
|
|
@ -10,9 +10,9 @@
|
|||
|
||||
## Tutoriais
|
||||
|
||||
* [Introdução](../../docs/tutorial/quick-start.md)
|
||||
* [A integração com o ambiente de desenvolvimento](../../docs/tutorial/desktop-environment-integration.md)
|
||||
* [Evento de detecção on-line/off-line](../../docs/tutorial/online-offline-events.md)
|
||||
* [Introdução](tutorial/quick-start.md)
|
||||
* [A integração com o ambiente de desenvolvimento](tutorial/desktop-environment-integration.md)
|
||||
* [Evento de detecção on-line/off-line](tutorial/online-offline-events.md)
|
||||
|
||||
## API - Referencias
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,260 @@
|
|||
# Integração com o ambiente desktop
|
||||
|
||||
Diferentes sistemas operacionais possuem diferentes formas de integrar
|
||||
aplicacões desktop em seus ambientes. Por exemplo, no Windows, as aplicações podem
|
||||
inserir atalhos no JumpList da barra de tarefas, no Mac, aplicações podem implementar um
|
||||
menu customizado na dock.
|
||||
|
||||
Este guia explica como integrar suas aplicações no ambiente desktop com a API
|
||||
do Electron.
|
||||
|
||||
## Documentos Recentes (Windows & OS X)
|
||||
|
||||
O Windows e o OS X disponibilizam um acesso fácil para a lista de arquivos
|
||||
abertos recentemente pela aplicação através do JumpList ou Dock Menu respectivamente.
|
||||
|
||||
__JumpList:__
|
||||
|
||||
|
||||
|
||||
__Dock menu da Aplicação:__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5069610/2aa80758-6e97-11e4-8cfb-c1a414a10774.png" height="353" width="428" >
|
||||
|
||||
Para adicionar um arquivo para os documentos recentes, você pode usar a API
|
||||
[app.addRecentDocument][addrecentdocument]:
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
app.addRecentDocument('/Users/USERNAME/Desktop/work.type');
|
||||
```
|
||||
|
||||
E você pode usar a API [app.clearRecentDocuments][clearrecentdocuments] para
|
||||
limpar a lista de documentos recentes.
|
||||
|
||||
```javascript
|
||||
app.clearRecentDocuments();
|
||||
```
|
||||
|
||||
### Notas para Windows
|
||||
|
||||
A fim de ser possível usar estas funcionalidades no Windows, sua aplicação deve
|
||||
estar registrada como um handler daquele tipo de documento, caso contrário, o
|
||||
arquivo não será exibido no JumpList mesmo depois de você ter adicionado isto.
|
||||
Você pode encontrar qualquer coisa sobre o registro da aplicacão em
|
||||
[Application Registration][app-registration].
|
||||
|
||||
Quando um usuário clica em um arquivo na JumpList, uma nova instância da sua aplicacão
|
||||
deve ser iniciada com o caminho do arquivo adicionado como um argumento de
|
||||
linha de comando.
|
||||
|
||||
### Notas para OS X
|
||||
|
||||
Quando um arquivo for requisitado pelo menu de documentos recentes, o evento `open-file`
|
||||
do módulo `app` irá ser emitido.
|
||||
|
||||
## Dock Menu customizado (OS X)
|
||||
|
||||
OS X permite que desenvolvedores especifiquem um menu customizado para a dock,
|
||||
que normalmente contém alguns atalhos para as funcionalidades mais utilizadas
|
||||
da sua aplicação.
|
||||
|
||||
__Dock menu do Terminal.app:__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png" height="354" width="341" >
|
||||
|
||||
Para criar seu Dock Menu customizado, você pode usar a API `app.dock.setMenu`,
|
||||
ela está disponível apenas no OS X:
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
var Menu = require('menu');
|
||||
var dockMenu = Menu.buildFromTemplate([
|
||||
{ label: 'New Window', click: function() { console.log('New Window'); } },
|
||||
{ label: 'New Window with Settings', submenu: [
|
||||
{ label: 'Basic' },
|
||||
{ label: 'Pro'}
|
||||
]},
|
||||
{ label: 'New Command...'}
|
||||
]);
|
||||
app.dock.setMenu(dockMenu);
|
||||
```
|
||||
|
||||
## Tarefas do Usuário (Windows)
|
||||
|
||||
No Windows você pode especificar ações customizadas na categoria `Tarefas` do JumpList,
|
||||
esse texto foi copiado do MSDN:
|
||||
|
||||
> Applications define tasks based on both the program's features and the key
|
||||
> things a user is expected to do with them. Tasks should be context-free, in
|
||||
> that the application does not need to be running for them to work. They
|
||||
> should also be the statistically most common actions that a normal user would
|
||||
> perform in an application, such as compose an email message or open the
|
||||
> calendar in a mail program, create a new document in a word processor, launch
|
||||
> an application in a certain mode, or launch one of its subcommands. An
|
||||
> application should not clutter the menu with advanced features that standard
|
||||
> users won't need or one-time actions such as registration. Do not use tasks
|
||||
> for promotional items such as upgrades or special offers.
|
||||
>
|
||||
> It is strongly recommended that the task list be static. It should remain the
|
||||
> same regardless of the state or status of the application. While it is
|
||||
> possible to vary the list dynamically, you should consider that this could
|
||||
> confuse the user who does not expect that portion of the destination list to
|
||||
> change.
|
||||
|
||||
__Tarefas do Internet Explorer:__
|
||||
|
||||
|
||||
|
||||
Ao contrário do Menu Dock no OS X que é um verdadeiro menu, tarefas do usuário no Windows
|
||||
funcionam como atalhos, de uma forma que quando o usuário clica em uma tarefa, um programa
|
||||
deve ser executado com os argumentos especificados.
|
||||
|
||||
Para setar tarefas do usuário para sua aplicação, você pode usar a API
|
||||
[app.setUserTasks][setusertaskstasks]:
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
app.setUserTasks([
|
||||
{
|
||||
program: process.execPath,
|
||||
arguments: '--new-window',
|
||||
iconPath: process.execPath,
|
||||
iconIndex: 0,
|
||||
title: 'New Window',
|
||||
description: 'Create a new window'
|
||||
}
|
||||
]);
|
||||
```
|
||||
|
||||
Para limpar sua lista de tarefas, apenas chame `app.setUserTasks` com um
|
||||
array vazio.
|
||||
|
||||
```javascript
|
||||
app.setUserTasks([]);
|
||||
```
|
||||
|
||||
As tarefas do usuário são exibidas mesmo depois da aplicação ser fechada,
|
||||
então o ícone e o caminho do programa especificado pela tarefa deve existir
|
||||
até sua aplicação ser desinstalada.
|
||||
|
||||
## Miniaturas na Barra de Ferramentas
|
||||
|
||||
No Windows você pode adicionar uma miniatura na barra de ferramentas com botões
|
||||
específicos para a janela e barra de tarefas para aplicação. Isso provê ao usuário
|
||||
uma forma de acessar um comando específico para janela sem ser necessário restaurar
|
||||
ou ativar a janela.
|
||||
|
||||
Isto é ilustrado no MSDN:
|
||||
|
||||
> This toolbar is simply the familiar standard toolbar common control. It has a
|
||||
> maximum of seven buttons. Each button's ID, image, tooltip, and state are defined
|
||||
> in a structure, which is then passed to the taskbar. The application can show,
|
||||
> enable, disable, or hide buttons from the thumbnail toolbar as required by its
|
||||
> current state.
|
||||
>
|
||||
> For example, Windows Media Player might offer standard media transport controls
|
||||
> such as play, pause, mute, and stop.
|
||||
|
||||
__Miniaturas da barra de tarefas do Windows Media Player:__
|
||||
|
||||
|
||||
|
||||
Você pode usar [BrowserWindow.setThumbarButtons][setthumbarbuttons] para criar
|
||||
miniaturas na barra de ferramentas para sua aplicação.
|
||||
|
||||
```
|
||||
var BrowserWindow = require('browser-window');
|
||||
var path = require('path');
|
||||
var win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600
|
||||
});
|
||||
win.setThumbarButtons([
|
||||
{
|
||||
tooltip: "button1",
|
||||
icon: path.join(__dirname, 'button1.png'),
|
||||
click: function() { console.log("button2 clicked"); }
|
||||
},
|
||||
{
|
||||
tooltip: "button2",
|
||||
icon: path.join(__dirname, 'button2.png'),
|
||||
flags:['enabled', 'dismissonclick'],
|
||||
click: function() { console.log("button2 clicked."); }
|
||||
}
|
||||
]);
|
||||
```
|
||||
|
||||
Para limpar os botões na miniatura da barra de ferramentas, apenas chame
|
||||
`BrowserWindow.setThumbarButtons` com um array vazio.
|
||||
|
||||
```javascript
|
||||
win.setThumbarButtons([]);
|
||||
```
|
||||
|
||||
## Unity Launcher Shortcuts (Linux)
|
||||
|
||||
No Unity, você pode adicionar entradas customizadas para estes lançadores modificando
|
||||
o arquivo `.desktop`, veja [Adding Shortcuts to a Launcher][unity-launcher].
|
||||
|
||||
__Launcher shortcuts do Audacious:__
|
||||
|
||||
|
||||
|
||||
## Barra de Progresso na Barra de Tarefas (Windows & Unity)
|
||||
|
||||
No Windows o botão na barra de tarefas pode ser usado para exibir uma barra de progresso.
|
||||
Isto permite que a janela exiba informação sobre o progresso de algum processo sem
|
||||
a necessidade do usuário mudar de janela.
|
||||
|
||||
A Unity DE também tem uma funcionalidade parecida que permite especificar uma barra
|
||||
de progresso no ícone do lançador.
|
||||
|
||||
__Barra de Progresso no botão da barra de tarefas:__
|
||||
|
||||
|
||||
|
||||
__Barra de progresso no Unity launcher:__
|
||||
|
||||
|
||||
|
||||
Para adicionar uma barra de progresso para uma janela, você pode ver a API:
|
||||
[BrowserWindow.setProgressBar][setprogressbar]:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setProgressBar(0.5);
|
||||
```
|
||||
|
||||
## Representação do arquivo na janela (OS X)
|
||||
|
||||
No OS X, uma janela pode possuir a representação de um arquivo na barra de título,
|
||||
permitindo que ao usuário acionar um Command-Click ou Control-Click sobre o título da janela,
|
||||
uma pop-up de navegação entre arquivos é exibida.
|
||||
|
||||
Você também pode inserir um estado de edição na janela para que o ícone do arquivo
|
||||
possa indicar se o documento nesta janela foi modificado.
|
||||
|
||||
__Menu popup da representação de arquivo:__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5082061/670a949a-6f14-11e4-987a-9aaa04b23c1d.png" height="232" width="663" >
|
||||
|
||||
Para inserir o arquivo de representacão da janela, você pode usar as API
|
||||
[BrowserWindow.setRepresentedFilename][setrepresentedfilename] e
|
||||
[BrowserWindow.setDocumentEdited][setdocumentedited]:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setRepresentedFilename('/etc/passwd');
|
||||
window.setDocumentEdited(true);
|
||||
```
|
||||
|
||||
[addrecentdocument]: ../api/app.md#appaddrecentdocumentpath
|
||||
[clearrecentdocuments]: ../api/app.md#appclearrecentdocuments
|
||||
[setusertaskstasks]: ../api/app.md#appsetusertaskstasks
|
||||
[setprogressbar]: ../api/browser-window.md#browserwindowsetprogressbarprogress
|
||||
[setrepresentedfilename]: ../api/browser-window.md#browserwindowsetrepresentedfilenamefilename
|
||||
[setdocumentedited]: ../api/browser-window.md#browserwindowsetdocumenteditededited
|
||||
[app-registration]: http://msdn.microsoft.com/en-us/library/windows/desktop/ee872121(v=vs.85).aspx
|
||||
[unity-launcher]: https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles#Adding_shortcuts_to_a_launcher
|
||||
[setthumbarbuttons]: ../api/browser-window.md#browserwindowsetthumbarbuttonsbuttons
|
||||
83
docs-translations/pt-BR/tutorial/online-offline-events.md
Normal file
83
docs-translations/pt-BR/tutorial/online-offline-events.md
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
# Online/Offline Event Detection
|
||||
|
||||
Os eventos de detecão Online e Offile podem ser implementados no processo
|
||||
de renderização utilizando a API padrão do HTML, como é mostrado no exemplo
|
||||
a seguir.
|
||||
|
||||
_main.js_
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
var BrowserWindow = require('browser-window');
|
||||
var onlineStatusWindow;
|
||||
|
||||
app.on('ready', function() {
|
||||
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
|
||||
onlineStatusWindow.loadUrl('file://' + __dirname + '/online-status.html');
|
||||
});
|
||||
```
|
||||
|
||||
_online-status.html_
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
var alertOnlineStatus = function() {
|
||||
window.alert(navigator.onLine ? 'online' : 'offline');
|
||||
};
|
||||
|
||||
window.addEventListener('online', alertOnlineStatus);
|
||||
window.addEventListener('offline', alertOnlineStatus);
|
||||
|
||||
alertOnlineStatus();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Pode haver casos onde você também deseja responder a estes eventos no processo principal.
|
||||
Mas o processo principal não consegue detectar esses eventos diretamente, pois não possui
|
||||
um objeto `navigator`. Utilizando a ferramentas para comunicação entre processos, os eventos
|
||||
podem ser direcionados para o processo principal e manipulados quando necessário. Você
|
||||
pode ver isto no exemplo abaixo.
|
||||
|
||||
_main.js_
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
var ipc = require('ipc');
|
||||
var BrowserWindow = require('browser-window');
|
||||
var onlineStatusWindow;
|
||||
|
||||
app.on('ready', function() {
|
||||
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
|
||||
onlineStatusWindow.loadUrl('file://' + __dirname + '/online-status.html');
|
||||
});
|
||||
|
||||
ipc.on('online-status-changed', function(event, status) {
|
||||
console.log(status);
|
||||
});
|
||||
```
|
||||
|
||||
_online-status.html_
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
var ipc = require('ipc');
|
||||
var updateOnlineStatus = function() {
|
||||
ipc.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
|
||||
};
|
||||
|
||||
window.addEventListener('online', updateOnlineStatus);
|
||||
window.addEventListener('offline', updateOnlineStatus);
|
||||
|
||||
updateOnlineStatus();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
Loading…
Reference in a new issue