Check out our new site which was another fun programming with the children , to get know when the surprise boxes appear .

Of course in UI5 with Business Application Studio .

image Programming with Children - Part 2

We’re over the birthdays project in ABAP, but frankly children want instant results.

So booting an ABAP/4 System on a laptop is time consuming for all of Us, and needs my cooperation. Let’s do it in JavaScript, and we’ll publish it on github.io whenever we’re ready. It will be awesome, even the classmates can use it on their/parents’ mobiles as well, because we will be responsive :).

The repository is available here.

This is an MVC application, we were poor for sake of simplicity and understanding.

The View

view/Event.view.xml

We created a Freestyle UI5 application using the Application Generator of the Fiori Toolkit plugin. The Fiori Toolkit is automatically set up, when You configure BAS for Fiori Development.

We aligned 2 title text below each other within the content aggregation of the generated page. First one has the static text referred from the translations files folder i18n. Second one we access from the controller and set the remaining time until Christmas as text each second.

As You can see the XML represents the view layout structure for You as programmer, it is easily to identify the elements. This is much better than the JS View approach, when we have to handle static layout arrangements.


This is the same approach, like in Windows WPF or Universal apps. SAP wasn’t also the Pionier in the world of OData and web development, but jumped into the business next to MS and nowadays forming the protocol and Cloud platforms. What You see in SAP was already present years ago at Microsoft. They had entity framework and asp.net OData mapping for that for years. SAP also tried the constrainted marriage of BOPF and OData by SADL, and You can feel the pain points as Fiori developer of that. Even we are talking about greenfield applications, when it comes to extension it becomes sometimes a big pain.

<mvc:View xmlns:cards="sap.f.cards"
    controllerName="apa.dani.program.eventcalculator.controller.Event"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:l="sap.ui.layout"
    displayBlock="true"
    xmlns="sap.m"
>
	<Shell id="shell">
		<App id="app">
			<pages>
		          <Page id="page" title="{i18n>title}">
			    <content>
                              <l:VerticalLayout class="sapUiContentPadding" id="mainContent">
                                <Title titleStyle="H1" id="idChristmasTitle" text="{i18n>christmasEve}"></Title>
                                <Title titleStyle="H2" id="idChristmasRemainingTimeTitle" text=""></Title>
                              </l:VerticalLayout>
                            </content>
			  </Page>
		       </pages>
		</App>
	</Shell>
</mvc:View>

The controller

controller\Event.controller.js

The fun part with mathematics. At least we know why the clock is turning around twice a day :). First we went ahead writing the calculation on a paper, then learned how to put that inside the onInit framework event handler at View initialization. onInit function participates as first controller event in the sequence of the view lifecycle. At least first we can hook in. This is before the DOM and controls getting rendered.

So we used variables because computers does not have brain, but through variables they can memorize things for operations. Defining a value of a variable with an assignment is like reading the paper and having the numbers in out head my Son :).

Few parts make worth to mention. The setInterval function can be used in JS to execute a function at every x milliseconds, in our case every 1 second.

You can see here also how-to retrieve translated text from the i18n folder, and how-to gain access to a control embedded in the View by its ID programatically. This is why we crossed through the M, because we did not use a model and binding. But this is enough for children.

sap.ui.define([
	"sap/ui/core/mvc/Controller"
],
	/**
	 * @param {typeof sap.ui.core.mvc.Controller} Controller
	 */
	function (Controller) {
		"use strict";

	  return Controller.extend("apa.dani.program.eventcalculator.controller.Event", {
	    onInit: function () {
                var countDownDate = new Date("Dec 24, 2021 18:00:00").getTime();
                var oChristmasTimerTitle = this.getView().byId("idChristmasRemainingTimeTitle");
                var sDays = this.getView().getModel("i18n").getResourceBundle().getText("days");
                var sHours = this.getView().getModel("i18n").getResourceBundle().getText("hours");
                var sMinutes = this.getView().getModel("i18n").getResourceBundle().getText("minutes");
                var sSecs = this.getView().getModel("i18n").getResourceBundle().getText("seconds");

                // Update the count down every 1 second
                var x = setInterval(function() {
                
                  // Get today's date and time
                  var now = new Date().getTime();
        
                  // Find the distance between now and the count down date
                  var distance = countDownDate - now;
                
                  // Time calculations for days, hours, minutes and seconds
                  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                
                  // Display the result in the title element
                  oChristmasTimerTitle.setText( days + " " + sDays + "  " + hours + " " + sHours + "  " + minutes + " " + sMinutes + "  " + seconds + " " + sSecs );
                
                  // If the count down is finished, write some text
                  if (distance < 0) {
                    clearInterval(x);
                    oChristmasTimerTitle.setText(this.getView().getModel("i18n").getResourceBundle().getText("reachedChristmas"));
                  }
                }, 1000);
			}
		});
	});

This project aimed to help young people like my son to understand the basic process how programs are born.
So what daddy is doing all day

What is a development environment: like the stomach of your mother, they grown up there by Your creativity. This is actually Your wrench.
Publishing: this is the long night we spent with Mom in the Hospital to present Your little brother.
What is GitHub: from where the programs are coming, their store.
Where they live and play: on a server or a phone etc. as a new instance from the GitHub for example with cloning.

Good opportunity to show simple things like variables and data types, and elements on a page and their purpose.

We spent all together few hours at evenings, 20 mins maximum each time to get know the tools and activities a programmer do, and we did the math on a paper first.

Most importantly, that was really a fun for everyone, and not a constraint:

Daddy, do You know why I love so much programming ?
Tell me my Son.
Because we can use mathematics, what I love so much!

I am really a happy father, to have a so beautiful family, and show what the world can provide for the little entities growing up. One of the professions is programming, but of course there are more outside. One is sure, daddy is a passionate software developer , who never says no, when someone knocks on his shoulder to do some programming together.

Share this content: