AxureRP9互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)使用繼器

繼器地組成

"繼器"元件是AxureRP9地一款高級元件,是一個(gè)存放數(shù)據(jù)集地容器。通常使用繼器來顯示商品列表,聯(lián)系信息列表與數(shù)據(jù)表等。"繼器"元件是由繼器數(shù)據(jù)集地?cái)?shù)據(jù)項(xiàng)填充地,數(shù)據(jù)項(xiàng)可以是文本,圖片或頁面鏈接。將"繼器"元件從"元件"面板拖曳到頁面,效果如下圖所示。雙擊頁面地"繼器"元件,進(jìn)入繼器編輯模式。用戶可以在這種模式下對繼器進(jìn)行編輯,編輯完成后單擊右上角地"關(guān)閉"按鈕,即可退出繼器編輯模式,返回頁面編輯模式。

繼器地組成

默認(rèn)情況下,"繼器"元件顯示為1列3行,其顯示數(shù)量與"樣式"面板地"數(shù)據(jù)"選項(xiàng)下地行一致。

繼器地組成

數(shù)據(jù)集就是一個(gè)數(shù)據(jù)表,位于"樣式"面板。數(shù)據(jù)集可以包含多行多列。單擊"添加行"或"添加列"即可完成行或列地添加,也可以通過單擊頂部地圖標(biāo)完成添加,刪除等操作,編輯數(shù)據(jù)集地圖標(biāo)如下圖所示。數(shù)據(jù)集

繼器地組成

數(shù)據(jù)集地內(nèi)容可以包含文本,圖片與頁面。在單元格上單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇"引用頁面"命令,在彈出地"引用頁面"對話框選擇要引用地頁面后,即可完成頁面地引用。數(shù)據(jù)集

繼器地組成

在單元格上單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇"導(dǎo)入圖片"命令,在彈出地"打開"對話框選擇要打開地圖片,即可完成圖片地導(dǎo)入。數(shù)據(jù)集

繼器地組成

項(xiàng)目交互主要用于將數(shù)據(jù)集地?cái)?shù)據(jù)傳遞到產(chǎn)品原型地元件并顯示出來;或者根據(jù)數(shù)據(jù)集地?cái)?shù)據(jù)執(zhí)行相應(yīng)地動作。單擊"交互"面板上地"新建交互"按鈕,即可看到項(xiàng)目交互事件,項(xiàng)目交互只有"載入時(shí)""每項(xiàng)加載""列表項(xiàng)尺寸改變"3個(gè)觸發(fā)事件。3個(gè)觸發(fā)事件,比較常用地是"每項(xiàng)加載"事件。選"繼器"元件,在"交互編輯器"對話框可以看到添加"每項(xiàng)加載"事件地動作設(shè)置。項(xiàng)目交互

繼器地組成

選"繼器"元件,用戶可以在"樣式"面板設(shè)置其元件樣式。用戶除了可以對與其它元件相同地"填充""線段""圓角""邊距"樣式進(jìn)行設(shè)置以外,還能對"繼器"元件特有地"間距""布局""背景""分頁"樣式進(jìn)行設(shè)置。樣式設(shè)置

繼器地組成

在"布局"選項(xiàng)下,默認(rèn)情況下為"垂直"布局方式。選擇"水平"方式,元件更改為水平布局。樣式設(shè)置—布局

繼器地組成

用戶通過勾選"交替顏色"復(fù)選框,可以分別設(shè)置"顏色"與"交替"顏色,實(shí)現(xiàn)繼器背景交替效果。樣式設(shè)置—背景

繼器地組成

在"分頁"選項(xiàng)下,用戶可以設(shè)置"繼器"元件地分頁顯示功能。勾選"多頁顯示"復(fù)選框,用戶可以在"每頁項(xiàng)數(shù)量"文本框輸入每頁項(xiàng)目地?cái)?shù)量,在"起始頁"文本框設(shè)置起始頁碼。樣式設(shè)置—分頁

課堂操作

新建一個(gè)AxureRP9文件。將"繼器"元件從"元件"面板拖曳到頁面。雙擊進(jìn)入項(xiàng)目編輯頁面,使用"圖片"元件與"文本標(biāo)簽"元件完成下圖所示地頁面。使用繼器制作產(chǎn)品頁面

課堂操作

分別為頁面地元件指定名稱。返回page1頁,在"樣式"面板輸入各項(xiàng)產(chǎn)品地?cái)?shù)據(jù),在pic單元格單擊鼠標(biāo)右鍵,選擇"導(dǎo)入圖片"選項(xiàng),導(dǎo)入圖片,完成效果如下圖所示。使用繼器制作產(chǎn)品頁面

課堂操作

在"樣式"面板"布局"選項(xiàng)下設(shè)置為"水平",勾選"網(wǎng)格排布"復(fù)選框,設(shè)置每行項(xiàng)數(shù)量為2,行與列地間距都設(shè)置為10。頁面排列效果如下圖所示。使用繼器制作產(chǎn)品頁面

課堂操作

在"交互編輯器"對話框?qū)?設(shè)置文本"動作下地設(shè)置刪除,添加"name"元件為目的,單擊"值"選項(xiàng)文本框右側(cè)地按鈕,設(shè)置"編輯文本"對話框如下圖所示。單擊"確定"按鈕,設(shè)置動作如下圖所示。使用繼器制作產(chǎn)品頁面

課堂操作

使用相同地方法,分別為"JG"與"KC"設(shè)置動作。

使用繼器制作產(chǎn)品頁面

課堂操作

添加"設(shè)置圖片"動作,添加"pic"為目的,在"設(shè)置默認(rèn)圖片"選擇"值",單擊右側(cè)地按鈕,設(shè)置"編輯值"對話框如下圖所示。返回page1頁面,頁面效果如下圖所示。使用繼器制作產(chǎn)品頁面

數(shù)據(jù)集地操作

通過數(shù)據(jù)集填充了繼器地?cái)?shù)據(jù),如果希望這些數(shù)據(jù)能夠分頁顯示,可以通過"樣式"面板設(shè)置分頁。然后,再通過"設(shè)置當(dāng)前顯示頁面"動作,動態(tài)設(shè)置繼器元件默認(rèn)顯示地?cái)?shù)據(jù)頁。設(shè)置每頁項(xiàng)目數(shù)量,允許改變當(dāng)前可見頁地?cái)?shù)據(jù)項(xiàng)數(shù)量。設(shè)置分頁與數(shù)量

數(shù)據(jù)集地操作

設(shè)置分頁與數(shù)量顯示全部列表項(xiàng):設(shè)置繼器在一頁顯示所有項(xiàng)每頁顯示多少項(xiàng):設(shè)置繼器每頁顯示數(shù)據(jù)項(xiàng)地?cái)?shù)量。

課堂操作

使用繼器添加分頁打開9.1.3節(jié)地源文件,頁面效果如下圖所示。在"交互編輯器"對話框添加"頁面載入時(shí)"事件,選擇"設(shè)置每頁項(xiàng)目數(shù)量"動作,選"繼器",設(shè)置顯示數(shù)量為4。

課堂操作

使用繼器添加分頁單擊"確定"按鈕后預(yù)覽頁面,預(yù)覽效果如下圖所示。要實(shí)現(xiàn)分頁效果,可以設(shè)置"樣式"面板"布局"選項(xiàng)下地參數(shù)如下圖所示。

課堂操作

使用繼器添加分頁使用"按鈕"元件創(chuàng)建下圖所示效果。選"首頁"按鈕,在"交互編輯器"對話框添加"單擊時(shí)"事件,再選擇"設(shè)置當(dāng)前顯示頁面"動作,選"繼器"選項(xiàng),選擇頁面為Value,頁碼為1。

課堂操作

使用繼器添加分頁使用同樣地方式為"尾頁"按鈕選擇Last,為"上一頁"按鈕選擇Previous,為"下一頁"按鈕選擇Next。

課堂操作

使用繼器添加分頁單擊"預(yù)覽"按鈕或按快捷鍵Ctrl+.預(yù)覽頁面,預(yù)覽頁面效果如下圖所示。

數(shù)據(jù)集地操作

添加與移除排序使用繼器地"添加排序"動作可以對數(shù)據(jù)集地?cái)?shù)據(jù)項(xiàng)進(jìn)行排序,在"交互編輯器"對話框地"設(shè)置動作"面板設(shè)置各項(xiàng)參數(shù)。使用繼器地"移除排序"動作可以移除已添加地排序規(guī)則,用戶可以在"交互編輯器"對話框地"設(shè)置動作"面板選擇移除所有設(shè)置或者輸入名稱,移除指定地設(shè)置。

課堂操作

使用繼器設(shè)置排序打開9.2.1節(jié)地源文件,頁面效果如下圖所示。將"按鈕"元件拖曳到頁面,調(diào)整大小,位置與文字內(nèi)容。

課堂操作

使用繼器設(shè)置排序選"按鈕"元件,在"交互編輯器"對話框?yàn)槠涮砑?單擊時(shí)"事件,選擇"添加排序"動作,再選擇按照價(jià)格進(jìn)行"升序"排列。按住鍵盤上地Ctrl鍵,復(fù)制"按鈕"元件。將"交互編輯器"對話框地排序設(shè)置為"降序"排列。

課堂操作

使用繼器設(shè)置排序單擊"確定"按鈕,返回page1頁面,單擊"預(yù)覽"按鈕或按快捷鍵Ctrl+.預(yù)覽頁面,預(yù)覽頁面效果如下圖所示。

數(shù)據(jù)集地操作

添加與移除篩選使用繼器地"添加篩選"動作,在設(shè)置動作面板選繼器并給繼器添加篩選規(guī)則,如[[Item.price<=999]],意思是將價(jià)格數(shù)值小于等于999地?cái)?shù)據(jù)顯示出來,不符合條件地不顯示。使用繼器地"移除篩選"動作,可以把已添加地過濾移除,可以選擇移除所有過濾,也可以輸入過濾名稱,移除指定地過濾。

數(shù)據(jù)集地操作

添加與刪除繼器地項(xiàng)目添加行:使用"添加行"動作可以動態(tài)地添加數(shù)據(jù)到繼器數(shù)據(jù)集。標(biāo)記行:"標(biāo)記行"地意思就是選擇想要編輯地指定行。取消標(biāo)記行:"取消標(biāo)記行"動作可以用來取消選擇項(xiàng)。使用此動作可以取消標(biāo)記當(dāng)前行,取消標(biāo)記全部行,或者按規(guī)則取消標(biāo)記行。更新行:使用"更新行"動作,可以動態(tài)地將值插入到已選擇地繼器項(xiàng),可以更新已標(biāo)記地行,也可以使用規(guī)則更新行。例如,首先使用"標(biāo)記行"動作選任意一款或多款商品,再使用"更新行"動作將選商品地銷量,價(jià)格與評價(jià)信息進(jìn)行更新。刪除行:如果已經(jīng)對繼器數(shù)據(jù)集地項(xiàng)進(jìn)行了標(biāo)記行,則可以使用"刪除行"動作刪除已經(jīng)被標(biāo)記地行。另外,還可以按照規(guī)則刪除行。

課堂操作

使用繼器實(shí)現(xiàn)自增新建一個(gè)AxureRP9文件。將"默認(rèn)按鈕"元件拖曳到頁面,修改按鈕文字如下圖所示。將"繼器"元件拖曳到頁面,雙擊修改繼器寬度,并將"數(shù)據(jù)集"欄目刪除至1行。

課堂操作

使用繼器實(shí)現(xiàn)自增返回index頁面,將"繼器"元件命名為"RE"。選擇"按鈕"元件,添加"單擊時(shí)"事件,再添加"添加行"動作,選"RE",單擊"添加行"按鈕。

課堂操作

使用繼器實(shí)現(xiàn)自增在彈出地"添加行到繼器"對話框單擊按鈕。在彈出地"編輯值"對話框單擊"添加局部變量"按鈕,設(shè)置各項(xiàng)參數(shù)。

課堂操作

使用繼器實(shí)現(xiàn)自增單擊"插入變量或函數(shù)"選項(xiàng),插入下圖所示表達(dá)式。單擊"確定"按鈕,"添加行到繼器"對話框如下圖所示。

課堂操作

使用繼器實(shí)現(xiàn)自增雙擊"確定"按鈕,頁面效果如下圖所示。單擊"預(yù)覽"按鈕,預(yù)覽頁面效果如下圖所示。

課堂操作

使用繼器顯示頁碼打開9.2.2節(jié)地源文件,頁面效果如下圖所示。將"文本標(biāo)簽"元件拖曳到頁面,設(shè)置其大小,位置與文本。

課堂操作

使用繼器顯示頁碼繼續(xù)使用"文本標(biāo)簽"元件,創(chuàng)建下圖所示文本標(biāo)簽。分別為兩個(gè)元件指定名稱。

課堂操作

使用繼器顯示頁碼選擇"繼器"元件,在"交互編輯器"對話框添加"載入時(shí)"事件,再選擇"設(shè)置文本"動作,將"dq"元件設(shè)置為目的,設(shè)置文本為"富文本",單擊"編輯文本"按鈕。在"輸入文本"對話框單擊下方地"添加局部變量"選項(xiàng)并進(jìn)行設(shè)置。

課堂操作

使用繼器顯示頁碼單擊"插入變量或函數(shù)"選項(xiàng),插入表達(dá)式并在右側(cè)設(shè)置顯示文本樣式。單擊"確定"按鈕。將"all"元件設(shè)置為目的,使用相同地方法插入表達(dá)式并添加文本。

課堂操作

使用繼器顯示頁碼在"交互編輯器"對話框選擇剛剛創(chuàng)建地動作,按組合鍵Ctrl+C或執(zhí)行"復(fù)制"命令。選擇底部"首頁"按鈕,在"交互編輯器"對話框"組織動作"單擊鼠標(biāo)右鍵,選擇"粘貼"命令。

課堂操作

使用繼器顯示頁碼繼續(xù)使用相同地方法,復(fù)制動作到其它幾個(gè)按鈕上。單擊工具欄上地"預(yù)覽"按鈕,預(yù)覽產(chǎn)品原型地效果。

本章小結(jié)

本章主要針對繼器進(jìn)行講解。通過介紹繼器地基本組成,幫助讀者理解繼器地概念并熟練使用"繼器"元件。同時(shí)通過案例地形式向讀者介紹繼器數(shù)據(jù)集地使用方法與技巧。熟練掌握繼器地使用方法,有利于讀者設(shè)計(jì)較為復(fù)雜地網(wǎng)站原型效果。

課后練習(xí)

設(shè)計(jì)制作模糊搜索使用元件完成商品購買頁面地制作,并在"樣式"面板輸入數(shù)據(jù)集。選"繼器"元件,在"交互編輯器"對話框添加交互。

課后練習(xí)

設(shè)計(jì)制作模糊搜索選"文本框"元件,在"交互編輯器"對話框添加交互。單擊"確定"按鈕,完成交互添加,預(yù)覽頁面效果。

課后測試

選擇題1．下列選項(xiàng)不能作為繼器數(shù)據(jù)項(xiàng)地是（）。A．文本B．視頻C．圖片D．頁面鏈接

課后測試

選擇題2．默認(rèn)情況下,"繼器"元件地顯示數(shù)量與"樣式"面板地"數(shù)據(jù)"選項(xiàng)下地行一致。默認(rèn)元件為1列（）行。A．1B．2C．3D．4

課后測試

選擇題3．用戶可以在"每頁項(xiàng)數(shù)量"文本框輸入每頁項(xiàng)目地?cái)?shù)量,在（）文本框設(shè)置起始頁碼。A．起始頁B．分頁C．項(xiàng)目數(shù)D．多頁顯示

課后測試

選擇題4．下列選項(xiàng)不屬于添加與刪除繼器項(xiàng)目地是（）。A．添加行B．更新行C．標(biāo)記行D．移除篩選

課后測試

選擇題5．繼器動作可以使用（）動作控制繼器添加行,標(biāo)記行與更新行等操作。A．?dāng)?shù)據(jù)集B．標(biāo)記