Wire Components"

From Documentation
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{ZKDevelopersReferencePageHeader}}
  
 
Although the design principle of MVVM pattern is that '''ViewModel should not have any reference to UI components''', ZK still provides two ways to retrieve UI components in a ViewModel. However, we do not suggest this usage as it loses ViewModel an important advantage i.e. loose coupling with View. '''Notice that binder also manipulates UI components, so your operation to UI components may affect binder's work. Please be careful when using it.'''
 
 
One way is [[ZK Developer's Reference/MVVM/Advance/Parameters |passing components as parameters in command binding]] which we have talked before. Another is to wire components by <tt> Selectors.wireComponents() </tt>. This way enables you to wire components with <tt> @Wire </tt> like what you do in a [[ZK Developer's Reference/MVC/Controller/Wire Components| SelectorComposer]].
 
 
<!--
 
 
  since 6.0.2
 
  since 6.0.2
  
Line 14: Line 8:
 
One way to get components is [[ZK Developer's Reference/MVVM/Advance/Parameters |passing components as parameters in command binding]] which we have talked before. Another is to call <tt> Selectors.wireComponents() </tt>. This way enables you to wire components with <tt> @Wire </tt> like what you do in a [[ZK Developer's Reference/MVC/Controller/Wire Components| SelectorComposer]]. You should call <tt> Selectors.wireComponents() </tt> in a method with <tt> @AfterCompose </tt> as follows:
 
One way to get components is [[ZK Developer's Reference/MVVM/Advance/Parameters |passing components as parameters in command binding]] which we have talked before. Another is to call <tt> Selectors.wireComponents() </tt>. This way enables you to wire components with <tt> @Wire </tt> like what you do in a [[ZK Developer's Reference/MVC/Controller/Wire Components| SelectorComposer]]. You should call <tt> Selectors.wireComponents() </tt> in a method with <tt> @AfterCompose </tt> as follows:
  
-->
 
  
 
'''Example to wire components in a ViewModel'''
 
'''Example to wire components in a ViewModel'''
Line 26: Line 19:
 
Label msg;
 
Label msg;
  
@Init
+
@AfterCompose
public void init(@ContextParam(ContextType.VIEW) Component view){
+
public void afterCompose(@ContextParam(ContextType.VIEW) Component view){
 
Selectors.wireComponents(view, this, false);
 
Selectors.wireComponents(view, this, false);
 
}
 
}
Line 38: Line 31:
  
  
= Usage Changed in 6.0.2=
 
 
The timing of <tt> BindComposer </tt> calling @Init method becomes earlier to handle more common situation. Hence, to wire components in a ViewModel, you have to call <tt> Selectors.wireComponents() </tt> in a method with [[ZK Developer's Reference/MVVM/Syntax/ViewModel/@AfterCompose|<tt>@AfterCompose</tt> ]] as follows:
 
 
 
'''Example to wire components in a ViewModel'''
 
<source lang="java" high="4,6,9,10,11">
 
public class SearchAutowireVM{
 
 
//UI component
 
@Wire("#msgPopup")
 
Popup popup;
 
@Wire("#msg")
 
Label msg;
 
 
@AfterCompose
 
public void afterCompose(@ContextParam(ContextType.VIEW) Component view){
 
Selectors.wireComponents(view, this, false);
 
}
 
 
}
 
 
</source>
 
  
* <tt> Selectors.wireEventListeners()</tt> 's first parameters is Root View Component which can be retrieved by <tt>@ContextParam</tt>.
 
  
 
=Version History=
 
=Version History=
Line 73: Line 42:
 
| The MVVM was introduced.
 
| The MVVM was introduced.
 
|-
 
|-
| 6.0.2
+
| 6.0.0
 
| July 2012
 
| July 2012
 
| The @AfterCompose was introduced.
 
| The @AfterCompose was introduced.

Revision as of 01:35, 30 July 2012

since 6.0.2


Although the design principle of MVVM pattern is that ViewModel should not have any reference to UI components, ZK still provides two ways to retrieve UI components in a ViewModel. However, we do not suggest this usage as it loses ViewModel an important advantage: loose coupling with View. Notice that binder also manipulates UI components, so your operation to UI components may affect binder's work. Please be careful when using it.

One way to get components is passing components as parameters in command binding which we have talked before. Another is to call Selectors.wireComponents() . This way enables you to wire components with @Wire like what you do in a SelectorComposer. You should call Selectors.wireComponents() in a method with @AfterCompose as follows:


Example to wire components in a ViewModel

public class SearchAutowireVM{

	//UI component
	@Wire("#msgPopup")
	Popup popup;
	@Wire("#msg")
	Label msg;

	@AfterCompose
	public void afterCompose(@ContextParam(ContextType.VIEW) Component view){
		Selectors.wireComponents(view, this, false);
	}

}
  • Selectors.wireComponents()'s first parameters is Root View Component which can be retrieved by @ContextParam



Version History

Last Update : 2012/07/30


Version Date Content
6.0.0 February 2012 The MVVM was introduced.
6.0.0 July 2012 The @AfterCompose was introduced.




Last Update : 2012/07/30

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.