Histórico da Página
Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
01. Dependências
- @angular
- Angular na versão 17
- @po-ui
- ng-components@17components@^17.0.0-next.013.9
- ng-[email protected]templates@^17.0-next.0
- subsink
- totvs/po-theme
- po-[email protected]theme@^17.0-next.0
02. Instalação
Caso já seja um projeto existente, basta instalar a dependência do protheus-lib-core
Bloco de código | ||||
---|---|---|---|---|
| ||||
npm i @totvs/protheus-lib-corecore@latest |
Caso o CLI do Angular ainda não esteja instalado, é necessário instalar o mesmo:
Bloco de código | ||||
---|---|---|---|---|
| ||||
npm i -g @angular/cli@15cli@17 |
Para iniciar um projeto Angular, de forma macro, os comandos são os seguintes
Bloco de código | ||||
---|---|---|---|---|
| ||||
ng new my-protheus-app cd my-protheus-app ng add @po-ui/ng-components@15components@latest ng add @po-ui/ng-templates@15templates@latest npm i subsink npm i @totvs/protheus-lib-core@15core@latest ng serve |
03. Atualização da versão 15 para a 17
Para atualizar o @totvs/protheus-lib-core da versão 15 para a 17 deve-se seguir alguns passos:
- Atualizar o Angular e o PO-UI do projeto para a versão 16;
- Após atualizar para a versão 16, atualizar para a versão 17 (Documento de atualização do PO-UI: https://po-ui.io/guides/migration-poui);
- Após realizar a atualização dos pacotes acima para a versão 17, instalar o protheus-lib-core:
Bloco de código | ||||
---|---|---|---|---|
| ||||
npm i @totvs/protheus-lib-core@latest |
Nota | ||
---|---|---|
| ||
Certificar-se de que as dependências seguem as versões abaixo: "dependencies": { |
04. Utilização
Para utilizar o protheus-lib-core, basta importar o módulo principal no projeto:
Bloco de código | ||||
---|---|---|---|---|
| ||||
import { ProtheusLibCoreModule } from '@totvs/protheus-lib-core'; |
Também adicionar o módulo no imports:
Bloco de código | ||||
---|---|---|---|---|
| ||||
imports: [ ProtheusLibCoreModule, ], |
05.
Exemplo
Importar um dos serviços do protheus-lib-core, como o ProAppConfigService que permite a comunicação do app com a camada ADVPL, permitindo por exemplo fechar a dialog a qual o app foi aberto:
Bloco de código | ||||
---|---|---|---|---|
| ||||
import { ProAppConfigService } from '@totvs/protheus-lib-core'; |
Criar o constructor para utilizar o serviço importado:
Bloco de código | ||||
---|---|---|---|---|
| ||||
constructor(private proAppConfigService: ProAppConfigService) { } |
Método para fechar o app no Protheus, podendo ser chamado no menu, em algum botão etc:
Bloco de código | ||||
---|---|---|---|---|
| ||||
private closeApp() { if (this.proAppConfigService.insideProtheus()) { this.proAppConfigService.callAppClose(); } else { alert('O App não está sendo executado dentro do Protheus.'); } } |
06.
Geração do aplicativo
Gerar o app com o comando de build do Angular CLI:
Bloco de código | ||||
---|---|---|---|---|
| ||||
ng build |
Compactar a pasta do projeto gerada dentro da pasta dist
A compatação deve ser feita, mantendo o nome da pasta original, sendo uma compactação utilizando ZIP, porém com a extensão app.
Criar um fonte ADVPL contendo a chamada da função FWCallApp, esse fonte deve ser incluso no menu. O parâmetro da função FWCappApp deve ser o nome do app, nome do arquivo gerado .app, sem extensão.
Para maiores informações sobre abrir o aplicativo dentro do Protheus: FwCallApp - Abrindo aplicativos Web no Protheus
Templatedocumentos |
---|