Frontend UI hello world sample

Description

This example add a new Widget in tab documents user interface:

  • Create a new GWT module.
  • Import new GWT module into default OpenKM frontend GWT module.
  • Create a new basic widget.
  • Use widget into OpenKM frontend UI.

Sample

Create a new GWT module

Create a file called HelloWorld.gwt.xml into src/main/resources/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>

Add module into OpenKM frontend UI

Edit Customization.gwt.xml into src/main/resources/com/openkm/extension/frontend and add the new module

<?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> 

Create new widget

Create a file called HelloWorld.java into src/main/java/com/openkm/extension/frontend/client

public class HelloWorld extends TabDocumentExtension {
    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) {
                GeneralComunicator.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 set(GWTDocument doc) {
        // TODO Auto-generated method stub
    }
 
    @Override
    public void setVisibleButtons(boolean visible) {
        // TODO Auto-generated method stub
 
    }
 
        @Override
        public String getExtensionUUID() {
                return String.valueOf("d9dab640-d098-11df-bd3b-0800200c9a66");
        }
}

Use widget into OpenKM

Edit Customization.java OpenKM class and add the HelloWorld widget:

public class Customization {
 
    /**
     * getExtensionWidgets
     * 
     * @return
     */
    public static List<Object> getExtensionWidgets() {
        List<Object> extensions = new ArrayList<Object>();
 
        // Declare here your widget extensions
        extensions.add(new HelloWorld());
 
        return extensions;
    }
}

Results

Compile project, login into OpenKM and you'll see something like this: