[UI5] Things that Demo Kit didn’t tell you. <Image> / [UI5] Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat. <Image>

For English reader:

Hello I’m Cong, now I’m a developer in CEC Revenue Cloud in Chengdu, China. This blog is writter in both English and German (for learning purpose). Please just read the bold paragraphs and sorry for the inconvenience. Thanks a lot!

Für Deutsch Leser:

Hallo ich bin Cong. Jetzt bin ich ein Developer bei CEC 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.

Background

Background

About sap.m.Image actually there are not lots of things to say. Normally we only use it to show a image for decorative purpose. But as you could see in the documentation it has a mode called “Background”, and some other related properties. So I guessed, maybe i could set it as a background of some texts. Since a sap.m.Image only accept sap.m.LightBox as aggregations, so We could put a sap.m.Text after the Image and hope it could be shown on the image.

Über sap.m.Image tatsächlich gibt es nicht zu viele Dinge zu sagen. Normalerweise benutzen wir ein Image nur für dekoratives Zweck. Aber Sie können in der Dokumentation sehen, dass es einen Mode namens “Background” gibt, und es gibt manche verbundene Eigenschafts. Deshalb vermute ich, dass ich vielleicht ein Image als Background des Text setzen kann. Weil sap.m.Image akzeptiert nur sap.m.LightBox als Aggregation, wir setzen ein sap.m.Text danach. Und hoffen wir, dass es arbeiten kann.

But actually not. We could see the two <span> elements are at the same level. To show the text on the image, we could only set it as a child node. Then we edited the html to prove it.

Aber tatsächlich nicht. Wir kann sehen, dass die zwei <span> Elemente auf demselben Level sind. Um das Text auf dem Image zeigen, wir können nur es als Kindknoten setzen. Dann bearbeiten wir die Htmlcode.

But how can we achieve it with UI5 code? I asked this question to the colleage in UI5 team, and the answer is “not possible”. If we want to show a image as a background, the suggested way is using sap.ui.layout.BlockLayout.

Aber wie können wir es mit UI5 Code leisten? Ich fragte diese Frage zu einen Kollege von UI5 Team. Und die Antwort “nicht möglich”. Wenn wir einen Image als Background setzen möchten, die empfohlene Weise ist sap.ui.layout.BlockLayout.