23.2 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.

                BeanViewEncoder
                      |
            -------------------------------
            |                             |
PersistenceDataBeanViewEncoder     MenuBeanViewEncoder
                 |
     ------------------------------
     |                            |
EntityBeanViewEncoder  EntityListBeanViewEncoder

They are mapping to BackingBean class hierarchy. Correspondingly there are javascript widgets for PersistenceDataBackingBean hierarchy on client.

Client widgets:


                                    Bean
                                      |
                      ------------------------------------
                      |                                  |
             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 the example HR module:

create a subclass of EntityBeanViewEncoder: EmployeeBeanViewEncoder.
create a client widget extending EntityBean: EmployeeBean.


public class EmployeeBeanViewEncoder extends EntityBeanViewEncoder<Employee> {
	
	// return the widget type name
	@Override
	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.
	@Override
	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
	@Override
	protected List<WebResource> getWidgetResources(String widgetType) {
		if ("EmployeeBean".equals(widgetType)) {
			// module name: lowercase in file path and URL
			// META-INF/resources/cmobilecom/module/hr/employee.js
			WebResource resource = new WebResource("hr",
					"employee.js", "cmobilecom", false, true);
			return Arrays.asList(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 when the widget is created
	init : function(cfg) {
		this._super(cfg);
		...
		
		// show the widget only after parent widget is shown
		this.cfg.showOnParentShow = true;
	},
	
	// Override this method for more initialization before rendering
	initBeforeRender : function() {
		this._super();
		...
	},
	
	// afterElementChanged is called after the element within the bean 
	// is changed (replaced or inserted) by ajax.
	afterElementChanged : function(action, jqElement) {
		this._super();
		
		// if address is changed, update the map
		...
	},
	
	// Override this method for actual rendering including DOM update and event binding
	_render : function(resize) {
		this._super();
		
		// show the map here
	},
	
	// resize is called when window or a layout unit is resized, 
	// or mobile device orientation is changed.
	resize : function() {
		this._super();
		
		// resize the map
	}
});

Finally register the BeanViewEncoder:


public class WebHRModule extends HRModule implements WebModule {

	@Override
	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

	META-INF/resources/cmobilecom/module/hr/employee.js

← Web Resources→ ThemesFrames / No Frames