Chapter 6: Implementing CRUD"
From Documentation
| Line 25: | Line 25: | ||
= MVC Approach = | = MVC Approach = | ||
| − | If you have read previous chapters, constructing user interface for the example application should not be a big problem. | + | 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. |
| − | <source lang='xml' high='5,6 | + | '''extracted from chapter6/todolist-mvc.zul''' |
| + | <source lang='xml' high='5,6,12'> | ||
<?link rel="stylesheet" type="text/css" href="/style.css"?> | <?link rel="stylesheet" type="text/css" href="/style.css"?> | ||
| Line 36: | Line 37: | ||
<center autoscroll="true" border="none"> | <center autoscroll="true" border="none"> | ||
<vlayout hflex="1" vflex="1"> | <vlayout hflex="1" vflex="1"> | ||
| − | < | + | <!-- todo creation function--> |
| − | |||
| − | |||
| − | |||
| − | |||
<!-- todo list --> | <!-- todo list --> | ||
| − | |||
</vlayout> | </vlayout> | ||
</center> | </center> | ||
<east id="selectedTodoBlock" visible="false" width="300px" border="none" collapsible="false" splittable="true" minsize="300" autoscroll="true"> | <east id="selectedTodoBlock" visible="false" width="300px" border="none" collapsible="false" splittable="true" minsize="300" autoscroll="true"> | ||
<vlayout > | <vlayout > | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<!-- detail editor --> | <!-- detail editor --> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</vlayout> | </vlayout> | ||
</east> | </east> | ||
| Line 64: | Line 50: | ||
</source> | </source> | ||
| − | * Line 5 | + | * 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. | ||
Revision as of 02:07, 23 January 2013
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:
- 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.
- 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.
- Modify a todo item.
- Click an existing item and the detail editor appears. Then you can edit the item's details.
- 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.