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 Extensões 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

Acesse a tela de Gerenciamento de Plug-ins clicando em Extensões Gerenciamento de Plug-ins. 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.
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 Novo ... e selecione Nova Tela. Você será solicitado a inserir o nome dessa nova tela. Insira "HelloWorldJS" e pressione o botão OK. 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 Salvar 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 Novo... e, então, selecionando Nova Perspectiva. 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 (HelloWorldJS). Clique no botão OK 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 Adicionar Tag) e clique no botão OK 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.

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é Extensões Gerenciamento de Plug-ins e, então, clique no botão Novo ... para selecionar Novo Menu Dinâmico. Dê um nome a esse menu dinâmico (HelloWorldMenu) e clique no botão OK. 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 OK e, depois, no botão Salvar.
Esse novo menu será adicionado ao seu workbench na próxima vez que você atualizar o Business Central. Para ver HelloWorldMenu adicionado ao seu menu de nível superior, atualize-o agora. Clique nele para exibir HelloWorldMenuDropDown, 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 Extensões Apps.
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

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.
    $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;
        }
    });
    Além dos métodos on_startup e on_open apresentados no exemplo anterior, a API expõe os seguintes eventos de retorno de chamada para o gerenciamento do ciclo de vida do editor:
    • 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;
    Você pode exibir esse editor através de um modelo html:
    <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.
    $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!");
        }
    });
    O plug-in faz referência ao modelo angular.sample.html:
    <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>
    
    Um plug-in pode ser associado a eventos do Business Central através de uma série de chamadas de retorno JavaScript:
    • 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
    })
    
Red Hat logoGithubredditYoutubeTwitter

Aprender

Experimente, compre e venda

Comunidades

Sobre a documentação da Red Hat

Ajudamos os usuários da Red Hat a inovar e atingir seus objetivos com nossos produtos e serviços com conteúdo em que podem confiar. Explore nossas atualizações recentes.

Tornando o open source mais inclusivo

A Red Hat está comprometida em substituir a linguagem problemática em nosso código, documentação e propriedades da web. Para mais detalhes veja o Blog da Red Hat.

Sobre a Red Hat

Fornecemos soluções robustas que facilitam o trabalho das empresas em plataformas e ambientes, desde o data center principal até a borda da rede.

Theme

© 2026 Red Hat
Voltar ao topo