中繼器這個翻譯是讓人費解的，如果直譯成“重復(fù)器”雖然不太專業(yè)但是更利于理解，或者干脆不編譯，用“Repeater”就行。用過Asp.Net的人，一定對里面的Repeater很熟悉，沒錯，Axure的Repeater與Asp.Net的原理基本上是一樣的。
先來說說Repeater解決什么問題。
請看以下圖片。上方是一個表單，有5個表單部件和一個“添加”按鈕，界面默認顯示下方4個圖文區(qū)域。點擊“添加”后出現(xiàn)第5個圖文區(qū)域。每點擊一次添加一個新的區(qū)域。沒有Repeater之前，要制作這樣的原型是非常困難的。
使用Repeater實現(xiàn)以上效果是比較方便的。
1、 在界面中拖入一個Repeater。中文名叫“中繼器”。
剛拖進來是這個樣子的。
2、 設(shè)置Repeater內(nèi)部部件
雙擊這個Repeater，進入Repeater內(nèi)部界面。默認它會有一個矩形部件，刪除它，按自己的需求拖入其他部件。如下，這個由一張圖片與“活動名稱”、“活動狀態(tài)”、“開始時間”、“結(jié)束時間”4個Label部件組成的區(qū)域就是要重復(fù)顯示的內(nèi)容。
注意，這時要給每個部件命名。從便在Repeater的動作中找到部件。方法如下：
3、 設(shè)置Repeater的數(shù)據(jù)集(Dataset)
在Repeater編輯界面下方可看到以下界面。Repeater Dataset是數(shù)據(jù)集，另外兩個一會再說。
在Dataset中設(shè)置要顯示的數(shù)據(jù)的結(jié)構(gòu)，同時可添加默認顯示的數(shù)據(jù)。也就是“Column”與“Row”。以下”Name”、”Status”、”Start”、”End”、”Image”為添加的Column，注意列名必須為英文。
4、 設(shè)置Repeater的動作(Item Interactions)
a) 設(shè)置文本部件值——“Set Text”
在OnItemLoad（注意不是OnLoad，中文版的同學(xué)請自行翻譯）中雙擊Case。
雙擊后出現(xiàn)以下界面。根據(jù)業(yè)務(wù)需要設(shè)置部件值。比如我是要設(shè)置一張圖片和四個Label，于是分別選擇了Set Text與Set Image。在最右側(cè)選擇Repeater內(nèi)部的部件（注意：必須在第2步時設(shè)置部件名稱，否則無法區(qū)分部件。）。以下為Set Text的界面。選擇部件后，在下方選擇Rich Text，再點擊Edit Text。
點擊Edit Text后出現(xiàn)以下界面。
點擊Insert Variable of Function。
在Repeater/Dataset中選擇列的值。如item.Name,item.Status,item.Start等。然后在左側(cè)文本框會出現(xiàn)帶[[]]的值。[[]]是Axure取值的語法。
b) 設(shè)置圖片——“Set Image”
以上說的是設(shè)置文本的方式，如果是圖片，可參見下圖？芍苯訌碾娔X里導(dǎo)入，也可設(shè)置成Dataset里的值，當然也可根據(jù)Axure的語法設(shè)置成其他值。
5、 設(shè)置Repeater的格式
下圖是設(shè)置Repeater格式的界面？梢栽O(shè)置Wrap（自動換行），并設(shè)置每幾個項目開始換行。背景什么的也可以設(shè)置。
運行一下就可以看到效果了。
6、 實現(xiàn)點擊“添加”的效果
回到主頁面，這時變成以下效果了。Repeater根據(jù)自動計算呈現(xiàn)出所見即所得的效果。接下來，我們添加幾個表單部件與一個“添加”按鈕，來實現(xiàn)“添加”功能。
為表單中的部件設(shè)置名稱，如圖。
為“添加”部件設(shè)置OnClick事件，如圖，雙擊”Case”：
在打開的Case Editor界面中選擇Repeaters-Dataset-Add Rows，勾選右側(cè)復(fù)選框，點擊右下方的Add Rows按鈕。其原理是當點擊“添加”按鈕時向Repeater的Dataset中添加一行。
彈出以下窗口，點擊Add Row，在新添的這一行中錄入表單部件值？梢酝ㄟ^點擊fx按鈕添加。
點擊fx后進入以下窗口。點擊Add Local Variable。在第一格錄入變量名稱，如LVAR_Name。如果要取文本框的值，第二格可以選text on widget。第三格選相應(yīng)的部件。
再點擊Insert Variable or Function，選擇剛設(shè)置的變量LVAR_Name。點擊OK。再將另幾個部件值也設(shè)置上即可。
這樣，就完成了點擊“添加”按鈕的效果了。
承擔因您的行為而導(dǎo)致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。