Chapter 6: Implementing CRUD

Target Application

In this chapter, we are going to build an application with 4 basic operations, CRUD (Create, Read, Update, and Delete). The application's user interface looks like the images below:

Select an Item:

Select a Todo Item

It is a personal todo list management system and it has following features:

1. Create a todo item.

   Type item name in upper-left textbox and click File:Tutorial-chi6-plus.png or press "Enter" key to create a new todo item.

2. Finish a todo item.

   Click the checkbox in front of a todo item to mark it as finished and the item name will be decorated with line-through.

3. Modify a todo item.

   Click an existing item and the detail editor appears. Then you can edit the item's details.

4. Delete a todo item.

   Click File:Tutorial-chi6-cross.png to delete an existing todo item.

MVC Approach

If you have read previous chapters, constructing user interface for the example application should not be a big problem. Let's look at the layout first and ignore the details.

extracted from chapter6/todolist-mvc.zul

<?link rel="stylesheet" type="text/css" href="/style.css"?>
<window apply="org.zkoss.tutorial.chapter6.mvc.TodoListController" 
	border="normal" hflex="1" vflex="1" contentStyle="overflow:auto">
	<caption src="/imgs/todo.png" sclass="fn-caption" label="Todo List (MVC)"/>
	<borderlayout>
		<center autoscroll="true" border="none">
			<vlayout hflex="1" vflex="1">
				<!-- todo creation function-->	
				<!-- todo list -->
			</vlayout>
		</center>
		<east id="selectedTodoBlock" visible="false" width="300px" border="none" collapsible="false" splittable="true" minsize="300" autoscroll="true">
			<vlayout >
				<!-- detail editor -->
			</vlayout>
		</east>
	</borderlayout>
</window>

• Line 5: We construct the user interface with Border Layout to separate layout into 2 areas.
• Line 6: The center area displays a todo creation box and a todo list.
• Line 12: Te east area is a todo item editor which is invisible if no item selected.