2.6. Extensión de Central empresarial

Iniciando por la versión 6.1 BPM Suite, la Central empresarial puede ser configurada por el administrador para agregar nuevas pantallas,menús, editores, pantallas de inicio y perspectivas. Estos elementos pueden extender la funcionalidad de la Central empresarial y pueden accederse a través del menú de Extensiones y se clasifican en Administración de complementos.
Ahora puede definir sus propios complementos basados en Javascript y HTML para extender la Central empresarial y agregarlos sin necesidad de preocuparse de copiar archivos en el sistema de archivos subyacente. Agregue una nueva pantalla en el sistema para visualizar los elementos básicos de esta funcionalidad.

2.6.1. Administración de complementos

Usted puede acceder la pantalla Plugin Management al hacer clic en Extensiones → Plugin Management. Verá la pantalla Plugin Explorer que enumera todos los complementos existentes en sus respectivas categorías: Perspective Plugin, Screen Plugin, Editor Plugin, Splashscreen Plugin y Dynamic Menu. Abra alguno de ellos y verá los complementos existentes en cada categoría, incluidos los que no se pueden modificar y que son generados por el sistema.
Cree un nuevo complemento que haga el eco 'Hello World' cuando los usuarios visiten la pantalla para este complemento. En general, los pasos para crear un nuevo complemento, son:
  • Crear una pantalla
  • Para crear una perspectiva (y agregarle la nueva pantalla)
  • Cree un nuevo menú (y agréguele una nueva perspectiva)
  • Apps (opcional)

Adición de una nueva pantalla

Haga clic en el botón Nueva... y seleccione Nueva pantalla. Se le solicitará que ingrese el nombre de esta nueva pantalla. Ingrese "HelloWorldJS" y presione el botón Aceptar. El editor del complemento de pantalla se abrirá, dividido en 4 secciones: Plantilla, CSS, JavaScript y Medios.

Nota

Todos los elementos creados de forma manual entran dentro de sus respectivas categorías en caso de que usted desee modificarlas más adelante. En este caso, para reabrir el complemento de pantalla en un editor, abra la categoría Complemento de pantalla y pase las pantallas generadas por el sistema para ir al complemento creado manualmente y haga clic en él para volver a abrir el editor de complemento de pantalla.
Las plantillas en donde su HTML irá, CSS es para el estilo, JavaScript es para sus funciones, y Medios es para cargar y administrar imágenes.
Debido a que hacemos un complemento Hello World sencillo, ingrese el siguiente código en la sección de Template (Plantilla): <div>My Hello World Screen</div>. Puede ser cualquier código HTML y usted puede usar los marcos de trabajo Angular y Knockout. Para fines de este ejemplo, no estamos utilizando ninguno de estos marcos de trabajo, pero si desea, puede seleccionarlos desde la sección desplegable Template (Plantilla).
Ingrese su código JavaScript en la sección JavaScript. Algunos método y propiedades comunes se definen para usted, incluidos main, on_close y on_open. Para esta demostración, seleccione on_open e ingrese lo siguiente: function () { alert('Hello World'); }
Haga clic en el botón Guardar para terminar la creación de la pantalla.

Adición de una nueva perspectiva

Una vez que la pantalla haya sido creada, cree la perspectiva en donde residirá esta pantalla. Las perspectivas también pueden ser creadas mediante un clic en el botón Nueva... y luego seleccionando Nueva perspectiva. Así, abrirá el editor de complemento de perspectiva, similar al editor de complemento de la pantalla..
El editor de perspectiva es como un generador de cuadrilla de arrastrar y soltar para pantallas y los componentes HTML. Retire las cuadrículas que estén a mano derecha y luego arrastre una cuadrilla 6 6 al lado derecho.
Después, abra la categoría Componentes y arrastre un componente de pantalla a mano derecha (de la cuadrícula). De esta manera, abrirá el cuadro de diálogo Editar componente donde usted puede ingresar su pantalla creada en el paso anterior (HelloWorldJS). Haga clic en el botón Aceptar y luego en el botón para guardar esta perspectiva. Ingrese HelloWorldPerspective, entre Home en el campo de nombre (y haga clic en el botón Agregar etiqueta), por último haga clic en el botón Aceptar para terminar de guardar.
Si necesita cargar esta perspectiva de nuevo, necesitará el nombre que usted le ha dado, ya que esta perspectiva no aparece en la lista de perspectivas. Para cargar, haga clic en el botón e ingrese el nombre de la perspectiva.

Adición de un nuevo menú

El paso final para crear nuestro complemento es agregar un menú dinámico desde donde pueden ser llamada la nueva pantalla y la perspectiva. Para hacerlo, vaya a Extensiones → Administración de complemento y luego haga clic en el botón Nuevo ... para seleccionar Nuevo menú dinámico. Nombre a este menú dinámico como (HelloWorldMenu) y luego haga clic en el botón Aceptar . El editor del menú dinámico se abrira.
Ingrese el nombre de la perspectiva (HelloWorldPerspective) como y el ID de actividad y el nombre para el menú desplegable (HelloWorldMenuDropDown). Haga clic en Aceptar y luego en el botón Guardar.
Este nuevo menú se agregará a su tabla de trabajo la próxima vez que recargue la Central empresarial. Recárguela ahora para ver si HelloWorldMenu se ha agregado a su menú de nivel superior. Haga clic en éĺ para mostrar HelloWorldMenuDropDown, el cual al pulsarse se abrirá en su pantalla o perspectiva con el mensaje Hello World.
¡Acaba de crear su primer complemento!

Trabajar con apps (opcional)

Si usted crea múltiples conectores, puede usar la funcionalidad del directorio Apps para organizar sus propios componentes y adiciones, en lugar de tener que depender únicamente de las entradas de menú superior.
Cuando usted graba una nueva perspectiva, puede agregarle etiquetas (tags) para que la perspectiva y estas etiquetas sean utilizadas para asociar una perspectiva con un directorio App. Puede abrir los directorios App haciendo clic en Extensiones → Apps.
El directorio Apps proporciona una forma alternativa de abrir su perspectiva. Cuando usted creó su HelloWorldPerspective, ingresó la etiqueta Home. El directorio Apps predeterminado contiene un directorio único llamado Home con el cual usted asoció su perspectiva. Aquí es donde la encontrará cuando abra el directorio Apps. Ahora puede hacer clic para ejecutar la perspectiva.
Puede crear múltiples directorios y perspectivas asociadas con dichos directorios dependiendo de los requerimientos empresariales verticales. Por ejemplo, usted puede crear un directorio HR y luego asociar todas las perspectivas relacionadas con HR con dicho director para administrar de una mejor manera Apps.
Puede crear un nuevo directorio al hacer clic sobre:

2.6.2. JavaScript (JS) API para extensiones

La extensibilidad de Central empresarial se lleva a cabo mediante una API JavaScript (JS) subyacente la cual se carga de forma automática en la carpeta plugins de la Central empresarial webapp (por lo general: {INSTALL_DIR}/business-central.war/plugins/) o puede ser cargada mediante llamadas regulares JavaScript.
Esta API se divide en varios conjuntos según la funcionalidad.
  • API de perspectiva de registro: permite la creación de perspectivas. El ejemplo de abajo crea un panel mediante el 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: {}
                    }
                ]
            }
        ]
    }
});
  • La API del editor: le permite crear editores de forma dinámica y asociarlos con el tipo de archivo. El ejemplo de abajo, crea un editor de muestra y lo asocia con el tipo de archivo 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;
    }
});
    Además de los métodos on_startup y on_open vistos en el ejemplo anterior, la API expone los siguientes eventos de llamada para administrar el ciclo de vida del 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;
    Puede desplegar este editor a través de una plantilla 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: los métodos de esta API le permiten solicitar que Central empresarial despliegue un determinado componente asociado con un destino: $goToPlace("componentIdentifier");
  • API de complemento de registro: los métodos de esta API le permiten crear los complementos dinámicos (que serán transformados en pantallas de Central empresarial) a través de JSAPI. 
    $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!");
    }
});
    El complemento hace referencia a la plantilla 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>
    Un complemento puede ser agregado a los eventos de Central empresarial a través de una serie de llamadas de 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;
  • Registre la API de las pantallas de inicio: use los métodos en esta API para crear pantallas de inicio. 
    $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"]
});
  • Una API de Sistema de archivos virtual (VFS): con esta API, usted puede leer y escribir un archivo guardado en el sistema de archivos mediante una llamada asíncrona. 
    $vfs_readAllString(uri,  function(a) {
  //callback logic
});
    
$vfs_write(uri,content,  function(a) {
  //callback logic
})