2017-04-21 65 views
0

喜的專家,sapui5:如何從一個視圖通過表中的列到其他

我是一個很新的sapui5並在list.view.js一以下情形,我定義一個簡單的表:

(function() { 
    "use strict"; 

sap.ui.jsview("fst.app.cList", { 

    getControllerName: function() { 
     return "fst.app.cList"; 
    }, 

    createContent: function (oController) { 

     //Back button 
     var oBackButton = new sap.m.Button({ 
      text: "Back", 
      icon: "sap-icon://arrow-left", 
      press: oController.handleButtonPress 
     }); 

     //New contract button 
     var oNewButton = new sap.m.Button({ 
      text: "New", 
      icon: "sap-icon://add-document", 
      press: oController.addNewButtonPress 
     }); 

     //Spacer 
     var oSpacer = sap.m.ToolbarSeparator(); 

     //Table body 
     var oTable = sap.m.Table({ 
      insert: true, 
      headerText: "List of Items", 
      headerDesign: sap.m.ListHeaderDesign.Standard, 
      mode: sap.m.ListMode.None, 
      includeItemInSelection: false 
     }); 

     //Columns 
     var col01 = new sap.m.Column("col01", { 
      header: new sap.m.Label({ 
       text: "Number" 
      }) 
     }); 
     oTable.addColumn(col01); 

     var col02 = new sap.m.Column("col02", { 
      header: new sap.m.Label({ 
       text: "Product" 
      }) 
     }); 
     oTable.addColumn(col02); 

     var col03 = new sap.m.Column("col03", { 
      header: new sap.m.Label({ 
       text: "Date" 
      }) 
     }); 
     oTable.addColumn(col03); 

     var colItems = new sap.m.ColumnListItem("colItems", { 
      type: "Active" 
     }); 
     oTable.bindAggregation("items", "/value", colItems); 

     var txtNAME = new sap.m.Text("txtNAME", { 
      text: "{ProductID}" 
     }); 
     colItems.addCell(txtNAME); 

     var txtNAME2 = new sap.m.Text("txtNAME2", { 
      text: "{ProductName}" 
     }); 
     colItems.addCell(txtNAME2); 

     var txtNAME3 = new sap.m.Text("txtNAME3", { 
      text: "{UnitsInStock}" 
     }); 
     colItems.addCell(txtNAME3); 

     var page = new sap.m.Page({ 

      title: "Test", 
      enableScrolling: false, 
      content: [oBackButton, oSpacer, oNewButton, oTable] 

     }); 

     return page; 
    } 
    }); 
})(); 

當按鈕(oNewButton)被點擊新視圖將被稱爲(new.view.js)。在這個視圖中,我想使用第一個視圖中的列來創建表單。

任何人都可以給我一些tipps如何以最好的方式實現這樣的場景嗎?

在此先感謝和問候。 Denis

回答

0

從一個視圖導航到另一個視圖的最佳方式是使用路由器。查看這個快速教程,瞭解它是如何工作的。 https://sapui5.hana.ondemand.com/#docs/guide/1b6dcd39a6a74f528b27ddb22f15af0d.html

要在導航中傳遞參數我猜你有兩個選擇。 1.-將它們作爲路由模式中的參數傳遞。那些將出現在散列路徑中。選中此模式選項: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.core.sample.PatternMatching/preview

2.-如果必須傳遞許多字段,請在組件作用域中創建一個模型。組件範圍可以從所有視圖訪問。只需使用sap.ui.getCore().setModel()並在目標視圖sap.ui.getCore()。getModel() 然後將你從Core獲得的Model設置到你有表單的容器中。 這裏一個片段:https://jsbin.com/tekisokevu/edit?html,output

<!DOCTYPE html> 
 
<html><head> 
 
\t <meta http-equiv='X-UA-Compatible' content='IE=edge' > 
 
\t <meta charset="UTF-8" > 
 
\t <title>test</title> 
 

 
\t <script id='sap-ui-bootstrap' 
 
\t \t \t src='https://sapui5.hana.ondemand.com/1.38.5/resources/sap-ui-core.js' 
 
\t \t data-sap-ui-theme='sap_bluecrystal' 
 
\t \t data-sap-ui-bindingSyntax="complex"></script> 
 

 
\t <script id="view1" type="sapui5/xmlview"> 
 
\t \t <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"> 
 
\t \t \t <core:ComponentContainer name='my.comp'/> 
 
\t \t </mvc:View> 
 
\t </script> 
 

 
\t <script id="home" type="sapui5/xmlview"> 
 
\t \t <mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" 
 
\t \t \t controllerName="my.controller1"> 
 
\t \t \t <Page> 
 
\t \t \t \t <Table id="myTable"> 
 
        <headerToolbar> 
 
         <Toolbar> 
 
          <Title text="Modify the column names and press + ==> " /> 
 
          <ToolbarSpacer/> 
 
          <Button icon="sap-icon://add" press="onAddPress"/> 
 
         </Toolbar> 
 
        </headerToolbar> 
 
        <columns> 
 
         <Column> 
 
          <Input palceholder="Column Name" value="Column1"/> 
 
         </Column> 
 
         <Column> 
 
          <Input palceholder="Column Name" value="Column2"/> 
 
         </Column> 
 
         <Column> 
 
          <Input palceholder="Column Name" value="Column3"/> 
 
         </Column> 
 
        </columns> 
 
        <items> 
 
         <ColumnListItem> 
 
          <cells> 
 
           <Text text="Text1" /> 
 
           <Text text="Text2" /> 
 
           <Text text="Text3" /> 
 
          </cells> 
 
         </ColumnListItem> 
 
         <ColumnListItem> 
 
          <cells> 
 
           <Text text="Text1" /> 
 
           <Text text="Text2" /> 
 
           <Text text="Text3" /> 
 
          </cells> 
 
         </ColumnListItem> 
 
         <ColumnListItem> 
 
          <cells> 
 
           <Text text="Text1" /> 
 
           <Text text="Text2" /> 
 
           <Text text="Text3" /> 
 
          </cells> 
 
         </ColumnListItem> 
 
        </items> 
 
       </Table> 
 
\t \t \t </Page> 
 
\t \t </mvc:View> 
 
\t </script> 
 

 
\t <script id="add" type="sapui5/xmlview"> 
 
\t \t <mvc:View xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" 
 
\t \t \t controllerName="my.controller2"> 
 
\t \t \t <Page id="page" showNavButton="true" navButtonPress="onBack"> 
 
       <VBox items="{columnsModel>/columns}"> 
 
        <items> 
 
        <HBox class="sapUiLargeMarginBegin"> 
 
         <Label text="{columnsModel>columnName}:" class="sapUiSmallMarginEnd sapUiSmallMarginTop"/> 
 
         <Input placeholder="{columnsModel>columnName} value"/> 
 
        </HBox> 
 
        </items> 
 
       </VBox> 
 
\t \t \t </Page> 
 
\t \t </mvc:View> 
 
\t </script> 
 
    
 
\t <script> 
 
\t \t // jQuery.sap.declare("my.comp.Component"); 
 
\t \t sap.ui.define("my/comp/Component", ["sap/ui/core/UIComponent"], function(UIComponent) { 
 
\t \t \t return UIComponent.extend("my.comp.Component", { 
 
\t \t \t \t metadata : { 
 
\t \t \t \t \t name : "GreatComponent", 
 
\t \t \t \t \t version : "1.0", 
 
\t \t \t \t \t includes : [], 
 
\t \t \t \t \t dependencies : { 
 
\t \t \t \t \t \t libs : ["sap.m"] 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t routing: { 
 
\t \t \t \t \t \t config: { 
 
\t \t \t \t \t \t \t routerClass: "sap.m.routing.Router", 
 
\t \t \t \t \t \t \t viewType: "XML", 
 
\t \t \t \t \t \t \t viewPath: "my", 
 
\t \t \t \t \t \t \t controlId: "app", 
 
\t \t \t \t \t \t \t transition: "slide", 
 
\t \t \t \t \t \t \t controlAggregation: "pages" 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t routes: [ 
 
\t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t name: "home", 
 
\t \t \t \t \t \t \t \t pattern: "", 
 
\t \t \t \t \t \t \t \t target: "home" 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t name: "add", 
 
\t \t \t \t \t \t \t \t pattern: "add", 
 
\t \t \t \t \t \t \t \t target: "add" 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t ], 
 
\t \t \t \t \t \t targets: { 
 
\t \t \t \t \t \t \t home: { 
 
\t \t \t \t \t \t \t \t viewName: "Home", 
 
\t \t \t \t \t \t \t \t title: "home" 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t add: { 
 
\t \t \t \t \t \t \t \t viewName: "Add", 
 
\t \t \t \t \t \t \t \t title: "add" 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t }, 
 
\t \t \t \t init: function() { 
 
\t \t \t \t \t sap.ui.core.UIComponent.prototype.init.apply(this, arguments); 
 
\t \t \t \t \t var oRouter = this.getRouter(); 
 
\t \t \t \t \t var oViews = oRouter.getViews(); 
 
\t \t \t \t \t this.runAsOwner(function() { 
 
\t \t \t \t \t \t var myHome = sap.ui.xmlview({viewContent:jQuery('#home').html()}); 
 
\t \t \t \t \t \t oViews.setView("my.Home", myHome); 
 
\t \t \t \t \t \t var myAdd = sap.ui.xmlview({viewContent:jQuery('#add').html()}); 
 
\t \t \t \t \t \t oViews.setView("my.Add", myAdd); 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t oRouter.initialize(); 
 
\t \t \t \t }, 
 
\t \t \t \t createContent : function() { 
 
\t \t \t \t \t var componentData = this.getComponentData(); 
 
\t \t \t \t \t return new sap.m.App("app", { 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }); 
 
     
 
\t \t sap.ui.define("my/controller1", [ 
 
      "sap/ui/core/UIComponent" 
 
     ],function(UIComponent) { 
 
\t \t \t return sap.ui.controller("my.controller1", { 
 
\t \t \t \t onInit: function() { 
 
\t \t \t \t \t this.oRouter = UIComponent.getRouterFor(this.getView()); 
 

 
        var oModel = new sap.ui.model.json.JSONModel(); 
 
        var oData = { 
 
         columns: [] 
 
        } 
 
        oModel.setData(oData); 
 
        sap.ui.getCore().setModel(oModel, "columnsModel"); 
 
\t \t \t \t }, 
 
       
 
\t \t \t \t onAddPress: function() { 
 
        var aColumnsNames = []; 
 
        var aColumns = this.getView().byId("myTable").getColumns(); 
 
        for (var i=0; i<aColumns.length; i++){ 
 
         var sColumnName = aColumns[i].getHeader().getValue(); 
 
         var oItem = {columnName: sColumnName}; 
 
         aColumnsNames.push(oItem); 
 
        } 
 
        sap.ui.getCore().getModel("columnsModel").setProperty("/columns", aColumnsNames); 
 
        
 
        
 
\t \t \t \t \t this.oRouter.navTo("add"); 
 
       } 
 
\t \t \t }); 
 
\t \t }); 
 
     
 
\t \t sap.ui.define("my/controller2", [ 
 
      "sap/ui/core/UIComponent" 
 
     ],function(UIComponent) { 
 
\t \t \t return sap.ui.controller("my.controller2", { 
 
\t \t \t \t onInit: function() { 
 
\t \t \t \t \t this.oRouter = UIComponent.getRouterFor(this.getView()); 
 
        
 
        var oModel = sap.ui.getCore().getModel("columnsModel"); 
 
        this.getView().byId("page").setModel(oModel, "columnsModel"); 
 
\t \t \t \t }, 
 
       onBack: function(){ 
 
        this.oRouter.navTo("home"); 
 
       } 
 
\t \t \t }); 
 
\t \t }); 
 
\t \t sap.ui.require(["my/comp/Component"], function(myComp) { 
 
\t \t \t // instantiate the View 
 
\t \t \t sap.ui.xmlview({viewContent:jQuery('#view1').html()}).placeAt('content'); 
 
\t \t }); 
 
\t </script> 
 

 
</head> 
 
<body class='sapUiBody'> 
 
\t <div id='content'></div> 
 
</body> 
 
</html>

相關問題