開發(fā)應(yīng)用
創(chuàng)建新項目
運行TERSUS開發(fā)工具，Windows系統(tǒng)中選名稱為TersusVisualProgrammingPlatform的程序;Mac電腦中運行Tersus程序·如果是第一次運行程序，則會顯示一個歡迎使用的頁面，顯示如何快速開發(fā)一個項目，在頁面中添加按鈕，彈出“HelloWorld”的一個信息彈窗；關(guān)閉此頁面后才能進入項目開發(fā)·注意如果是WIN10系統(tǒng)，需要以管理員方式打開TERUS軟件進行無代碼軟件開發(fā)，否則會有一個如下的彈窗，提示“Workspace”---開發(fā)工具默認的項目文件夾---不能訪問（在使用中或不能生成，請選擇另一個）項目文件夾：可以用管理員打開后在工具的菜單欄中選File---SwitchWorkspace來選擇非系統(tǒng)盤的一個文件夾設(shè)定為項目文件新建一個項目，命名為“CAIDAN”新建方式：File->NewTersusProject彈窗中輸入項目名稱“CAIDAN”項目模板中選“NewMobileApplication”點擊“Finish”完成新建開發(fā)區(qū)中顯示底層系統(tǒng)顯示元件：不同模板中有不同的平臺顯示塊，NewMobileApplication模板包括**<MobileView>、<TabletView>和<DesktopView>**三個顯示塊移動端顯示塊中開發(fā)：本項目我們只使用平板端顯示塊，所以可以刪除**和DesktopView**兩個顯示塊，刪除時直接選中按刪除鍵，會提示刪除對象是項目中唯一對象，是否同時刪除項目文件目錄中的文件，可以選是徹底刪除減少文件冗余內(nèi)容，然后可以保存項目更新內(nèi)容：可以點擊菜單欄中的Save按鈕、或直接按Ctrl+s快捷鍵、或菜單中選File->Save來保存開發(fā)操作演示平板端開發(fā)
雙擊<MobileView>進入平板端顯示塊，模板默認已添加了一個主頁面，重新命名為“菜單”，主頁面介紹請參考“移動端開發(fā)用元件”一章“Page顯示主頁面”一節(jié)·命名方式：點擊選中頁面，按快捷鍵F2或右鍵單擊在彈出的菜單中選“Rename”，然后有重命名彈窗出現(xiàn)，在彈窗中輸入中文名稱即可，最后點擊“Finish”關(guān)閉彈窗完成重命名添加兩個新的主頁面，命名為“查詢”和“推薦”·添加方式：在<MobileView>內(nèi)任意空白位置右鍵單擊，在彈出的菜單中選AdddElement---Page，此時是可命名狀態(tài)，直接輸入“查詢”回車完成新主頁面添加·同樣方式添加“推薦”主頁面可以運行查看默認頁面的默認設(shè)計內(nèi)容，點擊開發(fā)工具欄運行按鈕，然后將本地瀏覽器屏幕縮小為平板大小菜單頁左側(cè)目錄/菜品欄設(shè)計
菜單頁面中，左側(cè)菜品欄應(yīng)顯示各類別菜單的名稱的按鈕，點擊按鈕后，右側(cè)內(nèi)容區(qū)顯示此類別的菜單列表將左側(cè)默認的Option1和Option2類別按鈕進行修改并添加更多選項雙擊元件進入以下位置：“菜單”頁/Content/LeftMenu刪除“MenuTitle”---選中后點擊刪除鍵，點“Yes”確認刪除項目目錄中添加的內(nèi)容減少項目冗余內(nèi)容雙擊進入“Init”元件（這是一個預(yù)處理名稱簡寫的普通行為處理元件），將字符常量Option1重命名為“涼菜”·重命名方式：點擊選中常量元件，按快捷鍵F2或右鍵單擊在彈出的菜單中選“Rename”，然后有重命名彈窗出現(xiàn)，在彈窗中輸入中文名稱即可，最后點擊“Finish”關(guān)閉彈窗完成重命名同上重命名Option2為“炒菜”可以選中“涼菜”和“炒菜”常量拖放到上部添加第三個菜品名稱為“主食”·添加方式：從開發(fā)工具右側(cè)常數(shù)常量類元件中點選“Text字符”元件，在“炒菜”下點擊放入，放入時是命名狀態(tài)，可以直接輸入名稱“主食”，回車或點其他任意地方完成同上添加第四個菜品為“點心”、第五個菜品為“飲料”將添加的新菜品名稱常量參考默認兩個常量與“CreeateMenuItem”的輸入元件“Caption”連線進行傳值處理從開發(fā)工具右側(cè)頂部點選“Flow傳值或流程”元件或按快捷鍵F2，選點擊“主食”，再點擊“Caption”即可同上連接“點心”和“飲料”與“Caption”保存開發(fā)結(jié)果，返回之前項目本地運行的瀏覽器，則頁面自動刷新顯示最近設(shè)計結(jié)果注意實際項目開發(fā)中，這個菜品類別名稱是放于數(shù)據(jù)庫中的，在此直接查詢數(shù)據(jù)庫中對應(yīng)字段傳入值即可而非用常量開發(fā)操作演示菜單列表
當用戶點擊左側(cè)某個菜品名稱時，我們在右側(cè)列表顯示該類別的菜單雙擊元件進入以下位置：“菜單”頁Content/ContentPane，模板默認中已添加了一個“List列表”顯示元件，我們用來顯示多個菜單雙擊進入List元件，將ListItem1重命名為“菜單項目”如果雙擊進入“List列表”，可以有一個圖片元件和列元件，列元件中有字符顯示元件顯示標題和詳情內(nèi)容，我們用此來顯示菜名等信息雙擊元件外部退出，進入以下位置：“菜單”頁/Content/LeftMenu/MenuItem/<OnClick>，<OnClick>是用戶點擊菜品標題時觸發(fā)的點擊事件行為邏輯開發(fā)的位置同之前菜品設(shè)計，菜單信息也應(yīng)由數(shù)據(jù)庫保存，查詢后顯示在菜單區(qū)，這里我們還是添加常量處理菜單信息：在<OnClick>元件中，添加一個按鈕的父級引用對象，用來獲取按鈕的名稱（也就是菜品名稱）·父級對象添加方式：右鍵單擊，在彈出的菜單中選AddAncestorRefference---MenuItem添加一個“Branch是哪些值”元件---從開發(fā)工具右側(cè)流程控制類元件中點選，在開發(fā)區(qū)點擊放入或英文輸入法下用快捷鍵“b”將按鈕父元件中的“Caption”與此元件的輸入元件連線傳值，用于判斷輸入值是什么菜品，不同菜品再顯示不同菜單對“Branch是哪些值”元件兩個默認輸出元件重命名為“涼菜”和“炒菜”，選中元件按F2進行重命名處理可以添加更多輸出元件命名為“主食”、“點心”和“飲料”，我們實際只開發(fā)第一個菜品的顯示菜單內(nèi)容，輸出元件用快捷鍵“e”調(diào)用點擊右側(cè)靠邊框位置添加添加一個名稱為“l(fā)iangcai”的普通行為處理元件---用快捷鍵“a”；為其添加一個Control控制輸入元件---選中行為元件，右鍵單擊在彈出的菜單中選AddElement---Control將“涼菜”輸出元件與Control輸入元件連線---按快捷鍵“f”來調(diào)用連線傳值元件“l(fā)iangcai”普通行為處理元件，設(shè)計點擊此名稱按鈕時，在右側(cè)顯示的菜單信息：雙擊進入“l(fā)iangcai”元件添加一個Content的父級引用對象先從選項板頂部元件中點選“Remove刪除對象”元件，將Control與Content的父級引用對象中的List下的“菜單項目”相連來刪除舊的菜單信息·注意單線連接，但是刪除所有菜單的多個顯示對象添加兩個字符常量，名稱分別為“花生”、“木耳”添加一個名稱為“生成顯示菜單”的普通行為處理元件，添加一個輸入元件命名為“菜名”；添加一個輸出元件命名為“菜單”；修改“生成顯示菜單”為復(fù)數(shù)狀態(tài)---選中，右鍵單擊在彈出菜單中選“Repetitive”將“花生”、“木耳”連線傳值給“菜名”輸入元件，將“菜單”輸出元件與Content的父級引用對象中的List下的“菜單項目”相連“生成顯示菜單”中邏輯開發(fā)：單擊選中“菜單”輸出元件，然后右鍵單擊在彈出的菜單中選ShowinRepositoryExplorer，在開發(fā)工具左側(cè)項目目錄中有已添加的元件對象選中目錄區(qū)中對象拖入開發(fā)區(qū)右側(cè)用連線傳值方式將拖入的數(shù)據(jù)類型對象“菜單項目”與“菜單”輸出元件相連用連傳值值方式蔣“菜名”輸入元件與拖入的數(shù)據(jù)類型對象“菜單項目”下Details/Title/<Value>相連，來傳入新的菜單名稱保存開發(fā)結(jié)果，返回瀏覽器，瀏覽器自動刷新顯示最新內(nèi)容，顯示兩個菜名開發(fā)操作演示顯示菜單圖標
為了顯示菜單列表更豐富內(nèi)容，為每個菜單添加圖標雙擊進入“生成顯示菜單”元件，用輸入的菜名來生成圖片路徑信息傳入菜單顯示元件中的圖標的路徑值中在開發(fā)工具頂部點擊Search查詢元件，彈窗中輸入CreatefromTemplate，找到對應(yīng)元件后點選然后再點擊OK按鈕放入開發(fā)區(qū)，這個元件是用給定的模板生成字符串結(jié)果，然后為其添加一個輸入元件命名為“biaoti”添加一個字符常量元件---從常數(shù)常量類元件中選中，在開發(fā)區(qū)中需要的位置再次點擊放入元件，重命名中輸入值為“images/${biaoti}.png”，此常量連線傳值到上步添加的模板生成字符元件的<Template>輸入元件用快捷鍵“b”添加一個“Branch是哪些值”元件，將兩個輸出元件名稱改為“花生”、“木耳”添加兩個字符常量命名為“huasheng”和“muer.png”，連線將“花生”、“木耳”輸出元件分別連至“huasheng”和“muer.png”常量將“huasheng”和“muer.png”常量連線傳值至模板生成字符元件的“biaoti”輸入元件模板生成字符元件的<Text>輸出元件與數(shù)據(jù)類型對象“菜單項目”下Thumbnail/<SRC>相連，傳入生成的圖片路徑使用的是項目文件夾中的圖片路徑下載“huasheng.png”和“muer.png”圖片提前放入項目文件夾下的web/images下注意名稱和格式存放地址我們要用到開發(fā)結(jié)果如下圖保存開發(fā)結(jié)果，返回至瀏覽器，自動刷新后點擊左側(cè)“涼菜”后顯示為開發(fā)操作演示顯示的圖片大小不一致且過大，需要設(shè)定統(tǒng)一大小屬性，可以為Thumbnail設(shè)定樣式類屬性定義大小，在此我們用最簡單快速的方式設(shè)定顯示大小雙擊進入以下元件位置：Content/ContentPane/List/菜單項目/Thumbnail單擊選中Thumbnail圖標元件為其添加屬性：可以選中元件后右鍵單擊，在彈出的菜單中選AddProperty，或者在屬性區(qū)右上角單屬性添加按鈕圖標，彈出添加屬性窗口，在屬性名稱中輸入“html.style”，點擊OK后完成屬性添加開發(fā)工具下部屬性區(qū)中就會有一行名稱為“html.style”新屬性出現(xiàn)，在Shared列中對應(yīng)輸入樣式標簽和樣式值“height:80px;width:80px;”，注意輸入時是英文輸入法以上處理同樣可以用添加“html.height”和“html.width”兩個屬性的方式處理，Shared列中對應(yīng)輸入樣式值“80px”設(shè)置元件樣式屬性的操作演示在本地瀏覽器刷新瀏覽前，為菜單添加一些標題外的描述信息雙擊菜單項目/外部退出至Content元件，雙擊進入Content/LeftMenu/MenuItem/<OnClick>/liangcai/“生成顯示菜單”元件中添加兩個字符常量，命名為“配料：花生、醋、糖”和“配料：木耳、辣椒、香菜、醋”將“Branch是哪些值”元件兩個輸出元件“花生”、“木耳”分別連線至剛添加的配料常量，再將配料常量連線傳值至數(shù)據(jù)類型對象“菜單項目”下Details/Description/<Value>保存開發(fā)結(jié)果，返回瀏覽器自動刷新顯示最新內(nèi)容開發(fā)操作演示功能拓展
我們已開發(fā)了主要功能，但如果要作為一個應(yīng)用使用，還需要添加更我功能將菜單和菜品以及菜單用圖片都放入數(shù)據(jù)庫中，從數(shù)據(jù)庫中調(diào)用使用需要開發(fā)一個后臺管理系統(tǒng)處理其中信息的上傳刪除信息修改等維護工作需要開發(fā)另兩個頁面內(nèi)容...
