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

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 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 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.

Text in a CheckBox

Text eines CheckBox

We all know that there is a property called “text” in CheckBox, if it is set there will be a text next to the CheckBox. But from the source code we could see that it is actually a Label but not a Text. And if it is set, it will be the label for the CheckBox.

Wir wissen, da gibt es eine Eigenschaft “text” in CheckBox. Wenn sie gesetzt wird, dann gibt es einen Text neben dem CheckBox. Aber in dem Quellcode können wir finden, dass der “Text” tatsächlich ein Label ist. Und er fungiert als den Label des CheckBox.

CheckBox in a form

CheckBox in einer Form

Normally when a we place a control in a form, the width of it will be adjusted to the grid which it belongs to.

Normalerweise wenn man einen Control in eine Form liegen, die Breite des Control wird als sein Grid setzen.

But for a CheckBox it is not the case. The width is adjusted only when there is a “text” (Label) in it. Some other controls like Link, Image, RadioButton have the same behavior.

Aber es ist nicht für einen CheckBox. Die Breite eines CheckBox wird gesetzt nur wenn es einen “Text” (Label) darin gibt. Einige andere Controls haben ähnliches Verhalten. Z.B. Link, Image und RadioButton.

CheckBox is larger than it looks

CheckBox ist größer als es aussieht

People are very easily to think CheckBox is just the small box, but acutally it’s not. To make it easier for a user to click, the area of a CheckBox is much larger. And if it has a text, the text is also clickable.

Man ist sehr lecht zu denken, dass CheckBox nur der klein Kasten ist. Tatsächlich ist es nicht. Um es lechter zu benutzen, der Bereich des CheckBox ist viel größer. Wess es einen Text gibt, der Text ist auch klickbar.