You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Patrick Davids <pa...@nubologic.com> on 2014/02/07 15:04:10 UTC
Wicket Wizzard Question / Custom Overview Bars
Hi all,
did someone already noticed, a custom overriden overview-bar of wickets
wizzard is displayed in a <td> left of the Step contents ?
I thought it would be on the top...
Or did I misunderstood the meaning of the overview bar?
Is it meant as kind of menu?!
kind regards
Patrick
Re: Wicket Wizzard Question / Custom Overview Bars
Posted by Sven Meier <sv...@meiers.net>.
Hi Patrick,
usually a wizard has an overview on the left side:
http://en.wikipedia.org/wiki/Wizard_%28software%29
Regards
Sven
On 02/10/2014 10:04 AM, Patrick Davids wrote:
> Hi Paul,
> thanx a lot for your detailed answer. :-)
> Helped much, but my primary question was, why the overviewbar is on the
> left hand side, not on the top.
>
> Possibly the header is what I am looking for, showing the current step
> information(?).
>
> But then, I still do not know, what the overviewbar was originally meant
> for.
>
> Patrick :-)
>
> Am 08.02.2014 19:36, schrieb Paul Bors:
>> Find the panel you want to modify, say the WizardButtonBar and extend it:
>>
>> public class MyWizardButtonBar extends WizardButtonBar {
>> private static final long serialVersionUID = 1L;
>>
>> public MyWizardButtonBar(String id, Wizard wizard, final boolean
>> finishOnAnyStep) {
>> super(id, wizard);
>> addOrReplace(new MyFinishButton("finish", wizard) {
>> private static final long serialVersionUID = 1L;
>> @Override
>> public boolean isEnabled() {
>> return (super.isEnabled() || finishOnAnyStep);
>> }
>> });
>> }
>> }
>>
>> Then change its HTML to whatever you want, ie MyWizardButtonBar.html I have
>> as:
>> <html xmlns:wicket="http://wicket.apache.org">
>> <wicket:panel>
>> <div align="right">
>> <input wicket:id="previous" type="submit"
>> class="toolbox-form-submit" value="[Previous]" />
>> <input wicket:id="next" type="submit"
>> class="toolbox-form-submit" value="[Next]" />
>> <input wicket:id="last" type="submit"
>> class="toolbox-form-submit" value="[Last]" />
>> <input wicket:id="cancel" type="submit"
>> class="toolbox-form-submit" value="[Cancel]" />
>> <input wicket:id="finish" type="submit"
>> class="toolbox-form-submit" value="[Finish]" />
>> </div>
>> </wicket:panel>
>> </html>
>>
>> Finally, extend the Wizard itself and override the factory method you need
>> changed:
>>
>> public class MyWizard extends Wizard {
>> ...
>> @Override
>> protected Component newButtonBar(String id) {
>> return new MyWizardButtonBar(id, this, finishOnAnyStep());
>> }
>> ...
>> }
>>
>> Then change the Wizard's HTML as you please but preserve the Wicket
>> component tree hirarachy.
>> Something like this:
>>
>> <html xmlns:wicket="http://wicket.apache.org">
>> <wicket:panel>
>> <form wicket:id="form">
>> <table class="wicketExtensionsWizardOuterTable">
>> <tr>
>> <td valign="top">
>> <span wicket:id="overview">[[Overview]]</span>
>> </td>
>> <td valign="top">
>> <table class="wicketExtensionsWizardInnerTable">
>> <tr class="wicketExtensionsWizardHeaderRow">
>> <td valign="top"
>> class="wicketExtensionsWizardHeader"><span
>> wicket:id="header">[[Header]]</span></td>
>> </tr>
>> <tr class="wicketExtensionsWizardViewRow">
>> <td valign="top"
>> class="wicketExtensionsWizardView"><div wicket:id="view"
>> class="wicketExtensionsWizardViewInner">[[View]]</div></td>
>> </tr>
>> <tr class="wicketExtensionsWizardFeedbackRow">
>> <td valign="top"
>> class="wicketExtensionsWizardFeedback"><span
>> wicket:id="feedback">[[Feeback]]</span></td>
>> </tr>
>> <tr class="wicketExtensionsWizardButtonBarRow">
>> <td valign="top"
>> class="wicketExtensionsWizardButtonBar"><span
>> wicket:id="buttons">[[Buttons]]</span></td>
>> </tr>
>> </table>
>> </td>
>> </tr>
>> </table>
>> </form>
>> </wicket:panel>
>> </html>
>>
>> On a side note, I didn't like the default of the Finish button so I changed
>> that too:
>>
>> public class MyFinishButton extends WizardButton {
>> private static final long serialVersionUID = 1L;
>>
>> public MyFinishButton(String id, IWizard wizard) {
>> super(id, wizard, "org.apache.wicket.extensions.wizard.finish");
>> }
>>
>> /**
>> * @see org.apache.wicket.Component#isEnabled()
>> */
>> public boolean isEnabled() {
>> IWizardStep activeStep = getWizardModel().getActiveStep();
>> return (activeStep != null &&
>> getWizardModel().isLastStep(activeStep));
>> }
>>
>> /**
>> * @see org.apache.wicket.extensions.wizard.WizardButton#onClick()
>> */
>> public final void onClick() {
>> IWizardModel wizardModel = getWizardModel();
>> IWizardStep step = wizardModel.getActiveStep();
>>
>> // let the step apply any state
>> step.applyState();
>>
>> // if the step completed after applying the state, notify the wizard
>> if(step.isComplete()) {
>> getWizardModel().finish();
>> } else {
>> error(getLocalizer().getString(
>>
>> "org.apache.wicket.extensions.wizard.FinishButton.step.did.not.complete",
>> this)
>> );
>> }
>> }
>> }
>>
>>
>> On Fri, Feb 7, 2014 at 9:04 AM, Patrick Davids <patrick.davids@nubologic.com
>>> wrote:
>>> Hi all,
>>> did someone already noticed, a custom overriden overview-bar of wickets
>>> wizzard is displayed in a <td> left of the Step contents ?
>>>
>>> I thought it would be on the top...
>>>
>>> Or did I misunderstood the meaning of the overview bar?
>>> Is it meant as kind of menu?!
>>>
>>> kind regards
>>> Patrick
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: Wicket Wizzard Question / Custom Overview Bars
Posted by "Richter, Marvin" <Ma...@jestadigital.com>.
It's just a design decision ... the default design is that the steps are displayed on the left side (like in Jira's Wizard for example).
But like Paul described you are free to change this like it fits for you.
Best Regards,
Marvin Richter
-----Original Message-----
From: Patrick Davids [mailto:patrick.davids@nubologic.com]
Sent: Monday, February 10, 2014 10:06 AM
To: users@wicket.apache.org
Subject: Re: Wicket Wizzard Question / Custom Overview Bars
Hi Paul,
thanx a lot for your detailed answer. :-) Helped much, but my primary question was, why the overviewbar is on the left hand side, not on the top.
Possibly the header is what I am looking for, showing the current step information(?).
But then, I still do not know, what the overviewbar was originally meant for.
Patrick :-)
Am 08.02.2014 19:36, schrieb Paul Bors:
> Find the panel you want to modify, say the WizardButtonBar and extend it:
>
> public class MyWizardButtonBar extends WizardButtonBar {
> private static final long serialVersionUID = 1L;
>
> public MyWizardButtonBar(String id, Wizard wizard, final boolean
> finishOnAnyStep) {
> super(id, wizard);
> addOrReplace(new MyFinishButton("finish", wizard) {
> private static final long serialVersionUID = 1L;
> @Override
> public boolean isEnabled() {
> return (super.isEnabled() || finishOnAnyStep);
> }
> });
> }
> }
>
> Then change its HTML to whatever you want, ie MyWizardButtonBar.html I
> have
> as:
> <html xmlns:wicket="http://wicket.apache.org">
> <wicket:panel>
> <div align="right">
> <input wicket:id="previous" type="submit"
> class="toolbox-form-submit" value="[Previous]" />
> <input wicket:id="next" type="submit"
> class="toolbox-form-submit" value="[Next]" />
> <input wicket:id="last" type="submit"
> class="toolbox-form-submit" value="[Last]" />
> <input wicket:id="cancel" type="submit"
> class="toolbox-form-submit" value="[Cancel]" />
> <input wicket:id="finish" type="submit"
> class="toolbox-form-submit" value="[Finish]" />
> </div>
> </wicket:panel>
> </html>
>
> Finally, extend the Wizard itself and override the factory method you
> need
> changed:
>
> public class MyWizard extends Wizard { ...
> @Override
> protected Component newButtonBar(String id) {
> return new MyWizardButtonBar(id, this, finishOnAnyStep());
> }
> ...
> }
>
> Then change the Wizard's HTML as you please but preserve the Wicket
> component tree hirarachy.
> Something like this:
>
> <html xmlns:wicket="http://wicket.apache.org">
> <wicket:panel>
> <form wicket:id="form">
> <table class="wicketExtensionsWizardOuterTable">
> <tr>
> <td valign="top">
> <span wicket:id="overview">[[Overview]]</span>
> </td>
> <td valign="top">
> <table class="wicketExtensionsWizardInnerTable">
> <tr class="wicketExtensionsWizardHeaderRow">
> <td valign="top"
> class="wicketExtensionsWizardHeader"><span
> wicket:id="header">[[Header]]</span></td>
> </tr>
> <tr class="wicketExtensionsWizardViewRow">
> <td valign="top"
> class="wicketExtensionsWizardView"><div wicket:id="view"
> class="wicketExtensionsWizardViewInner">[[View]]</div></td>
> </tr>
> <tr class="wicketExtensionsWizardFeedbackRow">
> <td valign="top"
> class="wicketExtensionsWizardFeedback"><span
> wicket:id="feedback">[[Feeback]]</span></td>
> </tr>
> <tr class="wicketExtensionsWizardButtonBarRow">
> <td valign="top"
> class="wicketExtensionsWizardButtonBar"><span
> wicket:id="buttons">[[Buttons]]</span></td>
> </tr>
> </table>
> </td>
> </tr>
> </table>
> </form>
> </wicket:panel>
> </html>
>
> On a side note, I didn't like the default of the Finish button so I
> changed that too:
>
> public class MyFinishButton extends WizardButton {
> private static final long serialVersionUID = 1L;
>
> public MyFinishButton(String id, IWizard wizard) {
> super(id, wizard, "org.apache.wicket.extensions.wizard.finish");
> }
>
> /**
> * @see org.apache.wicket.Component#isEnabled()
> */
> public boolean isEnabled() {
> IWizardStep activeStep = getWizardModel().getActiveStep();
> return (activeStep != null &&
> getWizardModel().isLastStep(activeStep));
> }
>
> /**
> * @see org.apache.wicket.extensions.wizard.WizardButton#onClick()
> */
> public final void onClick() {
> IWizardModel wizardModel = getWizardModel();
> IWizardStep step = wizardModel.getActiveStep();
>
> // let the step apply any state
> step.applyState();
>
> // if the step completed after applying the state, notify the wizard
> if(step.isComplete()) {
> getWizardModel().finish();
> } else {
> error(getLocalizer().getString(
>
> "org.apache.wicket.extensions.wizard.FinishButton.step.did.not.complet
> e",
> this)
> );
> }
> }
> }
>
>
> On Fri, Feb 7, 2014 at 9:04 AM, Patrick Davids
> <patrick.davids@nubologic.com
>> wrote:
>
>> Hi all,
>> did someone already noticed, a custom overriden overview-bar of
>> wickets wizzard is displayed in a <td> left of the Step contents ?
>>
>> I thought it would be on the top...
>>
>> Or did I misunderstood the meaning of the overview bar?
>> Is it meant as kind of menu?!
>>
>> kind regards
>> Patrick
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket Wizzard Question / Custom Overview Bars
Posted by Patrick Davids <pa...@nubologic.com>.
Hi Paul,
thanx a lot for your detailed answer. :-)
Helped much, but my primary question was, why the overviewbar is on the
left hand side, not on the top.
Possibly the header is what I am looking for, showing the current step
information(?).
But then, I still do not know, what the overviewbar was originally meant
for.
Patrick :-)
Am 08.02.2014 19:36, schrieb Paul Bors:
> Find the panel you want to modify, say the WizardButtonBar and extend it:
>
> public class MyWizardButtonBar extends WizardButtonBar {
> private static final long serialVersionUID = 1L;
>
> public MyWizardButtonBar(String id, Wizard wizard, final boolean
> finishOnAnyStep) {
> super(id, wizard);
> addOrReplace(new MyFinishButton("finish", wizard) {
> private static final long serialVersionUID = 1L;
> @Override
> public boolean isEnabled() {
> return (super.isEnabled() || finishOnAnyStep);
> }
> });
> }
> }
>
> Then change its HTML to whatever you want, ie MyWizardButtonBar.html I have
> as:
> <html xmlns:wicket="http://wicket.apache.org">
> <wicket:panel>
> <div align="right">
> <input wicket:id="previous" type="submit"
> class="toolbox-form-submit" value="[Previous]" />
> <input wicket:id="next" type="submit"
> class="toolbox-form-submit" value="[Next]" />
> <input wicket:id="last" type="submit"
> class="toolbox-form-submit" value="[Last]" />
> <input wicket:id="cancel" type="submit"
> class="toolbox-form-submit" value="[Cancel]" />
> <input wicket:id="finish" type="submit"
> class="toolbox-form-submit" value="[Finish]" />
> </div>
> </wicket:panel>
> </html>
>
> Finally, extend the Wizard itself and override the factory method you need
> changed:
>
> public class MyWizard extends Wizard {
> ...
> @Override
> protected Component newButtonBar(String id) {
> return new MyWizardButtonBar(id, this, finishOnAnyStep());
> }
> ...
> }
>
> Then change the Wizard's HTML as you please but preserve the Wicket
> component tree hirarachy.
> Something like this:
>
> <html xmlns:wicket="http://wicket.apache.org">
> <wicket:panel>
> <form wicket:id="form">
> <table class="wicketExtensionsWizardOuterTable">
> <tr>
> <td valign="top">
> <span wicket:id="overview">[[Overview]]</span>
> </td>
> <td valign="top">
> <table class="wicketExtensionsWizardInnerTable">
> <tr class="wicketExtensionsWizardHeaderRow">
> <td valign="top"
> class="wicketExtensionsWizardHeader"><span
> wicket:id="header">[[Header]]</span></td>
> </tr>
> <tr class="wicketExtensionsWizardViewRow">
> <td valign="top"
> class="wicketExtensionsWizardView"><div wicket:id="view"
> class="wicketExtensionsWizardViewInner">[[View]]</div></td>
> </tr>
> <tr class="wicketExtensionsWizardFeedbackRow">
> <td valign="top"
> class="wicketExtensionsWizardFeedback"><span
> wicket:id="feedback">[[Feeback]]</span></td>
> </tr>
> <tr class="wicketExtensionsWizardButtonBarRow">
> <td valign="top"
> class="wicketExtensionsWizardButtonBar"><span
> wicket:id="buttons">[[Buttons]]</span></td>
> </tr>
> </table>
> </td>
> </tr>
> </table>
> </form>
> </wicket:panel>
> </html>
>
> On a side note, I didn't like the default of the Finish button so I changed
> that too:
>
> public class MyFinishButton extends WizardButton {
> private static final long serialVersionUID = 1L;
>
> public MyFinishButton(String id, IWizard wizard) {
> super(id, wizard, "org.apache.wicket.extensions.wizard.finish");
> }
>
> /**
> * @see org.apache.wicket.Component#isEnabled()
> */
> public boolean isEnabled() {
> IWizardStep activeStep = getWizardModel().getActiveStep();
> return (activeStep != null &&
> getWizardModel().isLastStep(activeStep));
> }
>
> /**
> * @see org.apache.wicket.extensions.wizard.WizardButton#onClick()
> */
> public final void onClick() {
> IWizardModel wizardModel = getWizardModel();
> IWizardStep step = wizardModel.getActiveStep();
>
> // let the step apply any state
> step.applyState();
>
> // if the step completed after applying the state, notify the wizard
> if(step.isComplete()) {
> getWizardModel().finish();
> } else {
> error(getLocalizer().getString(
>
> "org.apache.wicket.extensions.wizard.FinishButton.step.did.not.complete",
> this)
> );
> }
> }
> }
>
>
> On Fri, Feb 7, 2014 at 9:04 AM, Patrick Davids <patrick.davids@nubologic.com
>> wrote:
>
>> Hi all,
>> did someone already noticed, a custom overriden overview-bar of wickets
>> wizzard is displayed in a <td> left of the Step contents ?
>>
>> I thought it would be on the top...
>>
>> Or did I misunderstood the meaning of the overview bar?
>> Is it meant as kind of menu?!
>>
>> kind regards
>> Patrick
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket Wizzard Question / Custom Overview Bars
Posted by Paul Bors <pa...@bors.ws>.
Find the panel you want to modify, say the WizardButtonBar and extend it:
public class MyWizardButtonBar extends WizardButtonBar {
private static final long serialVersionUID = 1L;
public MyWizardButtonBar(String id, Wizard wizard, final boolean
finishOnAnyStep) {
super(id, wizard);
addOrReplace(new MyFinishButton("finish", wizard) {
private static final long serialVersionUID = 1L;
@Override
public boolean isEnabled() {
return (super.isEnabled() || finishOnAnyStep);
}
});
}
}
Then change its HTML to whatever you want, ie MyWizardButtonBar.html I have
as:
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
<div align="right">
<input wicket:id="previous" type="submit"
class="toolbox-form-submit" value="[Previous]" />
<input wicket:id="next" type="submit"
class="toolbox-form-submit" value="[Next]" />
<input wicket:id="last" type="submit"
class="toolbox-form-submit" value="[Last]" />
<input wicket:id="cancel" type="submit"
class="toolbox-form-submit" value="[Cancel]" />
<input wicket:id="finish" type="submit"
class="toolbox-form-submit" value="[Finish]" />
</div>
</wicket:panel>
</html>
Finally, extend the Wizard itself and override the factory method you need
changed:
public class MyWizard extends Wizard {
...
@Override
protected Component newButtonBar(String id) {
return new MyWizardButtonBar(id, this, finishOnAnyStep());
}
...
}
Then change the Wizard's HTML as you please but preserve the Wicket
component tree hirarachy.
Something like this:
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
<form wicket:id="form">
<table class="wicketExtensionsWizardOuterTable">
<tr>
<td valign="top">
<span wicket:id="overview">[[Overview]]</span>
</td>
<td valign="top">
<table class="wicketExtensionsWizardInnerTable">
<tr class="wicketExtensionsWizardHeaderRow">
<td valign="top"
class="wicketExtensionsWizardHeader"><span
wicket:id="header">[[Header]]</span></td>
</tr>
<tr class="wicketExtensionsWizardViewRow">
<td valign="top"
class="wicketExtensionsWizardView"><div wicket:id="view"
class="wicketExtensionsWizardViewInner">[[View]]</div></td>
</tr>
<tr class="wicketExtensionsWizardFeedbackRow">
<td valign="top"
class="wicketExtensionsWizardFeedback"><span
wicket:id="feedback">[[Feeback]]</span></td>
</tr>
<tr class="wicketExtensionsWizardButtonBarRow">
<td valign="top"
class="wicketExtensionsWizardButtonBar"><span
wicket:id="buttons">[[Buttons]]</span></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</wicket:panel>
</html>
On a side note, I didn't like the default of the Finish button so I changed
that too:
public class MyFinishButton extends WizardButton {
private static final long serialVersionUID = 1L;
public MyFinishButton(String id, IWizard wizard) {
super(id, wizard, "org.apache.wicket.extensions.wizard.finish");
}
/**
* @see org.apache.wicket.Component#isEnabled()
*/
public boolean isEnabled() {
IWizardStep activeStep = getWizardModel().getActiveStep();
return (activeStep != null &&
getWizardModel().isLastStep(activeStep));
}
/**
* @see org.apache.wicket.extensions.wizard.WizardButton#onClick()
*/
public final void onClick() {
IWizardModel wizardModel = getWizardModel();
IWizardStep step = wizardModel.getActiveStep();
// let the step apply any state
step.applyState();
// if the step completed after applying the state, notify the wizard
if(step.isComplete()) {
getWizardModel().finish();
} else {
error(getLocalizer().getString(
"org.apache.wicket.extensions.wizard.FinishButton.step.did.not.complete",
this)
);
}
}
}
On Fri, Feb 7, 2014 at 9:04 AM, Patrick Davids <patrick.davids@nubologic.com
> wrote:
> Hi all,
> did someone already noticed, a custom overriden overview-bar of wickets
> wizzard is displayed in a <td> left of the Step contents ?
>
> I thought it would be on the top...
>
> Or did I misunderstood the meaning of the overview bar?
> Is it meant as kind of menu?!
>
> kind regards
> Patrick