Axure中繼器的基本使用:實現(xiàn)一個簡易的人員添加、刪除模塊

17 評論 91115 瀏覽 178 收藏 8 分鐘

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

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

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

中繼器個人理解是數(shù)據(jù)庫。

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

新增的使用

Step 1:

1

在工作臺里插入一個中繼器,Axure也是采用的拖拽式,很方便

2

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

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

Step 2:

3

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

在數(shù)據(jù)集中添加第一條記錄,用作測試顯示(列名定義的時候不要使用中文,不然有可能會出現(xiàn)亂碼?。?/p>

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

Step 3:

4

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

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

5

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

6

選擇相應的數(shù)據(jù)集項,注意自己定義的列名。

7

設置完成之后的界面

好了!現(xiàn)在可以測試運行一下,看看lable有沒有和對應的數(shù)據(jù)集綁定在一起

8

ok!可以使用!

現(xiàn)在顯示的是數(shù)據(jù)集里的第一條信息

下面開始做新增記錄部分

Step 4:

9

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

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

Step 5:

10

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

Step 6:

11

點擊fx按鈕

fx(函數(shù))按鈕

12

找到你之前定義的名稱

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

13

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

14

這是設置完成之后的界面

現(xiàn)在就可以試著運行一下了,看看添加是不是正常的

15

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

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

刪除的實現(xiàn)

補充一下刪除的實現(xiàn),之前忘記加上去了

Step 1

1

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

Step 2

2

刪除行中只用選擇this,現(xiàn)在只是刪除單個

下面來看一下全部刪除

Step3

3

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

4

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

我是這么理解的

5

 

本文由 @YuanYi 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 特別感謝

    來自浙江 回復
  2. 小白基礎學會了中繼器 謝謝

    來自湖南 回復
  3. 還是要試試再看。

    來自江蘇 回復
  4. 在7.0版本中,設置單行刪除時沒有this選項,只有規(guī)則和已標記選項,這怎么怎么操作,跪求

    來自北京 回復
    1. ?? 我也是剛看完文章,然后跟著操作了一遍,現(xiàn)學現(xiàn)賣吧。要是錯了,也不要罵我哈?!緞h除】按鈕-添加用例-刪除行-勾選中繼器-規(guī)則-fx-【插入變量、屬性、函數(shù)】按鈕-isLast。這個是從最后一行刪除,可以按照自己的實際情況選擇,里面還有isFirst,從第一行開始刪。

      來自北京 回復
  5. 41598867@qq.com 感謝大神 ??

    來自廣東 回復
    1. 拿到原型了嘛?

      來自上海 回復
  6. 求原型 , ??

    來自廣東 回復
  7. 講的很好,可是為什么我做出來是向下增加的,而你是橫著增加的呢?做了兩遍,都是向下增加的 ??

    來自北京 回復
  8. 找了好多篇,只有這篇看懂了并且學會了,感謝!! ?? ??

    來自北京 回復
  9. get 謝謝

    來自浙江 回復
  10. 沒看見怎么刪除啊

    來自浙江 回復
    1. 有改過了

      來自福建 回復
  11. 太贊了, 講的非常好,比較適合像我這樣的產品新生

    來自江西 回復
    1. 謝謝

      來自福建 回復
    2. 為什么我是向下增加的,而你做的是橫著增加的呢?求解,謝謝

      來自北京 回復
    3. 調一下中繼器的樣式布局就OK了

      來自江蘇 回復