資料設定-利用「資料精靈」抓取資料表及關聯

如何使用資料精靈建立多欄式畫面

  此章節會教導各位如何使用資料精靈快速的製作多欄式畫面,這也是基本較常使用到的頁面之一。

  多欄式畫面的好處在於能清楚聚焦於單一筆資料的內容,例如,人事部要查看單一員工的詳細資料時可使用,行數可依據排版需求調整。


  接著就實際帶大家來製作一個基本的多欄式畫面吧!


此章節包含的主題:

資料設定 - 利用「資料精靈」快速抓取資料表及關聯

  新增一輸入頁面,顯示名稱為【課程基本資料】,在三種新增方式中,請選擇第一種【資料精靈】,由系統自動抓取資料表及關聯欄位,以便快速建立資料規格,如圖1所示。

如何使用資料精靈建立多欄式畫面

圖1. 新增頁面及選擇資料類型

  選擇資料來源【LayoutPreview2.db】,預設資料表直接點選下一步,左側的「現有關聯」框格中,會帶出資料庫中已經建立好的關聯,此時可點選「向右箭頭」將關聯加入「使用關聯」框格,如圖2。在「關聯細項設定」中,可以選擇關聯資料表的參考欄位及呈現方式。請將【Course_Category】及【Teacher_info】呈現方式皆修改為【開新視窗】。點選下一步完成此頁面的資料設定。

如何使用資料精靈建立多欄式畫面

圖2. 選擇資料來源及設定關聯

版面設定 - 利用「版面精靈」快速選擇版面類型

  設定完資料及Table後,會彈出切換挑選版型畫面,工具分三種類型1. 版面精靈 2. PC版面 3. 行動裝置版面 可依據使用者當下製作之頁面決定使用哪一種,工具在版面精靈中也提供了多樣化的版面讓使用者得以快速使用,今天範例將以選擇【版面精靈】內的【單檔直式】進行快速排版,如圖3.4所示。

版面精靈自動配置

圖3. 版面精靈自動配置(可點擊圖片放大)

版面精靈自動配置

圖4. 挑選單檔直式(可點擊圖片放大)

選取多欄式所需要的欄位 預設【全選】即可,接著將【每列欄位個數】修改為【2】,調整後點選確定,如圖5.6所示

顯示欄位設定

圖5. 挑選所需欄位(可點擊圖片放大)

裁切每列所須欄位

圖6. 裁切每列所須欄位(可點擊圖片放大)

欄位及條件的細項調整

完成版面精靈的選擇後,針對版面進行些微調整,如:新增一欄標題文字、變更欄位位置 如圖7-12所示

1. 於第一列欄位點擊後左方藍框處右鍵【向上插入一整列】

欄位及版面的細項調整

圖7. 版面調整-向上插入一列(可點擊圖片放大)

2. 拖拉Label物件放置新增出來的一列上,雙擊Label物件後於值輸入【課程基本資料】,字體顏色大小可透過上方快捷工具列微調

欄位及版面的細項調整

圖8. 版面調整-Label新增文字(可點擊圖片放大)

3. 針對類別編號欄位點擊後左方藍框處右鍵【向上插入一整列】

欄位及版面的細項調整

圖9. 版面調整-新增另一列於類別編號欄位上方(可點擊圖片放大)

4. 將【課程照片】欄位拖拉至新增出來的列上,並將右方【顯示標題】關閉

欄位及版面的細項調整

圖10. 版面調整-拖拉課程照片欄位並關閉標題(可點擊圖片放大)

5. 點選該列藍框處右鍵選擇【列高度】,設置【固定高px】為【200】

欄位及版面的細項調整

圖11. 版面調整-列高調整(可點擊圖片放大)

6. 點選課程照片欄位,於右方屬性修改尺寸模式為【依元件尺寸】

欄位及版面的細項調整

圖12. 版面調整-屬性尺寸模式調整(可點擊圖片放大)

頁面製作完成-結果呈現

  透過以上的簡易操作不僅好上手也能更快速的開發所需頁面,包含整體的排版、欄位細項的調整都讓使用者有更好的使用體驗

整體頁面設計完成畫面

圖13. 整體頁面設計完成畫面(可點擊圖片放大)

結語

  現在,我們學會了如何新增及設計多欄式的頁面,當有需要此類型頁面時就能活用各項精靈快速創建頁面同時優化使用者體驗   
  ◆ 資料精靈快速關聯所有欄位   
  ◆ 版面精靈快速創建各項layout版型   
  ◆ 彈性調整各項屬性及自由版面的配置


一起來建立屬於自己的多欄式畫面吧!

關於我們 網站導覽 隱私權保護及著作權聲明 服務專線:(02)2726-0885