1. 程式人生 > >2分鐘上手、3小時學會無程式碼軟體開發---移動端主頁面

2分鐘上手、3小時學會無程式碼軟體開發---移動端主頁面

  • “Page”頁面是移動裝置在螢幕中要顯示的物件(包括手機和平板兩類),一般移動端顯示塊中會有多個頁面元件,可以在多個頁面間跳轉顯示
  • 頁面中含有一個Exclude from Navigation Bar的資料型別元件,這個元件如果傳入Yes布林值,則執行時導航欄中就不會出現此頁面按鈕
  • 開發者可以在頁面元件中自由開發新增更多元件來設計顯示和邏輯內容,主頁面中預設已有開發者需要的一些子元件:
  • Header: 顯示屏的頭部顯示欄,預設中間是一個標題顯示元件,兩邊有已設計好可使用也可以刪除的左側按鈕和右側按鈕
  • Content:是頁面內容開發一個顯示塊容器元件,實際開發中頁面顯示和處理邏輯都在此元件中開發設計,預設在此元件中是一個“List”列表顯示元件
  • Exclude from Navigation Bar的資料型別元件,這個元件如果傳入Yes布林值,則執行時導航欄中就不會出現此頁面按鈕
  • Caption:是標題變數,頁面中如果有此標題,就會在頁面下部導航欄中顯示此頁面標題,導航欄中的標題變數和Header中的標題變數是同一元件,可以修改標題元件中的邏輯來自定義頁面顯示標題
  • Icon Path:控制在導航欄頁面按鈕中是否顯示一個頁面圖示,一般是將專案資料夾下WEB資料夾中的圖示傳入,以下案例中就是用一個字元常量元件將一個圖示傳入;也可以將jQuery按鈕圖示傳入作為顯示圖示
  • · 正常情況下,在此設定圖示來源,在導航欄Footer---Navigation Bar---Nav Item---Nav Link中有個Icon圖片顯示元件,圖示實際顯示樣式,如圖示大小、顯示在標題之下或之上可以對此圖片顯示元件進行樣式設定來定義

 

 

 

主頁面元件說明

  • <Mobile View>移動端和<Tablet View>平板端主頁面元件預設有很多常用的子元件

 

 

 

頁面中的Header頭部欄

  • 這個頭部欄是所有頁面中預設都有的設計,用於放置標題和一些按鈕,標題顯示中有自動以頁面名稱來作業標題名稱的邏輯
  • 開發都可以在頭部欄進行自定義設計,一般一個頁面都會有標題,還有左右按鈕,按鈕可以用圖片和樣式屬性及為圖片新增<On Click>固定名稱的行為處理元件
  • 頁面頭部欄中預設的設計內容:
  • Title:是一個顯示標題的字元標籤元件;頭部欄中的<Init>行為處理元件中有將頁面名稱傳為顯示標題的邏輯,開發者也可以修改此邏輯來自定義不同標題傳入方式
  • ButtonPrev:都是按鈕元件,一個有靠右顯示的樣式屬性,一個有靠右顯示的樣式屬性,可以中文重新命名以顯示新的名稱,由上提到的,可以用屬性來設定jQuery按鈕圖示改變按鈕顯示效果,也可以刪除按鈕新增圖片作為按鈕(圖片傳入請參考本節頁面導航欄圖示Icon Path的設定方式)

 

 

 

以下移動端主頁面執行時的標題Page1就是頁面元件的名稱

 

 

頁面中的Content頁面內容設計容器元件

  • Content:是頁面內容開發一個顯示塊容器元件,頁面中要顯示的內容都可以在其中進行開發,可以放置列表(預設)、表格、顯示圖片、顯示文字、輸入框等元件,以及按鈕、提交邏輯、按鈕中的後臺伺服器端處理邏輯等
  • 移動端的預設主頁面內容區設計和平板端預設主頁面內容區設計不同

移動端主頁面內容開發

 

 

 

平板端主頁面內容開發