1. 創(chuàng)建組件
a. 在CRXDE Lite里，右鍵點(diǎn)擊相應(yīng)的組件文件夾如/apps/demoNoah/components，并且選擇“Create”—“Create component…”,在彈出的窗口中輸入相應(yīng)信息，如下圖：
b. 一路點(diǎn)擊“Next”直到“OK”。
2. 創(chuàng)建對(duì)話框
a. 右鍵點(diǎn)擊剛才建立的組件，選擇“Create”—“Create Dialog…”在彈出的窗口中輸入相應(yīng)信息，如下圖：
b. 點(diǎn)擊保存，此時(shí)目錄結(jié)構(gòu)如下：
c.
右鍵點(diǎn)擊dialog/items/items/tab1節(jié)點(diǎn)，選擇“Create”—“Create Node…”輸入如圖
d. 用同樣的方法在“items”下建立“title”節(jié)點(diǎn)，但此時(shí)Type選擇“cq:Widget”
e. 然后，添加如下屬性：
f. 然后，再在“title”下建立“fieldConfig”節(jié)點(diǎn)，屬性如下：
g. 用同樣方法建立“des”節(jié)點(diǎn)，注意目錄結(jié)構(gòu)，如圖
3. 獲取變量值
a. 打開“Buick_Tech_Info.jsp”,輸入如下內(nèi)容：
<%@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. 這里只主要說明的是怎么獲取用戶輸入的數(shù)據(jù)，具體想怎么顯示可自行實(shí)現(xiàn)，比如：
<%
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. 在頁(yè)面中添加上相應(yīng)的組件
a. 到頁(yè)面中找到這個(gè)組件，并拖一個(gè)到頁(yè)面中。
b. 在這個(gè)區(qū)域中點(diǎn)右鍵，選擇“Edit”。會(huì)出現(xiàn)類似如下界面
b. 填寫完成后，點(diǎn)“OK”，用戶所填寫的信息會(huì)顯示在頁(yè)面上。
5. 到此整個(gè)過程完成。
眼鏡蛇