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