0

Close modal window with Form and Databinding

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

antonko gravatar image antonko
15

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

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)

or

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();">

		<vlayout>
			<hlayout>
				<label value="Cron expression:" ></label>
				<vlayout>
					<textbox mold="rounded" id="cronExpression" value="@bind(form_sch.cronExpression) @validator(schedule.validator)" ></textbox>
					<label value="@bind(vmsgs)" style="color: red" ></label>
				</vlayout>
			</hlayout>
			<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>
			</hbox>
		</vlayout>
	</window>
	...
	<toolbarbutton image="images/calendar2.png" tooltiptext="Edit report schedule" onClick="scheduleWindow.doModal()" ></toolbarbutton>
	...
</idspace>

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 +0000

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 +0000

antonko gravatar image antonko
15

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

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)">
    ...
    </window>

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 +0000

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 +0000

Senthilchettyin gravatar image Senthilchettyin flag of India
2424 2 7
http://emrpms.blogspot.in...

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

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


@Init
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 +0000

cypha gravatar image cypha
27 1

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

The feature requested in this ticket might help you - at least it worked for me:
http://tracker.zkoss.org/browse/ZK-986

link publish delete flag offensive edit

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

ovazquezv gravatar image ovazquezv
39

Hi Everybody

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

ZUL

<window id="divEscritorio"
	apply="org.zkoss.bind.BindComposer"
	viewModel="@id('vm') @init('package.Mvvm')"
	width="100%"
	height="100%">
	<window  
		maximizable="true"
		closable="true"  
		title="Ventana" 
		width="50%" height="50%"
		onClose="@command('closePopupPortalServicios')  " 
		visible="@load(vm.portalServiciosVisible)"
		mode="modal"
		>

    </window
</window


MVVM

public class EscritorioServiciosMvvm implements Serializable {
	
	boolean portalServiciosVisible = false;

	@Command
	@NotifyChange({"portalServiciosVisible"})
	public void closePopupPortalServicios(@ContextParam(ContextType.TRIGGER_EVENT)Event e){
		portalServiciosVisible = false;
		e.stopPropagation();
	}

}


Regards

link publish delete flag offensive edit

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

sjoshi gravatar image sjoshi flag of India
3476 8
http://zkframeworkhint.bl...

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
thnaks

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

Follow

RSS

Stats

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

Seen: 632 times

Last updated: Sep 14 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More