Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I've been playing around with the MVVM CRUD example.
In the delete use case I want to insert a message box style 'are you sure you want to delete (y/n)?' prompt before the delete command is actioned. Under ZK5 MVC I'd insert an 'alert' javascript entry into the onClick event handler. Is it possible to do something similar in ZK6 inside the ZUL and still call the @command('delete')?
How about this idea ?
// In ZUL
<button label="save" onClick="@command('click')" />
// In View Model
@Command("click")
public void click() {
Messagebox.show(
"Are you sure to save?", "Confirm Dialog",
Messagebox.OK | Messagebox.IGNORE | Messagebox.CANCEL,
Messagebox.QUESTION,
new org.zkoss.zk.ui.event.EventListener() {
@Override
public void onEvent(Event evt) throws InterruptedException {
if (evt.getName().equals("onOK")) {
System.out.println("Data Saved !");
} else if (evt.getName().equals("onIgnore")) {
Messagebox.show("Ignore Save", "Warning",
Messagebox.OK, Messagebox.EXCLAMATION);
} else {
System.out.println("Save Canceled !");
}
}
}
);
}Thinking in MVVM, and let ZUL clean... :)
Regard,
Monty
Can I call a @command method inside some zscript?
I think the answer is yes and no.
Yes, you can write View Model in zscript, or maybe exist other way to call @Command method in zscript.
(Notice : if you call method in View Model directly, it will not trigger @NotifyChange )
But in my opinion, it will disobey the spirit of MVVM pattern.
Let ZUL(View) is an absolute view, let View Model work on it's way.
Sorry to my impoliteness, but, please thinking in (pure) MVVM.
Regard,
Monty
I don't see how adding an 'alert' style popup in the ZUL file compromises the MVVM principle.
Think of it from a testing perspective. How can I build an automated test to verify a MVVM class @command method that performs a delete if inside the code it pops up a message box. Seems to me that button bindings need some form of validation /confirmation option that would be executed BEFORE the @command.
Maybe this link will give you some information.....
http://books.zkoss.org/wiki/ZK%20Developer's%20Reference/MVVM/Data%20Binding/Command%20Binding#Command_Execution
Take a look at this: http://books.zkoss.org/wiki/Small_Talks/2011/November/MVVM_in_ZK_6_-_Design_CRUD_page_by_MVVM_pattern
(I'm using zk 6.5)
I've experienced the same problem with Confirm Box using MVVM pattern. Initially, I follow the solution in the link suggested by MonoMamerto which work well (as the MVVM style).
Doing such, I've to include the the same code (comfirm box) in each zul that I want to use Confirm Box. Moreover, if I want to change visual style of the Confirm Box, I've to edit every zul containing Confirm Box code.
As far as I know, the current version of zk (6.5?) does not provide @confirm (as requested by davout). So I created a MacroComponent to solve this limitation as workaround solution. This Component takes a String input as a message to display and evokes onYes/onNo event when users click Yes/No button.
You can use this component with MVVM pattern. To confirm delete, for example, instead of binding to 'delete()' method, you bind to 'confirm()' method which cause Confirm Box to appear. Then you bind 'onYes' event of Confirm Box to 'delete()' method. Here is an example.
<?component name="confirm" class="yourpackage.ConfirmBox" ?>
<zk>
...
<confirm message="@load(vm.confirmMessage)" visible="@bind(vm.confirmDelete)" onYes="@command('delete')" ></confirm>
...
</zk>
My workaround solution might not be optimal, you can improve it or make it generic to support all type of MessageBox.
Here are sources for the mentioned MacroComponet I created.
confirmbox.zul
<zk>
<window id="win" title="Confirmation" border="normal" mode="modal"
style="padding: 3px; min-width:350px; max-width: 450px; min-height: 100px;">
<div style="padding: 5px;">
<hlayout>
<image src="~./zul/img/msgbox/question-btn.png" ></image>
<separator ></separator>
<label id="lblMessage" hflex="1" ></label>
</hlayout>
<separator style="margin: 5px;" ></separator>
<div align="center">
<button id="btnYes" width="70px" label="Yes" image="~./zul/img/misc/drag-allow.png" ></button>
<button id="btnNo" width="70px" label="No" image="~./zul/img/misc/drag-disallow.png" ></button>
</div>
</div>
</window>
</zk>
ConfirmBox.java
package yourpackage;
// import
@ComponentAnnotation({"message:@ZKBIND(ACCESS=both)", "visible:@ZKBIND(ACCESS=both)"})
public class ConfirmBox extends HtmlMacroComponent {
private static final long serialVersionUID = 1L;
private String message;
@Wire("#win")
private Window window;
@Wire("#win #lblMessage")
private Label lblMessage;
@Wire("#win #btnYes")
private Button btnYes;
@Wire("#win #btnNo")
private Button btnNo;
public ConfirmBox() {
setMacroURI("/WEB-INF/zul/component/confirmbox.zul");
}
@Override
public void afterCompose() {
super.afterCompose();
if (window != null && isVisible()) {
window.doModal();
}
}
public String getValue() {
return message;
}
@Listen("onClick=#win #btnYes")
public void doYes() {
Events.postEvent("onYes", this, null);
setVisible(false);
}
@Listen("onClick=#win #btnNo")
public void doNo() {
setVisible(false);
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
if (lblMessage != null) {
lblMessage.setValue(this.message);
}
}
@Override
public boolean isVisible() {
return window.isVisible();
}
@Override
public boolean setVisible(boolean visible) {
if (window != null) {
window.setVisible(visible);
if (visible) {
btnNo.focus();
window.doModal();
}
}
return visible;
}
}
lang-addon.xml (place this file in e.g. WEB-INF)
<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
<addon-name>ciaaddon</addon-name>
<language-name>xul/html</language-name>
<component>
<component-name>confirmBox</component-name>
<component-class>yourpackage.ConfirmBox</component-class>
</component>
</language-addon>
add this configuration to zk.xml (default WEB-INF/zk.xml)
<?xml version="1.0" encoding="UTF-8"?>
<zk>
...
<language-config>
<addon-uri>/WEB-INF/lang-addon.xml</addon-uri>
</language-config>
</zk>
Asked: 2012-06-12 18:39:57 +0800
Seen: 891 times
Last updated: Dec 06 '12