- 14. Dezember 2014

SAPUI5 Theme Designer – Teil 2: UI-Elemente mit CSS anpassen

In dem zweiten Teil der Serie über die SAPUI5 Themes und Anpassungsmöglichkeiten geht es speziell um die Möglichkeiten UI-Elemente mit CSS anzupassen. CSS bedeutet Cascading Style Sheet. Diese Technologie wird genutzt, um Ihren durch HTLM5 eingefügten Inhalt zu formatieren.

Wie bereits im 1. Teil der Blogserie zu SAPUI5 Theme Designer erwähnt gibt es zwei Möglichkeiten:

  • Ihre SAPUI5 Anwendung mit CSS anpassen
  • Eigene Themes im SAPUI5 Theme Designer erstellen

Heute zeige ich Ihnen wie Sie die erste Variante umsetzen können. Für dieses Beispiel nutze ich die Entwicklungsumgebung Eclipse LUNA, welche unter folgendem Link heruntergeladen werden kann: https://www.eclipse.org/downloads

Nutzen Sie unser Know How im Bereich SAP User Experience!
Wir beraten sie zu Vor- und Nachteilen der SAP UI-Technologien und unterstützen Sie bei Planung und Design Ihrer Applikationen.

Sie erhalten die Komplettlösung – Ihr Projekt machen wir zu unserem Projekt. Wir sind Ihr Dienstleiter für Ihr Entwicklungsprojekt, das den Anwender in den Mittelpunkt stellt.

Gerne spreche ich mit Ihnen über Ihre Ausgangslage und zeige Lösungsmöglichkeiten auf. Auf Wunsch unterbreite ich Ihnen im Anschluss ein unverbindliches Angebot.

Kontaktieren Sie mich: Telefon 0211.9462 8572-16 oder per E-Mail info@erlebe-software.de
Ingo Biermann, Fachbereichsleiter

Das SAPUI5 Plugin

Damit Sie reibungslos SAPUI5 Anwendungen entwickeln können brauchen Sie noch das Java SDK und natürlich die SAPUI5 Plugins. Das SAPUI5 Plugin können Sie bequem direkt aus Eclipse herunterladen über folgende Navigation: „HELP -> INSTALL NEW SOFTWARE“ und dann geben Sie folgenden Link in das Suchfeld ein: https://tools.hana.ondemand.com/luna.

SAPUI5 Theme Designer : Plugin aus Eclipse herunterladen

SAPUI5 Theme Designer : Plugin aus Eclipse herunterladen

Erstellen Sie nun ein SAPUI5 Projekt und wählen Sie in den folgenden Optionen den Ordner „SAPUI5 Application Development“ aus. Anschließend selektieren Sie „Application Project“.

Application Project selektieren

Application Project selektieren

Vergeben Sie einen Namen und entfernen Sie die Selektion des Haken bei „Create initial View“. Dies hat den Hintergrund, dass normalerweise die SAPUI5 Anwendungen nach dem Model View Controller Architekturmuster entwickelt werden. Für dieses sehr simpel gehaltene Beispiel reicht aber die index.html Seite um die verschiedenen Anpassungsmöglichkeiten mit CSS vorzustellen.

Kopieren Sie bitte folgenden Code in Ihr index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=„X-UA-Compatible“ content=„IE=edge“>
<script src=„resources/sap-ui-core.js“
id=„sap-ui-bootstrap“
data-sap-ui-libs=„sap.ui.commons“
data-sap-ui-theme=„sap_goldreflection“>
</script>
<script>var lo_button_1 = new sap.ui.commons.Button({
text : Press me!,
press : handleButtonClicked
});var lo_button_2 = new sap.ui.commons.Button(buttonWithID);
lo_button_2.setText(I have no event!);function handleButtonClicked() {
alert(Button has been pressed!);};lo_button_1.placeAt(content);
lo_button_2.placeAt(content);
</script></head>
<body class=„sapUiBody“ role=„application“>
<div id=„content“></div> </body>
</html>

Was bisher geschah

Es werden zwei Schaltflächen erstellt. Der erste Button besitzt einen Eventhandler, die Funktion handleButtonClicked, welcher bei Klick ausgeführt wird. Diese Buttons möchten wir nun im weiteren Verlauf mit CSS „stylen“.

Beide Buttons werden in den Container mit der ID „content“ eingefügt. Das Ergebnis sieht in der WebApp Preview wie folgt aus:

Ergebnis in der WebApp Preview

Ergebnis in der WebApp Preview

Drückt man den ersten Button wird ein Alert-Popup angezeigt:

Anzeige des Alert-Popup

Anzeige des Alert-Popup

Wie können diese Buttons jetzt mit CSS angepasst werden? Ähnlich wie bei dem JavaScript Coding kann ein Tag eingefügt werden <style> in dem Sie Ihre CSS-Definitionen einfügen können.

Fügen Sie unter dem ersten Skript Blog im Header bitte ein Style Tag ein:

<style>

</style>

Hier können nun CSS Befehle eingefügt werden. Es gibt verschiedene Selektoren, mit denen die HTML-Elemente ausgewählt werden können:

ID-Selektor

Dieser referenziert auf eine ID, die Sie einem HTML-Element auf Ihrer Webseite zugeordnet haben.

#footer{
font-size: 12px;
color:gray;
text-align: center;
padding-top: 90%;
}

Die Schaltfläche lo_button_2 hat bereits durch den Konstruktoraufruf eine ID, in diesem Fall „buttonWithID“:
var lo_button_2 = new sap.ui.commons.Button(„buttonWithID“);

Fügen Sie folgendes Coding in das <style> – Tag ein:

#buttonWithID {
background-color: red;
text-align: right;
width: 300px;
font-size: 15px;
}

Hierdurch erwarten wir, dass die Hintergrundfarbe des Buttons rot wird, der Text rechtsbündig angezeigt wird, die Breite der Schaltfläche 300px lang wird und die Schriftgröße auf 15px gesetzt ist.
Das Ergebnis sieht wie folgt aus:

Egebnis des Stylings

Egebnis des Stylings

Klassen-Selektor

Mit diesem Selektor adressieren Sie alle HTML-Elemente die der betreffenden Klasse zugehören.

.adress{
font-size: 9px;
color:gray;
}

Fügen Sie Ihrer Style Definition nun folgende Klasse hinzu: sapUiBtnS.sapUiBtnNorm.sapUiBtnStd

Diese ist die Klasse für die Standardbuttons, sprich der Klasse, der unsere zwei definierten Schaltflächen zugehören. Überschreiben wir hier CSS-Eigenschaften werden Sie für jeden Button genutzt.

Bitte löschen Sie den Inhalt des style-Tags und fügen folgenden neuen hinzu:

.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd{
background-color: yellow;
font: Helvetica;
text-align: left;
font-weight: bold;
width: 200px;
}

Das Ergebnis sieht wie folgt aus:

Anpassung über Klassen

Anpassung über Klassen

Ich hoffe Sie haben in diesem Beitrag gelernt, wie Sie Ihre UI-Elemente in Ihren SAPUI5 Anwendungen mit Cascading Style Sheet anpassen können.
Zu empfehlen ist diese Herangehensweise nur bei kleinen Anpassungen und nicht zu großen SAPUI5 Projekten. Andernfalls empfiehlt es sich eigene Themes zu definieren und diese zu verwenden. Wie das geht wird in dem nächsten Beitrag erklärt.

Vielen Dank für Ihr Interesse.

Haben Sie noch Anregungen, weitere Anpassungsmöglichkeiten die hier nicht genannt wurden oder Fragen? Dann zögern Sie nicht die Kommentarfunktion zu nutzen, wir helfen Ihnen gerne weiter.


SHARE



Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.