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

17 評(píng)論 91141 瀏覽 178 收藏 8 分鐘

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

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

這邊講一下中繼器的基礎(chǔ)應(yīng)用。

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

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

新增的使用

Step 1:

1

在工作臺(tái)里插入一個(gè)中繼器,Axure也是采用的拖拽式,很方便

2

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

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

Step 2:

3

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

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

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

Step 3:

4

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

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

5

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

6

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

7

設(shè)置完成之后的界面

好了!現(xiàn)在可以測(cè)試運(yùn)行一下,看看lable有沒(méi)有和對(duì)應(yīng)的數(shù)據(jù)集綁定在一起

8

ok!可以使用!

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

下面開(kāi)始做新增記錄部分

Step 4:

9

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

注意:想要實(shí)現(xiàn)交互,就得給控件取一個(gè)形狀名稱(chēng)。這其實(shí)和開(kāi)發(fā)是一樣的,想要調(diào)用就得命名。

Step 5:

10

設(shè)置按鈕點(diǎn)擊事件,Axure7.0之后是叫做添加行,點(diǎn)擊右側(cè)添加行按鈕。

Step 6:

11

點(diǎn)擊fx按鈕

fx(函數(shù))按鈕

12

找到你之前定義的名稱(chēng)

1.設(shè)置局部變量,名稱(chēng)可以自定,注意選擇右側(cè)的目標(biāo)來(lái)源

13

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

14

這是設(shè)置完成之后的界面

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

15

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

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

刪除的實(shí)現(xiàn)

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

Step 1

1

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

Step 2

2

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

下面來(lái)看一下全部刪除

Step3

3

新加一個(gè)button ,注意這時(shí)候不是在中繼器界面,這是在index主界面

4

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

我是這么理解的

5

 

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 特別感謝

    來(lái)自浙江 回復(fù)
  2. 小白基礎(chǔ)學(xué)會(huì)了中繼器 謝謝

    來(lái)自湖南 回復(fù)
  3. 還是要試試再看。

    來(lái)自江蘇 回復(fù)
  4. 在7.0版本中,設(shè)置單行刪除時(shí)沒(méi)有this選項(xiàng),只有規(guī)則和已標(biāo)記選項(xiàng),這怎么怎么操作,跪求

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

      來(lái)自北京 回復(fù)
  5. 41598867@qq.com 感謝大神 ??

    來(lái)自廣東 回復(fù)
    1. 拿到原型了嘛?

      來(lái)自上海 回復(fù)
  6. 求原型 , ??

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

    來(lái)自北京 回復(fù)
  8. 找了好多篇,只有這篇看懂了并且學(xué)會(huì)了,感謝!! ?? ??

    來(lái)自北京 回復(fù)
  9. get 謝謝

    來(lái)自浙江 回復(fù)
  10. 沒(méi)看見(jiàn)怎么刪除啊

    來(lái)自浙江 回復(fù)
    1. 有改過(guò)了

      來(lái)自福建 回復(fù)
  11. 太贊了, 講的非常好,比較適合像我這樣的產(chǎn)品新生

    來(lái)自江西 回復(fù)
    1. 謝謝

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

      來(lái)自北京 回復(fù)
    3. 調(diào)一下中繼器的樣式布局就OK了

      來(lái)自江蘇 回復(fù)