2015-03-03 63 views
-1

我是新来研究SAPUI5和Open UI5以及我在大学的最后一年项目,我不得不开发一个原型应用程序来演示这个特性和功能。 我在YouTube上关于如何开发应用程序的视频教程,但由于某种原因,当我输入的代码完全像它在视频雷我没有相同的结果是有什么我失踪我错过任何工具视频并没有解释开始。我需要帮助开发一个UI5原型

如果我错过了任何所需的工具,或者只是一个私人原型应用程序可以使用什么工具,人们可以告诉我吗?

我已经下载了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; 

    } 


}) 

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

+0

向我们展示代码。 – Arunster 2015-03-03 11:52:58

+0

确定已添加到上面的原始文本。 – Jordan 2015-03-03 12:20:54

回答

0

MK_HCC是对的。你需要sap.ui.localResources(“folderNameWhereYourIndex.htmlFileIsLocated”);

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