Close modal window with Form and Databinding

asked 2012-05-05 16:53:35 +0800

antonko gravatar image antonko

updated 2012-05-05 18:07:49 +0800

Hello everyone!

I use ZK v6.0.0 and would like to create a modal window with form in it for editing some data. It seems to be quite easy, but I faced the problem of closing the modal window. I need clicking on button to lead to 2 actions:

Save button:
1. Form save = @command('save')
2. Window close = scheduleWindow.setVisible(false)


Cancel button:
1. Form reset = ? (not sure how to do it yet)
2. Window close = scheduleWindow.setVisible(false)

Unfortunately, code like this doesn't work:

<button id="save" onClick="@command('save'); scheduleWindow.setVisible(false)">
<button id="cancel" onClick="@{form_sch}.resetDirty(); scheduleWindow.setVisible(false)">

Below is the window ZUL code;

<idspace apply="org.zkoss.bind.BindComposer" viewModel="@id('schedule') @init('ScheduleViewModel')" validationMessages="@id('vmsgs')">
	<window id="scheduleWindow" closable="true" mode="modal" sizable="false" visible="false"
		form="@id('form_sch') @load(schedule) @save(schedule, before='reschedule')"
		onClose="self.visible = false; event.stopPropagation();">

				<label value="Cron expression:" ></label>
					<textbox mold="rounded" id="cronExpression" value="@bind(form_sch.cronExpression) @validator(schedule.validator)" ></textbox>
					<label value="@bind(vmsgs)" style="color: red" ></label>
			<checkbox label="Temporarily disable" checked="@bind(form_sch.temporarilyDisabled)" ></checkbox>
			<hbox width="100%" pack="center" style="margin-top: 10px">
				<button id="save" label="Save" mold="trendy" onClick="@command('save')></button>
				<button id="cancel" label="Cancel" mold="trendy" onClick="scheduleWindow.setVisible(false)" ></button>
	<toolbarbutton image="images/calendar2.png" tooltiptext="Edit report schedule" onClick="scheduleWindow.doModal()" ></toolbarbutton>

Any help and hints are highly appreciated,
Thank you.

UPD #1 Small talks section contains examples (MVVM in ZK6 - Design CRUD page by MVVM pattern, MVVM Extension: Access UI Components Inside ViewModel) which can solve my task. However according to MVVM model ViewModel should not somehow operate with GUI components, thus I'd like to separate controller logic (show/hide modal window etc) from ViewModel.

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2012-05-06 19:17:35 +0800

Matze2 gravatar image Matze2
773 7

The only thing I can say is, that I also faced some exceptions where there is no other way than wiring UI components and operate directly on them.
In my case, it was focus control and closing bandboxes which is a little bit similar to your problem.

link publish delete flag offensive edit

answered 2012-05-07 11:15:30 +0800

antonko gravatar image antonko

updated 2012-05-07 11:15:59 +0800

Hi Matze2,

As for now I have chosen the way described in MVVM in ZK 6 - Design CRUD page by MVVM pattern where window visibility is controlled by the following expression:

    <window title="Confirm" mode="modal" visible="@load(not empty vm.deleteMessage)">

Quite lightweight and easy-to-implement approach, but still having conceptual concerns.

link publish delete flag offensive edit

answered 2012-05-07 11:35:00 +0800

Matze2 gravatar image Matze2
773 7

This case is quite doable. I didn't realize that you just need to switch visibility.

But as soon as you need to dynamically create (Executions.createComponents()) or destroy (detach()) modal windows or any sub-areas of your page, you are lost.

link publish delete flag offensive edit

answered 2012-06-18 05:06:10 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2595 2 8

In my case, it is not showing the model window itself. Here is the code.

<window id="win" title=" " width="520px" height="220px"
border="normal" minimizable="false" mode="modal" maximizable="false"
closable="true" action="show: slideDown;hide: slideUp"
viewModel="@id('vm') @init('domainVMS.PersonCRUDVM')" visible="@load(not empty vm.closeThis)">
<separator />
<label value="Person information" />

public void initSetup() {
this.closeThis = null;

@Command @NotifyChange("closeThis")
public void save() {
new PersonDAO().saveOrUpdate(this.selectedPerson);
this.closeThis = null;

link publish delete flag offensive edit

answered 2012-06-18 07:49:37 +0800

cypha gravatar image cypha
27 1

updated 2012-06-18 07:49:49 +0800

The feature requested in this ticket might help you - at least it worked for me:

link publish delete flag offensive edit

answered 2012-09-12 18:39:58 +0800

ovazquezv gravatar image ovazquezv

Hi Everybody

The next code works for me. (It is just example code)


<window id="divEscritorio"
	viewModel="@id('vm') @init('package.Mvvm')"
		width="50%" height="50%"
		onClose="@command('closePopupPortalServicios')  " 



public class EscritorioServiciosMvvm implements Serializable {
	boolean portalServiciosVisible = false;

	public void closePopupPortalServicios(@ContextParam(ContextType.TRIGGER_EVENT)Event e){
		portalServiciosVisible = false;



link publish delete flag offensive edit

answered 2012-09-14 17:43:00 +0800

sjoshi gravatar image sjoshi flag of India
3508 1 8

If you want to close only Model Pop us you can implement you close or cancel button like this...

<button label="Cancel"
				onClick="sortingModelWindow.detach()" />

Where sortingModelWindow is the id of your modelpop window.. in your case you have to give id to ur ModelPopUp window

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2012-05-05 16:53:35 +0800

Seen: 756 times

Last updated: Sep 14 '12