Part 1 overview and principles

Part 1

Daan van Etten
October 29, 2010

I think most programmers spend
the first 5 years of their career
mastering complexity, and the rest
of their lives learning simplicity.

— BUZZ ANDERSEN

Architecture Reusability and
overview maintainability

Layout / logic
Old to new
separation

BluePrint Resources

Do not use SpringBean in generic UI components.
(try a constructor argument instead)

Do not use SpringBean in generic UI components.
(try a constructor argument instead)

(If you do, the @SpringBean will be a hidden
dependency when you add a generic component)

Only use the ‘name’ argument when there
are multiple beans that implement the same
interface.

@SpringBean (name = “selector”)
private GenericService m_genericService;

public class SomePanel extends Panel {

@SpringBean
private UserService m_userService;

@SpringBean
private TranslationService m_translationService;

<wicket:extend>
<h1 class="title">Settings</h1>

<div class="span-12">
<div wicket:id="personaldetails"></div>
</div>

<div class="span-12 last">
<div wicket:id="emailnotification"></div>
</div>

<div class="span-12">
<div wicket:id="changePassword"></div>
</div>

<div class="span-12 last">
<div wicket:id="languagetimezone"></div>
</div>
</wicket:extend>

http://www.blueprintcss.org/tests/parts/grid.html

Do not assume too much...
For example: do not assume that your
panel is always used with 4 columns.

Principles of Object Oriented Design

Principles of Object Oriented Design

The first five principles are principles of class design:

SRP
The Single Responsibility Principle
A class should have one, and only one, reason to change.

OCP
The Open Closed Principle
You should be able to extend a classes behavior, without modifying it.

LSP
The Liskov Substitution Principle
Derived classes must be substitutable for their base classes.

DIP
The Dependency Inversion Principle
Depend on abstractions, not on concretions.

ISP
The Interface Segregation Principle
Make fine grained interfaces that are client specific.

Tools for clear responsibilities

Page
Panel
Form
Validator
Renderer
DataProvider
Behavior


Page Provides high level layout

only reusable by extending, so
do not implement reusable logic in Page!



Panel Implement logic of a clearly separated part of a page

Panel is very good for reuse!

Just make sure your interface is clear, and
your Panel does not contain too much
knowledge.




Panel is very good for reuse!

The interface of a Panel is the
combination of all the public and
protected methods.
Think about reuse!

Panel

“a class should do one thing”

Single Responsibility Principle
In the context of the Single Responsibility Principle,
responsibility is “a reason for change.” If you can think of
more than one motive for changing a class, then that class
has more than one responsibility. Another way to put it:
“a class should do one thing (and be good at it)”

https://wiki.cordys.com/display/edv/How+to+write+a+good+Wicket+component

public class ChangePasswordBlock extends HeaderLayoutBlockPanel {

public ChangePasswordBlock(String id) {
super(id, new ResourceModel(PreferencesUITranslations.CHANGE_PASSWORD));

FeedbackPanel feedbackPanel = new FeedbackPanel("feedbackPanel");
feedbackPanel.setOutputMarkupId(true);

Form<ChangePassword> passwordForm = createPasswordForm("passwordForm", feedbackPanel);
add(passwordForm);
passwordForm.add(feedbackPanel);
[..]
PasswordTextField confirmNewPassword = new PasswordTextField("confirmNewPassword");
confirmNewPassword.add(new RequiredValidator<String>());
passwordForm.add(confirmNewPassword);

passwordForm.add(new EqualPasswordInputValidator(newPassword, confirmNewPassword));
passwordForm.add(new DefaultAjaxFallbackButton("changePasswordButton", passwordForm));
}

private Form<ChangePassword> createPasswordForm(String id, final Component feedbackPanel) {
return new Form<ChangePassword>(id, new CompoundPropertyModel<ChangePassword>(new ChangePassword())) {
protected void onError() {
WicketUtil.refresh(AjaxRequestTarget.get(), feedbackPanel);
};

protected void onSubmit() {
changePassword(getModel(), this);
WicketUtil.refresh(AjaxRequestTarget.get(), feedbackPanel);
};
};
}

private void changePassword(IModel<ChangePassword> changedModel, Component feedbackComponent) {
ChangePassword changed = changedModel.getObject();
try {
m_userService.changePasswordForCurrentUser(changed.getCurrentPassword(),
changed.getNewPassword());
feedbackComponent.info(new ResourceModel
(PreferencesUITranslations.CHANGE_PASSWORD_SUCCESSFULL).getObject());
} catch (BadCredentialsException e) {
feedbackComponent.error(new ResourceModel(
PreferencesUITranslations.CURRENT_PASSWORD_INCORRECT).getObject());
}
}



Form, put your FeedbackPanel in here and handle
Form logic of submitting and refreshing FeedbackPanel.

Think: should your Form really
implement the Save of an object?



Form logic of submitting and refreshing FeedbackPanel.

Think: should your Form really
implement the Save of an object?

Is reuse possible if you want the same Form for:

creating new object / edit existing object?



Form logic of submitting and refreshing FeedbackPanel
Validator Handle validation of a FormComponent or a Form




Validations should only do Validation.




Validations should only do Validation.

Have a clear separation between
Validation and Behavior!




Renderer Render a given Object to a string representation





Renderer: do rendering only! No logic,
no ﬁltering, nothing. Just render.





DataProvider Provide the right data based on given input.






No rendering, no updating of
FeedbackPanels or Toolbar.






Behavior Behaviors are plugins for components. They can
provide custom markup, custom pieces of logic.
Think of them as decorators.

Tools for clear responsibilities: Behaviors

All Known Implementing Classes:
AbstractAjaxBehavior, AbstractAjaxTimerBehavior,
AbstractAutoCompleteBehavior, AbstractBehavior,
AbstractDefaultAjaxBehavior, AbstractHeaderContributor,
AbstractTransformerBehavior, AjaxEditableLabel.EditorAjaxBehavior,
AjaxEditableLabel.LabelAjaxBehavior, AjaxEventBehavior,
AjaxFormChoiceComponentUpdatingBehavior,
AjaxFormComponentUpdatingBehavior, AjaxFormSubmitBehavior,
AjaxFormValidatingBehavior, AjaxIndicatorAppender,
AjaxPagingNavigationBehavior, AjaxSelfUpdatingTimerBehavior,
AttributeAppender, AttributeModifier, AutoCompleteBehavior,
BodyTagAttributeModifier, ContainerWithAssociatedMarkupHelper,
ContextPathGenerator, DatePicker, HeaderContributor, OnChangeAjaxBehavior,
OrderByLink.CssModifier, SimpleAttributeModifier, StringHeaderContributor,
TextTemplateHeaderContributor, VelocityContributor,
VelocityHeaderContributor, VelocityJavascriptContributor,
WicketAjaxIndicatorAppender, WicketMessageTagHandler.AttributeLocalizer,
XsltTransformerBehavior


Learn to write your own in 4 steps!

1. Choose the most appropriate base class

All Known Implementing Classes:
AbstractAjaxBehavior, AbstractAjaxTimerBehavior, AbstractAutoCompleteBehavior, AbstractBehavior,
AbstractDefaultAjaxBehavior, AbstractHeaderContributor, AbstractTransformerBehavior,
AjaxEditableLabel.EditorAjaxBehavior, AjaxEditableLabel.LabelAjaxBehavior, AjaxEventBehavior,
AjaxFormChoiceComponentUpdatingBehavior, AjaxFormComponentUpdatingBehavior, AjaxFormSubmitBehavior,
AjaxFormValidatingBehavior, AjaxIndicatorAppender, AjaxPagingNavigationBehavior,
AjaxSelfUpdatingTimerBehavior, AttributeAppender, AttributeModifier, AutoCompleteBehavior,
BodyTagAttributeModifier, ContainerWithAssociatedMarkupHelper, ContextPathGenerator, DatePicker,
HeaderContributor, OnChangeAjaxBehavior, OrderByLink.CssModifier, SimpleAttributeModifier,
StringHeaderContributor, TextTemplateHeaderContributor, VelocityContributor, VelocityHeaderContributor,
VelocityJavascriptContributor, WicketAjaxIndicatorAppender, WicketMessageTagHandler.AttributeLocalizer,
XsltTransformerBehavior



2. Extend from your chosen base class

public class MyBehavior extends AbstractBehavior {
..
}



3. Decide which methods to implement



afterRender(Component component)
Called when a component that has this behavior
coupled was rendered.




bind(Component component)
Bind this handler to the given component.





beforeRender(Component component)
          Called when a component is about to render.






cleanup()
          This method is called either by onRendered
(Component) or onException(Component,
RuntimeException) AFTER they called their respective
template methods.



afterRender(Component component) onRendered(Component component)
          Called when a component that has this behavior           Called when a component that has this behavior
coupled was rendered. coupled was rendered.



cleanup()
template methods.




bind(Component component) isTemporary()
          Bind this handler to the given component.           Speciﬁes whether or not this behavior is temporary.


cleanup()
template methods.





onComponentTag(Component component,
beforeRender(Component component) ComponentTag tag)
          Called when a component is about to render.           Called any time a component that has this behavior
registered is rendering the component tag.

cleanup()
template methods.





onComponentTag(Component component,
beforeRender(Component component) ComponentTag tag)
          Called when a component is about to render.           Called any time a component that has this behavior
registered is rendering the component tag.

cleanup()
detach(Component component)
(Component) or onException(Component,           Allows the behavior to detach any state it has
RuntimeException) AFTER they called their respective attached during request processing.
template methods.



4. Implement your behavior!
public class AjaxFocusBehavior extends AbstractBehavior {
private Component m_component;

@Override
public void bind(Component component) {
this.m_component = component;
component.setOutputMarkupId(true);
}

@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
response.renderOnLoadJavascript("document.getElementById('" + m_component.getMarkupId() + "').focus()");
}

/**
* {@inheritDoc}
*/
@Override
public boolean isTemporary() {
return true;
}

Composing an AutoCompleteField

AutoCompleteField<Long, Pizza> autocomplete = new AutoCompleteField<Long, Pizza>(id, model, choicesProvider,
renderer, settings);


AutoCompleteChoicesProvider<Long, Pizza> choicesProvider = new PizzaAutoCompleteChoicesProvider
(m_pizzaService);



(m_pizzaService);
PizzaAutoSuggestRenderer renderer = new PizzaAutoSuggestRenderer();



(m_pizzaService);


renderer.setOnSelectJavascriptProvider(autocomplete);


(m_pizzaService);



autocomplete.add(new PlaceHolderTextBehavior(Model.of("Search for pizza...")));


(m_pizzaService);



autocomplete.add(new AjaxSelectTextOnClickBehavior());


(m_pizzaService);



autocomplete.add(new AjaxSelectTextOnClickBehavior());
autocomplete.add(new RequiredValidator<Pizza>());

Give your classes clear names.

If it’s a page, call it Page
(example: LoginPage instead of Login)

If it’s a panel, call it Panel
(example: LoginPanel instead of Login)

The same goes for Form,
Validator, Renderer, etcetera.

Use wicket:message instead of Label
(for simple translations)


<wicket:message key="SELECT_LANGUAGE_LABEL"/>


<wicket:message key="SELECT_LANGUAGE_LABEL"/>

Put this in your HTML and it will be replaced by
Wicket for the translation in your property ﬁle.


<input type="button" wicket:id="someid" wicket:message="value:CHANGE" />

Wicket will add a ‘value’ attribute and
set it to the localized value!

Smell 1

Class names containing:

*With*

*Without*

public class CheckBoxWithoutLabel extends CheckBox
public class CheckBox extends LabeledComponent<CheckBoxWithoutLabel>

Duplicated code hierarchies are ugly...

LabelWithLabel:

LabeledComponent<Label> lbl = new
LabeledComponent<Label>(property,
dopmd.getTranslationKey(), position, label);

(In DOMRComponentFactory...)

Yes, we also have something like a

LabelWithoutLabel:
position = LabelPosition.NONE;

LabeledComponent<Label> lbl = new
LabeledComponent<Label>(property,
dopmd.getTranslationKey(), position, label);

Smell 2

instanceof

@Override
public MarkupContainer setDefaultModel(IModel<?> model) {
IModel<String> model1 = new Model<String>();
if (model != null && !(model instanceof DOMRObjectModel)) {

Revision revision = (Revision) model.getObject();
if (revision != null) {
model1.setObject(revision.getId().toString());
}
return super.setDefaultModel(model1);
}
return super.setDefaultModel(model);
}

CatalogAutoSuggestField

Smell 3

many constructors

public class CheckBox extends LabeledComponent<CheckBoxWithoutLabel> {
private static final long serialVersionUID = -8246992163993958051L;

Smell 3

many constructors


public CheckBox(String translationKey, IModel<Boolean> model) {
this(null, translationKey, model);
}

Smell 3

many constructors


public CheckBox(String id, String translationKey, IModel<Boolean> model) {
this(id, translationKey, LabelPosition.RIGHT, model);
}

Smell 3

many constructors


public CheckBox(String translationKey, LabelPosition position, IModel<Boolean> model) {
this(null, translationKey, position, model);
}

Smell 3

many constructors


public CheckBox(String id, String translationKey, LabelPosition position, IModel<Boolean> model) {
super(id, translationKey, position, new CheckBoxWithoutLabel(id + "CheckBox", model));
getLabel().addCssClass("checkBoxWithLabel");
}

Smell 3

many constructors


public CheckBox(IModel<Boolean> model) {
this(null, model);
}

Smell 4

getPage() calls

Page page = (Page) event.getPage();
event.refreshComponents(m_grid, page.getFeedbackPanel());

Smell 5

FeedbackPanel not inside Form

Page page = (Page) event.getPage();
event.refreshComponents(m_grid, page.getFeedbackPanel());

Smell 5

Refreshing FeedbackPanel, Toolbar or
other classes from unexpected locations

// Refresh the toolbar
if (getPage() instanceof Page) {
ToolBar tb = (ToolBar) ((Page) getPage()).getComponent("toolbar");

if (tb != null) {
target.addComponent(tb);
}
}

Smell 6

Casting

// Refresh the toolbar
if (getPage() instanceof Page) {

if (tb != null) {
target.addComponent(tb);
}
}

Smell 7

Using getParent()

public void setButtonBar(ButtonBar buttonBar) {
if (!buttonBar.getId().equals(s_buttonPanel)) {
throw new WicketRuntimeException("Buttonbar id is wrong.");
}

if (m_buttonBarPanel.getParent() == null) {
if (m_form.get(s_buttonPanel) != null) {
m_form.get(s_buttonPanel)
.replaceWith(m_buttonBarPanel);
} else {
m_form.add(m_buttonBarPanel);
}
}

m_buttonBarPanel.replaceWith(buttonBar);
}

Smell 8

Getting components
from the Page


Smell 9

Doing layout and styling in Java

ColumnLayoutContainer pptfContainer = new ColumnLayoutContainer("proofPaidTuitionFeeContainer")
.addComponent(sourceLabel, Size.percent(30))
.addComponent(amountLabel, Size.percent(30))
.addComponent(factory.createDateTimeLabel("dateTime", m_dateTimeModel,
LabelPosition.TOP, m_controller.getTimeZoneCurrentUser()))
.newLine();

Smell 10

Using onBeforeRender() too often
protected void onBeforeRender() {
super.onBeforeRender();

if (isEnabled()) {
AjaxRequestTarget target = AjaxRequestTarget.get();
if (target != null) {
target.appendJavascript(TextTemplateHeaderContributor.forPlainJs(s_textTemplate,
getHeaderContributor(false)).toString());
} else {
add(TextTemplateHeaderContributor.forJavaScript(s_textTemplate,
getHeaderContributor(true)));
}
}
}

tip: check onConﬁgure()
(and in this case: check IHeaderContributor)

Smell 11

Calling ResourceModel.getObject()

feedback.info(new ResourceModel(XTranslation.PROPERTY).getObject());

Smell 11



feedback.info(getString(XTranslation.PROPERTY));

Smell 11




Call getString only outside constructor!
(check methods that are called by the constructor)

Smell 11




Call getString only outside constructor!
(check methods that are called by the constructor)

Tried to retrieve a localized string for a component that has not yet been added to the page. This can sometimes lead to an invalid or
no localized resource returned. Make sure you are not calling Component#getString() inside your Component's constructor. Offending
component: [MarkupContainer [Component id = panelmenu, page = <No Page>, path = panelmenu.PanelMenu]]

Smell 12

Hidden Javascript dependencies

AjaxRequestTarget target = AjaxRequestTarget.get();
if (target != null) {
target.appendJavascript("clickFeedbackRefreshLink();");
}

Smell 13

Transient ﬁelds

(expect Exceptions!)

Wicket
Mailing List
http://wicket.apache.org/help/email.html
Users list - Archives - Search - Subscribe - Unsubscribe - Help

Wicket
examples
Not always a good example of code quality, but get ideas from:
http://wicketstuff.org/wicket14/index.html

Wicket
Wiki
https://cwiki.apache.org/WICKET/

Reference
library
https://cwiki.apache.org/WICKET/reference-library.html

Part 1 overview and principles

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Part 1 overview and principles

Ähnlich wie Part 1 overview and principles (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Part 1 overview and principles