选择工程，右键->新建->Web模块

配置Web模块的基本信息，保持默认即可

图 2.1. 配置Web模块基本信息

配置OperaMasks支持及View类型，注意此处将IoVC默认命名空间设置为 com.demo.beans，其他保持默认

图 2.2. 配置Web应用细节

选中工程，右键->Apusic Tools->添加工程持久属性，弹出向导。

图 2.3. 打开添加Hibernate支持向导

持久单元类型选择“Hibernate”，如下

图 2.4. 添加Hibernate支持

选择Hibernate配置文件的指定方式和数据源。

图 2.5. 选择配位文件及指定数据源

选中工程，右键->Apusic Tools->添加Spring支持

图 2.6. 打开添加Spring支持向导

选择Spring版本及需要的库，保持默认即可。

图 2.7. 选择Spring版本及类库

指定Spring配置文件生成方式，并导入Hibernate配置文件，保持默认即可。

图 2.8. Spring配置文件生成方式

选中刚建立的包com.demo.entities，右键->Apusic Tools->打开模型视图。

图 2.10. 打开模型视图

在模型视图的编辑区空白处点击右键->增强功能->数据库至代码同步。

图 2.11. 数据库至代码同步

在弹出的对话框中选择FEE和FEE_DETAIL表，点击确定。

图 2.12. 数据库反向

可看到生成的实体类，如下

图 2.13. 生成的实体类

生成的Fee.java的代码如下

package com.demo.entities;

import java.util.Date;
import java.util.HashSet;
import java.util.Set;
import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.persistence.Table;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;

/**
 * Fee generated by Apusic Studio
 */
@Entity
@Table(name = "FEE", schema = "dbo", catalog = "CRUD")
public class Fee implements java.io.Serializable {
	private int id;

	private String topic;

	private String userName;

	private Date applyDate;

	private Set<FeeDetail> feeDetails = new HashSet<FeeDetail>(0);

	public Fee() {
	}

	public Fee(int id) {
		this.id = id;
	}

	public Fee(int id, String topic, String userName, Date applyDate,
			Set<FeeDetail> feeDetails) {
		this.id = id;
		this.topic = topic;
		this.userName = userName;
		this.applyDate = applyDate;
		this.feeDetails = feeDetails;
	}

	@Id
	@Column(name = "id", unique = true, nullable = false)
	public int getId() {
		return this.id;
	}

	public void setId(int id) {
		this.id = id;
	}

	@Column(name = "topic", length = 200)
	public String getTopic() {
		return this.topic;
	}

	public void setTopic(String topic) {
		this.topic = topic;
	}

	@Column(name = "userName", length = 100)
	public String getUserName() {
		return this.userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	@Temporal(TemporalType.TIMESTAMP)
	@Column(name = "applyDate", length = 23)
	public Date getApplyDate() {
		return this.applyDate;
	}

	public void setApplyDate(Date applyDate) {
		this.applyDate = applyDate;
	}

	@OneToMany(cascade = CascadeType.ALL, fetch = FetchType.EAGER, mappedBy = "fee")
	public Set<FeeDetail> getFeeDetails() {
		return this.feeDetails;
	}

	public void setFeeDetails(Set<FeeDetail> feeDetails) {
		this.feeDetails = feeDetails;
	}
}

生成的FeeDetail.java代码如下

package com.demo.entities;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.Table;

/**
 * FeeDetail generated by Apusic Studio
 */
@Entity
@Table(name = "FEE_DETAIL", schema = "dbo", catalog = "CRUD")
public class FeeDetail implements java.io.Serializable {
	private int id;

	private Fee fee;

	private String name;

	private Double amount;

	public FeeDetail() {
	}

	public FeeDetail(int id) {
		this.id = id;
	}

	public FeeDetail(int id, Fee fee, String name, Double amount) {
		this.id = id;
		this.fee = fee;
		this.name = name;
		this.amount = amount;
	}

	@Id
	@Column(name = "id", unique = true, nullable = false)
	public int getId() {
		return this.id;
	}

	public void setId(int id) {
		this.id = id;
	}

	@ManyToOne(fetch = FetchType.EAGER)
	@JoinColumn(name = "feeId")
	public Fee getFee() {
		return this.fee;
	}

	public void setFee(Fee fee) {
		this.fee = fee;
	}

	@Column(name = "name", length = 100)
	public String getName() {
		return this.name;
	}

	public void setName(String name) {
		this.name = name;
	}

	@Column(name = "amount", precision = 53, scale = 0)
	public Double getAmount() {
		return this.amount;
	}

	public void setAmount(Double amount) {
		this.amount = amount;
	}
}

双击打开Hibernate配置文件，并切换到“映射”标签页。

图 2.14. 打开Hibernate Cfg编辑器

选中Fee.java文件及FeeDetail.java文件，将其拖拽到编辑器配置映射区域，如下，

图 2.15. 添加映射

此处也可以点击“添加”按钮查找并添加映射文件。

点击Save按钮，或者Ctrl+s保存配置文件，并点击“同步”按钮进行同步。

图 2.16. Hibernate配置文件同步

打开模型视图，在编辑区空白处点击右键->增强功能->生成业务实现

图 2.17. 打开生成业务实现向导

或是选中包com.demo.entities，右键->Apusic Tools->生成业务实现

图 2.18. 打开生成业务实现向导

选择需要生成的业务实现的类型，此处选择Spring Service实现，依照默认即可，点击下一步

图 2.19. 选择生成Spring DAO实现

选择实体类及输出包，如下

图 2.20. 选择实体类及输出包

此处指定输出包为先前创建的 com.demo.services包，如下

图 2.21. 选择输出包

点击“完成”，生成业务实现接口与类，如下

图 2.22. 生成的业务实现接口与类

创建用于显示主界面的Faces页面，将其命名为fee.xhtml，步骤如下

类似上述操作，创建Faces页面，命名为feeEdit.xhtml，内容为

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "" "">
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
	renderKitId="AJAX">
	<w:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</w:head>
	<w:page title="Fee Edit">
		<w:form>
			<div align="center">
			<layout:panelGrid columns="2">
				<layout:cell colspan="1" rowspan="1">
					<h:outputLabel for="id"></h:outputLabel>
				</layout:cell>
				<layout:cell colspan="1" rowspan="1">
					<w:numberField id="id"></w:numberField> 
				</layout:cell>
				<layout:cell colspan="1" rowspan="1">
					<h:outputLabel for="topic" value="主题">
					</h:outputLabel>
				</layout:cell>
				<layout:cell colspan="1" rowspan="1">
					<w:textField id="topic"></w:textField> 
				</layout:cell>
				<layout:cell colspan="1" rowspan="1">
					<h:outputLabel for="userName" value="用户名">
					</h:outputLabel>
				</layout:cell>
				<layout:cell colspan="1" rowspan="1">
					<w:textField id="userName"></w:textField> 
				</layout:cell>
				<layout:cell colspan="1" rowspan="1">
					<h:outputLabel for="applyDate" value="申请日期">
					</h:outputLabel>
				</layout:cell>
				<layout:cell colspan="1" rowspan="1">
					<w:dateField id="applyDate"/> 
				</layout:cell>
			</layout:panelGrid>
			</div>
			<w:editDataGrid paged="true" rows="10"
			 id="detailGrid" height="200" toolBarPosition="both">
			    <w:outputColumn id="id">
					<w:numberField id="idEdit" allowBlank="true" />
				</w:outputColumn>
				<w:outputColumn id="name" header="名称">
					<w:textField id="nameEdit" allowBlank="true" />
				</w:outputColumn>
				<w:outputColumn id="amount" header="账目">
					<w:numberField id="amountEdit" allowBlank="true" />
				</w:outputColumn>
				<w:toolBar target="detailGrid">
					<w:button id="addDetail" value="添加明细"/>
					<w:button id="deleteDetail" value="删除明细"/>
				</w:toolBar>
				<w:pagingToolbar target="detailGrid" />
			</w:editDataGrid>
			<div style="position:absolute; bottom:0px;right:5px;z-index:0">
			<layout:panelGrid columns="2">
				<w:button id="save" value="保存"/>
				<w:button id="cancel" value="取消"/>
			</layout:panelGrid>
			</div>
		</w:form>
	</w:page>
</f:view>

将其托管Bean--FeeEditBean的内容设置为

package com.demo.beans;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.operamasks.faces.annotation.Action;
import org.operamasks.faces.annotation.Bind;
import org.operamasks.faces.annotation.DataModel;
import org.operamasks.faces.annotation.ManagedBean;
import org.operamasks.faces.annotation.ManagedBeanScope;
import org.operamasks.faces.annotation.ManagedProperty;
import org.operamasks.faces.component.grid.impl.UIEditDataGrid;

import com.demo.entities.Fee;
import com.demo.entities.FeeDetail;
import com.demo.services.IFeeDetailService;
import com.demo.services.IFeeService;


/**
 * This managed bean is generated automatically
 */
@ManagedBean(name = "feeEditBean", scope = ManagedBeanScope.SESSION)
public class FeeEditBean implements Serializable {

	/**
	 * Inject the 'HEADER' service
	 */
	@ManagedProperty("#{feeService}")
	private IFeeService service;
	
	/**
	 * Inject the 'DETAIL' service
	 */
	@ManagedProperty("#{feeDetailService}")
	private IFeeDetailService detailService;
	
	/**
	 * the updated object handler
	 */
	private Fee updatedInstance = null;

	/**
	 * the 'HEADER' ManagedBean
	 */
	private FeeBean instance;	
	
	/**
	 * the 'HEADER' property
	 */
	@Bind(id = "id", attribute = "value")
	private int id;
	/**
	 * the 'HEADER' property
	 */
	@Bind(id = "topic", attribute = "value")
	private String topic;
	/**
	 * the 'HEADER' property
	 */
	@Bind(id = "userName", attribute = "value")
	private String userName;
	/**
	 * the 'HEADER' property
	 */
	@Bind(id = "applyDate", attribute = "value")
	private Date applyDate;
	
	/**
	 * the handler of the detail datagrid
	 */
	@Bind(id = "detailGrid", attribute = "binding")
	private UIEditDataGrid detailGrid;

	/**
	 * the added data of detail datagrid
	 */
	@Bind(id = "detailGrid", attribute = "addedData")
	private FeeDetail[] addedData;

	/**
	 * the modified data of detail datagrid
	 */
	@Bind(id = "detailGrid", attribute = "modifiedData")
	private FeeDetail[] modifiedData;

	/**
	 * the removed data of detail datagrid
	 */
	@Bind(id = "detailGrid", attribute = "removedData")
	private FeeDetail[] removedData;

	/**
	 * the type of the detail datagrid
	 */
	@Bind(id = "detailGrid", attribute = "bindBean")
	private Class detailBindBean = FeeDetail.class;

	@Action(id = "save")
	public void save() {
		Fee obj = null;
		if (updatedInstance != null) {
			obj =  updatedInstance;			
		} else {
			obj = new Fee();			
		}
		obj.setId (id);
		obj.setTopic (topic);
		obj.setUserName (userName);
		obj.setApplyDate (applyDate);
		if(updatedInstance != null) {
			service.modify(obj);
		}
		else {
			service.create(obj);
		}
		if (addedData != null) {
			for (FeeDetail detail : addedData) {				
				detail.setFee(obj);
				detailService.create(detail);
			}
		}
		if (modifiedData != null) {
			for (FeeDetail detail : modifiedData) {
				detail.setFee(obj);
				detailService.modify(detail);
			}
		}
		if (removedData != null) {
			for (FeeDetail detail : removedData) {
				detail.setFee(obj);
				detailService.remove(detail);
			}
		}
		instance.getDialog().close();
		instance.getGrid().reload();		
	}

	@Action(id = "cancel")
	public void cancel() {
		instance.getDialog().close();
	}

	public void shouldCreate() {
		this.updatedInstance = null;
		this.id = 0;
		this.topic = null;
		this.userName = null;
		this.applyDate = null;
		this.detailGrid.reload();
	}

	public void shouldUpdate(Fee instance) {
		if (instance != null) {
			this.updatedInstance = instance;
			this.id = instance.getId();
			this.topic = instance.getTopic();
			this.userName = instance.getUserName();
			this.applyDate = instance.getApplyDate();
			this.detailGrid.reload();
		}
	}

	public FeeBean getFeeBean() {
		return instance;
	}

	public void setFeeBean(FeeBean instance) {
		this.instance = instance;
	}

	public UIEditDataGrid getDetailGrid() {
		return detailGrid;
	}

	public void setDetailGrid(UIEditDataGrid detailGrid) {
		this.detailGrid = detailGrid;
	}

	@DataModel(id = "detailGrid")
	private List<FeeDetail> getDetailGridValues() {		
		if (updatedInstance != null) {	
			return new ArrayList<FeeDetail>(updatedInstance.getFeeDetails());
		}
		return new ArrayList<FeeDetail>();
	}

	@Action(id = "addDetail")
	public void addDetail() {
		detailGrid.appendRow();
	}

	@Action(id = "deleteDetail")
	public void deleteDetail() {
		detailGrid.remove();
	}
}