現在在公司里大多數時間使用的原型工具是墨客,真的是簡單易用,拖拽式的設計簡直是良心。但是也有不足的地方,個人對交互要求較高,這一點墨客,墨刀都不比不上老款原型工具Axure。

Axure7.0中帶出了中繼器這個概念。自從更新版本後用它做了個自己很滿意的原型后,簡直就是愛上了這個小模塊。淡水習慣了墨客、墨刀之類的超簡易原型工具后,可能中繼器的使用會變得比較困難。

這邊講一下中繼器的基礎應用。

中繼器個人理解是數據庫。

最基礎的,今天說的是中繼器運用的添加和刪除,感覺省掉了一大段的數據庫語句,超級舒爽;實現一個簡易的人員添加、刪除模塊。

新增的使用

Step 1:

在工作台里插入一个中繼器,Axure也是採用的拖拽式,很方便

雙擊綠色區域進入中繼器界面,中繼器是有自己的界面的

需要用到的原件在中繼器的界面里添加,最終效果會显示在index頁

Step 2:

拖入自己想要的控件,我這裏自己拖了幾個lable用作显示信息。

在數據集中添加第一條記錄,用作測試显示(列名定義的時候不要使用中文,不然有可能會出現亂碼!)

注意(這裏我沒有添加文本框和按鈕,中繼器這裏只做显示使用,其餘操作在index里進行)

Step 3:

添加加載事件,綁定數據集和控件(綁定數據集其實就是和數據庫中的表綁定差不多,但是真的簡單到飛起)。

注意(一定要設置加載事件,不然無法显示信息)

注意:要一個一個設置,這裏偷了個懶就沒再截圖(我自己去下的中文包,沒裝過的自己翻譯一下吧)

選擇相應的數據集項,注意自己定義的列名。

設置完成之後的界面

好了!現在可以測試運行一下,看看lable有沒有和對應的數據集綁定在一起

ok!可以使用!

現在显示的是數據集里的第一條信息

下面開始做新增記錄部分

Step 4:

注意!不是在中繼器的界面了,這是主界面index界面。主界面里加了幾個textbox和一個button,用作新加數據集記錄。如果不小心加錯了,在中繼器界面加了這些控件,沒關係,只要把它們複製過來就ok了。

注意:想要實現交互,就得給控件取一個形狀名稱。這其實和開發是一樣的,想要調用就得命名。

Step 5:

設置按鈕點擊事件,Axure7.0之後是叫做添加行,點擊右側添加行按鈕。

Step 6:

點擊fx按鈕

fx(函數)按鈕

找到你之前定義的名稱

1.設置局部變量,名稱可以自定,注意選擇右側的目標來源

2.選擇上面的插入變量和函數,選擇剛剛新建好的局部變量名稱

這是設置完成之後的界面

現在就可以試着運行一下了,看看添加是不是正常的

ok!可以正常使用(邊上的藍框是我後面自己加上去的)

這是Axure的中繼器的新增的使用

刪除的實現

補充一下刪除的實現,之前忘記加上去了

Step 1

在中繼器界面插入button並對他添加交互事件

Step 2

刪除行中只用選擇this,現在只是刪除單個

下面來看一下全部刪除

Step3

新加一個button ,注意這時候不是在中繼器界面,這是在index主界面

既然要全部刪除就得使用條件,這裏的刪除條件是true,大概的意思就是當數據集中的值不為空的時候

我是這麼理解的

 

本文由 @YuanYi 原創發佈於人人都是產品經理。未經許可,禁止轉載。