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