Part 2Daan van Etten    November 12, 2010
Testing
Models
Break
Old to new
CSS (shiny stuff)
Cool stuff
Testing
Base test classes  WicketBaseTest         for components that do not use @SpringBean  WicketBeanTest         for component...
Test your Panel / Page instantiation.(this checks if HTML / Java matches)
To be discussed:How much testing?    or: when does a unit test   become an integration test?
Tips       Wicket tests are for unit testing,         not for integration testing        Keep your components small       ...
Use TestPanelSource on non standard constructors     Constructor: ChangePasswordBlock(String id) 	   	   m_wicketTester.st...
Use FormTester to test Forms	   	   FormTester tester = m_wicketTester.newFormTester("formid");	   	   tester.setValue("cu...
DEMO
page 322“Testing your   Wicket application”
Models
Wicket models allow components to     retrieve and store data.             Component        Markup           Model
Almost every component          accepts a model	   public   Panel(final String id, final IModel<?> model)	   public   Labe...
Dynamic   vs Static
Model+   Simple-   not dynamically updated    (unless overridden)
IModel streetModel = Model.of(            student.getAddress().getStreet()            new Label(“street”, streetModel);
IModel streetModel = Model.of(            student.getAddress().getStreet()            new Label(“street”, streetModel); Pr...
IModel streetModel = Model.of(            student.getAddress().getStreet()              new Label(“street”, streetModel); ...
IModel streetModel = Model.of(            student.getAddress().getStreet()              new Label(“street”, streetModel); ...
PropertyModel+   null safe    dynamically updated-   not rename safe
Content of models are        stored in the Session.Translated    1. Model objects need to be serializable    2. Huge objec...
LoadableDetachable    Only the unique identifier is in+   the Session (small Session)-   Every request the object is    rel...
Example:UserLoadableDetachableModel
Example:       UserLoadableDetachableModel	   private final UserService m_userService;	   /**	     * @param userService th...
Example:       UserLoadableDetachableModel	   private final UserService m_userService;	   /**	     * @param userService th...
Example:       UserLoadableDetachableModel	   private final UserService m_userService;	   /**	     * @param userService th...
Example:UserLoadableDetachableModel 	   @Override 	   protected User load() { 	   	   if (m_userId != null) { 	   	   	   ...
Almost every component          accepts a model	   public   Panel(final String id, final IModel<?> model)	   public   Labe...
https://cwiki.apache.org/WICKET/working-with-wicket-models.html
CSS (shiny stuff)
New!   ‘CSS component’
Example	   public Toolbar(String id, IModel itemsModel) {	   	 super(id);	   	 m_itemsModel = itemsModel;	   	 add(new Pro...
Problems?	   public Toolbar(String id, IModel itemsModel) {	   	 super(id);	   	 m_itemsModel = itemsModel;	   	 add(new P...
Problems?    What if:	   public Toolbar(String id, IModel itemsModel) {	   	 super(id);	   	 m_itemsModel = itemsModel;	  ...
Problems?    What if:       you want to add a Wicket AjaxButton?	   public Toolbar(String id, IModel itemsModel) {	   	 su...
Problems?    What if:       you want to add a Wicket AjaxButton?                   you have to override ToolbarItem (onCli...
Problems?    What if:       you want to add a Wicket AjaxButton?                   you have to override ToolbarItem (onCli...
More abstract look at Toolbar
More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.
More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of ...
More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of ...
More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of ...
More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of ...
More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of ...
More abstract look at ToolbarRemove assumptions • Toolbar is a blue bar on top of the page, containing ToolbarItems. • Too...
More abstract look at ToolbarRemove assumptions • Toolbar is a blue bar on top of the page, containing ToolbarItems.      ...
More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems.       ...
More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems.       ...
More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems.       ...
More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems.       ...
More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems.       ...
More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar -------------- containing ToolbarItems.            ...
More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar -------------- containing ToolbarItems.            ...
New!   ‘CSS component’Advantages + Easy to get a consistent UI + No API, so no limitations
educatorbase.css /** 	   Header component, a blue bar with dark blue text. 	   Used to create blocks of content on the pag...
educatorbase.css  /**    Block of content with a margin around it.    Used to create blocks of content on the page, for ex...
educatorbase.css  /**  	   Page title, large dark blue text.  	   Used above a page to show the title of the page.  	  	  ...
Wicket KT part 2
Wicket KT part 2
Upcoming SlideShare
Loading in...5
×

Wicket KT part 2

968

Published on

See http://stuq.nl/talks

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
968
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Wicket KT part 2

  1. 1. Part 2Daan van Etten November 12, 2010
  2. 2. Testing
  3. 3. Models
  4. 4. Break
  5. 5. Old to new
  6. 6. CSS (shiny stuff)
  7. 7. Cool stuff
  8. 8. Testing
  9. 9. Base test classes WicketBaseTest for components that do not use @SpringBean WicketBeanTest for components using @SpringBean registerBean(String beanName, Object bean) WicketBasePageTest only for pages extending from BasePage!
  10. 10. Test your Panel / Page instantiation.(this checks if HTML / Java matches)
  11. 11. To be discussed:How much testing? or: when does a unit test become an integration test?
  12. 12. Tips Wicket tests are for unit testing, not for integration testing Keep your components small and simple, easy to unit test.
  13. 13. Use TestPanelSource on non standard constructors Constructor: ChangePasswordBlock(String id) m_wicketTester.startPanel(ChangePasswordBlock.class); Constructor: ComplexPanel(String id, T param1, T param2) m_wicketTester.startPanel(new TestPanelSource() { private static final long serialVersionUID = -4222357976177912509L; @Override public Panel getTestPanel(String panelId) { return new ComplexPanel(panelId, parameter1, parameter2); } });
  14. 14. Use FormTester to test Forms FormTester tester = m_wicketTester.newFormTester("formid"); tester.setValue("currentPassword", "currentPassword"); tester.setValue("newPassword", "newPassword"); tester.setValue("confirmNewPassword", "newPassword"); tester.submit();
  15. 15. DEMO
  16. 16. page 322“Testing your Wicket application”
  17. 17. Models
  18. 18. Wicket models allow components to retrieve and store data. Component Markup Model
  19. 19. Almost every component accepts a model public Panel(final String id, final IModel<?> model) public Label(final String id, IModel<?> model) public TextField(final String id, final IModel<T> model) public Button(final String id, final IModel<String> model)
  20. 20. Dynamic vs Static
  21. 21. Model+ Simple- not dynamically updated (unless overridden)
  22. 22. IModel streetModel = Model.of( student.getAddress().getStreet() new Label(“street”, streetModel);
  23. 23. IModel streetModel = Model.of( student.getAddress().getStreet() new Label(“street”, streetModel); Problems
  24. 24. IModel streetModel = Model.of( student.getAddress().getStreet() new Label(“street”, streetModel); Problems Label is not notified of street / address / student changes
  25. 25. IModel streetModel = Model.of( student.getAddress().getStreet() new Label(“street”, streetModel); Problems Label is not notified of street / address / student changes NullPointerException: student or address could be null.
  26. 26. PropertyModel+ null safe dynamically updated- not rename safe
  27. 27. Content of models are stored in the Session.Translated 1. Model objects need to be serializable 2. Huge objects are slow to (de)serialize
  28. 28. LoadableDetachable Only the unique identifier is in+ the Session (small Session)- Every request the object is reloaded (can be slow)
  29. 29. Example:UserLoadableDetachableModel
  30. 30. Example: UserLoadableDetachableModel private final UserService m_userService; /** * @param userService the {@link UserService} to use for retrieving {@link User} objects. */ public UserLoadableDetachableModel(UserService userService) { this(userService, null); }
  31. 31. Example: UserLoadableDetachableModel private final UserService m_userService; /** * @param userService the {@link UserService} to use for retrieving {@link User} objects. */ public UserLoadableDetachableModel(UserService userService) { this(userService, null); }The Service is a constructor argument.
  32. 32. Example: UserLoadableDetachableModel private final UserService m_userService; /** * @param userService the {@link UserService} to use for retrieving {@link User} objects. */ public UserLoadableDetachableModel(UserService userService) { this(userService, null); }The Service is a constructor argument.Use a SpringBeaned service for that, soserializing works.
  33. 33. Example:UserLoadableDetachableModel @Override protected User load() { if (m_userId != null) { return m_userService.getObject(m_userId); } else { return null; } } @Override public void setObject(User user) { super.setObject(user); m_userId = null; if (user != null){ m_userId = user.getId(); } }
  34. 34. Almost every component accepts a model public Panel(final String id, final IModel<?> model) public Label(final String id, IModel<?> model) public TextField(final String id, final IModel<T> model) public Button(final String id, final IModel<String> model) models attached to Wicket components automatically get detached and reattached!
  35. 35. https://cwiki.apache.org/WICKET/working-with-wicket-models.html
  36. 36. CSS (shiny stuff)
  37. 37. New! ‘CSS component’
  38. 38. Example public Toolbar(String id, IModel itemsModel) { super(id); m_itemsModel = itemsModel; add(new PropertyListView("menuitemholder", itemsModel) { @Override protected void populateItem(ListItem listItem) { MenuItem menuItem = (MenuItem) listItem.getModelObject(); listItem.add(new ToolbarItem("menuitem", menuItem)); listItem.setRenderBodyOnly(true); } }.setOutputMarkupId(true));
  39. 39. Problems? public Toolbar(String id, IModel itemsModel) { super(id); m_itemsModel = itemsModel; add(new PropertyListView("menuitemholder", itemsModel) { @Override protected void populateItem(ListItem listItem) { MenuItem menuItem = (MenuItem) listItem.getModelObject(); listItem.add(new ToolbarItem("menuitem", menuItem)); listItem.setRenderBodyOnly(true); } }.setOutputMarkupId(true));
  40. 40. Problems? What if: public Toolbar(String id, IModel itemsModel) { super(id); m_itemsModel = itemsModel; add(new PropertyListView("menuitemholder", itemsModel) { @Override protected void populateItem(ListItem listItem) { MenuItem menuItem = (MenuItem) listItem.getModelObject(); listItem.add(new ToolbarItem("menuitem", menuItem)); listItem.setRenderBodyOnly(true); } }.setOutputMarkupId(true));
  41. 41. Problems? What if: you want to add a Wicket AjaxButton? public Toolbar(String id, IModel itemsModel) { super(id); m_itemsModel = itemsModel; add(new PropertyListView("menuitemholder", itemsModel) { @Override protected void populateItem(ListItem listItem) { MenuItem menuItem = (MenuItem) listItem.getModelObject(); listItem.add(new ToolbarItem("menuitem", menuItem)); listItem.setRenderBodyOnly(true); } }.setOutputMarkupId(true));
  42. 42. Problems? What if: you want to add a Wicket AjaxButton? you have to override ToolbarItem (onClick is there)? public Toolbar(String id, IModel itemsModel) { super(id); m_itemsModel = itemsModel; add(new PropertyListView("menuitemholder", itemsModel) { @Override protected void populateItem(ListItem listItem) { MenuItem menuItem = (MenuItem) listItem.getModelObject(); listItem.add(new ToolbarItem("menuitem", menuItem)); listItem.setRenderBodyOnly(true); } }.setOutputMarkupId(true));
  43. 43. Problems? What if: you want to add a Wicket AjaxButton? you have to override ToolbarItem (onClick is there)? you want to put in a different dropdown structure? public Toolbar(String id, IModel itemsModel) { super(id); m_itemsModel = itemsModel; add(new PropertyListView("menuitemholder", itemsModel) { @Override protected void populateItem(ListItem listItem) { MenuItem menuItem = (MenuItem) listItem.getModelObject(); listItem.add(new ToolbarItem("menuitem", menuItem)); listItem.setRenderBodyOnly(true); } }.setOutputMarkupId(true));
  44. 44. More abstract look at Toolbar
  45. 45. More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.
  46. 46. More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of MenuItem’s.
  47. 47. More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of MenuItem’s.• For every MenuItem, a ToolbarItem is created inside Toolbar.
  48. 48. More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of MenuItem’s.• For every MenuItem, a ToolbarItem is created inside Toolbar.• ToolbarItem is not really extendable.
  49. 49. More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of MenuItem’s.• For every MenuItem, a ToolbarItem is created inside Toolbar.• ToolbarItem is not really extendable.• ItemLink’s are created inside ToolbarItem.
  50. 50. More abstract look at Toolbar• Toolbar is a blue bar on top of the page, containing ToolbarItems.• Toolbar gets a list of MenuItem’s.• For every MenuItem, a ToolbarItem is created inside Toolbar.• ToolbarItem is not really extendable.• ItemLink’s are created inside ToolbarItem.• ItemLink is effectively not extendable.
  51. 51. More abstract look at ToolbarRemove assumptions • Toolbar is a blue bar on top of the page, containing ToolbarItems. • Toolbar gets a list of MenuItem’s. • For every MenuItem, a ToolbarItem is created inside Toolbar. • ToolbarItem is not really extendable. • ItemLink’s are created inside ToolbarItem. • ItemLink is effectively not extendable.
  52. 52. More abstract look at ToolbarRemove assumptions • Toolbar is a blue bar on top of the page, containing ToolbarItems. ------------ • Toolbar gets a list of MenuItem’s. • For every MenuItem, a ToolbarItem is created inside Toolbar. • ToolbarItem is not really extendable. • ItemLink’s are created inside ToolbarItem. • ItemLink is effectively not extendable.
  53. 53. More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems. ------------• Toolbar gets a list of MenuItem’s.------------------------------------------------• For every MenuItem, a ToolbarItem is created inside Toolbar.• ToolbarItem is not really extendable.• ItemLink’s are created inside ToolbarItem.• ItemLink is effectively not extendable.
  54. 54. More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems. ------------• Toolbar gets a list of MenuItem’s.------------------------------------------------• For every MenuItem, a ToolbarItem is created inside Toolbar.------------------------------------------------• ToolbarItem is not really extendable.• ItemLink’s are created inside ToolbarItem.• ItemLink is effectively not extendable.
  55. 55. More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems. ------------• Toolbar gets a list of MenuItem’s.------------------------------------------------• For every MenuItem, a ToolbarItem is created inside Toolbar.------------------------------------------------• ToolbarItem is not really extendable.------------------------------------------------• ItemLink’s are created inside ToolbarItem.• ItemLink is effectively not extendable.
  56. 56. More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems. ------------• Toolbar gets a list of MenuItem’s.------------------------------------------------• For every MenuItem, a ToolbarItem is created inside Toolbar.------------------------------------------------• ToolbarItem is not really extendable.------------------------------------------------• ItemLink’s are created inside ToolbarItem.------------------------------------------------• ItemLink is effectively not extendable.
  57. 57. More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar on top of the page, containing ToolbarItems. ------------• Toolbar gets a list of MenuItem’s.------------------------------------------------• For every MenuItem, a ToolbarItem is created inside Toolbar.------------------------------------------------• ToolbarItem is not really extendable.------------------------------------------------• ItemLink’s are created inside ToolbarItem.------------------------------------------------• ItemLink is effectively not extendable.------------------------------------------------
  58. 58. More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar -------------- containing ToolbarItems. on top of the page, ------------• Toolbar gets a list of MenuItem’s.------------------------------------------------• For every MenuItem, a ToolbarItem is created inside Toolbar.------------------------------------------------• ToolbarItem is not really extendable.------------------------------------------------• ItemLink’s are created inside ToolbarItem.------------------------------------------------• ItemLink is effectively not extendable.------------------------------------------------
  59. 59. More abstract look at ToolbarRemove assumptions• Toolbar is a blue bar -------------- containing ToolbarItems. on top of the page, ------------• Toolbar gets a list of MenuItem’s.------------------------------------------------• For every MenuItem, a ToolbarItem is created inside Toolbar.------------------------------------------------• ToolbarItem is not really extendable.------------------------------------------------• ItemLink’s are created inside ToolbarItem.------------------------------------------------• ItemLink is effectively not extendable.------------------------------------------------ > Toolbar is a blue bar, containing something
  60. 60. New! ‘CSS component’Advantages + Easy to get a consistent UI + No API, so no limitations
  61. 61. educatorbase.css /** Header component, a blue bar with dark blue text. Used to create blocks of content on the page. Use BluePrint to set the width of the div around it, by default a div is 100% wide. HTML example: <div class="blockheader">HEADER CONTENT</div> */
  62. 62. educatorbase.css /** Block of content with a margin around it. Used to create blocks of content on the page, for example under a div header. Use BluePrint to set the width of the div around it, by default a div is 100% wide. HTML example: <div class="header">HEADER CONTENT</div> <div class="block"> BLOCK CONTENT </div> */
  63. 63. educatorbase.css /** Page title, large dark blue text. Used above a page to show the title of the page. Important: do not use anywhere else, only at the beginning of a page. HTML example: <h1>PAGE TITLE</h1> */

×