使用 MVC侈询，model卓缰、view 和 controller 的代碼分別放在不同的文件中慌盯，那么，OpenUI5 如何確定 view 和 controller 文件的名稱和位置呢姚炕？ 有以下三種方法來聲明文件的位置：
sap.ui.localResources()jQuery.sap.registerModulePath()- bootstrap 聲明:
data-sap-ui-resourceroots='{"name": "<url>"}'
sap.ui.localResources()
在 OpenUI5 中摊欠，controller 和 view 使用與 module 相同的名稱進(jìn)行定義和實(shí)例化。默認(rèn)情況下柱宦，所有的文件都位于 Web Application 下的子文件夾 resources 中些椒。如果開發(fā)人員想自己決定文件的位置，則要使用上面三種方法之一進(jìn)行配置掸刊。
為了測(cè)試摊沉，我們?cè)囍⑨尩?index.html 中的 sap.ui.localResources()
語句。然后運(yùn)行痒给，Development Tools 提示以下錯(cuò)誤（在 Chrome 瀏覽器中測(cè)試）：
sap.ui.localResources() 語法
sap.ui.localResources(sModuleNamePrefix);
假設(shè)這個(gè)語句出現(xiàn)在 index.html 文件中说墨，那么這句話的意思是將 index.html 文件所在的文件夾作為框架查找相關(guān)文件的文件夾。如果 sModuleNamePrefix 含有點(diǎn) (dot) 號(hào)苍柏，所有的點(diǎn)被替換成 /尼斧。
比如我們想把 view 文件放在 ./myapp/viewForButton 文件夾下，就這樣寫：
sap.ui.localResources("myapp.viewsforbutton");
jQuery.sap.registerModulePath()
語法：
jQuery.sap.registerModulePath(sModuleNamePrefix, sURL);
剛才的需求试吁，可以寫成：
jQuery.sap.registerModulePath("myapp.viewForButton", "./app/viewForButton"
這種方法能實(shí)現(xiàn) sap.ul.localResources() 相同的功能棺棵，但更加靈活楼咳。
bootstrap 申明 resourcesroots
下面的聲明實(shí)現(xiàn)上述同樣功能。
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"mainview" : "./mainview/"}'>
</script>
示例
在 Eclipse 中烛恤，通過File -> New -> Other -> SAPUI5 Application Development -> New View方式創(chuàng)建 View母怜，view 和 controller 位于同一個(gè)文件夾中。如果我們想把 View 和 Controller 放在不同的文件夾中 （SAP WEB IDE 默認(rèn)是分開的）缚柏，該怎么做呢苹熏？
我們以 WebContent 文件夾為基礎(chǔ)，在 WebContent 文件夾中創(chuàng)建 buttondemo 子文件夾币喧，然后在 buttondemo 文件夾中創(chuàng)建 view 和 controller 兩個(gè)文件夾轨域，分別放置 view 文件和 controller 文件。最終的文件夾結(jié)構(gòu)如下：
選中 buttondemo 文件夾杀餐，通過菜單：File -> New -> Other -> SAPUI5 Application Development
點(diǎn)擊Next按鈕干发，Development Paradigm 選擇 JavaScript， View name輸入為buttondemo史翘，然后點(diǎn)擊Finish枉长。
此時(shí)，Eclipse 將 buttondemo.view.js 和 buttomdemo.controller.js 兩個(gè)文件都放在同一個(gè)文件夾中琼讽。將 buttomdemo.controller.js 文件移到 WebContent/buttondemo/controller 文件夾中搀暑。
為了讓 OpenUI5 能找到相關(guān)文件，我們需要對(duì)代碼做如下幾個(gè)變更跨琳。
- 在 index.html 文件中申明 buttondemo 文件夾的位置：
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"buttondemo":"./buttondemo"}'>
</script>
2）index.html 文件中申明一個(gè) jsview，view name 為buttondemo.view.buttondemo桐罕。這樣 OpenUI5 就在 ./buttondemo/view 文件夾下查找 buttondemo.view.js 文件脉让。注意viewname: "buttondemo.view.buttondemo" 中最后一個(gè)buttondemo 就是 view 代碼文件的名稱。
<script>
var app = new sap.m.App({initialPage:"masterpage"});
var page = sap.ui.view({
id:"masterpage",
viewName:"buttondemo.view.buttondemo"
type: "JS"});
app.addPage(page);
app.placeAt("content");
</script>
- 將 buttondemo.view.js 文件的
getControllerName()函數(shù)的buttomdemo.view.buttondemo修改為buttomdemo.controller.buttondemo功炮。因?yàn)?buttondemo 被注冊(cè)為index.html文件所在文件夾下的 buttondemo 文件夾溅潜，所以 OpenUI5 在./buttondemo/controller文件夾中查找 buttondemo.controller.js 文件。
getControllerName : function() {
return "buttondemo.controller.buttondemo";
},
- 將 buttondemo.controller.js 文件中
sap.ui.controller()的第一個(gè)參數(shù)變更為buttondemo.controller.buttondemo薪伏。
最后貼出完整代碼
index.html 文件：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"buttondemo":"./buttondemo"}'>
</script>
<script>
// sap.ui.localResources("zsapui5_button_mvc");
var app = new sap.m.App({initialPage:"masterpage"});
var page = sap.ui.view({
id:"masterpage",
viewName:"buttondemo.view.buttondemo"
type: "JS"});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody sapUiResponsiveMargin" role="application">
<div id="content"></div>
</body>
</html>
buttomdemo.view.js 文件
sap.ui.jsview("buttondemo.view.buttondemo", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf buttondemo.view.buttondemo
*/
getControllerName : function() {
return "buttondemo.controller.buttondemo";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf buttondemo.view.buttondemo
*/
createContent : function(oController) {
var oButton = new sap.m.Button({
text: "Please click.",
press: oController.onButtonPressed
});
return oButton;
}
});
buttondemo.controller.js 文件
sap.ui.controller("buttondemo.controller.buttondemo", {
onButtonPressed: function() {
alert("Hello");
}
});
