SAP UI5學習筆記之(二)熟悉的HelloWorld


今天就開始進入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了。

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM