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. Here we just demonstrate the rough structure of the zul and ignore the details.

<?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">
				<hbox align="center" hflex="1" >
					<textbox id="todoSubject" hflex="1" placeholder="What needs to be done?" />
					<button id="addTodo" image="/imgs/plus.png" width="36px"/>
				</hbox>		
				<listbox id="todoListbox" vflex="1">
				<!-- todo list -->
				</listbox>
			</vlayout>
		</center>
		<east id="selectedTodoBlock" visible="false" width="300px" border="none" collapsible="false" splittable="true" minsize="300" autoscroll="true">
			<vlayout >
				<hbox align="center"  hflex="1">
					<checkbox id="selectedTodoCheck"/> 
					<textbox id="selectedTodoSubject" hflex="1" />
				</hbox>		
				<grid hflex="1">
				<!-- detail editor -->
				</grid>
				<hlayout>
					<button id="updateSelectedTodo" label="Update"/>
					<button id="reloadSelectedTodo" label="Reload"/>
				</hlayout>
			</vlayout>
		</east>
	</borderlayout>
</window>

• Line 5,6:

,17, 8,12, 23