2. 程式人生 > >2分鐘上手、3小時學會無程式碼軟體開發案例---選單軟體

2分鐘上手、3小時學會無程式碼軟體開發案例---選單軟體

阿新 • • 發佈：2019-09-28

選單軟體

  • 這個案例中我們用幾分鐘來開發一個選單軟體，是在平板端顯示和操作的，可以進行選單新增維護
  • 完整的開發操作演示：

 

 

  • 開發的專案案例下載---可以網盤下載案例匯入開發工具對應操作演示進行學習

開發應用

建立新專案

  • 執行TERSUS開發工具，Windows系統中選名稱為Tersus Visual Programming Platform的程式; Mac電腦中執行Tersus程式
  • · 如果是第一次執行程式，則會顯示一個歡迎使用的頁面，顯示如何快速開發一個專案，在頁面中新增按鈕，彈出“Hello World”的一個資訊彈窗；關閉此頁面後才能進入專案開發
  • · 注意如果是WIN10系統，需要以管理員方式開啟TERUS軟體進行無程式碼軟體開發，否則會有一個如下的彈窗，提示“Workspace”---開發工具預設的專案資料夾---不能訪問（在使用中或不能生成，請選擇另一個）

 

 

 

  • 專案資料夾：可以用管理員開啟後在工具的選單欄中選File---Switch Workspace來選擇非系統盤的一個資料夾設定為專案檔案
  • 新建一個專案，命名為“CAIDAN”
  • 新建方式：File -> New Tersus Project
  • 彈窗中輸入專案名稱“CAIDAN”
  • 專案模板中選“New Mobile Application
    ”
  • 點選“Finish”完成新建
  • 開發區中顯示底層系統顯示元件：不同模板中有不同的平臺顯示塊，New Mobile Application模板包括**<Mobile View>、<Tablet View>和<Desktop View>**三個顯示塊
  • 移動端顯示塊中開發：本專案我們只使用平板端顯示塊，所以可以刪除**和Desktop View**兩個顯示塊，刪除時直接選中按刪除鍵，會提示刪除物件是專案中唯一物件，是否同時刪除專案檔案目錄中的檔案，可以選是徹底刪除減少檔案冗餘內容，然後可以儲存專案更新內容：可以點選選單欄中的Save按鈕、或直接按Ctrl+s快捷鍵、或選單中選File -> Save來儲存
  • 開發操作演示

 

 

 

平板端開發

  • 雙擊<Mobile View>進入平板端顯示塊，模板預設已添加了一個主頁面，重新命名為“選單”，主頁面介紹請參考“移動端開發用元件”一章“Page顯示主頁面”一節
  • · 命名方式：點選選中頁面，按快捷鍵F2或右鍵單擊在彈出的選單中選“Rename”，然後有重新命名彈窗出現，在彈窗中輸入中文名稱即可，最後點選“Finish”關閉彈窗完成重新命名
  • 新增兩個新的主頁面，命名為“查詢”和“推薦”
  • · 新增方式：在<Mobile View>內任意空白位置右鍵單擊，在彈出的選單中選Addd Element---Page，此時是可命名狀態，直接輸入“查詢”回車完成新主頁面新增
  • · 同樣方式新增“推薦”主頁面

 

 

 

  • 可以執行檢視預設頁面的預設設計內容，點選開發工具欄執行按鈕

，然後將本地瀏覽器螢幕縮小為平板大小

 

 

 

選單頁左側目錄/菜品欄設計

  • 選單頁面中，左側菜品欄應顯示各類別選單的名稱的按鈕，點選按鈕後，右側內容區顯示此類別的選單列表
  • 將左側預設的Option 1和Option 2類別按鈕進行修改並新增更多選項
  • 雙擊元件進入以下位置：“選單”頁/Content/Left Menu
  • 刪除“Menu Title”---選中後點擊刪除鍵，點“Yes”確認刪除專案目錄中新增的內容減少專案冗餘內容
  • 雙擊進入“Init”元件（這是一個預處理名稱簡寫的普通行為處理元件），將字元常量Option 1重新命名為“冷盤”
  • · 重新命名方式：點選選中常量元件，按快捷鍵F2或右鍵單擊在彈出的選單中選“Rename”，然後有重新命名彈窗出現，在彈窗中輸入中文名稱即可，最後點選“Finish”關閉彈窗完成重新命名
  • 同上重新命名Option 2為“炒菜”
  • 可以選中“冷盤”和“炒菜”常量拖放到上部
  • 新增第三個菜品名稱為“主食”
  • · 新增方式：從開發工具右側常數常量類元件中點選“Text字元”元件，在“炒菜”下點選放入，放入時是命名狀態，可以直接輸入名稱“主食”，回車或點其他任意地方完成
  • 同上新增第四個菜品為“點心”、第五個菜品為“飲料”
  • 將新增的新菜品名稱常量參考預設兩個常量與“Creeate Menu Item”的輸入元件“Caption”連線進行傳值處理
  • 從開發工具右側頂部點選“Flow傳值或流程”元件或按快捷鍵F2，選點選“主食”，再點選“Caption”即可
  • 同上連線“點心”和“飲料”與“Caption”

 

 

 

  • 儲存開發結果，返回之前專案本地執行的瀏覽器，則頁面自動重新整理顯示最近設計結果

 

 

 

  • 注意實際專案開發中，這個菜品類別名稱是放於資料庫中的，在此直接查詢資料庫中對應欄位傳入值即可而非用常量
  • 開發操作演示

 

 

 

選單列表

  • 當用戶點選左側某個菜品名稱時，我們在右側列表顯示該類別的選單
  • 雙擊元件進入以下位置：“選單”頁Content/Content Pane，模板預設中已添加了一個“List列表”顯示元件，我們用來顯示多個選單
  • 雙擊進入List元件，將List Item 1重新命名為“選單專案”
  • 如果雙擊進入“List列表”，可以有一個圖片元件和列元件，列元件中有字元顯示元件顯示標題和詳情內容，我們用此來顯示菜名等資訊
  • 雙擊元件外部退出，進入以下位置：“選單”頁/Content/Left Menu/Menu Item/<On Click>，<On Click>是使用者點選菜品標題時觸發的點選事件行為邏輯開發的位置
  • 同之前菜品設計，選單資訊也應由資料庫儲存，查詢後顯示在選單區，這裡我們還是新增常量處理選單資訊：
  • 在<On Click>元件中，新增一個按鈕的父級引用物件，用來獲取按鈕的名稱（也就是菜品名稱）
  • · 父級物件新增方式：右鍵單擊，在彈出的選單中選Add Ancestor Refference---Menu Item
  • 新增一個“Branch是哪些值”元件---從開發工具右側流程控制類元件中點選，在開發區點選放入或英文輸入法下用快捷鍵“b”
  • 將按鈕父元件中的“Caption”與此元件的輸入元件連線傳值，用於判斷輸入值是什麼菜品，不同菜品再顯示不同選單
  • 對“Branch是哪些值”元件兩個預設輸出元件重新命名為“冷盤”和“炒菜”，選中元件按F2進行重新命名處理
  • 可以新增更多輸出元件命名為“主食”、“點心”和“飲料”，我們實際只開發第一個菜品的顯示選單內容，輸出元件用快捷鍵“e”呼叫點選右側靠邊框位置新增
  • 新增一個名稱為“liangcai”的普通行為處理元件---用快捷鍵“a”；為其新增一個Control控制輸入元件---選中行為元件，右鍵單擊在彈出的選單中選Add Element---Control
  • 將“冷盤”輸出元件與Control輸入元件連線---按快捷鍵“f”來呼叫連線傳值元件

 

 

 

  • “liangcai”普通行為處理元件，設計點選此名稱按鈕時，在右側顯示的選單資訊：
  • 雙擊進入“liangcai”元件
  • 新增一個Content的父級引用物件
  • 先從選項板頂部元件中點選

“Remove刪除物件”元件，將Control與Content的父級引用物件中的List下的“選單專案”相連來刪除舊的選單資訊

  • · 注意單線連線，但是刪除所有選單的多個顯示物件
  • 新增兩個字元常量，名稱分別為“花生”、“木耳”
  • 新增一個名稱為“生成顯示選單”的普通行為處理元件，新增一個輸入元件命名為“菜名”；新增一個輸出元件命名為“選單”；修改“生成顯示選單”為複數狀態---選中，右鍵單擊在彈出選單中選“Repetitive”
  • 將“花生”、“木耳”連線傳值給“菜名”輸入元件，將“選單”輸出元件與Content的父級引用物件中的List下的“選單專案”相連

 

 

 

  • “生成顯示選單”中邏輯開發：
  • 單擊選中“選單”輸出元件，然後右鍵單擊在彈出的選單中選Show in Repository Explorer，在開發工具左側專案目錄中有已新增的元件物件
  • 選中目錄區中物件拖入開發區右側
  • 用連線傳值方式將拖入的資料型別物件“選單專案”與“選單”輸出元件相連
  • 用連傳值值方式蔣“菜名”輸入元件與拖入的資料型別物件“選單專案”下Details/Title/<Value>相連，來傳入新的選單名稱
  • 儲存開發結果，返回瀏覽器，瀏覽器自動重新整理顯示最新內容，顯示兩個菜名

 

  • 開發操作演示

 

 

 

顯示選單圖示

  • 為了顯示選單列表更豐富內容，為每個選單新增圖示
  • 雙擊進入“生成顯示選單”元件，用輸入的菜名來生成圖片路徑資訊傳入選單顯示元件中的圖示的路徑值中
  • 在開發工具頂部點選

Search查詢元件，彈窗中輸入Create from Template，找到對應元件後點選

  • 然後再點選OK按鈕放入開發區，這個元件是用給定的模板生成字串結果，然後為其新增一個輸入元件命名為“biaoti”
  • 新增一個字元常量元件---從常數常量類元件中選中，在開發區中需要的位置再次點選放入元件，重新命名中輸入值為“images/${biaoti}.png”，此常量連線傳值到上步新增的模板生成字元元件的<Template>輸入元件
  • 用快捷鍵“b”新增一個“Branch是哪些值”元件，將兩個輸出元件名稱改為“花生”、“木耳”
  • 新增兩個字元常量命名為“huasheng”和“muer.png”，連線將“花生”、“木耳”輸出元件分別連至“huasheng”和“muer.png”常量
  • 將“huasheng”和“muer.png”常量連線傳值至模板生成字元元件的“biaoti”輸入元件
  • 模板生成字元元件的<Text>輸出元件與資料型別物件“選單專案”下Thumbnail/<SRC>相連，傳入生成的圖片路徑
  • 使用的是專案資料夾中的圖片路徑
  • 下載“huasheng.png”和“muer.png”圖片提前放入專案資料夾下的web/images下
  • 注意名稱和格式\存放地址我們要用到
  • 開發結果如下圖

 

 

 

  • 儲存開發結果，返回至瀏覽器，自動重新整理後點擊左側“冷盤”後顯示為

 

 

 

  • 開發操作演示

 

 

 

  • 顯示的圖片大小不一致且過大，需要設定統一大小屬性，可以為Thumbnail設定樣式類屬性定義大小，在此我們用最簡單快速的方式設定顯示大小
  • 雙擊進入以下元件位置：Content/Content Pane/List/選單專案/Thumbnail
  • 單擊選中Thumbnail圖示元件
  • 為其新增屬性：可以選中元件後右鍵單擊，在彈出的選單中選Add Property，或者在屬性區右上角單屬性新增按鈕圖示，彈出新增屬性視窗，在屬性名稱中輸入“html.style”，點選OK後完成屬性新增
  • 開發工具下部屬性區中就會有一行名稱為“html.style”新屬性出現，在Shared列中對應輸入樣式標籤和樣式值“height:80px;width:80px;”，注意輸入時是英文輸入法
  • 以上處理同樣可以用新增“html.height”和“html.width”兩個屬性的方式處理，Shared列中對應輸入樣式值“80px”

 

 

 

  • 設定元件樣式屬性的操作演示

 

 

 

  • 在本地瀏覽器重新整理瀏覽前，為選單新增一些標題外的描述資訊
  • 雙擊選單專案/外部退出至Content元件，雙擊進入Content/Left Menu/Menu Item/<On Click>/liangcai/“生成顯示選單”元件中
  • 新增兩個字元常量，命名為“配料：花生、醋、糖”和“配料：木耳、辣椒、香菜、醋”
  • 將“Branch是哪些值”元件兩個輸出元件“花生”、“木耳”分別連線至剛新增的配料常量，再將配料常量連線傳值至資料型別物件“選單專案”下Details/Description/<Value>

 

 

 

  • 儲存開發結果，返回瀏覽器自動重新整理顯示最新內容

 

 

 

  • 開發操作演示

 

 

 

功能拓展