SAP UI5 – Grundlagenwissen Teil 1 (HTML)

Nun hat das Management sich darauf geeinigt neue Wege zu gehen und einige Ihrer Anwendung auf das neue SAP Development Toolkit SAP UI5 umzustellen und Ihre Aufgabe soll es sein die Entwicklung zu übernehmen, jedoch sagt Ihnen SAP UI5 noch nicht mehr als Sie in dem normalen Buschfunk in der Firma gehört haben? Dann sind Sie genau meine Zielgruppe für diesen Beitrag.

Nach jahrelanger Arbeit mit der Workbench, ABAP und der SAP GUI kann es anfangs etwas schwierig sein sich für neue Entwicklungsumgebungen und Tools zu begeistern.

Der Umstieg auf neue Technologien und Programmiersprachen ist nicht immer leicht, da die Syntax sich doch manchmal gravierend unterscheidet. Aber lassen Sie sich nicht entmutigen, es kann eigentlich nur besser werden als die alte Workbench ohne Autovervollständigung, es sei denn Sie sind einer dieser wenigen gepriesenen Entwickler die auf einer NetWeaver Version arbeiten, die solche tollen Features schon bietet, der SAP Berateralltag, das wissen Sie bestimmt genauso gut wie ich, bietet solche Erleichterungen noch nicht. Für die Webentwicklung und auch SAP UI5 Entwicklung gibt es sehr gute Entwicklungsumgebungen, wie beispielsweise Eclipse für SAP UI5.

E-Book: App-Entwicklung

In diesem E-Book erhalten Sie eine Übersicht über die Entwicklung von Enterprise-Apps mit SAPUI5 und OData.

Jetzt anfordern

E-Book: App-Entwicklung

×

Ich möchte Ihnen in diesem Beitrag vermitteln, welche Grundlagen Sie sich zuerst aneignen sollten, falls Sie gerne in diese interessante und spannende Welt von dem SAP NetWeaver UI Development Toolkit for HTML5 eintauchen wollen. Das SAP NetWeaver UI Development Toolkit for HTML5, kurz SAP UI5, basiert auf den offenen Standards HTML5 und CSS. der Bibliothek von jQuery und der Skriptsprache JavaScript. Dieser Blogbeitrag ist der erste Teil einer Serie, die aus drei Teilen besteht. Die Beiträge umfassen einen schnellen Einstieg in die folgenden Technologien:

1. HTML5
2. CSS
3. JavaScript (DOM Baum)

Warum lasse ich jQuery mobile aus? Aus einem einfachen Grund, mein Kollege Daniel Tot hat schon mehrere ausführliche Blogs zu diesem Thema verfasst, auf die ich Sie gerne verweisen möchte. In diesem 1. Teil der Blogserie zu den zwingenden SAP UI5 Grundlagen geht es um die Basics zu HTML.

Websession: SAP UI5

Unsere SAP Berater kennen sich nicht nur im klassischen ABAP-Umfeld aus, sondern beherrschen auch die Oberflächentechnologie SAP UI5. In einer kostenlosen Websession besprechen wir Ihre Herausforderungen und Möglichkeiten.

Websession vereinbaren

HTML

HTML bedeutet Hypertext Markup Language. Bestimmt haben Sie schon alle von HTML gehört. Es wird dafür genutzt Webseiten zu erstellen. Die Formatierungssprache strukturiert Inhalte, seien es Texte, Bilder ect. und ermöglicht Ihnen in der nun 5. Version sogar Videos, Audiodateien und andere interessante Features wie zum Beispiel 3D-Grafiken einzubinden.

Um Webinhalte zu entwickeln reicht theoretisch ein einfacher Texteditor und ein gängiger Browser wie beispielsweise der Internet Explorer, Safari, Google Chrome oder Firefox. Ich habe bewusst die bekanntesten Browser erwähnt um auf ein gängiges Problem in der Webentwicklung zu sprechen zu kommen. Jeder Browser hat so seine Eigenheiten und interpretiert Ihre Entwicklung individuell. Daher sollten Sie Ihre Webseiten mindestens auf den gängigsten Browsern testen. Auch alte Versionen sollten getestet werden, da manche Firmen noch veraltete Internet Explorer betreiben.

HTML ist eine Definitionssprache und diese besteht aus HTML Elementen, beispielsweise dem Element p, welches einen Absatz darstellt. Diese Elemente werden von “Tags” umfasst. Beispielsweise ein Überschrift-Element h1 würde so aussehen:

<h1> Ich bin eine Überschrift</h1>

Ein öffnender Tag sieht so aus “< >” und ein schließender wie folgt “</ >”. Durch diese Syntax weiß der Browser, dass Ihre Überschrift im Tag <h1> bis zu dem schließendem Tag </> gültig ist. Diese HTML Elemente werden in die Website eingefügt, diese besteht aus fest definierten Teilen. Es gibt den sogenannten “head” und “body” einer HTML Seite. Eine standardmäßige HTML5 Seite wird wie folgt deklariert:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />

<title>New Web Project</title>

</head>

<body>

<h1>New Web Project Page</h1>

</body>

</html>

Wie sie sehen können wird als erstes der Dokumententyp deklariert. Ich nutze für Webentwicklungen das auf Eclipse basierende Aptana Studio. Erstellt man ein neues Projekt bekommt man diese “Schablone” in seinem Projekt erstellt.

Generell ist es ausreichend anzugeben, dass es sich um ein HTML Dokument handelt:

<!DOCTYPE html>

Ihr Seiteninhalt wird in dem <html> – Tag eingeschlossen. Daraufhin folgt der sogenannte “head” also der Kopfbereich der Webseite. Hier können Sie Metainformationen, wie hier beispielsweise das “charset” definieren. Hier ist die Zeichenkodierung “utf-8” definiert, dies stellt sicher, dass der Browser einige Sonderzeichen sowie Umlaute korrekt darstellt.

Im <body> -Tag fügen Sie nun den eigentlichen Inhalt Ihrer Webseite ein.

Sie können so viele Leerzeichen, Tabs und Leerzeilen zwischen Ihren Tags einfügen wie Sie möchten. Sie sollten versuchen mit Einrückung und genügend Leerzeilen den Code lesbar und übersichtlich zu halten, aber das ist für Sie ABAP Fuchs ja nichts Neues.

Ich stelle Ihnen nun die gängigsten Elemente vor:

Die bereits erwähnte Überschrift <h1 – h6>, je höher die Zahl hinter dem h desto kleiner wird die Überschrift. Ähnlich wie die Überschriften im Microsoft Word.

Das Element <p> stellt einen Absatz dar, hier können Sie Text einfügen.

<ol> ist eine geordnete Liste, <ul> eine ungeordnete Liste, <li> ein Listeneintrag, <br> beispielsweise ein Zeilenumbruch und ein oft genutztes Element ist das <div> Element, diesen können Sie als Bereich für fast alle Elemente nutzen.

Eine sehr simple Beispielsseite wäre folgende:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=“Content-Type” content=“text/html”; charset=”utf-8″ />

<title>New Web Project</title>

</head>

<body>

<h1>Grundlagenwissen für SAP UI5</h1>

<h2>Grundlagen Technologien für SAP NetWeaver UI Development Toolkit for HTML5</h2>

<div>

<p>

Auf der <i>Fachbereichsseite von </i>
<a href=“https://mission-mobile.de”> Mission Mobile</a>. können Sie interessante Neuigkeiten und Informationen <br>

zu allen aktuellen Themen rund um <b>mobile Anwendungen</b> finden.

</p>

</div>

</body>

</html>

Fügen Sie diesen Code in einen gängigen Texteditor und speichern Sie die Datei als “.html” Datei ab. Nach einem Doppelklick öffnet sich Ihr Browser und Sie sollten folgende Seite geladen haben:

SAP UI5 html Grundlagen 1

Die Tags <i> und <b> formatieren den Text, i steht für “italic” also kursiv und b für “bold” also dicke Schrift.

Das Element <a> ist eine Verlinkung auf das Element was in “href” steht, in diesem Fall unsere Fachbereichsleiter von Mission-Mobile.

Wir halten fest:

HTML wird genutzt um Inhalte semantisch auszuzeichnen und zu strukturieren. Ich hoffe Sie haben ein klein wenig in die spannende Welt von HTML5 schnuppern können und das Grundkonzept verstanden, was Ihnen einen leichteren Einstieg in das Thema Webentwicklung, auch mit SAPUI5, ermöglicht.

Ich kann Ihnen nur empfehlen, das Internet, die Fachliteratur und Foren zu durchforsten und einen Grundstein für Ihr Wissen zu HTML5 zu legen. Doch die Elemente sehen in Ihrer Grundform natürlich nicht schön und modern aus. Wie kann man hier sein Corporate Design einfügen?! Mit dieser Fragestellung kommen wir zu unserem zweiten Punkt CSS. CSS bedeutet Cascading Style Sheet. Diese Technologie wird genutzt, um Ihrer Website einen ordentlichen “Anstrich” zu verpassen, sprich Ihren durch HTML eingefügten Inhalt zu formatieren.

Unser Video-Kurs „ODATA Services im SAP UI5 Umfeld“

Limitierte Rabattaktion für unseren Kurs “OData Services im SAPUI5 Umfeld”.

Für Besucher von Mission Mobile können wir unseren Kurs „ODATA Services im SAP UI5 Umfeld“ mit kräftigem Rabatt anbieten:

Kurs: “ODATA Services im SAP UI5 Umfeld

PS: Wir haben den Rabatt nur für 20 Käufe erhalten. Falls Sie den Link klicken und keine Vergünstigung mehr angezeigt werden, ist unser Kontingent bereits aufgebraucht.

Ich danke Ihnen für Ihr Interesse an diesem Beitrag. Der nächste Teil befasst sich mit dem Cascading Style Sheet. Bei Fragen oder Anregung bezüglich HTML5 oder SAP UI5 nutzen Sie bitte die Kommentarfunktion, wir kommen dann so schnell wie möglich auf Sie zurück.

Johannes Behrndt

Seit über 10 Jahren berate ich große und mittelständische Unternehmen rund um mobile Lösungen, insbesondere im SAP-Umfeld. Ich habe den Überblick über die relevanten SAP-Prozesse und kenne die neuesten Technologien für mobile Lösungen.

Sie haben Fragen? Kontaktieren Sie mich!