You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Jeffrey Schneller <je...@envisa.com> on 2009/10/09 18:24:43 UTC
Modal inside a WizardStep
I have a modal inside a wizard step. The modal is displaying and
showing data. The modal is using a panel and not a page. The panel for
the modal contains a form with text fields. The wizard step contains
labels.
I want to have a save and a cancel button in the modal. The save should
take the values from the text fields and update the model in the wizard
step. The wizard step should now show the updated values in the label.
I tried implementing an AjaxButton in the panel for the modal but it
never does anything.
How would one do this? Example code, pseudo-code?
Thanks.
RE: Modal inside a WizardStep
Posted by Jeffrey Schneller <je...@envisa.com>.
Think of an order form. Step 1 you enter the products you want to
order. Step 2 based on your account it pulls up a list of billing
addresses. In step 2 you choose your billing address and the details of
the billing address are shown in step 2 with a modify link. The modify
link allows you to modify the information and then when done the
modified information is shown as the billing address in step 2. Step 3
is the shipping information with the same idea as step 2. Step 4 would
be a confirmation of everything entered. Then 'Finish'.
This to me is a very common way to use a wizard and modal windows.
-----Original Message-----
From: Jeremy Thomerson [mailto:jeremy@wickettraining.com]
Sent: Friday, October 09, 2009 12:37 PM
To: users@wicket.apache.org
Subject: Re: Modal inside a WizardStep
I keep wondering, too, what you are doing in the wizard that needs an
editing modal popup. Typically, wizards are used for multi-step forms.
So
to me it's weird to have a wizard that isn't the form - but displays
values
that you are then editing from a modal. Just curious....
--
Jeremy Thomerson
http://www.wickettraining.com
On Fri, Oct 9, 2009 at 11:35 AM, Jeremy Thomerson
<jeremy@wickettraining.com
> wrote:
> Some very brief pseudo code. Let us know if you need more detail.
>
> public MyWizard(IModel<Foo> model) {
> setModel(new Model<Foo>(model.getObject());
> .... initialize wizard steps - passing them this.getModel() so they
all use
> the same model ....
> }
>
> make sure to pass all of your wizard steps AND the form inside your
modal
> the same model.
>
> Then, in your wizard step and form, use property models (or a compound
> property model):
>
> new MyStep(IModel<Foo> model) {
> setModel(model);
> add(new Label("firstName", new PropertyModel(model, "firstName"));
> .. or ..
> setModel(new CompoundPropertyModel(model));
> add(new Label("firstName");
> }
>
>
> new MyForm(IModel<Foo> model) {
> setModel(model);
> add(new TextField("firstName", new PropertyModel(model, "firstName"));
> .. or ..
> setModel(new CompoundPropertyModel(model));
> add(new TextField("firstName");
> }
>
> By doing this, your modal form will actually update the object that is
also
> backing the wizard. Then, you should just be able to submit the form,
close
> the modal, and add the wizard step components to the ajax request (so
that
> they will be repainted). When they are repainted, they will pull the
values
> from the model object, which was updated by your form.
>
> If you hit a wall with that, you *may* have to set the model on your
wizard
> step to the model from your form. For instance:
>
> // in your ajax submit:
> MyStep.this.setModel(form.getModel())
> target.addComponent(MyStep.this.panelThatShowsYourStuff)
> // close modal
>
> --
> Jeremy Thomerson
> http://www.wickettraining.com
>
>
>
>
> On Fri, Oct 9, 2009 at 11:24 AM, Jeffrey Schneller <
> jeffrey.schneller@envisa.com> wrote:
>
>> I have a modal inside a wizard step. The modal is displaying and
>> showing data. The modal is using a panel and not a page. The panel
for
>> the modal contains a form with text fields. The wizard step contains
>> labels.
>>
>>
>>
>> I want to have a save and a cancel button in the modal. The save
should
>> take the values from the text fields and update the model in the
wizard
>> step. The wizard step should now show the updated values in the
label.
>>
>>
>>
>> I tried implementing an AjaxButton in the panel for the modal but it
>> never does anything.
>>
>>
>>
>> How would one do this? Example code, pseudo-code?
>>
>>
>>
>> Thanks.
>>
>>
>>
>>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Modal inside a WizardStep
Posted by Jeremy Thomerson <je...@wickettraining.com>.
I keep wondering, too, what you are doing in the wizard that needs an
editing modal popup. Typically, wizards are used for multi-step forms. So
to me it's weird to have a wizard that isn't the form - but displays values
that you are then editing from a modal. Just curious....
--
Jeremy Thomerson
http://www.wickettraining.com
On Fri, Oct 9, 2009 at 11:35 AM, Jeremy Thomerson <jeremy@wickettraining.com
> wrote:
> Some very brief pseudo code. Let us know if you need more detail.
>
> public MyWizard(IModel<Foo> model) {
> setModel(new Model<Foo>(model.getObject());
> .... initialize wizard steps - passing them this.getModel() so they all use
> the same model ....
> }
>
> make sure to pass all of your wizard steps AND the form inside your modal
> the same model.
>
> Then, in your wizard step and form, use property models (or a compound
> property model):
>
> new MyStep(IModel<Foo> model) {
> setModel(model);
> add(new Label("firstName", new PropertyModel(model, "firstName"));
> .. or ..
> setModel(new CompoundPropertyModel(model));
> add(new Label("firstName");
> }
>
>
> new MyForm(IModel<Foo> model) {
> setModel(model);
> add(new TextField("firstName", new PropertyModel(model, "firstName"));
> .. or ..
> setModel(new CompoundPropertyModel(model));
> add(new TextField("firstName");
> }
>
> By doing this, your modal form will actually update the object that is also
> backing the wizard. Then, you should just be able to submit the form, close
> the modal, and add the wizard step components to the ajax request (so that
> they will be repainted). When they are repainted, they will pull the values
> from the model object, which was updated by your form.
>
> If you hit a wall with that, you *may* have to set the model on your wizard
> step to the model from your form. For instance:
>
> // in your ajax submit:
> MyStep.this.setModel(form.getModel())
> target.addComponent(MyStep.this.panelThatShowsYourStuff)
> // close modal
>
> --
> Jeremy Thomerson
> http://www.wickettraining.com
>
>
>
>
> On Fri, Oct 9, 2009 at 11:24 AM, Jeffrey Schneller <
> jeffrey.schneller@envisa.com> wrote:
>
>> I have a modal inside a wizard step. The modal is displaying and
>> showing data. The modal is using a panel and not a page. The panel for
>> the modal contains a form with text fields. The wizard step contains
>> labels.
>>
>>
>>
>> I want to have a save and a cancel button in the modal. The save should
>> take the values from the text fields and update the model in the wizard
>> step. The wizard step should now show the updated values in the label.
>>
>>
>>
>> I tried implementing an AjaxButton in the panel for the modal but it
>> never does anything.
>>
>>
>>
>> How would one do this? Example code, pseudo-code?
>>
>>
>>
>> Thanks.
>>
>>
>>
>>
>
Re: Modal inside a WizardStep
Posted by Jeremy Thomerson <je...@wickettraining.com>.
Some very brief pseudo code. Let us know if you need more detail.
public MyWizard(IModel<Foo> model) {
setModel(new Model<Foo>(model.getObject());
.... initialize wizard steps - passing them this.getModel() so they all use
the same model ....
}
make sure to pass all of your wizard steps AND the form inside your modal
the same model.
Then, in your wizard step and form, use property models (or a compound
property model):
new MyStep(IModel<Foo> model) {
setModel(model);
add(new Label("firstName", new PropertyModel(model, "firstName"));
.. or ..
setModel(new CompoundPropertyModel(model));
add(new Label("firstName");
}
new MyForm(IModel<Foo> model) {
setModel(model);
add(new TextField("firstName", new PropertyModel(model, "firstName"));
.. or ..
setModel(new CompoundPropertyModel(model));
add(new TextField("firstName");
}
By doing this, your modal form will actually update the object that is also
backing the wizard. Then, you should just be able to submit the form, close
the modal, and add the wizard step components to the ajax request (so that
they will be repainted). When they are repainted, they will pull the values
from the model object, which was updated by your form.
If you hit a wall with that, you *may* have to set the model on your wizard
step to the model from your form. For instance:
// in your ajax submit:
MyStep.this.setModel(form.getModel())
target.addComponent(MyStep.this.panelThatShowsYourStuff)
// close modal
--
Jeremy Thomerson
http://www.wickettraining.com
On Fri, Oct 9, 2009 at 11:24 AM, Jeffrey Schneller <
jeffrey.schneller@envisa.com> wrote:
> I have a modal inside a wizard step. The modal is displaying and
> showing data. The modal is using a panel and not a page. The panel for
> the modal contains a form with text fields. The wizard step contains
> labels.
>
>
>
> I want to have a save and a cancel button in the modal. The save should
> take the values from the text fields and update the model in the wizard
> step. The wizard step should now show the updated values in the label.
>
>
>
> I tried implementing an AjaxButton in the panel for the modal but it
> never does anything.
>
>
>
> How would one do this? Example code, pseudo-code?
>
>
>
> Thanks.
>
>
>
>