彩蛋 caidan( 二 )


彩蛋  caidan

文章插圖

保存開發結果,返回之前項目本地運行的瀏覽器,則頁面自動刷新顯示最近設計結果
彩蛋  caidan

文章插圖

注意實際項目開發中,這個菜品類別名稱是放于數據庫中的,在此直接查詢數據庫中對應字段傳入值即可而非用常量開發操作演示
彩蛋  caidan

文章插圖

菜單列表
當用戶點擊左側某個菜品名稱時,我們在右側列表顯示該類別的菜單雙擊元件進入以下位置:“菜單”頁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”來調用連線傳值元件
彩蛋  caidan

文章插圖

“liangcai”普通行為處理元件,設計點擊此名稱按鈕時,在右側顯示的菜單信息:雙擊進入“liangcai”元件添加一個Content的父級引用對象先從選項板頂部元件中點選
彩蛋  caidan

文章插圖
“Remove刪除對象”元件,將Control與Content的父級引用對象中的List下的“菜單項目”相連來刪除舊的菜單信息· 注意單線連接,但是刪除所有菜單的多個顯示對象添加兩個字符常量,名稱分別為“花生”、“木耳”添加一個名稱為“生成顯示菜單”的普通行為處理元件,添加一個輸入元件命名為“菜名”;添加一個輸出元件命名為“菜單”;修改“生成顯示菜單”為復數狀態---選中,右鍵單擊在彈出菜單中選“Repetitive”將“花生”、“木耳”連線傳值給“菜名”輸入元件,將“菜單”輸出元件與Content的父級引用對象中的List下的“菜單項目”相連
彩蛋  caidan

文章插圖

“生成顯示菜單”中邏輯開發:單擊選中“菜單”輸出元件,然后右鍵單擊在彈出的菜單中選Show in Repository Explorer,在開發工具左側項目目錄中有已添加的元件對象選中目錄區中對象拖入開發區右側用連線傳值方式將拖入的數據類型對象“菜單項目”與“菜單”輸出元件相連用連傳值值方式蔣“菜名”輸入元件與拖入的數據類型對象“菜單項目”下Details/Title/<Value>相連,來傳入新的菜單名稱保存開發結果,返回瀏覽器,瀏覽器自動刷新顯示最新內容,顯示兩個菜名
彩蛋  caidan

文章插圖
開發操作演示
彩蛋  caidan

文章插圖

顯示菜單圖標
為了顯示菜單列表更豐富內容,為每個菜單添加圖標雙擊進入“生成顯示菜單”元件,用輸入的菜名來生成圖片路徑信息傳入菜單顯示元件中的圖標的路徑值中在開發工具頂部點擊
彩蛋  caidan

推薦閱讀