Wicket KT part 2
1 like1,342 views
The document discusses Wicket testing and models. It provides an overview of different types of Wicket test classes for components, pages, and forms. It also discusses different model types in Wicket like PropertyModel, LoadableDetachableModel, and how models allow for dynamic updates and serialization. The document then presents examples of using a UserLoadableDetachableModel and FormTester. It also discusses making components more abstract and removing assumptions when designing them. Finally, it introduces the concept of a "CSS component" for creating consistent UI elements through CSS alone.
Wicket KT part 2
- 1. Part 2 Daan van Etten November 12, 2010
- 3. Testing
- 4. Models
- 5. Break
- 6. Old to new
- 8. Cool stuff
- 10. Testing
- 11. 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!
- 12. Test your Panel / Page instantiation. (this checks if HTML / Java matches)
- 13. To be discussed: How much testing? or: when does a unit test become an integration test?
- 14. Tips Wicket tests are for unit testing, not for integration testing Keep your components small and simple, easy to unit test.
- 15. 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); } });
- 16. 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();
- 17. DEMO
- 18. page 322 “Testing your Wicket application”
- 19. Models
- 20. Wicket models allow components to retrieve and store data. Component Markup Model
- 21. 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)
- 22. Dynamic vs Static
- 23. Model + Simple - not dynamically updated (unless overridden)
- 24. IModel streetModel = Model.of( student.getAddress().getStreet() new Label(“street”, streetModel);
- 25. IModel streetModel = Model.of( student.getAddress().getStreet() new Label(“street”, streetModel); Problems
- 26. IModel streetModel = Model.of( student.getAddress().getStreet() new Label(“street”, streetModel); Problems Label is not notified of street / address / student changes
- 27. 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.
- 28. PropertyModel + null safe dynamically updated - not rename safe
- 29. Content of models are stored in the Session. Translated 1. Model objects need to be serializable 2. Huge objects are slow to (de)serialize
- 30. LoadableDetachable Only the unique identifier is in + the Session (small Session) - Every request the object is reloaded (can be slow)
- 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); }
- 33. 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.
- 34. 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, so serializing works.
- 35. 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(); } }
- 36. 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!
- 39. New! ‘CSS component’
- 40. 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));
- 41. 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));
- 42. 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));
- 43. 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));
- 44. 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));
- 45. 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));
- 46. More abstract look at Toolbar
- 47. More abstract look at Toolbar • Toolbar is a blue bar on top of the page, containing ToolbarItems.
- 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.
- 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.
- 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.
- 51. 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.
- 52. 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.
- 53. More abstract look at Toolbar Remove 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. More abstract look at Toolbar Remove 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. More abstract look at Toolbar Remove 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. More abstract look at Toolbar Remove 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. More abstract look at Toolbar Remove 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. More abstract look at Toolbar Remove 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.
- 59. More abstract look at Toolbar Remove 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. ------------------------------------------------
- 60. More abstract look at Toolbar Remove 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. ------------------------------------------------
- 61. More abstract look at Toolbar Remove 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
- 62. New! ‘CSS component’ Advantages + Easy to get a consistent UI + No API, so no limitations
- 63. 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> */
- 64. 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> */
- 65. 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> */