Declarative MVC binding

asked 2010-08-18 13:46:41 +0800

red3
84 ● 2

updated 2010-08-18 13:49:01 +0800

I am setting up an AJAX UI framework & conventions for my team and have decided on ZK (of course!)

I read the article about MVC Made Easy (http://www.zkoss.org/smalltalks/mvc3/)
and found the example posted here: http://www.pichelhofer.at/ZKDemo/ (SimpleComposer6 example.)

I think these are up to date examples, but ZK is moving so fast there may now be a better way!
Please let me know if I'm missing something!

From these examples, this is what I have discovered:
- Field to bean binding (auto-wiring) is achieved by the apply attribute being a GenericForwardComposer (or subclass of it)
- Implicit Event handler method binding is achieved through the Initializer, which by default uses this convention (event$componentId - e.g. onClick$btnSubmit)
- Component binding is also achieved by allowing the programmer to declare component by matching id in the Composer class (I prefer to call it a Controller than a Composer.)

This is what I have so far:

MyFormController.java:

public class MyFormController extends GenericForwardComposer {

	//These objects are handles on their UI counterparts
	private Window main;
	private Panel pnlForm;
	private Panel pnlConfirm;

	//The alias for the controller (used as the reference for binding)
	private String alias = "controllerBean;
	
	//The binder class that does the auto-wiring 'magic'
	private AnnotateDataBinder binder;
	
	//The data container object - its attributes are bound to the UI components
	//using value="@{controllerBean.domainobject.property}" syntax in the view
	private DataObject dataBean = new DataObject();
	
	private Service service = new Service();

	@Override
	public void doAfterCompose(Component win) throws Exception {
		super.doAfterCompose(win);
		win.setAttribute(this.alias, this, false); // make models visible for the databinder
	}

	public void onCreate$main(ForwardEvent event) {
		// get the databinder for later extra load and save
		// note: binder is not ready in doAfterCompose, so do it here
		binder = (AnnotateDataBinder) event.getTarget().getAttribute("binder",
				false);
	}

	public DataObject getDataBean() {
		return dataBean;
	}

	public void setSubscription(DataObject dataBean) {
		this.dataBean = dataBean;
	}

	public void onClick$btnSubmit(Event event) {
		//This will test constraints and save all bound values of BOUND fields
		//If a constraint is violated, an exception will be raised immediately and handled by the framework
		binder.saveComponent(main);
		
		...validate any unbound components...
		
		 response = service.doSomething(dataObject);

	}
	
}

In the view:

<?page id="myPage" title="My Autowired Page"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" root="main"?>

<zk>
		<window id="main"
			apply="com.tcs.gla.ui.registration.RegistrationFormController"
			width="450px">
...

This works well, but when creating a framework for others to use, I'd like to make some further improvements.

Issues I have:
- Bindings in the ZUL view are done like this value="@{composerRef.databean.propertyname}"
The composerRef identifier is defined in the composer! To make things neater, I would like to be able to define it in the view.

Things I would like to achieve:
- Create a base class that encapsulates the ability to configure the binding controller in the form.
- Allow the programmer to declare the references they will use in the ZUL file

This is how I thought I might achieve this:
- Create a base BoundFormController class which allows me to set the controller reference, root window reference, etc.
- Create an BoundFormInitializer class which allows me to set the values of these references and to define the sub-class of "BoundFormController" specific to my form.
- Declare the configuration of the controller using the <?init... directive in my Form

Here's my enhanced declarative binding ZUL file:

?page id="myPage" title="My Autowired Page"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" root="myForm"?>
<?init class="com.tcs.gla.ui.BoundFormControllerInit" root="myForm" alias="myController" controller="com.tcs.gla.ui.registration.MyFormController"?>

<zk>
		<window id="myForm"
			apply="${myController}"
                        onCreate="doFormCreate()"
			width="450px">
...

This way I can specify in the ZUL page the reference to use in my component bindings:
value="@{myController.user.name}"

To me this is more intuitive.

I have got this all working except for one thing. The EL expression in the form apply="${myController}" evaluates to nothing! It should be a reference to the for controller object. I have tried to set it as an attribute on the window and the page and use ${pageScope.myController}, but it still evaluates to nothing. I think that it's a lifecycle. I have also tried setting the apply property on the window programatically, but I am not sure how to do that.

So without a reference when I apply the controller to the window, the bindings are not made.
Perhaps I should forget using the apply attribute and do it in code?
Is this feasible? How, when and where do I programatically bind the form to the controller bean?