MVVM Extension: Access UI Components Inside ViewModel"

From Documentation
Line 1: Line 1:
 
=MVVM Extension: Access UI Components Inside View Model =
 
=MVVM Extension: Access UI Components Inside View Model =
To develop application in MVVM pattern separate View and its backend clearly
+
Developing an application in MVVM pattern separates View and its backend clearly.
 
Sometime developers want more control of components...
 
Sometime developers want more control of components...
  
Line 7: Line 7:
  
 
[[File:smalltalks-mvvm-in-zk6-view-example.png]]
 
[[File:smalltalks-mvvm-in-zk6-view-example.png]]
 +
 +
<source lang="java" high="9,16,21">
 +
public class SearchAutowireVM{
 +
 +
//the search condition
 +
private String filter = "*";
 +
 +
//the search result
 +
private ListModelList<Item> items;
 +
 +
private Converter totalPriceConverter;
 +
//the selected item
 +
private Item selected;
 +
//UI component
 +
@Wire("#msgPopup")
 +
Popup popup;
 +
@Wire("#msg")
 +
Label msg;
 +
 +
@Init
 +
public void init(BindContext ctx){
 +
//Returns associated root component of the binder
 +
Component component = ctx.getBinder().getView();
 +
Selectors.wireVariables(component, this);
 +
// Selectors.wireEventListeners(component, this);
 +
}
 +
        //...
 +
}
 +
</source>

Revision as of 08:16, 7 December 2011

MVVM Extension: Access UI Components Inside View Model

Developing an application in MVVM pattern separates View and its backend clearly. Sometime developers want more control of components...

Extend Case Scenario: Popup Detail

In search example mentioned in previous article, users see an item's description in detail only when users click a item (as the below image shows). It's more convenient to show the description when the mouse hover an item. We'll implement this feature through MVVM with autowiring components.

Smalltalks-mvvm-in-zk6-view-example.png

public class SearchAutowireVM{

	//the search condition
	private String filter = "*";
	
	//the search result
	private ListModelList<Item> items;
	
	private Converter totalPriceConverter;
	//the selected item
	private Item selected;
	//UI component
	@Wire("#msgPopup")
	Popup popup;
	@Wire("#msg")
	Label msg;

	@Init
	public void init(BindContext ctx){
		//Returns associated root component of the binder
		Component component = ctx.getBinder().getView();
		Selectors.wireVariables(component, this);
//		Selectors.wireEventListeners(component, this);
	}
        //...
}