第一步：在【部件】面板中拖放一個中繼器部件到設計區域，雙擊該動態面板，在右側的【中繼器檢查器】面板下的【數據集】中填充數據，見圖129。

（圖129）

第二步：拖放兩個矩形部件到設計區域，分別給兩個矩形部件命名為水果名稱、水果價格，見圖130。

（圖130）

細心的讀者會注意到，在兩個矩形相交的地方，邊框看上去比較粗，因為默認情況下部件是以外邊界對齊的。單擊菜單欄中的【項目＞項目設置】，在彈出的【項目設置】對話框中選擇【按形狀邊框的內邊界對齊】，見圖131，點擊【確定】按鈕，問題解決。

（圖131）

第三步：在【中繼器檢查器】面板中單擊【交互】標簽，雙擊【每項加載時】事件下的【Case1】，在彈出的【用例編輯器】對話框中設置【水果名稱】的文本值為[[Item.name]] ；【水果價格】文本值為[[Item.price]]，見圖132。

（圖132）

點擊網站設計區域上方的【index】標簽，可以看到中繼器中已經顯示剛剛填充的數據，見圖133，接下來設置【交替背景色】。

（圖133）

第四步：再次雙擊中繼器，進入編輯狀態，或者通過單擊設計區域上方的【（中繼器）（index）】標簽回到編輯狀態，見圖134，在右側的【中繼器檢查器】面板中點擊【樣式】標簽，勾選【交替背景色】并設置背景顏色為#FF99FF，見圖135。

（圖134）

單擊設計區域上方的【index】標簽，回到首頁，我們發現中繼器中顯示的數據并沒有發生任何變化，這是因為【水果名稱】和【水果價格】這兩個矩形部件填充了白色背景和灰色邊框，只需將這兩個矩形的填充顏色設置為【透明】即可，見圖136。再次回到【index】首頁，此時大家就清楚交替背景色的作用了，見圖137，在我們制作原型的過程中，如果遇到使用中繼器填充大量數據時，可以考慮使用此功能來提高數據的可讀性，進而提升用戶體驗。

（圖135）

（圖136）（圖137）

8．文本輸入框

文本框類型：文本輸入框可以設置特殊的輸入格式，主要用來調用移動設備上不同的鍵盤輸入類型。

可選格式：text、密碼、Email、Number、Phonenumber、Url、查找、文件、日期、Month、Time。要設置文本輸入框類型，在部件【屬性】面板中進行設置，見圖138。雖然這些不同的文本框類型主要是用于移動設備原型制作，但在特定情況下，在桌面電腦上恰當使用也可以大大提升工作效率。如圖139，是在Chrome瀏覽器中的效果，當我們在原型設計中需要使用到模擬日歷時，使用【文本輸入框】部件，并將其類型設置為【日期】就可以實現真實的日歷選取功能，見圖140。但是該效果在Firefox、Safari瀏覽器中無效，見圖141。

（圖138）

（圖139）

（圖140）

（圖141）

提示文字：在部件【屬性】面板中還可以給文本輸入框添加提示文字，也就是文本占位符，見圖142，還可以編輯提示文字的樣式以及提示文字何時隱藏（【輸入內容時】或【鼠標單擊時】），見圖143。

（圖142）

（圖143）

禁用文本輸入框：要防止有文字輸入到文本輸入框，可以在部件【屬性】面板中勾選【禁用】。文本輸入框還可以在【用例編輯器】中使用禁用動作，將其設置為【禁用】。部件被設為禁用后就變成了灰色（不可輸入狀態），見圖144。

（圖144）

設置文本框為只讀：當文本輸入框設置為【只讀】后，我們無法通過鍵盤操作直接輸入和修改其中的內容，但可以通過事件操作修改文本輸入框中的值。要將文本輸入框設置為【只讀】，在部件【屬性】面板中勾選【只讀】即可。

隱藏邊框：可以通過切換顯示文本輸入框的邊框來創建自定義文本框樣式。要隱藏文本輸入框周圍的邊框，右鍵單擊該部件并勾選【隱藏邊框】，或者到部件屬性面板中勾選，還可以給文本輸入框設置填充顏色。