今天就開始進入SAP UI5實戰練習了。
按照慣例,學習任何一門語言和技術,都是從HelloWorld開始,這次也不例外!
SAP UI5之HelloWorld
首先新建SAP UI5工程。
在WEB IDE的Workspace上右鍵→New→Project from Template。
在彈出的創建向導中選擇SAPUI5 Application,版本最好選最新版本。點擊Next下一步。
填寫工程名稱Project Name和命名空間Namespace。為了和SAPUI5 SDK中的例子保持一致,我使用了如下命名。然后點擊Next下一步。
然后填寫View Type和View Name。
View Type有四種選擇。XML、JSON、JavaScript、HTML。推薦使用XML。因為XML使用最為普遍。
View Name為了和SAPUI5 SDK中的例子保持一致,使用App。
然后點擊Finish就完成工程的創建了。
實現HelloWorld
在walkthrough工程下的webapp文件夾下,就是我們自己編寫代碼的位置,MVC的所有代碼都放在這個文件夾里。
在webapp文件夾下找到index.html文件,我們的HelloWorld就在這個文件里實現。
在body的div里加入HelloWorld。保存文件。
右鍵工程→Run→Run as Web Application。在彈出的對話框中選擇index.html(前三個都是測試文件,不選),點擊OK,即可運行。
HelloWorld實現!
但是,我們在畫面上不是只加了HelloWorld嗎?怎么還有Title和一些布局出現呢?
是這樣的,SAPUI5在我們創建程序的時候已經為我們搭建好了MVC架構。
因為我們運行時選擇的是index.html,在程序加載過程中最先加載的是inde.html。
在index.html中,我們可以看到引導層中有data-sap-ui-oninit="module:sap/ui/core/ComponentSupport",
執行這一句話就會加載Component.js文件。Component.js文件會加載manifest.json、App.view.xml、App.controller.js等文件。
App.view.xml文件是MVC架構的Model,在view.xml中我們就能看到Title的代碼了。
在index.html中,我們將引導層的data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"這句刪掉,再次保存運行,就會發現只有HelloWorld了。