Bean View Encoder

Bean view encoder allows developers to extend bean functionalities by adding javascript code for web apps. For example, reading or generating barcode, parsing card data, generating map from an address, etc.
            |                             |
PersistenceDataBeanViewEncoder     MenuBeanViewEncoder
     |                            |
EntityBeanViewEncoder  EntityListBeanViewEncoder
They are mapping to BackingBean class hierarchy. Correspondingly there are javascript widgets for PersistenceDataBackingBean hierarchy on client.

Client widgets:

                      |                                  |
             PersistenceDataBean                      MenuBean
    |                                   |
EntityBean                         EntityListBean
To add javascript using BeanViewEncoder, extend one of the leaf types in the both type hierarchies. For example, generating a map from the employee address of EmployeeBean in ExampleHR module:

public class EmployeeBeanViewEncoder extends EntityBeanViewEncoder<Employee> {
	// return the widget type name
	protected String getWidgetType() throws SystemException {
		// client widget type
		return "EmployeeBean"; 
	// add more attributes in cfg that will be passed into
	// init(cfg) when creating widget instances. cfg is a json object.
	protected void addWidgetAttributes(WidgetBuilder widgetBuilder, 
			ResponseWriter writer) throws IOException, SystemException {
		super.addWidgetAttributes(widgetBuilder, writer);
		// add more attributes if needed
		widgetBuilder.attr("country", "US");
	// get dynamic web resources that define EmployeeBean widget
	protected List<WebResource> getWidgetResources(String widgetType) {
		if ("EmployeeBean".equals(widgetType)) {
			// module name: lowcase in file path and URL
			// META-INF/resources/cmobilecom/module/examplehr/employee.js
			WebResource resource = new WebResource("examplehr",
					"employee.js", "cmobilecom", false, true);
			return CollectionUtil.convertToList(resource);

		return super.getWidgetResources(widgetType);
Define widget EmployeeBean in a javascript file such as employee.js:

Cmobilecom.widget.EmployeeBean = Cmobilecom.widget.EntityBean.extend({
	// init is called immediately after the widget is created
	init : function(cfg) {
		// show the widget only after parent widget(e.g. dialog) is shown
		this.cfg.showOnParentShow = true;
	// enhanceWithin is called after built-in enhancement of the bean is completed
	enhanceWithin : function() {
	// afterElementChanged is called after the element within the bean 
	// is changed (replaced or inserted) by ajax.
	afterElementChanged : function(action, jqElement) {
		// if address is changed, update the map
	// doShow is called when the widget is ready to show. 
	doShow : function(resize) {
		// show the map here
		return true; // true: showed successfully
	// resize is called when window or a layout unit is resized, 
	// or mobile device orientation is changed.
	resize : function() {
		// resize the map

Finally register the BeanViewEncoder:

public class WebExampleHRModule extends ExampleHRModule implements WebModule {

	public Map<Class<? extends BackingBean>, Class<? extends BeanViewEncoder>> getBeanViewEncoderMap() {
		Map<Class<? extends BackingBean>, Class<? extends BeanViewEncoder>> map = 
			new HashMap<Class<? extends BackingBean>, Class<? extends BeanViewEncoder>>();
		map.put(EmployeeBean.class, EmployeeBeanViewEncoder.class);
		return map;

Package the javascript files in module jar as the following path