Axure中繼器實現(xiàn)簡易人員添加與刪除模塊
Axure RP作為一款強大的原型設(shè)計工具,其“中繼器”(Repeater)組件是實現(xiàn)動態(tài)數(shù)據(jù)展示和交互的核心功能之一。通過中繼器,我們可以模擬真實的數(shù)據(jù)增刪改查操作,而無需編寫代碼。本文將詳細介紹如何使用Axure中繼器創(chuàng)建一個簡易的人員添加與刪除模塊。
一、模塊功能概述
本模塊旨在模擬一個簡單的人員信息管理系統(tǒng),具備以下基本功能:
- 展示人員列表:顯示現(xiàn)有人員的姓名、年齡和職位。
- 添加新人員:通過表單輸入信息,將新人員添加到列表中。
- 刪除人員:點擊列表中每條記錄旁的刪除按鈕,可移除該人員。
二、準備工作與元件布局
- 創(chuàng)建中繼器:從Axure元件庫中拖入一個“中繼器”到畫布上。將其命名為“PersonRepeater”。
- 設(shè)計中繼器內(nèi)部項:雙擊中繼器進入編輯狀態(tài)。在內(nèi)部畫布上,放置用于顯示數(shù)據(jù)的元件,例如:
- 三個“矩形”或“文本標簽”,分別用于綁定顯示“姓名”、“年齡”、“職位”。建議將它們命名,如
NameLabel, AgeLabel, RoleLabel。
- 一個“按鈕”或“鏈接按鈕”,作為刪除按鈕,命名為
DeleteBtn。
- 將這些元件水平排列,形成一個列表項的行樣式。調(diào)整中繼器尺寸,使其能容納一行數(shù)據(jù)。
- 設(shè)計添加表單:在中繼器外部畫布上,放置輸入框和按鈕:
- 三個“單行文本框”,分別命名為
InputName, InputAge, InputRole。
- 一個“主要按鈕”,命名為
AddButton,文本為“添加”。
- 布局:將添加表單放置于畫布上方,中繼器放置于下方,形成一個清晰的上下結(jié)構(gòu)。
三、配置中繼器數(shù)據(jù)與交互
這是最關(guān)鍵的一步,將靜態(tài)元件與動態(tài)數(shù)據(jù)綁定。
- 設(shè)置中繼器數(shù)據(jù)集:
- 選中“PersonRepeater”中繼器,在右側(cè)“樣式”面板中找到“數(shù)據(jù)集”。
- 點擊“+”號添加三列,分別命名為
name, age, role。
- 在下方行中,可以預先添加幾行示例數(shù)據(jù),例如:
- 行1: name=“張三”, age=“28”, role=“設(shè)計師”
- 行2: name=“李四”, age=“32”, role=“工程師”
- 綁定數(shù)據(jù)到元件:
- 再次雙擊進入中繼器內(nèi)部項編輯狀態(tài)。
- 選中用于顯示姓名的元件(如
NameLabel),在右側(cè)“交互”面板的“文本”屬性下,點擊“更多事件”圖標(fx),選擇“值”。
- 在打開的編輯框中,點擊“插入變量或函數(shù)”,選擇“中繼器/數(shù)據(jù)集”下的
Item.name。這樣,該元件的文本就會動態(tài)綁定到數(shù)據(jù)集每一行的 name 列。
- 同理,將
AgeLabel 綁定到 Item.age,將 RoleLabel 綁定到 Item.role。
- 實現(xiàn)刪除交互:
- 在中繼器內(nèi)部項中,選中刪除按鈕(
DeleteBtn)。
- 在右側(cè)“交互”面板,點擊“新建交互”。選擇事件“單擊時”。
- 在目標中繼器下拉框中,選擇“PersonRepeater”。
- 在“行”的設(shè)置中,選擇“This”,表示刪除按鈕所在的當前行。
- 實現(xiàn)添加交互:
- 回到主畫布,選中“添加”按鈕(
AddButton)。
- 最關(guān)鍵的是配置“值”:點擊“自定義”,在彈出的對話框中,為每一列賦值:
- 對于
name 列,點擊“fx”,設(shè)置值為 [[LVAR1]],然后在下方“局部變量”中,新建變量LVAR1,設(shè)置為“元件文字”于元件 InputName。這表示獲取 InputName 輸入框中的文本。
- 同理,設(shè)置
age 列為 InputAge 的文本,role 列為 InputRole 的文本。
- (可選但推薦) 在添加動作后,可以再添加一個“設(shè)置文本”動作,將三個輸入框
InputName, InputAge, InputRole 的文本清空,以方便下一次輸入。
四、優(yōu)化與預覽
- 樣式美化:可以為中繼器內(nèi)部項、輸入框、按鈕等設(shè)置填充色、邊框、字體等樣式,使界面更美觀。
- 布局調(diào)整:確保中繼器設(shè)置為“垂直布局”,這樣新增的行會自動向下排列。可以在中繼器樣式中調(diào)整“間距”。
- 數(shù)據(jù)驗證(可選):可以通過添加“條件”交互,在點擊“添加”按鈕時檢查輸入框是否為空,并給出提示。
- 預覽:點擊Axure工具欄的“預覽”按鈕,或在瀏覽器中打開生成的HTML文件。現(xiàn)在,你可以測試功能了:在輸入框中填寫信息,點擊“添加”,新人員會出現(xiàn)在列表中;點擊任何一行旁邊的“刪除”按鈕,該行會被移除。
五、
通過上述步驟,我們利用Axure中繼器成功構(gòu)建了一個具備基礎(chǔ)CRUD(創(chuàng)建、讀取、刪除)功能的人員管理模塊原型。整個過程清晰地展示了中繼器數(shù)據(jù)集、數(shù)據(jù)綁定、以及通過交互動作操作數(shù)據(jù)集(添加行、刪除行)的核心邏輯。掌握這個基礎(chǔ)模塊后,你可以進一步擴展功能,例如添加編輯、搜索、篩選或分頁,從而創(chuàng)建出更加復雜和逼真的數(shù)據(jù)驅(qū)動型原型。