Added everything for Step 9: Adding the Post Page

wridgeu · Jun 7, 2020 · e82e3a1 · e82e3a1
1 parent f9487f0
commit e82e3a1
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 15 deletions.
diff --git a/webapp/controller/Post.controller.js b/webapp/controller/Post.controller.js
@@ -0,0 +1,53 @@
+sap.ui.define(
+  ["./BaseController", "sap/ui/model/json/JSONModel", "../model/formatter"],
+  function (BaseController, JSONModel, formatter) {
+    "use strict";
+    return BaseController.extend("com.mrb.UI5-Testing.controller.Post", {
+      formatter: formatter,
+      /**
+       * Called when the worklist controller is instantiated.
+       * @public
+       */
+      onInit: function () {
+        // Model used to manipulate control states. The chosen values make sure,
+        // detail page is busy indication immediately so there is no break in
+        // between the busy indication for loading the view's meta data
+        var oViewModel = new JSONModel({
+          busy: false,
+        });
+        this.getRouter()
+          .getRoute("post")
+          .attachPatternMatched(this._onPostMatched, this);
+        this.setModel(oViewModel, "postView");
+      },
+      /**
+       * Binds the view to the post path.
+       *
+       * @function
+       * @param {sap.ui.base.Event} oEvent pattern match event in route 'object'
+       * @private
+       */
+      _onPostMatched: function (oEvent) {
+        var oViewModel = this.getModel("postView"),
+          oDataModel = this.getModel();
+        this.getView().bindElement({
+          path: "/Posts('" + oEvent.getParameter("arguments").postId + "')",
+          events: {
+            dataRequested: function () {
+              oDataModel.metadataLoaded().then(function () {
+                // Busy indicator on view should only be set if metadata is loaded,
+                // otherwise there may be two busy indications next to each other on the
+                // screen. This happens because route matched handler already calls '_bindView'
+                // while metadata is loaded.
+                oViewModel.setProperty("/busy", true);
+              });
+            },
+            dataReceived: function () {
+              oViewModel.setProperty("/busy", false);
+            },
+          },
+        });
+      },
+    });
+  }
+);
diff --git a/webapp/controller/Worklist.controller.js b/webapp/controller/Worklist.controller.js
@@ -3,14 +3,14 @@ sap.ui.define(
     "./BaseController",
     "sap/ui/model/json/JSONModel",
     "sap/m/library",
-    '../model/FlaggedType'
+    "../model/FlaggedType",
   ],
   function (BaseController, JSONModel, mobileLibrary, FlaggedType) {
     "use strict";
 
     return BaseController.extend("com.mrb.UI5-Testing.controller.Worklist", {
-      types : {
-        flagged: new FlaggedType()
+      types: {
+        flagged: new FlaggedType(),
       },
       /**
        * Called when the worklist controller is instantiated.
@@ -112,6 +112,17 @@ sap.ui.define(
           oViewModel.getProperty("/shareSendEmailMessage")
         );
       },
+      /**
+       * Event handler when a table item gets pressed
+       * @param {sap.ui.base.Event} oEvent the table selectionChange event
+       * @public
+       */
+      onPress: function (oEvent) {
+        this.getRouter().navTo("post", {
+          // The source is the list item that got pressed
+          postId: oEvent.getSource().getBindingContext().getProperty("PostID"),
+        });
+      },
     });
   }
 );
diff --git a/webapp/manifest.json b/webapp/manifest.json
@@ -94,15 +94,25 @@
           "target": [
             "TargetHome"
           ]
-        }
+        },
+				{
+					"pattern": "Post/{postId}",
+					"name": "post",
+					"target": "post"
+				}
       ],
       "targets": {
         "TargetHome": {
           "viewType": "XML",
           "viewLevel": 1,
           "viewId": "home",
           "viewName": "Worklist"
-        }
+        },
+				"post": {
+					"viewName": "Post",
+					"viewId": "post",
+					"viewLevel": 2
+				}
       }
     }
   }

diff --git a/webapp/view/Post.view.xml b/webapp/view/Post.view.xml
@@ -0,0 +1,14 @@
+<mvc:View controllerName="com.mrb.UI5-Testing.controller.Post" 
+    xmlns="sap.m" 
+    xmlns:mvc="sap.ui.core.mvc" 
+    xmlns:semantic="sap.m.semantic">
+    <semantic:FullscreenPage id="page" busy="{postView>/busy}" busyIndicatorDelay="0" navButtonPress=".onNavBack" showNavButton="true" title="{i18n>objectTitle}">
+        <semantic:content>
+            <ObjectHeader id="objectHeader" title="{Title}" number="{
+						path: 'Price',
+						formatter: '.formatter.numberUnit'
+					}" numberUnit="{Currency}" backgroundDesign="Translucent">
+            </ObjectHeader>
+        </semantic:content>
+    </semantic:FullscreenPage>
+</mvc:View>
diff --git a/webapp/view/Worklist.view.xml b/webapp/view/Worklist.view.xml
@@ -29,21 +29,15 @@
                     <Column width="80px" id="flaggedColumn" demandPopin="true" vAlign="Middle"/>
                 </columns>
                 <items>
-                    <ColumnListItem vAlign="Middle">
+                    <ColumnListItem vAlign="Middle" type="Navigation" press=".onPress">
                         <cells>
                             <ObjectIdentifier title="{Title}"/>
                             <Text text="{Category}"/>
-                            <ObjectNumber number="{path: 'Price',formatter: '.formatter.numberUnit'}" 
-                                          state="{path: 'Price',formatter: '.formatter.priceState'}" 
-                                          unit="{Currency}" />
-                            <ToggleButton id="flaggedButton"
-                            tooltip="{i18n>flaggedTooltip}"
-                            icon="sap-icon://flag"
-                            pressed="{
+                            <ObjectNumber number="{path: 'Price',formatter: '.formatter.numberUnit'}" state="{path: 'Price',formatter: '.formatter.priceState'}" unit="{Currency}" />
+                            <ToggleButton id="flaggedButton" tooltip="{i18n>flaggedTooltip}" icon="sap-icon://flag" pressed="{
                                 path: 'Flagged',
                                 type: '.types.flagged'
-                            }"
-                            class="sapUiMediumMarginBeginEnd"/>
+                            }" class="sapUiMediumMarginBeginEnd"/>
                         </cells>
                     </ColumnListItem>
                 </items>