Added everything for Step 13: Element Binding

wridgeu · May 20, 2020 · ff5114c · ff5114c
1 parent c54bfd7
commit ff5114c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 7 deletions.
diff --git a/webapp/controller/Home.controller.js b/webapp/controller/Home.controller.js
@@ -1,7 +1,7 @@
 sap.ui.define(
   [
     "com/mrb/UI5-Data-Binding/controller/BaseController",
-    "sap/ui/model/json/JSONModel"
+    "sap/ui/model/json/JSONModel",
   ],
   function (BaseController, JSONModel) {
     "use strict";
@@ -12,7 +12,7 @@ sap.ui.define(
         var oModel, oMessageManager, oProductModel;
 
         oProductModel = new JSONModel();
-		    oProductModel.loadData("./model/Products.json");
+        oProductModel.loadData("./model/Products.json");
 
         oModel = new JSONModel({
           firstName: "Harry",
@@ -22,10 +22,10 @@ sap.ui.define(
             street: "Dietmar-Hopp-Allee 16",
             city: "Walldorf",
             zip: "69190",
-            country: "Germany"
+            country: "Germany",
           },
           salesToDate: 12345.6789,
-          currencyCode: "EUR"
+          currencyCode: "EUR",
         });
 
         //Set model globally for all views/controls (dirty) "sap.ui.getCore().setModel(oModel);""
@@ -34,12 +34,19 @@ sap.ui.define(
         this.getView().setModel(oModel);
 
         //set loaded JSON file as model with name 'products'
-		    this.getView().setModel(oProductModel, "products");
-        
+        this.getView().setModel(oProductModel, "products");
+
         //MessageManager is a singleton
         oMessageManager = sap.ui.getCore().getMessageManager();
         oMessageManager.registerObject(this.getView(), true);
       },
+      onItemSelected: function (oEvent) {
+        var oSelectedItem = oEvent.getSource();
+        var oContext = oSelectedItem.getBindingContext("products");
+        var sPath = oContext.getPath();
+        var oProductDetailPanel = this.byId("productDetailsPanel");
+        oProductDetailPanel.bindElement({ path: sPath, model: "products" });
+      },
     });
   }
 );
diff --git a/webapp/i18n/i18n.properties b/webapp/i18n/i18n.properties
@@ -13,11 +13,20 @@ salesToDate=Sales to Date
 panel1HeaderText=Data Binding Basics 
 panel2HeaderText=Address Details
 panel3HeaderText=Aggregation Binding
+panel4HeaderText=Product Details
 
 # Product list
 productListTitle=Product List
 stockValue=Current Stock Value
 
+# Product Details
+ProductID=Product ID
+ProductName=Product Name
+QuantityPerUnit=Quantity per Unit
+UnitPrice=Unit Price
+UnitsInStock=Number of Units in Stock
+Discontinued=Discontinued
+
 # Invoice List
 invoiceListTitle=Invoices
 statusA=New

diff --git a/webapp/i18n/i18n_de.properties b/webapp/i18n/i18n_de.properties
@@ -13,11 +13,20 @@ salesToDate=Verk\u00e4ufe bis zum heutigen Datum
 panel1HeaderText=Data Binding Grundlagen
 panel2HeaderText=Adressdetails
 panel3HeaderText=Aggregation Binding
+panel4HeaderText=Produktdetails
 
 # Product list
 productListTitle=Artikelliste
 stockValue=Lagerbestand Wert
 
+# Product Details
+ProductID=Produkt-ID
+ProductName=Produktname
+QuantityPerUnit=Menge pro Einheit
+UnitPrice=Preis der Einheit
+UnitsInStock=Lagerbestand
+Discontinued=Eingestellt
+
 # Invoice List
 invoiceListTitle=Rechnungen
 statusA=Neu

diff --git a/webapp/i18n/i18n_en.properties b/webapp/i18n/i18n_en.properties
@@ -13,11 +13,20 @@ salesToDate=Sales to Date
 panel1HeaderText=Data Binding Basics 
 panel2HeaderText=Address Details
 panel3HeaderText=Aggregation Binding
+panel4HeaderText=Product Details
 
 # Product list
 productListTitle=Product List
 stockValue=Current Stock Value
 
+# Product Details
+ProductID=Product ID
+ProductName=Product Name
+QuantityPerUnit=Quantity per Unit
+UnitPrice=Unit Price
+UnitsInStock=Number of Units in Stock
+Discontinued=Discontinued
+
 # Invoice List
 invoiceListTitle=Invoices
 statusA=New

diff --git a/webapp/view/Home.view.xml b/webapp/view/Home.view.xml
@@ -42,7 +42,7 @@
       <content>
         <List headerText="{i18n>productListTitle}" items="{products>/Products}">
           <items>
-            <ObjectListItem title="{products>ProductName}" number="{
+            <ObjectListItem press=".onItemSelected" type="Active" title="{products>ProductName}" number="{
 							parts: [
 								{path: 'products>UnitPrice'},
 								{path: '/currencyCode'}
@@ -66,5 +66,26 @@
         </List>
       </content>
     </Panel>
+    <Panel id="productDetailsPanel" headerText="{i18n>panel4HeaderText}" class="sapUiResponsiveMargin" width="auto">
+      <l:Grid defaultSpan="L3 M6 S12" containerQuery="true">
+        <Label text="{i18n>ProductID}:" />
+        <Input value="{products>ProductID}" />
+
+        <Label text="{i18n>ProductName}:" />
+        <Input value="{products>ProductName}" />
+
+        <Label text="{i18n>QuantityPerUnit}:" />
+        <Input value="{products>QuantityPerUnit}" />
+
+        <Label text="{i18n>UnitPrice}:" />
+        <Input value="{products>UnitPrice}" />
+
+        <Label text="{i18n>UnitsInStock}:" />
+        <Input value="{products>UnitsInStock}" />
+
+        <Label text="{i18n>Discontinued}:" />
+        <CheckBox selected="{products>Discontinued}" />
+      </l:Grid>
+    </Panel>
   </Page>
 </mvc:View>