1. 创建组件
a. 在CRXDE Lite里，右键点击相应的组件文件夹如/apps/demoNoah/components，并且选择“Create”—“Create component…”,在弹出的窗口中输入相应信息，如下图：
b. 一路点击“Next”直到“OK”。
2. 创建对话框
a. 右键点击刚才建立的组件，选择“Create”—“Create Dialog…”在弹出的窗口中输入相应信息，如下图：
b. 点击保存，此时目录结构如下：
c.
右键点击dialog/items/items/tab1节点，选择“Create”—“Create Node…”输入如图
d. 用同样的方法在“items”下建立“title”节点，但此时Type选择“cq:Widget”
e. 然后，添加如下属性：
f. 然后，再在“title”下建立“fieldConfig”节点，属性如下：
g. 用同样方法建立“des”节点，注意目录结构，如图
3. 获取变量值
a. 打开“Buick_Tech_Info.jsp”,输入如下内容：
<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="java.util.Iterator,
com.day.cq.wcm.foundation.List,
com.day.cq.wcm.api.Page,
com.day.cq.wcm.api.PageFilter"%>
<cq:defineObjects />
<%
//List list = (List)request.getAttribute("titles");
String[] titles = (String[])properties.get("titles", String[].class);
String[] des = (String[])properties.get("description", String[].class);
b. 这里只主要说明的是怎么获取用户输入的数据，具体想怎么显示可自行实现，比如：
<%
if(titles != null)
{
for(int i=0; i<titles.length; i++){
%>
<a class="accordion_headings"><%=titles[i]%></a>
<div id="test-content">
<div class="accordion_child">
<%= (i<des.length?des[i]:"")%>
</div>
</div>
<%
}
}
%>
4. 在页面中添加上相应的组件
a. 到页面中找到这个组件，并拖一个到页面中。
b. 在这个区域中点右键，选择“Edit”。会出现类似如下界面
b. 填写完成后，点“OK”，用户所填写的信息会显示在页面上。
5. 到此整个过程完成。
眼镜蛇