Axure教程：Axure中繼器元件詳細使用教程.doc

《Axure教程：Axure中繼器元件詳細使用教程.doc》由會員上傳分享，免費在線閱讀，更多相關內容在學術論文-天天文庫。

1、Axure教程：Axure中繼器元件詳細使用教程　　這是本人在“人人都是產品經理”發(fā)表的第一篇文章，主要目的是教會小白使用Axure7.0新增的組件——中繼器（Repeater）。才疏學淺，如有紕漏，還請指正。　　　　使用之前　　在使用之前，我們總得搞清楚我們將要使用的元件是什么東西。　　據Axure官網介紹，中繼器是一種用于展示模式重復的文本或圖標的元件。沒看懂？不急，我們先看一下效果演示，然后再一步步把這個效果做出來，就可以開始使用中繼器了~　　一、初識中繼器　　從元件庫中找到中繼器，按住并拖入中間的操作區(qū)，我們可以看到它已經有一列三行，分別寫著1、2、3?！　　　∧?/p>

2、么操作區(qū)中的1、2、3從哪里來的呢？聰明的同學已經看出來了，在右側的“檢視：中繼器——中繼器”欄有一個編輯區(qū)，里邊便有1、2、3。但是這還不夠，如果我們把“檢視：中繼器——交互——每項加載時”中的“case1”刪除，那么操作區(qū)中1、2、3便消失了。由此可見，還需要“case1”把操作區(qū)和編輯區(qū)聯(lián)系在一起?！　　　“础癈trl+Z”撤銷“刪除case1”操作，雙擊“case1”打開用例編輯，我們來看看“case1”究竟做了什么?！　　　≈灰娚厦鎸懼O置文字于（矩形）=“[[Item.Column0]]”。頓生疑惑：什么？矩形？什么矩形？Item又是什么？Column0又是什

3、么？Item.Column0又是什么？為什么要用“[[]]”包起來？　　關掉用例編輯，回到主界面，雙擊操作區(qū)的中繼器，打開中繼器模式編輯操作區(qū)?！　　　↑c擊中繼器模式編輯操作區(qū)中的矩形，可以看到右側“檢視：矩形”中名稱欄顯示“（矩形名稱）”，這就是上文中的“（矩形）”?！　　　↑c擊“檢視：矩形”中的名稱欄，我們給這個矩形取名為“動物”?！　　　∵x中中繼器模式編輯操作區(qū)中的矩形，按“Ctrl+C”和“Ctrl+V”復制粘貼出新的矩形，拖動矩形放置在原矩形的右側，并在右側“檢視：矩形”中名稱欄將矩形名稱改為“食物”。　　　　將操作區(qū)切換回index頁面，我們可以看到發(fā)生了一些

4、變化：中繼器變成了兩行三列，“case1”中的“矩形”也變成了“動物”。這是我們剛才在中繼器模式編輯操作區(qū)修改的結果?！　　　〗酉聛?，我們要做更多的操作。在右側“檢視：中繼器——中繼器”中，雙擊“Column0”，更名為“FirstColumn”，雙擊“添加列”，取名為“SecondColumn”。讓我們看看“case1”發(fā)生了什么變化。　　　　我們將“Column0”改名“FirstColumn”之后，“case1”中的“Column0”也變?yōu)椤癋irstColumn”，由此我們可以意會他們的關系?！　《⒚宽椉虞d時　　接下來，我們在“檢視：中繼器——中繼器”的編輯區(qū)中

5、填入一些動物和食物的對應關系，可以看到，操作區(qū)也發(fā)生了改變，但是只顯示了第一列，第二列卻沒有顯示?！　　　∵@是因為“case1”只同步了第一列卻沒有同步第二列。接下來我們試著同步第二列。雙擊“case1”打開用例編輯，可以看到，“case1”只將“動物（矩形）”和“FirstColumn”聯(lián)系起來?！　　　∮袠訉W樣，我們把“食物（矩形）”和“SecondColumn”也聯(lián)系起來。先勾選“食物（矩形）”，再將右下角的值由默認的“[[Item.FirstColumn]]”改為“[[Item.SecondColumn]]”。聰明的同學應該可以意識到，這個“[[Item.xxxx

6、xx]]”是一種默認格式，代表編輯區(qū)中xxxxxx列的值。很正確，Item就代表這個中繼器的編輯區(qū)，“[[]]”則代表取值，取中繼器編輯區(qū)xxxxxx列的值?！　　　↑c擊確定按鈕，關閉用例編輯，回到操作區(qū)，我們看到操作區(qū)中的中繼器的第二列成功地與編輯區(qū)中的第二列同步?！　　　】吹竭@里，你已經明白了很多。但是依然有疑惑：如果只是靜態(tài)地展示一個表格那么直接使用“表格”元件不久可以了？耍我呢？　　稍安勿躁，學習了以上知識，下面我們可以準備起飛了。　　三、動態(tài)添加　　首先，我們添加兩個文本框分別用于輸入“動物”和“食物”，再添加個用于提交數據的提交按鈕?！　∈裁?？提交數據？　　　

7、　將兩個文本框和提交按鈕分布在右側檢視的名稱欄改名為“輸入動物”、“輸入食物”和“提交按鈕”。　　　　點擊提交按鈕，在右側“檢視：提交按鈕——交互”中雙擊“鼠標單擊時”，打開用例編輯。在左側添加動作欄雙擊“中繼器——數據集”中的“添加行”。在右側配置動作欄勾選“（中繼器）”（因為我們還沒給我們的中繼器取名，所以顯示為“（中繼器）”，跟前面提到的“（矩形）”一個道理）。　　　　右側配置動作欄下面點擊添加行打開添加行到中繼器。　　點擊“FirstColumn”下方，“添加行”右側的“fx”，打開編輯值面板。點擊“局部變量”中的“添