第一步：昆明網(wǎng)站建設(shè)小編認(rèn)為要準(zhǔn)備好案例所需的水果圖像，見圖30，在【部件】面板中拖放一個(gè)動(dòng)態(tài)面板部件到設(shè)計(jì)區(qū)域，雙擊動(dòng)態(tài)面板，在彈出的【動(dòng)態(tài)面板狀態(tài)管理】對(duì)話框中新增三個(gè)面板狀態(tài)，分別給這四個(gè)面板狀態(tài)命名為apple、banana、orange和grapes，給動(dòng)態(tài)面板命名為fruits，見圖31，然后將準(zhǔn)備好的4張水果圖像按照名稱分別導(dǎo)入4個(gè)對(duì)應(yīng)的面板狀態(tài)，見圖32。

（圖30）

第二步：回到index頁面，在【部件】面板中拖放一個(gè)下拉列表框部件到設(shè)計(jì)區(qū)域，給其命名為fruits_selecotor，見圖33。

（圖31）

（圖32）

（圖33）

第三步：雙擊fruits_selector部件，在彈出的【編輯列表項(xiàng)】對(duì)話框中單擊【添加多個(gè)】，見圖34-A，然后在彈出的【添加多個(gè)】對(duì)話框中輸入如圖34-B所示內(nèi)容。在此，昆明網(wǎng)站制作小編需要提醒注意，第一行只輸入一個(gè)空格即可，單擊兩次【確定】按鈕回到設(shè)計(jì)區(qū)域。

第四步：將 fruits動(dòng)態(tài)面板設(shè)置為隱藏。

第五步：選中fruits_selector部件，在部件【屬性】面板中雙擊【選項(xiàng)改變時(shí)】事件，在彈出的【用例編輯器】頂部單擊【添加條件】，在彈出的【條件編輯器】中創(chuàng)建條件表達(dá)式【被選項(xiàng)this（this就是指當(dāng)前所選部件）==空白選項(xiàng)】，見圖35，單擊【確定】按鈕關(guān)閉【條件編輯器】。

（圖34）

（圖35）

繼續(xù)，在【用例編輯器】中新增【隱藏】動(dòng)作，在右側(cè)【配置動(dòng)作】中勾選fruits動(dòng)態(tài)面板，見圖36，單擊【確定】按鈕關(guān)閉【用例編輯器】。

第六步：再次雙擊【選項(xiàng)改變時(shí)】事件，在彈出的【用例編輯器】頂部單擊【添加條件】，在彈出的【條件編輯器】中創(chuàng)建條件表達(dá)式【被選項(xiàng) this== 選項(xiàng)蘋果】，見圖37，單擊【確定】按鈕關(guān)閉【條件編輯器】。

（圖36）

（圖37）

繼續(xù)在【用例編輯器】中新增【設(shè)置面板狀態(tài)】動(dòng)作，在【配置動(dòng)作】中勾選fruits動(dòng)態(tài)面板，并設(shè)置其選擇狀態(tài)為apple，勾選【如果隱藏則顯示面板】，見圖38。

（圖38）

第七步：在部件【屬性】面板中選擇Case2用例，復(fù)制后粘貼三次，然后對(duì)這三個(gè)用例中的條件和動(dòng)作進(jìn)行適當(dāng)修改，修改后的用例見圖39。大多數(shù)情況下，我們都會(huì)復(fù)制重復(fù)度較高的用例，再進(jìn)行適當(dāng)修改，這樣可以節(jié)省大量工作時(shí)間。

（圖39）

第八步：在頂部的工具欄中單擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。