利用Axure中繼器實現簡單的商品新增、刪除

Axure中的中繼器是一個數據集，中繼器可以看作是一個姑且的數據庫，可以演示數據的存、讀、刪、改，用于設計高級交互。

本文介紹的是操縱Axure 8的中繼器這個元件，實現簡單的商品新增、刪除、全數刪除的功能。

東西/原料

電腦
Axure RP 8

方式/步調

1
打開Axure，建立一個新的rp文件，在左側東西欄根基元件中，找到“中繼器”；
將元件拖到index頁面中，并將該元件定名為“商品中繼器”。
2
雙擊中繼器，進入了中繼器的編纂頁面。
3
中繼器頁面中自帶的阿誰矩形元件可以刪失落，然后插手我們需要顯示的元件；
a、插手6個文本標簽元件，用于顯示商品的三個屬性：名稱、類型、數目
b、名稱后的文本標簽元件定名為“name”
c、類型后的文本標簽元件定名為“type”
d、數目后的文本標簽元件定名為“quantity”
4
在右側東西欄中繼器屬性中，設置中繼器的三個列題目為“name”、“type”、“quantity”，并在中繼器列表中，輸入幾條商品數據。
5
給中繼器添加用例（綁定命據集與元件）：
1、雙擊“每項加載時”，打開用例編纂頁；
2、在添加動作欄，勾選“元件”下的“設置文本”
3、在設置裝備擺設動作欄，勾選元件“name（矩形）”
4、點擊“fx”，打開編纂文本窗口，將“文本標簽”這幾個字刪失落
5、點擊“插入變量或函數”，選擇“中繼器/數據集”下的“Item.name”（與前面設置裝備擺設動作欄中的元件名對應），確定后完當作一個元件的數據集綁心猿意馬
6、反復以上步調，別離對“type（矩形）”、“quantity（矩形）”這兩個元件進行數據集綁心猿意馬
7、完當作用例設置后，點擊F5運行一下，查抄元件沒有和對應的數據集綁心猿意馬在一路
8、預覽可以看到，中繼器中預先輸入的3條商品數據都顯示出來了
6
為了頁面加倍都雅，我們給中繼器里的內容用矩形做一個布景，并將中繼器頁面里的內容放在右上角
7
切換頁面到“index”，可以看到中繼器中的內容可以在該頁面展示；
更改樣式：
1、選中中繼器元件，點擊右側功能欄中的“樣式”
2、設置結構為垂直或程度，勾選“收集排布”
3、設置每排項目數為5，行、列間距為10
此時中繼器中的內容塊將按5*5，間距為10的矩陣排布，如許設置后，使得中繼器中的內容分布更平均都雅。
8
在本家兒頁中，插手用于新增商品名稱、類型、數目的文本框：
1、名稱對應的文本框元件定名為“name”
2、類型對應的文本框元件定名為“type”
3、數目對應的文本框元件定名為“quantity”
9
實現新增商品功能：
1、用按鈕元件，做一個“新增”按鈕，元件定名為“add”
2、選中新增按鈕，右側功能欄雙擊“鼠標單擊時”，打開用例編纂頁
3、添加動作欄中，選擇中繼器下數據集中的“添加行”，設置裝備擺設動作欄中勾選我們建立的中繼器元件
4、點擊設置裝備擺設動作欄的“添加行”，打開添加行到中繼器編纂窗
5、點擊name列的“fx”，點擊“添加局部變量”，元件選擇“name（文本框）”
6、點擊“插入變量或函數”，選擇方才建立的局部變量“LVAR1”
7、確定后回到添加行到中繼器編纂窗
8、同樣的方式對type、quantity列進行操作，注重局部變量名不要反復
9、用例編纂好后，F5運行測試一下，此時已實現了新增功能
10
實現刪除商品功能：
1、雙擊中繼器，進去中繼器編纂頁
2、用按鈕元件，在中繼器頁面中做一個“刪除”按鈕，元件定名為“delete”
3、選中刪除按鈕，右側功能欄雙擊“鼠標單擊時”，打開用例編纂頁
4、添加動作欄中，選擇中繼器下數據集中的“刪除行”，設置裝備擺設動作欄中勾選我們建立的中繼器元件，單選“this”
5、確定完當作用例，F5運行測試一下，此時已實現了刪除功能
11
實現刪除全數商品功能：
1、切換頁面到“index”，用按鈕元件，做一個“全數刪除”按鈕，元件定名為“deleteall”
2、選中全數刪除按鈕，右側功能欄雙擊“鼠標單擊時”，打開用例編纂頁
3、添加動作欄中，選擇中繼器下數據集中的“刪除行”，設置裝備擺設動作欄中勾選我們建立的中繼器元件，前提填寫“true”，即中繼器中有值的都刪除
4、確定完當作用例，F5運行測試一下，此時已實現了全數刪除功能
12
操縱中繼器實現商品的新增、刪除、全數刪除功能，都完當作后，可以對頁面進行必然的美化，設計一下UI。
這里我做了一個簡單的UI，可以進去看一下功能跟結果：https://5d9ew4.axshare.com/#c=2
Axure源文件百度網盤地址：1VsatX88QG2GBfm2i-k9GoQ
暗碼：zy8g