2.6. Extendendo o Business Central
Ao iniciar a versão 6.1 do JBoss BPM Suite, o Business Central pode ser configurado para a adição de novas telas, menus, editores, telas iniciais e perspectivas pelo Administrador. Esses elementos podem estender a funcionalidade do Business Central e podem ser acessados através do menu e são classificados sob o
Gerenciamento de Plug-ins.
Você pode, agora, definir seus próprios plug-ins baseados em HTML e Javascript para estender o Business Central e adicioná-los sem ter que se preocupar em copiar os arquivos no sistema de arquivo subjacente. A seguir uma tela é adicionada ao sistema para a demonstração das noções básicas dessa funcionalidade.
2.6.1. Gerenciamento de Plug-ins Copiar o linkLink copiado para a área de transferência!
Copiar o linkLink copiado para a área de transferência!
Acesse a tela de . Isso exibirá a tela Plug-in Explorer que lista todos os plug-ins existentes sob suas respectivas categorias: Plug-in de Perspectiva, Plug-in de Tela, Plug-in de Editor, Plug-in de Tela Inicial e Menu Dinâmico. Abra qualquer um desses plug-ins e você poderá ver os plug-ins existentes em cada categoria, incluindo os não editáveis gerados pelo sistema.
Gerenciamento de Plug-ins clicando em
Vamos criar um novo plug-in que ecoe "Hello World" quando os usuários visitarem a tela para esse plug-in. Em geral, os passos para a criação de um novo plug-in são:
- Criar uma nova tela
- Criar uma nova perspectiva (e adicionar a nova tela a ela)
- Criar um novo menu (e adicionar uma nova perspectiva a ele)
- Aplicativos (opcional)
Adicionando uma nova tela
Clique no botão e selecione . Você será solicitado a inserir o nome dessa nova tela. Insira "HelloWorldJS" e pressione o botão . O editor do plug-in de tela abrirá, dividido em 4 seções: Modelo, CSS, JavaScript e Mídia.
Nota
Todos os elementos criados manualmente vão para as suas respectivas categorias, caso deseje editá-los depois. Nesse caso, abra o editor do plug-in de tela novamente, se você o fechou, e abra a categoria Plug-in de Tela e passe pelas telas geradas pelo sistema para ir até o plug-in criado manualmente por você. Clique nele para abrir o editor do plug-in de tela de novo.
O Modelo é para onde o seu HTML vai, CSS é para o estilo, JavaScript é para as suas funções e Mídia é para o carregamento e gerenciamento de imagens.
Já que estamos criando um plug-in Hello World simples, insira o seguinte código na seção Modelo:
<div>My Hello World Screen</div>. Ele pode estar em qualquer código HTML e você pode usar as estruturas Angular e Knockout fornecidas. Para efeitos desse exemplo, não estamos usando nenhuma dessas estruturas, mas você pode escolher uma delas ao selecionar o menu suspenso na seção Modelo.
Insira o seu código JavScript na seção javaScript. Alguns métodos e propriedades comuns estão definidos para você, incluindo
main, on_close e on_open. Para essa demonstração, selecione on_open e insira o seguinte: function () { alert('Hello World'); }
Clique no botão para concluir a criação da tela.
Adicionando uma nova Perspectiva
Uma vez que a tela tenha sido adicionada, você precisa criar uma perspectiva onde essa tela residirá. As perpectivas também podem ser criadas de maneira semelhante à criação de uma tela, clicando no botão e, então, selecionando . Isso abrirá o editor do plug-in de perspectiva, semelhante ao editor do plug-in de tela.
O Editor de Perspectiva é como um gerador de grade que pode arrastar e soltar as telas e os componentes HTML. Remova quaisquer grades existentes do lado direito e, então, arraste uma grade
6 6 no lado direito.
Depois, abra a categoria Componentes e arraste um Componente de Tela para o lado direito (em qualquer grade). Isto abrirá a caixa de diálogo Editar Componente, onde você pode inserir a sua tela criada no passo anterior (
para salvar essa perspectiva. Insira
HelloWorldJS). Clique no botão e, então, clique no botão
para salvar essa perspectiva. Insira HelloWorldPerspective e Página Inicial no campo de nome da tag (clique no botão ) e clique no botão para concluir o que foi salvo.
Caso você precise carregar essa perspectiva novamente, você precisará do nome que deu a ela, já que essa perspectiva não aparece na lista de perspectivas. Para carregar, clique no botão
e insira o nome da perspectiva.
e insira o nome da perspectiva.
Adicionando um novo menu
O passo final na criação do nosso plug-in é a adição de um menu dinâmico de onde a nova tela/ perspectiva possa ser chamada. Para fazer isso, vá até e, então, clique no botão para selecionar . Dê um nome a esse menu dinâmico (HelloWorldMenu) e clique no botão . O editor do menu dinâmico abrirá.
Insira o nome da perspectiva (HelloWorldPerspective) como a Id de Atividade e o nome para o menu suspenso (HelloWorldMenuDropDown). Clique no botão e, depois, no botão .
Esse novo menu será adicionado ao seu workbench na próxima vez que você atualizar o Business Central. Para ver adicionado ao seu menu de nível superior, atualize-o agora. Clique nele para exibir , o qual, ao ser clicado, abrirá a sua perspectiva/tela com a mensagem
Hello World.
Você criou o seu primeiro Plug-in!
Trabalhando com Aplicativos (Opcional)
Caso você crie vários plug-ins, você pode usar o recurso do diretório de Aplicativos para organizar seus próprios componentes e plug-ins, ao invés de depender apenas das entradas do menu superior.
Ao salvar uma nova perspectiva, você pode adicionar rótulos (tags) a ela e esses rótulos (tags) serão usados para associar uma perspectiva a um diretório de Aplicativos. Você pode abrir os diretórios de Aplicativos clicando em .
O diretório de Aplicativos fornece uma maneira alternativa de abrir a sua perspectiva. Quando você criou o seu
HelloWorldPerspective, você inseriu a tag Página Inicial. O diretório de Aplicativos contém um único diretório, por padrão, chamado Página Inicial, ao qual você associou a sua perspectiva. E é onde você a encontrará quando abrir o diretório de Aplicativos. Você pode clicar nele para executar a perspectiva agora.
Você pode criar múltiplos diretórios e associar as perspectivas a esses diretórios, dependendo das exigências funcionais e verticais de negócios. Por exemplo, você poderia criar um diretório RH e, então, associar todas as perspectivas relacionadas ao RH a esse diretório para gerenciar melhor os aplicativos.
Você pode criar um novo diretório, clicando em:
2.6.2. API JavaScript (JS) para Extensões Copiar o linkLink copiado para a área de transferência!
Copiar o linkLink copiado para a área de transferência!
A extensibilidade do Business Central é obtida através de uma API JavaScript (JS) subjacente, a qual é carregada automaticamente caso seja colocada na pasta de
plug-ins do webapp do Business Central (geralmente: {INSTALL_DIR}/business-central.war/plugins/), ou carregada através das chamadas regulares JavaScript.
Essa API é dividida em vários conjuntos de acordo com as funcionalidades que ela desempenha.
- API Register Perspective: permite a criação dinâmica das perspectivas. O exemplo abaixo cria um painel usando o método
registerPerspective:$registerPerspective({ id: "Home", is_default: true, panel_type: "org.uberfire.client.workbench.panels.impl.MultiListWorkbenchPanelPresenter", view: { parts: [ { place: "welcome", min_height: 100, parameters: {} } ], panels: [ { width: 250, min_width: 200, position: "west", panel_type: "org.uberfire.client.workbench.panels.impl.MultiListWorkbenchPanelPresenter", parts: [ { place: "YouTubeVideos", parameters: {} } ] }, { position: "east", panel_type: "org.uberfire.client.workbench.panels.impl.MultiListWorkbenchPanelPresenter", parts: [ { place: "TodoListScreen", parameters: {} } ] }, { height: 400, position: "south", panel_type: "org.uberfire.client.workbench.panels.impl.MultiTabWorkbenchPanelPresenter", parts: [ { place: "YouTubeScreen", parameters: {} } ] } ] } }); - API Editor: permite que você crie dinamicamente editores e os associe com um tipo de arquivo. O exemplo abaixo cria um editor de amostra e o associa com um tipo de arquivo
filename.Além dos métodos$registerEditor({ "id": "sample editor", "type": "editor", "templateUrl": "editor.html", "resourceType": "org.uberfire.client.workbench.type.AnyResourceType", "on_concurrent_update":function(){ alert('on_concurrent_update callback') $vfs_readAllString(document.getElementById('filename').innerHTML, function(a) { document.getElementById('editor').value= a; }); }, "on_startup": function (uri) { $vfs_readAllString(uri, function(a) { alert('sample on_startup callback') }); }, "on_open":function(uri){ $vfs_readAllString(uri, function(a) { document.getElementById('editor').value=a; }); document.getElementById('filename').innerHTML = uri; } });on_startupeon_openapresentados no exemplo anterior, a API expõe os seguintes eventos de retorno de chamada para o gerenciamento do ciclo de vida do editor:Você pode exibir esse editor através de um modelo html:- on_concurrent_update;
- on_concurrent_delete;
- on_concurrent_rename;
- on_concurrent_copy;
- on_rename;
- on_delete;
- on_copy;
- on_update;
- on_open;
- on_close;
- on_focus;
- on_lost_focus;
- on_may_close;
- on_startup;
- on_shutdown;
<div id="sampleEditor"> <p>Sample JS editor (generated by editor-sample.js)</p> <textarea id="editor"></textarea> <p>Current file:</p><span id="filename"></span> <button id="save" type="button" onclick="$vfs_write(document.getElementById('filename').innerHTML, document.getElementById('editor').value, function(a) {});">Save</button> <br> <p>This button change the file content, and uberfire send a callback to the editor:</p> <button id="reset" type="button" onclick="$vfs_write(document.getElementById('filename').innerHTML, 'Something else', function(a) {});">Reset File</button> </div> - API PlaceManager: os métodos dessa API permitem que você solicite ao Business Central a exibição de um componente em particular associado ao destino:
$goToPlace("componentIdentifier"); - API Register plu-in: os métodos dessa API permitem que você crie plug-ins dinâmicos (que serão transformados em telas do Business Central) via a API JS.O plug-in faz referência ao modelo
$registerPlugin( { id: "my_angular_js", type: "angularjs", templateUrl: "angular.sample.html", title: function () { return "angular " + Math.floor(Math.random() * 10); }, on_close: function () { alert("this is a pure JS alert!"); } });angular.sample.html:Um plug-in pode ser associado a eventos do Business Central através de uma série de chamadas de retorno JavaScript:<div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"> </form> <form ng-submit="goto()"> <input type="text" ng-model="placeText" size="30" placeholder="place to go"> <input class="btn-primary" type="submit" value="goTo"> </form> </div>- on_concurrent_update;
- on_concurrent_delete;
- on_concurrent_rename;
- on_concurrent_copy;
- on_rename;
- on_delete;
- on_copy;
- on_update;
- on_open;
- on_close;
- on_focus;
- on_lost_focus;
- on_may_close;
- on_startup;
- on_shutdown;
- API Register splash screens: usa os métodos nessa API para criar telas iniciais
$registerSplashScreen({ id: "home.splash", templateUrl: "home.splash.html", body_height: 325, title: function () { return "Cool Home Splash " + Math.floor(Math.random() * 10); }, display_next_time: true, interception_points: ["Home"] }); - API Virtual File System (VFS): com essa API, você pode ler e gravar um arquivo salvo no sistema de arquivos usando uma chamada assíncrona.
$vfs_readAllString(uri, function(a) { //callback logic }); $vfs_write(uri,content, function(a) { //callback logic })