day14

yogananda-muthaiah · Dec 14, 2024 · c65fe59 · c65fe59
1 parent 5e2444f
commit c65fe59
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 0 deletions.
diff --git a/aoc-day14/index.html b/aoc-day14/index.html
@@ -0,0 +1,57 @@
+<html>
+<head>
+     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+     <meta charset="utf-8">
+     <title>MVC with XmlView</title>
+
+     <script id='sap-ui-bootstrap'
+          src='https://ui5.sap.com/resources/sap-ui-core.js'
+          data-sap-ui-theme='sap_horizon'
+          data-sap-ui-libs='sap.m, sap.ui.core, sap.ui.layout'
+          data-sap-ui-compatVersion='edge'
+          data-sap-ui-async="true"
+          data-sap-ui-on-init="module:ui5/walkthrough/index"
+          data-sap-ui-resource-roots='{ "ui5.walkthrough": "./" }'>          
+     </script>
+
+     <script id="myXml" type="text/xmldata">
+          <mvc:View
+          height="100%"
+          xmlns:mvc="sap.ui.core.mvc"
+          xmlns="sap.m">
+          <Page
+               title="Title"
+               class="sapUiContentPadding sapUiResponsivePadding--header sapUiResponsivePadding--subHeader sapUiResponsivePadding--content sapUiResponsivePadding--footer"
+               showNavButton="true" >
+               <headerContent>
+                    <Button icon="sap-icon://action" tooltip="Share" />
+               </headerContent>
+               <subHeader>
+                    <OverflowToolbar>
+                         <SearchField />
+                    </OverflowToolbar>
+               </subHeader>
+               <content>
+                    <VBox>
+                         <Text text="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat" />
+                    </VBox>
+               </content>
+               <footer>
+                    <OverflowToolbar>
+                         <ToolbarSpacer/>
+                         <Button text="Accept" type="Accept" />
+                         <Button text="Reject" type="Reject" />
+                         <Button text="Edit" />
+                         <Button text="Delete" />
+                    </OverflowToolbar>
+               </footer>
+          </Page>
+     </mvc:View>
+
+     </script>
+
+
+     </head>
+     <body id='content' class='sapUiBody'>
+     </body>
+</html>
diff --git a/aoc-day14/index.js b/aoc-day14/index.js
@@ -0,0 +1,16 @@
+sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/core/mvc/XMLView", "sap/ui/model/json/JSONModel", "sap/m/MessageToast"],
+     function (Controller, XMLView, JSONModel, MessageToast) {
+          Controller.extend("myController", {
+               onInit: function () {
+                    var model = new JSONModel();
+                    this.getView().setModel(model);
+               },
+               onGenericTagPress: function () {
+                    MessageToast.show("The GenericTag is pressed.");
+               }
+          });
+
+          XMLView.create({definition: jQuery('#myXml').html()}).then(function (oView) {
+               oView.placeAt("content");
+          });
+     });
diff --git a/aoc-day14/readme.md b/aoc-day14/readme.md
@@ -0,0 +1,17 @@
+
+### Basics of Page, ToolBar and Bar
+* https://ui5.sap.com/#/api/sap.m.Page
+
+In this example, we are using index.html and index.js with boiler template to render the display of Page, Toolbar and also Bar together in one single page
+
+
+### References & Examples
+* https://ui5.sap.com/#/entity/sap.m.Page/sample/sap.m.sample.Page/code
+* https://ui5.sap.com/#/entity/sap.m.Page
+
+
+
+
+Disclaimer
+---
+Note: The examples provided are intended to help you learn step-by-step how to use UI5 controls. When designing an actual project, it should be based on the Node.js module.