todo.styled

The first variant you should have a look on is the one in directory examples-firststeps/todo/styled. You can start the application by the following command:

java todo.styled.Todos

This variant demonstrates the maximum you can achieve without any UI programming.

The applications makes the following compromises upon the specified requirement details:

• The remove button is displayed for every todo, not regarding if the mouse is moved over a todo or not.
• Editing a todo is initiated by a single-click on a todo's title rather than a double-click. Editing is stopped only by pressing the Tab key (which causes the title field to loose the focus which in turn causes the content to be synchronized from the UI to the business object)
• The other controls of a todo are not hidden in edit mode
• The text style for a completed todo is not changed. The shaded color is achieved by disabling the text field, i.e. a completed todo's title can't be changed any more (except you temporarily change its completion state)
• The list filter is displayed in the form of radio buttons

Most of these compromises should be somewhat acceptable - probably with the exception of the disabled text instead of a striked-through font. Visual representation of completeness is a crucial aspect in something like a todo list, and moreover shading by disabling leads to a functional violation.

Beside the compromises above, some of the graphical gimmicks in this variant require advanced work in the JFormDesigner. Hiding UI components based on the displayed objects' states is only supported for method buttons in gengui (by so-called "hider methods", see chapter " Hiding fields and buttons" in the manual). Hiding the footer and the "Mark all as complete" check-box is achieved by beans binding declarations in the JFDs . Beans binding is also the key to the variable text of the button Clear completed. This may sound like a tricky feature but in fact it is not an invention of gengui or the JFormDesigner but goes back to a JSR. The advantage is, that once having bound visibility and labeling of UI components to properties of the underlaying domain object, even these graphical aspects can be tested on the domain layer by simple POJO unit tests.

Another complicated aspect in the JFD is the overall layout. Though not explicitly specified, the web solutions on http://todomvc.com/  extend the list area's height with every new item and keep the footer at the bottom. The user is supposed to use the browser's scroll bar when the list exceeds the browser window size. This is a questionable concept - e.g. try adding 15 items and then toggle the filter from "All" to "Completed" and back. Gengui by default produces layouts for stable mask size, so the layout must completely by re-arranged here. Section todo.naked demonstrates an alternative which is much less work and maybe even more useful.

But first we go on to the most advanced and uncompromising variant...

Created with the Personal Edition of HelpNDoc: Single source CHM, PDF, DOC and HTML Help creation