Sie sind auf Seite 1von 3

Es ist nicht sehr sinnvoll direkt in der SAP UI5 API ein paar Codebeispiele rauszukopieren und diese

dann anzupassen, ohne berhaupt richtig Javascript zu knnen.


Um wirklich effektiv mit UI5 programmieren zu knnen, empfiehlt es sich die folgenden Punkte
Schritt fr Schritt abzuarbeiten. Dies bedeutet zwar einen erhhten Aufwand am Anfang und man
kann nicht direkt mit UI5 programmieren, dafr versteht man jedoch spter wirklich was man macht
und ist dann auch viel schneller beim entwickeln und beim debuggen.
Generell ist es empfehlenswert immer das gelernte in bungen anzuwenden. Zum Beispiel kann man
am Anfang eine Fussballtabelle mit HTML entwickeln und spter die Styles in CSS auslagern. So kann
man seine bung Schritt fr Schritt erweitern
HTML Grundlagen
Aufbau eines HTML Dokument
DOM
Grundlegende Elemente und Attribute
Es ist notwendig den grundlegenden Aufbau des DOM Trees zu verstehen, um spter damit arbeiten
zu knnen (z.B. mit jQuery).
Alle gngigen Elemente und Attribute sollten bekannt sein, um vorhandenen Code analysieren zu
knnen.
CSS Grundlagen
Styleklassen definieren und verwenden
CSS Selektoren (und Pseudo-Klassen)
eventuell Transitionen und Animationen
Wie benutzt man CSS?
Styleklassen sollten definiert werden und angewendet werden knnen.
Man sollte vertraut sein mit den CSS Selektoren (class und id).
Animationen sind nicht unbedingt notwendig, aber man kann damit sehr schnell und einfach schne
Effekte einbauen.
Javascript Grundlagen
Syntax, Grammatik
Function, Object
this-Kontext, Scope, globaler Kontext
Name-spacing Pattern
Zuerst eignet man sich die Syntax und Grammatik der Sprache an. Dazu gehrt auch sich mit
Datentypen etc. zu beschftigen.
Wie definiert man eine Funktion und wie verwendet man sie? Welche unterschiedlichen
Mglichkeiten gibt es eine Funktion zu speichern? (Stichwrter: anonyme Funktionen, Funktionen als
Variablen, selbstausfhrende Funktionen, normale Funktionen)

Man sollte wissen wie ein Objekt aufgebaut ist (Properties) und wie man eine Konstruktorfunktion
definiert.
Besonders viel Wert sollte auf den Kontext und den Scope gelegt werden! Das ist wichtig um
Funktionsaufrufe richtig zu positionieren und um debuggen zu knnen. Dabei sollte man sich den
this-Kontext, den lokalen Scope und den globalen Kontext (Window) anschauen.
Name-spacing Patterns werden auch von SAP verwendet. Wenn man den Aufbau von Objekten
versteht, ist das Name-spacing ganz simpel.
Je mehr man sich mit der Sprache JavaScript beschftigt und je besser man sie versteht, umso
einfacher fllt spter das Programmierem mit SAP UI5.
JQuery Grundlagen
Sizzle Engine (=jQuery Selektoren)
DOM Manipulation
Events
jQuery wird von UI5 verwendet und man sollte deshalb die Grundlagen beherrschen.
Auerdem ist es sehr hilfreich um das DOM zur Laufzeit zu manipulieren.
jQuery kann vieles erleichtern und vor Allem lassen sich einige Dinge damit schneller programmieren
Man sollte sich mit der Sizzle Engine beschftigen (Wie selektiere ich DOM-Elemente) und es schadet
nicht, wenn man sich mit Events auskennt.
SAP UI5 Developer Guide
MVC
Controls verwenden knnen
Notepad Controls selber entwickeln
Data Model (oData)

Die SAP UI5 API bietet einen sehr guten Developer Guide, dessen Tutorials sehr verstndlich sind
Zuerst ist es wichtig das Model-View-Controler Prinzip zu verstehen.
Anschlieend kann man im Menpunkt Controls anfangen ein paar UI5 Controls anzuschauen und
versuchen sie ganz simple zu verwenden. Dabei sind die vorgegebenen Codebeispiele sehr hilfreich
Mchte man weiter gehen und eigene Controls programmieren bzw. UI5 Controls um eigene
Implementierungen erweitern, gibt es im Developer Guide ein Tutorial Defining/Creating a new
Control.
Wenn man in einem System mit Datenanbindung ans Backend arbeitet, sollte man sich das Data
Model (oData) anschauen. Um es dann anzuwenden, holt man sich aber am Besten Hilfe aus der
Abteilung, da die Entwickler dort schon wissen wie man mit den Daten des jeweiligen Systems
umgeht.





Die Abbildung stellt einen mglichen Einarbeitungsprozess in UI5 graphisch dar. Er muss aber nicht
genauso aussehen. Wichtig ist, dass die auf Seite 1/2 genannten Punkte abgearbeitet werden.