Separating the domain and presentation logic, managing mutation, building a non-trivial layout.
Build a frame containing the following elements:
- Prefix, name & surname textfields with labels.
- List box.
- Create, update & delete buttons.
- The list box presents a view of the data in the database that consists of a list of names.
- At most one entry can be selected in the box at a time.
By entering a string into the prefix textfield, the user can filter the names whose surname start with the
entered prefix (this should happen immediately without having to submit the prefix with enter).
Clicking the create button will append the resulting name from concatenating the strings in the name & surname
textfields to the list box.
The update and delete buttons are enabled if an entry in the list box is selected. In contrast to the create
button, the update button will not append the resulting name but instead replace the selected entry with the
- The delete button will remove the selected entry.
The layout is to be done like suggested in the screenshot. In particular, the list box must occupy all the
CRUD (Create, Read, Update and Delete) represents a typical graphical business application. The primary
challenge is the separation of domain and presentation logic in the source code that is more or less forced on
the implementer due to the ability to filter the view by a prefix. Traditionally, some form of MVC pattern is
used to achieve the separation of domain and presentation logic. Also, the approach to managing the mutation of
the list of names is tested. A good solution will have a good separation between the domain and presentation
logic without much overhead (e.g. in the form of toolkit specific concepts or language/paradigm concepts), a
mutation management that is fast but not error-prone and a natural representation of the layout (layout builders
are allowed, of course, but would increase the overhead).
CRUD is directly inspired by the crud example in the blog post
FRP - Three principles for GUI elements with bidirectional data flow.
- Inputs & selected (if any) are cleared when a name is added, deleted or udpated.
- Names should be displayed with capital letters.
- There can't be 2 identical names.
- Names are displayed in alphabetical order.
- No default names or empty state message.
- Selected name (if any) is cleared on filter change.
After opening a code link below, hit the '.' key to open GitHub's browser editor for improved reading