My favorites | Sign in
Project Home Downloads Wiki Issues Source
Hablar is a new GWT2.0 emite ui
Users-guide, Phase-Implementation
Updated Aug 26, 2010 by danigb


Hablar is the a new Emite user interface builded using GWT widgets and UIBinder GWT2.0 feature. See the HablarUserGuide for instructions on how to use it.

Hablar is build using the MVP pattern and its composed of several modules that can be optional included to create a customized user interface.

Currently is only in svn repository under trunk/hablar



Hablar is composed of different modules that can be included or not. Each module gives the user interface a unique group of xmpp features. Two different layouts are selectable (accordion and tabs)

A big Hablar.gwt.xml includes all the Hablar modules. Its used to show all the features of hablar (and ready for non-gwt users.

A lot of options can be configured using html meta tags, so Hablar is ready to be embedded in any web page without any notions of GWT or java development.

Current modules

The currently implemented Hablar modules include:

  • HablarBasic: the basic UI. It MUST be included.
  • HablarChat: the ability to open one-to-one chats
  • HablarEditBuddy: the ability to edit nickname of the roster items
  • HablarLogin: the ability to login and logout using a user selected jabber id.
  • HablarOpenChat: the ability to open a chat with any jabber id. Needs HablarChat
  • HablarRoster: a roster (contacts) panel. If HablarChat is included, clicking over a roster contact open a chat with that contact.
  • HablarSearch: the ability to search users (using jabber search)
  • HablarSignals: show a signal in the window title with the unattended chats

Integration with other GWT applications

A Hablar integration demo is included in the svn repo at trunk/hablar-demo (using UIBinder).

Basically what you need is create a HablarWidget and install the desired modules:

  HablarWidget hablar = new HablarWidget(Layout.accordion);
  HablarRoster.install(hablar, false);

The modules must be also included in your .gwt.xml file.

Hablar widget is UIBinder compatible. Here's an example:

<!DOCTYPE ui:UiBinder SYSTEM "">
<ui:UiBinder xmlns:ui=""
	xmlns:g="" xmlns:hablar="urn:import:com.calclab.hablar.basic.client.ui">
  <hablar:HablarWidget layout="accordion"></hablar:HablarWidget>

Configurable parameters via html tags

The big Hablar.gwt.xml module has a lot of options configurable via html tags:

<!-- the proxy url, required -->
  <meta id="emite.httpBase" content="/proxy" /> 
<!-- xmpp the server name, required -->
  <meta id="" content="localhost" />
<!-- the xmpp search server name -->
  <meta id="emite.searchHost" content="search.localhost" /> 
<!-- autologin: if included, will try to login when the page opens and logout when the page is closed -->
    <meta id="emite.session" content="login" /> 
<!-- the username of the autologin feature -->
    <meta id="emite.user" content="test2@localhost" /> 
<!-- the password of the autologin feature -->
    <meta id="emite.password" content="test2" /> 

<!-- show or not the login panel -->
    <meta id="hablar.loginWidget" content="true" />
<!-- the default user name in HablarLogin panel, optional -->
    <meta id="hablar.user" content="test1@localhost" /> 
<!-- the default user password in HablarLogin panel, optional -->
    <meta id="hablar.password" content="test1" /> 
<!-- show or not the roster panel -->
    <meta id="hablar.rosterWidget" content="true" /> 
<!-- the hablar layout (accordion|tabs) -->
    <meta id="hablar.layout" content="accordion" /> 
<!-- autoembed: if present, a HablarWidget will be inserted in the given div id -->
    <meta id="hablar.inline" content="vertical_div" /> 
<!-- the size of the HablarWidget in autoembed feature -->
    <meta id="hablar.width" content="100%" /> 
<!-- the height of the HablarWidget in the autoembed feature -->
    <meta id="hablar.height" content="100%" /> 

Integration in HTML pages without any GWT knowledge

When finished, a zip file with instructions will be in the download section. Currenlty you have to use the gwt compiler with Hablar module in order to have the deliverable.

Comment by, May 20, 2010

Hablar-demo problems during compilation. I used GWT 2.0.3, linux, eclipse galileo. In hablar-demo there're two emite libraries emite-0.5.0.jar and emite-snapshot.jar ( I've used the last, becase seems upper compilation version ). During compilation process appears this error:

Scanning for additional dependencies: /home/jllort/softwareFactoryGalileo/openkm/target/.generated/com/calclab/hablar/core/client/pages/tabs/TabsHeaderWidget_TabsHeaderWidgetUiBinderImpl?.java INFO? Computing all possible rebind results for 'com.calclab.hablar.core.client.pages.tabs.TabsHeaderWidget_TabsHeaderWidgetUiBinderImpl_GenBundle?' INFO? Rebinding com.calclab.hablar.core.client.pages.tabs.TabsHeaderWidget_TabsHeaderWidgetUiBinderImpl_GenBundle? INFO? Invoking INFO? Preparing method closeIcon INFO? Finding resources INFO? ERROR? Resource ../close.png not found. Is the name specified as Class.getResource() would expect? INFO? ERROR? Errors in '/home/jllort/softwareFactoryGalileo/openkm/target/.generated/com/calclab/hablar/core/client/pages/tabs/TabsHeaderWidget_TabsHeaderWidgetUiBinderImpl?.java' INFO? ERROR? Line 12: Failed to resolve 'com.calclab.hablar.core.client.pages.tabs.TabsHeaderWidget_TabsHeaderWidgetUiBinderImpl_GenBundle?' via deferred binding INFO? ERROR? Cannot proceed due to previous errors

I needed to change into TabsHeaderWidget?.ui.xml to compile <ui:image field='closeIcon' src='com/calclab/hablar/core/client/pages/close.png' />

Comment by project member, May 20, 2010

Don't use Hablar-demo, but the trunk of Hablar itself. Anyway for further questions please ask the users mailing list.

Comment by, Jan 7, 2013

Is it possible to group chat using hablar ?

Sign in to add a comment
Powered by Google Project Hosting