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 extender 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 extender 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 exibe a tela Plug-in Explorer que lista todos os plug-ins existentes sob suas perspectivas 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 visitam a tela para esse plug-in. Em geral, os passos para a criação de um novo plug-in são:
- Crie uma nova tela
- Crie uma nova perspectiva (e adicione a nova tela a ela)
- Crie um novo menu (e adicione 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 você queira 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ê e 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 de 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 de Modelo.
Insira o seu código JavScript na seção javaScript. Alguns métodos e propriedades comuns sã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 ao 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, insira Página Inicial no campo de nome da tag (e 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.
Quando você salva 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 do negócio. 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 })