SAP-samples · nicoschoenteich · Oct 24, 2022 · Oct 24, 2022 · Oct 24, 2022 · Oct 24, 2022
@@ -2,64 +2,11 @@
 
 # SAP CodeJam - UI5
 
-This repository contains the material for SAP CodeJam events on UI5.
+This branch of the repository contains [instructions](/instructions.md) on how to improve the performance of the bookshop application that can be found in the [main branch](https://github.com/SAP-samples/ui5-exercises-codejam/tree/main). 
 
-Please check the [prerequisites](/prerequisites.md) before the event an make sure you meet them.
+Furthermore, this branch was used for the corresponding session at Devtoberfest 2022: [Improving the Performance of UI5 Applications](https://groups.community.sap.com/t5/devtoberfest/improving-the-performance-of-ui5-applications/ec-p/9012#M42)
 
-## Overview
-
-The material in this repository introduces you to the core principles of UI5, an enterprise-ready web development framework used to build apps that follow the Fiori design guidelines. This repository is a step-by-step guide explaining how to build a frontend web application using UI5. The finished app is a bookshop app, where users can browse and order books. The app sits on top of the well-known [bookshop](https://github.com/SAP-samples/cloud-cap-samples/tree/main/bookshop) backend application built with the Node.js flavour of the [SAP Cloud Application Programming Model (CAP)](https://cap.cloud.sap/docs/).
-
-![The finished app](/finished-app.png)
-
-The finished UI5 bookshop app already exists in the [bookshop/app/finished-webapp](/bookshop/app/finished-webapp/) directory, but we want to rebuild it from scratch step by step. You can compare the finished app with your version in case you have issues along the way.
-
-After reading all chapters and following the instructions, you will be able to build your own UI5 applications leveraging the official [SAPUI5 API Reference](https://sapui5.hana.ondemand.com/#/api).
-
-## Previous Knowledge
-
-The material in this repository aims to be beginner friendly. If you have never built a (UI5) web app before, you will still be able to follow along. No prior knowledge is required, although it certainly helps to have experience in (web) development.
-
-The material includes additional explanations in collapsable sections (see example below), whenever a concept is used that web developers are probably already familiar with, but beginners might not be. You can decide for yourself whether you want to read or skip them. 
-
-See this example:
-
-<details>
-<summary>What is SAPUI5? 💬</summary>
-
-<br>
-
-> SAPUI5 is an HTML5 framework for creating cross-platform, enterprise-grade web applications in an efficient way.
->
-> See this [blog post](https://blogs.sap.com/2021/08/23/what-is-sapui5/) for more information.
-
-</details>
-
-## Material Organization
-
-The material consists of a series of chapters. The chapters build on top of each other and are meant to be completed in the given order. Each of the [chapters](/chapters/) has its own 'readme' file with explanations, instructions, code samples and screen shots.
-
-## Chapters
-
-0. [Preparing the Development Environment](/chapters/chapter00)
-1. [Scaffolding the App - Our First View](/chapters/chapter01)
-1. [Creating and Consuming Our First Model](/chapters/chapter02)
-1. [Creating and Extending Our First Controller](/chapters/chapter03)
-1. [Adding an 'Order' Feature to Our Bookshop](/chapters/chapter04)
-1. [Adding a 'Search' Feature to Our Bookshop](/chapters/chapter05)
-1. [Adding Custom Formatting](/chapters/chapter06)
-1. [Adding i18n Features](/chapters/chapter07)
-1. [Adding Custom CSS](/chapters/chapter08)
-1. [Deploying Our App](/chapters/chapter09) (Optional)
-1. [Further Improvements and Learning Material](/chapters/chapter10)
-
-## SAPUI5 vs. OpenUI5
-
-You will often read about either SAPUI5 or OpenUI5 when working with the framework. The main difference between the two is the license. Whereas SAPUI5 requires a license and is integrated into a lot of SAP products, OpenUI5 is open source and generally available under an Apache 2.0 license. SAPUI5 includes more libraries than OpenUI5, but the latter still contains all central functionality and most commonly used control libraries are identical in both deliveries.
-
-The material in this repository would work with both deliveries, but uses OpenUI5. For the sake of simplicity and to indicate that the material would work with SAPUI5, too, the material simply refers to the framework as 'UI5'.
-
-You can find more information about this in the [SAPUI5 Documentation](https://sapui5.hana.ondemand.com/#/topic/5982a9734748474aa8d4af9c3d8f31c0).
+![thumbnail](thumbnail.png)
 
 ## Support
 

@@ -0,0 +1,16 @@
+{
+  "name": "performance-webapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start:dist": "serve dist"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@ui5/cli": "^2.14.13",
+    "serve": "^14.0.1"
+  }
+}
@@ -0,0 +1,11 @@
+specVersion: '2.6'
+metadata:
+  name: performance-webapp
+type: application
+framework:
+  name: OpenUI5
+  version: "1.107.1"
+  libraries:
+    - name: sap.m
+    - name: sap.ui.core
+    - name: themelib_sap_horizon
@@ -0,0 +1,19 @@
+// configuration object
+window["sap-ui-config"] = {
+    "compatVersion": "edge",
+    "async": true,
+    "language": "en",
+    "resourceroots": {
+        "sap.codejam": "./"
+    },
+    "onInit": "module:sap/ui/core/ComponentSupport",
+    "theme": (function () {
+        // determine the proper theme for UI5 from current color scheme
+        try {
+            return window.matchMedia("(prefers-color-scheme: dark)").matches ? "sap_horizon_dark" : "sap_horizon";
+        } catch (ex) {
+            console.warn("window.matchMedia not supported - keep default theme");
+            return "sap_horizon";
+        }
+    })()
+};
@@ -0,0 +1,83 @@
+sap.ui.define([
+    "sap/ui/core/mvc/Controller",
+    "sap/ui/model/json/JSONModel",
+    "sap/ui/model/Filter",
+    "sap/ui/model/FilterOperator"
+], function (Controller, JSONModel, Filter, FilterOperator) {
+    "use strict";
+    return Controller.extend("sap.codejam.controller.App", {
+        onInit: function () {
+            this.getView().setModel(new JSONModel({
+                itemSelected: false,
+                selectedQuantity: 1
+            }), "userSelection")
+        },
+        onSelect: function (oEvent) {
+            let oModel = this.getView().getModel("userSelection")
+            let selectedModelPath = oEvent.getSource().getBindingContext().sPath
+            let selectedModelData = oEvent.getSource().getModel().getProperty(selectedModelPath)
+            oModel.setProperty("/selectedItemPath", selectedModelPath)
+            oModel.setProperty("/selectedItemData", selectedModelData)
+
+            oModel.setProperty("/selectedQuantity", 1)
+            this.getView().byId("orderStatus").setText("")
+            oModel.setProperty("/itemSelected", true)
+        },
+        onSubmitOrder: function () {
+            let oView = this.getView()
+            let userSelectionData = oView.getModel("userSelection").getData()
+
+            let reqSettings = {
+                "url": "/browse/submitOrder",
+                "method": "POST",
+                "timeout": 0,
+                "headers": {
+                    "Content-Type": "application/json"
+                },
+                "data": JSON.stringify({
+                    "book": userSelectionData.selectedItemData.ID,
+                    "quantity": userSelectionData.selectedQuantity
+                }),
+            }
+
+            let i18nModel = oView.getModel("i18n")
+            jQuery.ajax(reqSettings)
+                .done(function (response) {
+                    console.log(response)
+                    oView.byId("orderStatus")
+                        .setText(
+                            `${i18nModel.getProperty("orderSuccessful")} 
+                            (${userSelectionData.selectedItemData.title}, 
+                            ${userSelectionData.selectedQuantity} 
+                            ${i18nModel.getProperty("pieces")})`
+                        )
+                    oView.byId("orderStatus").setState("Success")
+
+                    let userSelectedPath = oView.getModel("userSelection").getProperty("/selectedItemPath")
+                    oView.getModel().setProperty(userSelectedPath + "/stock", response.stock)
+                    oView.getModel("userSelection").setProperty("/selectedItemData/stock", response.stock)
+                })
+                .fail(function(response) {
+                    console.log(response)
+                    oView.byId("orderStatus").setText(`${i18nModel.getProperty("Error")}`)
+                    oView.byId("orderStatus").setState("Error")
+                })
+        },
+        onSearch: function (oEvent) {
+            var aFilter = [];
+            var sQuery = oEvent.getParameter("newValue");
+            if (sQuery) {
+                aFilter.push(new Filter("title", FilterOperator.Contains, sQuery));
+            }
+            var oList = this.byId("booksTable");
+            var oBinding = oList.getBinding("items");
+            oBinding.filter(aFilter);
+
+            let oModel = this.getView().getModel("userSelection")
+            oModel.setProperty("/selectedItemPath", {})
+            oModel.setProperty("/selectedItemData", {})
+            this.getView().byId("orderStatus").setText("")
+            oModel.setProperty("/itemSelected", false)
+        }
+    });
+});
@@ -0,0 +1,10 @@
+    Bookshop=Buchhandlung
+    Book=Buch
+    Author=Autor
+    Genre=Genre
+    Price=Preis
+    Stock=Verfügbarkeit
+    Order=Bestellen
+    orderSuccessful=Bestellung erfolgreich
+    pieces=Stk.
+    Error=Fehler
@@ -0,0 +1,10 @@
+    Bookshop=Bookshop
+    Book=Book
+    Author=Author
+    Genre=Genre
+    Price=Price
+    Stock=Stock
+    Order=Order
+    orderSuccessful=Order successful
+    pieces=pcs.
+    Error=Error
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="./css/style.css">
+    <script src="boot.js" defer></script>
+    <script id="sap-ui-bootstrap" src="resources/sap-ui-custom.js" defer></script>
+</head>
+
+<body class="sapUiBody loading" id="content">
+    <div
+        data-sap-ui-component
+        data-name="sap.codejam"
+        data-id="container"
+        data-settings='{"id" : "codejam"}'>
+    </div>
+</body>
+
+</html>
@@ -0,0 +1,42 @@
+{
+    "sap.app": {
+        "id": "sap.codejam",
+        "type": "application",
+        "title": "CodeJam Bookshop",
+        "applicationVersion": {
+            "version": "1.0.0"
+        },
+        "dataSources": {
+            "capBooks": {
+                "uri": "/browse/Books?$expand=genre",
+                "type": "JSON"
+            }  
+        }
+    },
+    "sap.ui5": {
+        "rootView": {
+            "viewName": "sap.codejam.view.App",
+            "type": "XML",
+            "id": "app"
+        },
+        "dependencies": {
+            "minUI5Version": "1.107.1",
+            "libs": {
+                "sap.ui.core": {},
+                "sap.m": {}
+            }
+        },
+        "models": {
+            "models": {
+                "i18n": {
+                    "type": "sap.ui.model.resource.ResourceModel",
+                    "settings": {
+                        "bundleName": "sap.codejam.i18n.i18n",
+                        "supportedLocales": ["en", "de"],
+                        "fallbackLocale": "en"
+                    }
+                }
+            }
+        }
+    }
+}