Aplicação React

Esse é um projeto de exemplo para construção de telas Sankhya utilizando a biblioteca de componentes ez-ui no framework React

Para execução do projeto é necessário ter o node instalado o indicado é na versão 16

Com o node instalado execute dentro da pasta do projeto o comando npm install

Esse comando faz o download e instala os modulos NPM

Outros comandos NPM

npm start - Comando que cria um servidor na porta 3000 para executar o projeto da tela e permitir testes npm build - Comando que faz a transpilação do código react gerando dentro da pasta build um compilado permitindo assim publicar a tela. (Para publicação correta da tela deve ser vista alguns detalhes)

Dependências importantes

@sankhyalabs/ezui - Biblioteca de componentes ez-ui, essa biblioteca contém componentes agnósticos a framework, e agnóstico a regras de negocio do SankhyaOM.

@sankhyalabs/react-ezui - Projeto para utilização especificamente no React, esse projeto tem como objetivo a disponibilização dos componentes do @sankhyalabs/ezui para utilização com React JSX facilitando a implementação utilizando a lib React.

@sankhyalabs/sankhyablocks - Esse projeto tem o papel de disponibilizar utilitários referente o contexto do SankhyaOM, nele podemos ter algumas regras referente a dicionário de dados Sankhya, workspace do SankhyaOM, application e etc. Seu principal papel é oferecer building blocks para facilitar a utilização do ez-ui no contexto do SankhyaOM.

@sankhyalabs/ez-design - Esse projeto é responsável por definir o tema da aplicação, tanto o @sankhyalabs/ezui quanto a aplicação dependem desse projeto para definir o tema da aplicação.

gulp - Para realizar deploy dos bundles da tela para o SankhyaOM.

Fontes e códigos importantes

• No index.tsx ou index.js no src do projeto deve-se utilizar o seguinte import:

  import { applyPolyfills, defineCustomElements } from "@sankhyalabs/ezui/loader"

  No final do arquivo após a renderização da div root deve-se executar a seguinte função

  applyPolyfills().then(() => {
      defineCustomElements();
  });

• No index.html da pasta public deve-se importar o seguinte css:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sankhyalabs/ez-design@latest/dist/default/ez-themed.min.css"/>

  Nota: Esse css já é importado no template launcher html mudanças realizada nesse index.html não serão refletidas dentro do sankhya

• No package.json é necessário definir o homepage com ./reactApps/{path-da-tela} no projeto é definido um de exemplo como o abaixo:

    "homepage": "./reactApps/MovimentacaoBancaria",

Utilização de tela react dentro do Sankhya-W

Telas já existentes

Semelhante ao WorkspaceHelper que definimos o caminho das telas que irão utilizar a versão HTML5 temos também o ReactAppsHelper que por sua vez tem por objetivo de informar as telas que irão ser desenvolvidas utilizando o React e o novo desing system.

Para configurar abra o arquivo /MGE-Modelcore/src/br/com/sankhya/modelcore/helper/workspace/PlatformLabsScreensHelper.java

A partir da linha 15 é possível adicionar os path das telas exemplo abaixo:

platformLabsScreensPath.add("/mgefin/MovimentacaoBancaria");

Novas telas

Em novas telas ao criar o xml do evento no caminho da tela a url deve ter como parâmetro isReact=true e o caminho deve apontar para mge(modulo)/reactApps/nomedatela abaixo um exemplo de url de tela:

<url><![CDATA[/mgefin/reactApps/movimentacao-bancaria/movimentacaoBancaria.xhtml5?isReactLabs=true&mgeSession=${mge.session.id}&resourceID=${resourceID}]]></url>

Parâmetro do servidor para habilitar as telas

No período de desenvolvimento é necessário adicionar o seguinte parâmetro nas configurações do Widfly ou Jboss -Dbr.com.sankhya.labs.use.new.screens=S