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

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.

Three different types of Button

Drei Buttonarten

Maybe Button is the most commen Control in all Apps. In UI5 we have 3 kinds of Button. Besides sap.m.Button there are sap.m.SegmentedButton and sap.m.ToggleButton. SegmentedButton is used when user should select one option from one small group. ToggleButton is used to switch between different states.

Vielleicht ist Button die gebräuchlichste Controlle. In UI5 haben wir 3 Buttonarten. Außerdem sap.m.Button gibt as sap.m.SegmentedButton und sap.m.ToggleButton. SegmentedButton ist dafür, dass man ein Möglichkeit von einer Gruppe auswählt. ToggleButton ist für Umschalten zwischen zwei Zuständen.

Difference between SPACE and ENTER

Unterschied zwieshcen SPACE und ENTER

Maybe you have already known, that we could use SPACE and ENTER keys on keyboard to use Button. But do you know the difference between them? Let’s see the code in Button.js.

Vielleicht haben Sie gewusst, dass man kann Button mit SPACE und ENTER Taste benutzen. Aber wissen Sie den Unschied? Jetzt lesen wir den Code in Button.js.

Can you see the difference now? For ENTER the PRESS event is fired when the key is pressed down. And for SPACE it is fired when the key is up. Give it a try in this sample, when you hold the ENTER key, the Toast keeps appearing. But it’s not for SPACE.

Wissen Sie das Unterschied jetzt? Für ENTER schießt das Event, wenn die Taste wird niederdrückt. Aber für SPACE schießt es, wenn die Taste ist oben. Probieren Sie mal in diese Sample, man kann die ENTER Taste behalten und der Toast auftauchen immer. Aber das ist nich für SPACE.

Have you noticed the “hover” state of a Button?

Haben Sie der “Hoverzustand” eines Button beachtet?

In UI5 Button has a state called “hover”. It’s a state, that user put the cursor on the Button but not click. So this state is only possible in a desktop app.

In UI5 hat Button einen Zustand nennt “hover”. Der ist ein Zustand, wenn man Mauszeiger auf dem Button liegen aber nicht klicken. Deshalb ist dieser Zustand möglich nur in eine Desktop-Anwendung.

ariaLabelledBy? ariaDescribedBy?

ariaLabelledBy? ariaDescribedBy?

In Demo-Kit we could see there are two Accosiations in Button, ariaLabelledBy and ariaDescribedBy. And we know they both are for Accessibility. But what’s the difference?

In Demo-Kit können wir zwei Accosiationen in Button sehen, ariaLabelledBy und ariaDescribedBy. Und wir wissen Sie sind beide für Accessibility. Aber was ist der Unterschied?

If ariaLabelledBy is set, then the text on the Button will be ignored. But it’s not for ariaDescribedBy. In the following example the Button will be read as “Bye” but not “Hello”.

Wenn ariaLabelledBy wird gesetzt, der Text des Button wird ignoriert. Aber es ist nicht für ariaDescribedBy. In das folgende Beispiel wird der Button als “Bye” aber nicht “Hello” gelesen.