Axure 8 - 中繼器實戰篇

引言:

    本文將介紹Axure中,中繼器的基本用法以及通過中繼器實現「增、刪、改、查」四大基本功能

(由於Axure9筆者還在適應中,所以暫時以Axure8爲例)


正文:

1、中繼器介紹 

           中繼器是在Axure7.0中被提出的全新概念,可以將它抽象的理解爲一個數據集,裏面可以導入數據和圖像,以及進行增、刪改、查、排序等高級交互動作。

           本文會以中繼器的基本用法及實現「增、刪、改、查」,來讓大家對其有初步的理解,掌握基本內容後,可以根基自身的需求,逐步探索更多拓展內容

2、中繼器基本使用方法            

           1)認識中繼器

               

 

               如上圖,當我們從元件庫將中繼器拖入到畫板中時的默認狀態,我們可以對其定名爲repeter,接下來,我們通過雙擊中繼器,進入到其內部(這裏比較像雙加動態面板,進入到state中)

               

                如上圖,這是中繼器內容部構造,我們只需要根據自己的需求,定義裏面的內容項即可,比如想做要做一個數據表格,在該位置只需要複製對應字段個數的矩形即可,如下(這裏注意要對每個矩形進行命名,爲添加數據做準備,同時也可將全部內容進行組合操作)

                

 

               每個矩形名字如下:

              

                

              這樣再回到之前畫布的頁面,就會得到一個列數已定的矩陣表格

             

               至此爲止,中繼器前期搭建的工作就已經完成了,下面我們就可以將我們想要的數據填充進去了

           2)爲中繼器添加數據

               按照上述的步驟,我們已經可以得到一個我們想要的矩形框架,那麼該如何填充數據呢,如下圖:

               

               中繼器添加數據的祕密就在這啦,通過每項加載的case及下方的中繼器表格相互匹對,完成我們中繼器數據的填充(當我們拖拽一箇中繼器進入到畫板時,默認就會有每項加載時的case )

                Step1  將下方中繼器表格的表頭重新命名,如下圖(最好跟中繼器中個矩形命名相同,這樣不容易亂):

               

                Step2  將個字段下的數據進行填充,如下圖:

               

             

                Step3   雙擊「每項加載-case1」,打開條件編輯模板

               

               這裏需要注意的是UID的位置,我這裏是用的是讓UID的值等於[[item.index]],也就是等於當前組個數,這是一個動態蔬數值,所以當我們添加或者刪除行操作時,該值可以自動發生變化,而不再需要我們手動添加函數

               當我們添加完,並保存後,中繼器的數據就添加完成啦

             

           3)注意事項 

               當我們要通過中繼器進行增刪改查等操作時,下圖所示紅圈位置,勾選要取消掉

               

            

3、使用中繼器實現「增、刪、改、查」 

       我們在(2)中,已經得到了一個帶有填充好數據的中繼器了,那麼,我們可以在基於它的基礎上,完善並增加功能操作 

       在開始之前,爲了美觀,我們可以給中繼器增加個表頭,如下圖

       

 

       增加完之後,我們可以正式開始

           1)「增」

               利用中繼器,模擬數據集(庫)中,增加數據動作,演示如下:

               實現步驟:

                 Step1: 按照下圖所示,將將所有控件擺放好,並做好命名,包括新增按鈕(add_btn)、姓名輸入框(add_name)、性別下拉篩選(add_sex)、電話輸入框(add_phone)、確定/取消、按鈕

                             

          (  PS:這裏由於我是將新增與修改用了相同的彈窗控件,所以,我在點擊新增按鈕時,增加了一點判斷,當然如果只是想練習中繼器的話,可以忽略  

                              

                 Step2:編輯確定按鈕邏輯

         

               這裏需要注意下,當我們像取的自定義函數值爲下拉菜單時,如下圖:

                                           

                至此,我們的增加數據動作已經完成了,可以運行看看啦

           2)「刪」

               利用中繼器,模擬數據集(庫)中,刪除數據動作,演示如下:

               實現步驟: 

                 Step1:我們雙擊進入到中繼器中,選中刪除按鈕

 

                 Step2:爲其增加點擊事件     

               因爲我們沒有通過標記行的形式進行刪除,所以,選擇中繼器後,下方單選項需要選中this,到這裏爲止,我們的刪除數據操作也完成啦,趕快試試吧 

           3)「改」

               利用中繼器,模擬數據集(庫)中,修改數據動作,演示如下:

               實現步驟: 

                  Step1: 我們雙擊進入到中繼器中,選中矩形組合

          

 

                  Step2: 增加點擊事項

            

                  同時,需要爲選項組設置名稱,如下圖                

 

                  完成上述內容後,我們可以先預覽下,是否會出現選中效果,若出現正確的選中/取消選中效果,那麼恭喜,可以往下進行了,若沒有,請檢查下上述內容以及開篇介紹中繼器添加數據是的注意事項

                  Step3: 選中修改,增加點擊事項(因爲修改跟新增我採用了同一組組件,所以可直接跳過該步驟,查看步驟4)

                   Step4: 選中確定,添加點擊事件,增加更新行操作

                    這裏需要選擇對標記行操作,所以纔有了步驟1的編輯,至此,修改功能也完成了,去試試吧

           4)「查」

               利用中繼器,模擬數據集(庫)中,查詢數據動作,演示如下:

               實現步驟: 

                  Step1: 按照下圖所示,將將所有控件擺放好,並做好命名,包括搜索按鈕(search_btn)、姓名搜索輸入框(search_name)、性別下拉篩選(search_sex)、電話查找輸入框(search_phone),這裏只做性別的篩選,所以姓名跟電話可以忽略

                  Step2:爲搜索按鈕添加點擊事件

               這裏有兩個需要注意的點   

                 第一點:當我們給中繼器添加多個篩選項時,當我們勾選「移除其他篩選」,則表示,各條件之間爲獨立查詢

                                                                                               當我們不勾選「移除其他篩選」,則表示,各條件之間爲組合查詢

                 第二點:這裏涉及到一個函數「indexOf()」,這是一個開發中常用函數,來判斷當前輸入字符串是否存在與要比較的字符串中(想深入瞭解的可自行百度下)

                  至此,查詢功能也完成啦,快去試試吧                            


結束語:

    本次準備的內容,略有匆忙,尤其是新增跟修改操作採用了同組控件,導致條件判斷較多,大家可以只看實現方式即可

    其實,大多數情況下,考慮到項目週期,修改維護成本等,從而導致中繼器以及其他Axure本身提供的交互功能的實際使用場景並不是很大,但在有時間的情況下,使用練習中繼器與其他交互功能,不僅可以幫助對項目進行“查缺補漏”,還可以提高某些維度的邏輯判斷能力,這個就需要大家自行體會了~~

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章