主要內(nèi)容
在QQ使用中我們可以選擇添加分組聯(lián)系人，批量添加，已添加過的聯(lián)系人不能重復(fù)添加，在搜索框輸入文字時切換到搜索聯(lián)系人列表，本課來學(xué)習(xí)如何實現(xiàn)這個交互。交互中會使用Axure里面的中繼器、變量、函數(shù)。
交互效果
1.點擊聯(lián)系人分組，批量添加分類下的所有聯(lián)系人，已添加過的聯(lián)系人不再重復(fù)添加。
2.檢索輸入框為文字輸入狀態(tài)時，切換到搜索聯(lián)系人列表。
一、原型制作
步驟1：
此原型在前面新建QQ討論組上面的基礎(chǔ)上制作，把聯(lián)系人和已選聯(lián)系人兩個動態(tài)面板分別命名為：聯(lián)系人、已選聯(lián)系人
步驟2：
在聯(lián)系人動態(tài)面板新增狀態(tài)2，在狀態(tài)2添加一個中繼器，命名“篩選”，刪除中繼器里面的行，新增加二列，每列分別命名：mig、name
1）添加一個矩形，調(diào)整位置與大小：x:22.y :0，w:158,h:18,命名：name，線條顏色設(shè)置為無
2）添加圖片部件，調(diào)整位置與大?。簒:0.y :5， w:18,h:18,命名：mig
3）添加單行文本框，調(diào)整位置與大小x:179.y :0，w:2,h:25，命名：關(guān)鍵字判斷，并設(shè)為隱藏
在數(shù)據(jù)集“name”列輸入聯(lián)系人的信息
在中繼器項目交互下，雙擊每項加載時，打開用例編輯器
動作1：設(shè)置文本，第四步選擇“name”將文本值設(shè)置為“Item.name”
動作2：設(shè)置圖像，第四步選擇“mig”默認(rèn)“圖像”導(dǎo)入QQ頭像
二、設(shè)置分組樹節(jié)點“鼠標(biāo)單擊時”事件
步驟3：
打開聯(lián)系人動態(tài)面板編輯區(qū)，選中聯(lián)系人“最近聯(lián)系人”，雙擊“鼠標(biāo)單擊時”打開用例編輯器
編輯條件：選擇“變量值”不包含·值·點擊后面的“fx”，在編輯值窗口，新增局部變量：LVAR1=部件·1.1
點擊插入變量...選擇部件下面確的“text”，再選中“This”，選擇“LVAR1”；（即設(shè)置條件“if 變量 OnLoadVariable 不包含 "[[LVAR1.text]]”）
動作1：選擇“設(shè)置變量值”
第四步：選擇“OnLoadVariable”，設(shè)置變量值為，點擊值后面的“fx”，在編輯值窗口，新增局部變量：LVAR1=部件·1.1
點擊插入變量...選擇字符串函數(shù)下面的的“concat(''string'')”，選中“LVAR”選擇“OnLoadVariable”，再選中“''string''，選擇部件下面的“text”，再選中“This”，選擇“LVAR1”（設(shè)置值為：[[OnLoadVariable.concat(LVAR1.text)]]）
動作2：選擇“新增行”
第四步：選擇“中繼器”，點擊新增行，點擊“name”下面的“fx”，在編輯值窗口，新增局部變量：LVAR1=部件·1.1，點擊插入變量...，選擇部件下面確的“text”，再選中“This”，選擇“LVAR1”（設(shè)置值為：[[LVAR1.text]]）
設(shè)置用例2、用例3（復(fù)制、粘貼用例1），修改局部變量中（LVAR1=部件·1.2）對應(yīng)的樹節(jié)點為1.2、1.3即可
選中用例2、用例3，右鍵選擇“切換IF/ELSE IF”
步驟4：
其它兩組聯(lián)系人：我的好友、Arduino同樣設(shè)置分組樹節(jié)點“鼠標(biāo)單擊時”事件，重復(fù)步驟3
復(fù)制、粘貼步驟3用例1，修改用例條件局部變量對應(yīng)后面的樹節(jié)點部件名稱即可，如2.1、2.1、3.1、3.2等
我的好友組中共有9名聯(lián)系人即設(shè)置9個用例，并修改對應(yīng)的樹節(jié)點名稱，Arduino組中有4個聯(lián)系人即設(shè)置4個用例，并修改對應(yīng)的樹節(jié)點名稱（該組聯(lián)系人有多少個即分別設(shè)置多少個用例
除用例1外其它用例同樣需要右鍵選擇“切換IF/ELSE IF”
三、設(shè)置搜索框“獲得焦點時”事件
步驟5：
選中搜索輸入框，雙擊“獲得焦點時”事件，打開用例編輯器
動作：選擇“設(shè)置面板狀態(tài)”，第四步選擇“聯(lián)系人”，選擇狀態(tài)到狀態(tài)2
