|
Processing... Click the button to evoke a coffee ordering form in a modal window!
Description & Source Code
A modal dialog prompts user input before proceeding an action; in ZK, you could optionally stop the program execution altogether with the invocation of a modal dialog. In this demo, the modal dialog contains a ZUL file which is
rendered dynamically on demand. modal_dialog.zul
<div apply="demo.window.modal_dialog.ModalDialogController"> <button id="orderBtn" label="Order Coffee" autodisable="self" /> </div> employee_dialog.zul
<window id="modalDialog" title="Coffee Order" border="normal" width="460px" apply="demo.window.modal_dialog.EmployeeDialogController" position="center,center" closable="true" action="show: slideDown;hide: slideUp"> <vlayout> <grid> <columns> <column hflex="1" label="Name" /> <column hflex="2" label="Coffee Type" align="center" /> <column hflex="1" label="Quantity" align="center" /> </columns> <rows> <row> <label value="Evan" /> <label value="Java" /> <label value="2" /> </row> <row> <label value="Billy" /> <label value="Latte" /> <label value="3" /> </row> <row> <label value="Roger" /> <label value="Americano" /> <label value="6" /> </row> </rows> </grid> <button id="closeBtn" hflex="1" label="close"/> </vlayout> </window> ModalDialogController.java
package demo.window.modal_dialog;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zul.Window;
public class ModalDialogController extends SelectorComposer<Component> {
private static final long serialVersionUID = 1L;
@Listen("onClick = #orderBtn")
public void showModal(Event e) {
//create a window programmatically and use it as a modal dialog.
Window window = (Window)Executions.createComponents(
"/widgets/window/modal_dialog/employee_dialog.zul", null, null);
window.doModal();
}
}
EmployeeDialogController.java
package demo.window.modal_dialog;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
public class EmployeeDialogController extends SelectorComposer<Component> {
private static final long serialVersionUID = 1L;
@Wire
Window modalDialog;
@Listen("onClick = #closeBtn")
public void showModal(Event e) {
modalDialog.detach();
}
}
Copyright © 2005-2025 Potix Corporation All rights reserved.
|
|
Processing... |