我需要帮助开发UI5原型

时间:2015-03-03 11:50:39

标签: javascript html5 sapui5

我刚开始研究SAPUI5和Open UI5以及我在大学的最后一年项目,我不得不开发一个原型应用程序来展示它的特性和功能。 我正在YouTube上关注如何开发应用程序的视频教程,但出于某种原因,当我输入完全与视频相同的代码时,我没有相同的结果是我遗漏了任何工具视频没有解释开始。

如果我遗漏了所需的任何工具或者只有私人原型应用程序可以使用哪些工具,那么人们可以告诉我。

我已经下载了eclipse来开发应用程序并已安装 SAPUI5 - https://tools.hana.ondemand.com/juno和SAPUI5 - https://tools.hana.ondemand.com/luna作为新软件。

我正在观看的视频教程是

SAPUI5 - 购物车教程第1部分 - YouTube

如果有任何人可以帮助我,我将非常感激,我的意思是我不知道我是否错过了文件位置或者我的结构都错了可以有人给我几个白痴指南它将不胜感激!

感谢。

代码与视频相同:

指数:

<!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-resourceroots = '{
                "shoppingcart": "./shoppingcart",
                "sap.demo.cart": "./"
            }'
            data-sap-ui-theme="sap_bluecrystal">
    </script>
    <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme --       >

    <script>
            jQuery.sap.require("sap.demo.cart.common");

            new sap.m.Shell("Shell",{
                app: new sap.ui.core.ComponentContainer({
                    name: 'sap.demo.cart'
                })
            }).placeAt('content');

    </script>

</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
</html>

App.view.js:

sap.ui.jsview("shoppingcart.App", {

    /** 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 shoppingcart.App
    */ 
    getControllerName : function() {
        return "shoppingcart.App";
    },

    /** 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 shoppingcart.App
    */ 
    createContent : function(oController) {

        this.setDisplayBlock(true);

        return new sap.m.SplitApp("splitApp",{});
    }

});

common.js

jQuery.sap.declare("sap.demo.cart.common");

sap.demo.cart.common = {

        method1: function() {

            alert('metho1 called');

        }

}

component.js:

jQuery.sap.declare("sap.demo.cart.Component");

sap.ui.core.UIComponent.extend("sap.demo.cart.Component",{

    metadata: {

        routing: {

            config: {
                viewType: "JS",
                viewPath: "shoppingcart",
                targetControl: "splitApp",
                clearTarget: false,
                transition: "slide"
            },

            routes: [
                   {
                       pattern: "category/{catIndex}",
                       name: "category",
                       view: "SubCategory",
                       targetAggregation: "masterPages"
                   },
                   {
                       pattern: "",
                       name: "default",
                       view: "Category",
                       targetAggregation: "masterPages"
                   } 
            ]

        }

    },

    init: function() {

        jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
        jQuery.sap.require("sap.ui.core.routing.HashChanger");


        //call createContent
        sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

        this._router = this.getRouter();

        //initlialize the router
        this._routeHandler = new sap.m.routing.RouteMatchedHandler(this._router);
        this._router.initialize();


    },

    createContent: function() {

        var oView = sap.ui.view({
            id: "app",
            viewName: "shoppingcart.App",
            type: "JS",
            viewData: {component: this}
        });

        var oModel = new sap.ui.model.json.JSONModel('model/Product.json');
        oView.setModel(oModel,'products');

        var data = {

                items: []

        }

        var oCartModel = new sap.ui.model.json.JSONModel(data);
        oView.setModel(oCartModel,'cart');

        return oView;

    }


})

代码与视频完全相同,它的意思是从上面的代码创建一个拆分应用程序。

1 个答案:

答案 0 :(得分:0)

MK_HCC是对的。你需要sap.ui.localResources(&#34; folderNameWhereYourIndex.htmlFileIsLocated&#34;);

位置无关紧要。只需将其放在index.html文件中并添加一个。