|
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-2024 Potix Corporation All rights reserved.
|
Processing... |