SAPUI5 (07) - MVC文件的名称和位置

来源：互联网发布：5118的子域名查询工具编辑：程序博客网时间：2024/06/05 22:41

使用MVC，model, view和controller的代码被分割放在不同的文件中，那么，sapui5如何确定view和controller的文件的名称和位置呢？有以下三种方法来声明文件的位置：

sap.ui.localResources()
jQuery.sap.registerModulePath()
bootstrap声明: data-sap-ui-resourceroots=’{“name”: “”}’

sap.ui.localResources()

在SAPUI5中，controller和view使用与module相同的名称进行定义和实例化。默认情况下，所有的文件都位于Web Application下的子文件夹resources文件夹下。如果开发人员想自己决定文件的位置，则要使用上面三种方法之一进行配置。如果我们注视掉sap.ui.localResources()
语句，运行时，提示以下错误（我使用的是Chrome浏览器）

sap.ui.localResources()语法：

sap.ui.localResources(sModuleNamePrefix);

将sModuleNamePrefix注册为html文件(比如index.html作为当前文件夹)下sModuleNamePrefix子文件夹。如果sModuleNamePrefix中含有点号，所有的点被替换成/。比如，view name为master，如果sap.ui.localResources("myapp.viewsforbutton");，则sapui在./myapp/viewforbutton文件夹下查找view文件的代码。文件的扩展名由view的类型决定。

jQuery.sap.registerModulePath()

jQuery.sap.registerModulePath(sModuleNamePrefix, sURL);

把sModuleNamePrefix注册为sURL，比如：jQuery.sap.registerModulePath("mainview", "./mainview/");把mainview注册为当前文件夹下的mainview文件夹。
这种方法能实现sap.ul.localResources()相同的功能，但更加灵活。

bootstrap申明resourcesroots

下面的声明实现上述同样功能。

<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>

指定view和controller的文件位置示例

在Eclipse中，通过File -> New -> Other -> SAPUI5 Application Development -> New View方式创建View，view和controller位于同一个文件夹下，一般情况下，这种位置安排做够而且挺方便的。如果我们想把View和Controller放在不同的文件夹下，该怎么做呢？

我们以WebContent文件夹为基础，在WebContent文件夹下创建buttondemo子文件夹，然后在buttondemo文件夹下创建view和controller两个文件夹，分别放置view的文件和controller的文件。最终的文件夹结构如下：

选中buttondemo文件夹，通过菜单：File -> New -> Other -> SAPUI5 Application Development

点击Next按钮，Development Paradigm选择JavaScript， View name输入为buttondemo，然后点击Finish。

这个时候，Eclipse将buttondemo.view.js和buttomdemo.controller.js两个文件都放在同一个文件夹下面。将buttomdemo.controller.js文件移到WebContent/buttondemo/controller文件夹下。

为了让sapui5能找到相关文件，我们需要对代码做如下几个变更。

1) 在index.html文件中申明buttondemo文件夹的位置。将buttondemo注册为当前文件夹下的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文件中申明一个jsview，view name为buttondemo.view.buttondemo。这样sapui5就在./buttondemo/view文件夹下查找buttondemo.view.js文件。注意viewname: "buttondemo.view.buttondemo"中最后一个buttondemo对应view代码文件的名称。

<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>

3) 将buttondemo.view.js文件的getControllerName函数的buttomdemo.view.buttondemo修改为buttomdemo.controller.buttondemo。因为buttondemo被注册为index.html文件所在文件夹下的buttondemo，所以sapui5在buttondemo下controller文件夹下查找buttondemo.controller.js文件。

    getControllerName : function() {        return "buttondemo.controller.buttondemo";    },

4) 将buttondemo.controller.js文件中`sap.ui.controller()的第一个参数变更为“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");    }});

1 0