For English reader:
Hello I’m Cong, now I’m a developer in Hybris Revenue Cloud in Chengdu, China. This blog is writter in both English and German (for learning purpose). Please just ignore the italic German paragraphsand sorry for the inconvenience. Thanks a lot!
Für Deutsch Leser:
Hallo ich bin Cong. Jetzt bin ich ein Developer bei Hybris Revenue Cloud in Chengdu, China. Ich möchte Programmierkenntnisse hier teilen und gleichzeitig mein Deutsch verbessern. Deshalb schreibe ich Blogs in Deutsch und Enghlish. Wenn Sie Syntaxfehler finden, oder mein Deutsch ist zu schlecht zu verstehen, bitte lesen Sie die English Version und sagen Sie mir den richtigen Ausdruck. Herzlich Dank und ich hoffe, dass Sie meinen Blog genießen. Prost!
For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.
Vielleicht ist Demo-Kit das sinnvollste Werkzeug für UI5-Developer. Da können wir viele Dokument und Beispiele finden. Aber manchmal gibt es noch einige Frage, die Demo-Kit nicht antwort kann. Deshalb möchte ich eine Blogserie “Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat” schreiben. In diese Serie erforsche ich Controls mit verschiedener Ressource, z.B. Quellcode, Fiori Guideline. Ich hoffe, dass diese Serie sinnvoll für Sie ist. Wenn Sie Fehler in meinem Blog finden, bitte hinweisen Sie mir. Danke schön. Der Katalog dieser Serie ist hier.
Could you tell the differences? Before this research I did not know. Now my answer is:
Wissen Sie die Unterschied? Vor die Erforschung habe ich keine Ahnung. Jetzt mein Antwort ist:
We always use sap.m.BusyIndicator to tell the user that current process is in a busy state. In Fiori Guidelines there are some very good examples.
Üblich benutzt man sap.m.BusyIndicator um Benutzer zu sagen, dass der aktueller Prozess busy ist. In Fiori Guidelines gibt es einige gute Beispiele.
And BusyIndicator is not always three dots. We could show a custom image on it and the image rotating. Additionally we could add a text under it.
BusyIndicator ist nicht immer drei Punkte. Wir können ein Bild zeigen. Und das Bild dreht sich. Zusätzlich können wir einen Text darunter zeigen.
After knowing sap.m.BusyIndicator, I thought making a control busy is just put a BusyIndicator on it. But actually not. Let's see how are the three cute dots added.
Nachdem ich sap.m.BusyIndicator gewusst habe, denke ich, dass es ein BusyIndicator auf die Kontrolle setzen um die Kontrolle busy zu machen. Aber tatsächlich ist es nicht. Sehen wir wie werden diese drei liebliche Punkte hinzufügt.
Here we could see in Control.js, when we set a control to busy, a new div is added as child node of the control. Inside of the div there are three div and they are the three dots. And they have some css-animation properties to make them blink. And a delay is added to the first two dots, to make them blink one by one.
Hier können wir in Control.js sehen, wenn man eine Kontrolle busy setzt, ein neu div wird in die Kontrolle als Kindknoten hinzufügt. Und darin gibt es drei div, die drei Punkte sind. Es gibt einige Css-Animation-Eigenschaften in der drei Punkte um sie blinkt zu machen. Und es setzt eine Verzögerung auf die erste zwei Punkte. Deshald blinken sie einer nach dem anderen.
To make the controll "real busy", it has to make it unfocusable.
Um die Kontrolle "echt busy" zu machen, sie wird nicht fokussierbar gemacht.
Firstly let's study the BusyIndicator with custom Image. It just add a sap.m.Image and set some css animation properties to it. And in the renderer if there is a custom image, it will be rendered as the BusyIndicator's content.
Zum erst erforschen wir BusyIndicator mit Bild. Er ist eigentlich ein sap.m.Image und darin gibt es einige CSS-Animation-Eigenschaften. In dem Renderer wird das Bild als Inhalt des BusyIndicator gerendert, wenn es ein Bild gibt.
But in the "else" block we could see, that the HTML is different from what we known. Where are the three small dots (three div child nodes)?
Aber das HTML in den "else" Block ist anders als das, was wir wissen. Wo gibt es die drei kleine Punkte (drei div Kindknoten)?
We all know that after a control is rendered, its function "onAfterRendering" will be invoked. And the "onAfterRendering" function of BusyIndicator is actually in the Control.js. And in there we could see that the three dots are added there. And it's similar to the process that we already known.
Wir alle wissen, dass nachdem eine Kontrolle gerendert wirt. Die "onAfterRendering" Funktion wird geruft. Und die "onAfterRendering" Funktion des BusyIndicator ist im Control.js. Dort können wir sehen, dass die drei Punkte hinzufügt werden. Der Prozess ist ähnlich zu das, was wir wissen schon.
Maybe you have also seen the Fiori "flower" BusyIndicator. Logic behind it could be found in jerry.wang's blog.
Vielleicht haben Sie auch Fiori "Blume" BusyIndicator gesehen. Die Logik können Sie in Blog von jerry.wang finden.
Hello I’m Cong, now I’m a developer in Hybris Revenue Cloud in Chengdu, China. This blog is writter in both English and German (for learning purpose). Please just ignore the italic German paragraphsand sorry for the inconvenience. Thanks a lot!
Für Deutsch Leser:
Hallo ich bin Cong. Jetzt bin ich ein Developer bei Hybris Revenue Cloud in Chengdu, China. Ich möchte Programmierkenntnisse hier teilen und gleichzeitig mein Deutsch verbessern. Deshalb schreibe ich Blogs in Deutsch und Enghlish. Wenn Sie Syntaxfehler finden, oder mein Deutsch ist zu schlecht zu verstehen, bitte lesen Sie die English Version und sagen Sie mir den richtigen Ausdruck. Herzlich Dank und ich hoffe, dass Sie meinen Blog genießen. Prost!
For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.
Vielleicht ist Demo-Kit das sinnvollste Werkzeug für UI5-Developer. Da können wir viele Dokument und Beispiele finden. Aber manchmal gibt es noch einige Frage, die Demo-Kit nicht antwort kann. Deshalb möchte ich eine Blogserie “Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat” schreiben. In diese Serie erforsche ich Controls mit verschiedener Ressource, z.B. Quellcode, Fiori Guideline. Ich hoffe, dass diese Serie sinnvoll für Sie ist. Wenn Sie Fehler in meinem Blog finden, bitte hinweisen Sie mir. Danke schön. Der Katalog dieser Serie ist hier.
Difference between "showing a sap.m.BusyIndicator" and "set busy property of a control as true"?
Unterschied zwischen "zeigen einen sap.m.BusyIndicator" und "setzen die Busy-Eingenschaft einer Kontrolle als true"?
Could you tell the differences? Before this research I did not know. Now my answer is:
- sap.m.BusyIndicator is a independent control.
- "Set busy property of a control as true" is:
- Showing a "BusyIndicator-like" div (very similar to but not a sap.m.BusyIndicator) on the control.
- Make the control unfocusable.
Wissen Sie die Unterschied? Vor die Erforschung habe ich keine Ahnung. Jetzt mein Antwort ist:
- sap.m.BusyIndicator ist eine unabhängige Kontrolle.
- "Setzen die Busy-Eingenschaft einer Kontrolle" ist:
- Zeigen ein "BusyIndicator-like" div (sehr ähnlich zum aber nicht ein sap.m.BusyIndicator) auf die Kontrolle.
- Dann ist die Kontrolle nicht fokussierbar.
What is a sap.m.BusyIndicator
Was ist ein sap.m.BusyIndicator
We always use sap.m.BusyIndicator to tell the user that current process is in a busy state. In Fiori Guidelines there are some very good examples.
Üblich benutzt man sap.m.BusyIndicator um Benutzer zu sagen, dass der aktueller Prozess busy ist. In Fiori Guidelines gibt es einige gute Beispiele.
And BusyIndicator is not always three dots. We could show a custom image on it and the image rotating. Additionally we could add a text under it.
BusyIndicator ist nicht immer drei Punkte. Wir können ein Bild zeigen. Und das Bild dreht sich. Zusätzlich können wir einen Text darunter zeigen.
How to make a control busy?
Wie kann man eine Kontrolle busy machen?
After knowing sap.m.BusyIndicator, I thought making a control busy is just put a BusyIndicator on it. But actually not. Let's see how are the three cute dots added.
Nachdem ich sap.m.BusyIndicator gewusst habe, denke ich, dass es ein BusyIndicator auf die Kontrolle setzen um die Kontrolle busy zu machen. Aber tatsächlich ist es nicht. Sehen wir wie werden diese drei liebliche Punkte hinzufügt.
Here we could see in Control.js, when we set a control to busy, a new div is added as child node of the control. Inside of the div there are three div and they are the three dots. And they have some css-animation properties to make them blink. And a delay is added to the first two dots, to make them blink one by one.
Hier können wir in Control.js sehen, wenn man eine Kontrolle busy setzt, ein neu div wird in die Kontrolle als Kindknoten hinzufügt. Und darin gibt es drei div, die drei Punkte sind. Es gibt einige Css-Animation-Eigenschaften in der drei Punkte um sie blinkt zu machen. Und es setzt eine Verzögerung auf die erste zwei Punkte. Deshald blinken sie einer nach dem anderen.
To make the controll "real busy", it has to make it unfocusable.
Um die Kontrolle "echt busy" zu machen, sie wird nicht fokussierbar gemacht.
How does sap.m.BusyIndicator work?
Wie funktioniert sap.m.BusyIndicator?
Firstly let's study the BusyIndicator with custom Image. It just add a sap.m.Image and set some css animation properties to it. And in the renderer if there is a custom image, it will be rendered as the BusyIndicator's content.
Zum erst erforschen wir BusyIndicator mit Bild. Er ist eigentlich ein sap.m.Image und darin gibt es einige CSS-Animation-Eigenschaften. In dem Renderer wird das Bild als Inhalt des BusyIndicator gerendert, wenn es ein Bild gibt.
But in the "else" block we could see, that the HTML is different from what we known. Where are the three small dots (three div child nodes)?
Aber das HTML in den "else" Block ist anders als das, was wir wissen. Wo gibt es die drei kleine Punkte (drei div Kindknoten)?
We all know that after a control is rendered, its function "onAfterRendering" will be invoked. And the "onAfterRendering" function of BusyIndicator is actually in the Control.js. And in there we could see that the three dots are added there. And it's similar to the process that we already known.
Wir alle wissen, dass nachdem eine Kontrolle gerendert wirt. Die "onAfterRendering" Funktion wird geruft. Und die "onAfterRendering" Funktion des BusyIndicator ist im Control.js. Dort können wir sehen, dass die drei Punkte hinzufügt werden. Der Prozess ist ähnlich zu das, was wir wissen schon.
Related Topic
Verwandtes Thema
Maybe you have also seen the Fiori "flower" BusyIndicator. Logic behind it could be found in jerry.wang's blog.
Vielleicht haben Sie auch Fiori "Blume" BusyIndicator gesehen. Die Logik können Sie in Blog von jerry.wang finden.
- SAP Managed Tags:
2 Comments
