Ejemplo Hello World de la interfaz de usuario del frontend

Descripción

Consejo

Este ejemplo añade un nuevo widget a la interfaz de usuario de la pestaña de documentos:

• Cree un nuevo módulo GWT.
• Importe el nuevo módulo GWT en el módulo GWT del frontend de OpenKM por defecto.
• Cree un nuevo widget básico.
• Utilice el widget en la interfaz de usuario del frontend de OpenKM.

Ejemplo

Crear un nuevo módulo GWT

Cree un fichero llamado HelloWorld.gwt.xml en src/main/java/com/openkm/extension/frontend

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module SYSTEM "http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module>
  <!-- Inherit the core Web Toolkit stuff -->
  <inherits name='com.google.gwt.user.User'/>
  <inherits name="com.google.gwt.http.HTTP"/>
</module>

Añadir el módulo a la interfaz de usuario del frontend de OpenKM

Edite Customization.gwt.xml en src/main/java/com/openkm/extension/frontend y añada el nuevo módulo

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module SYSTEM "http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module>
  <!-- Inherit the extension widgets -->
  <inherits name="com.openkm.extension.frontend.HelloWorld"/>
</module>

Crear un nuevo widget

Cree un fichero llamado HelloWorld.java en src/main/java/com/openkm/extension/frontend/client

package com.openkm.extension.frontend.client;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.openkm.frontend.client.extension.communicator.GeneralCommunicator;
import com.openkm.frontend.client.extension.communicator.TabDocumentCommunicator;
import com.openkm.frontend.client.extension.event.HasDocumentEvent;
import com.openkm.frontend.client.extension.event.HasDocumentEvent.DocumentEventConstant;
import com.openkm.frontend.client.extension.event.HasLanguageEvent;
import com.openkm.frontend.client.extension.event.HasLanguageEvent.LanguageEventConstant;
import com.openkm.frontend.client.extension.event.handler.DocumentHandlerExtension;
import com.openkm.frontend.client.extension.event.handler.LanguageHandlerExtension;
import com.openkm.frontend.client.extension.widget.tabdocument.TabDocumentExtension;

public class HelloWorld extends TabDocumentExtension implements DocumentHandlerExtension, LanguageHandlerExtension {

    Button refresh;
    VerticalPanel vPanel;

    public HelloWorld() {
        HTML html = new HTML("Hello Word");
        refresh = new Button("refresh UI");
        refresh.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                GeneralCommunicator.refreshUI();
            }
        });

        vPanel = new VerticalPanel();
        vPanel.add(html);
        vPanel.add(refresh);

        refresh.setStyleName("okm-Input");

        initWidget(vPanel);
    }

    @Override
    public String getTabText() {
        return "Hello tab";
    }

    @Override
    public void onChange(DocumentEventConstant event) {
        if (event.equals(HasDocumentEvent.DOCUMENT_CHANGED)) {
            Window.alert("document changed - " + event.getType());
        } else if (event.equals(HasDocumentEvent.KEYWORD_ADDED)) {
            Window.alert("keyword added - " + event.getType());
        } else if (event.equals(HasDocumentEvent.KEYWORD_REMOVED)) {
            Window.alert("keyword removed - " + event.getType());
        } else if (event.equals(HasDocumentEvent.CATEGORY_ADDED)) {
            Window.alert("category added - " + event.getType());
        } else if (event.equals(HasDocumentEvent.CATEGORY_REMOVED)) {
            Window.alert("category removed - " + event.getType());
        } else if (event.equals(HasDocumentEvent.TAB_CHANGED)) {
            Window.alert("tab changed - " + event.getType() + " - actual tab " + TabDocumentCommunicator.getSelectedTab());
        } else if (event.equals(HasDocumentEvent.PANEL_RESIZED)) {
            Window.alert("panel resized - " + event.getType());
        } else if (event.equals(HasDocumentEvent.SECURITY_CHANGED)) {
            Window.alert("security changed - " + event.getType());
        } else if (event.equals(HasDocumentEvent.NOTE_ADDED)) {
            Window.alert("note added - " + event.getType());
        }
    }

    @Override
    public void onChange(LanguageEventConstant event) {
        if (event.equals(HasLanguageEvent.LANGUAGE_CHANGED)) {
            Window.alert("language changed");
        }
    }
}

Utilizar el widget en OpenKM

Edite Customization.java, la clase de OpenKM, y añada el widget HelloWorld:

package com.openkm.extension.frontend.client;

import java.util.ArrayList;
import java.util.List;

public class Customization {

    /**
     * getExtensionWidgets
     */
    public static List<Object> getExtensionWidgets(List<String> uuidList) {
        List<Object> extensions = new ArrayList<>();

        // add here your widget extensions
        extensions.add(new HelloWorld());

        return extensions;
    }

}

Resultados

Compile el proyecto, inicie sesión en OpenKM y verá algo como esto: