Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkAnother new ZK fiddle
16guest172.71.182.20428m8hbdNov 6, 2024 8:31:22 PMlinkresources
index.zulzul<zk>
<window title="Step-by-Step Form" border="normal" width="700px" height="500px" id="formWindow" apply="pkg$.TestComposer">
<vlayout>
<!-- Step Bar (Progress Indicator) -->
<hbox>
<label value="Step 1" style="width: 100px; text-align: center; padding: 5px; background-color: #4CAF50; color: white;" id="step1Label"/>
<label value="Step 2" style="width: 100px; text-align: center; padding: 5px; background-color: #ddd;" id="step2Label"/>
<label value="Step 3" style="width: 100px; text-align: center; padding: 5px; background-color: #ddd;" id="step3Label"/>
<label value="Step 4" style="width: 100px; text-align: center; padding: 5px; background-color: #ddd;" id="step4Label"/>
</hbox>
<!-- Step 1: Personal Information -->
<div id="step1" visible="true">
<label value="Step 1: Personal Information" />
<textbox id="name" placeholder="Enter your name" width="100%" />
<textbox id="email" placeholder="Enter your email" width="100%" />
</div>
<!-- Step 2: Address Information -->
<div id="step2" visible="false">
<label value="Step 2: Address Information" />
<textbox id="street" placeholder="Enter your street" width="100%" />
<textbox id="city" placeholder="Enter your city" width="100%" />
</div>
<!-- Step 3: Review Information -->
<div id="step3" visible="false">
<label value="Step 3: Review Your Information" />
<label id="reviewText" value=""/>
</div>
<!-- Step 4: Confirmation or Final Step -->
<div id="step4" visible="false">
<label value="Step 4: Confirm Your Submission" />
<label value="Thank you for completing the form." />
<!-- You can add a submit button here -->
<button label="Submit" onClick="submitForm()" />
</div>
<!-- Navigation Buttons -->
<hbox>
<button label="Back" id="backBtn" disabled="true" width="100px"/>
<button label="Next" id="nextBtn" width="100px"/>
</hbox>
</vlayout>
</window>
</zk>TestComposer.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Button;
import org.zkoss.zul.Div;
import org.zkoss.zul.Label;
import org.zkoss.zul.Textbox;
import org.zkoss.zk.ui.util.GenericForwardComposer;
public class TestComposer extends GenericForwardComposer<Component> {
@Wire
private Div step1;
@Wire
private Div step2;
@Wire
private Div step3;
@Wire
private Div step4;
@Wire
private Textbox name;
@Wire
private Textbox email;
@Wire
private Textbox street;
@Wire
private Textbox city;
@Wire
private Button nextBtn;
@Wire
private Button backBtn;
@Wire
private Label step1Label;
@Wire
private Label step2Label;
@Wire
private Label step3Label;
@Wire
private Label step4Label;
@Wire
private Label reviewText;
private int currentStep = 1;
@Override
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
Selectors.wireComponents(comp, this, false); // Wire annotations
}
// Method for the "Next" button
public void onClick$nextBtn() {
if (currentStep == 1) {
// Move to Step 2
step1.setVisible(false);
step2.setVisible(true);
step2Label.setStyle("background-color: #4CAF50; color: white;");
step1Label.setStyle("background-color: #ddd; color: black;");
currentStep = 2;
} else if (currentStep == 2) {
// Move to Step 3 (Review step)
step2.setVisible(false);
step3.setVisible(true);
step3Label.setStyle("background-color: #4CAF50; color: white;");
step2Label.setStyle("background-color: #ddd; color: black;");
reviewText.setValue("Name: " + name.getValue() + "\n" +
"Email: " + email.getValue() + "\n" +
"Street: " + street.getValue() + "\n" +
"City: " + city.getValue());
currentStep = 3;
nextBtn.setLabel("Submit");
} else if (currentStep == 3) {
// Move to Step 4 (Final step)
step3.setVisible(false);
step4.setVisible(true);
step3Label.setStyle("background-color: #4CAF50; color: white;");
step4Label.setStyle("background-color: #ddd; color: black;");
currentStep = 4;
nextBtn.setDisabled(true); // Disable next on the last step
}
updateNavigationButtons();
}
// Method for the "Back" button
public void onClick$backBtn() {
if (currentStep == 4) {
// Go back to Step 3
step4.setVisible(false);
step3.setVisible(true);
step4Label.setStyle("background-color: #ddd; color: black;");
step3Label.setStyle("background-color: #4CAF50; color: white;");
currentStep = 3;
nextBtn.setLabel("Next");
} else if (currentStep == 3) {
// Go back to Step 2
step3.setVisible(false);
step2.setVisible(true);
step3Label.setStyle("background-color: #ddd; color: black;");
step2Label.setStyle("background-color: #4CAF50; color: white;");
currentStep = 2;
} else if (currentStep == 2) {
// Go back to Step 1
step2.setVisible(false);
step1.setVisible(true);
step2Label.setStyle("background-color: #ddd; color: black;");
step1Label.setStyle("background-color: #4CAF50; color: white;");
currentStep = 1;
}
updateNavigationButtons();
}
// Update the navigation buttons state
private void updateNavigationButtons() {
backBtn.setDisabled(currentStep == 1);
nextBtn.setDisabled(currentStep == 4);
}
// Method to handle form submission (optional)
public void submitForm() {
// Handle form submission logic here (e.g., save data to a database)
Messagebox.show("Form submitted successfully!");
}
}