SAPUI5 on SAP Web IDE

:‫ה‬ ‫מערכת‬ ‫משתמש‬ ‫ממשק‬ ‫פיתוח‬-SAP[ {Development(User
Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText
Markup Language)HTML5]SAPUI5‫במסגרת‬ }‫הפיתוח‬ ‫סביבת‬
‫מערכת‬ ‫של‬ ‫רשת‬ ‫הממוזגת/משולבת‬SAP( [Integrated
Development Environment)SAP Web IDE]
[1]Hello World!
[2]( ‫איתחול‬Bootstrap)
[3]( ‫מנהלים/פקדים‬Controls)
[4]‫מבטי‬‫במיחשוב‬ ‫נתונים‬ ‫ייצוג‬XML[Views(eXtensible Markup Language)XML]
[5]( ‫מנהלים‬Controllers)
( ‫ניספח‬Appendix:)-( ‫הקוד/הוראות‬ ‫תצורת‬ ‫שורות‬Source Code Lines)‫ללא‬( ‫ההסבר‬Explanation)
‫המ‬ ‫בדוגמה‬ ‫שימוש‬ ‫עושה‬ ‫הנוכחית‬ ‫המסגרת‬‫סורתי‬‫ת‬/‫מופתי‬‫ת‬(Classic Example):-Hello World‫מ‬ ‫כחלק‬‫פתיחת/הפעלת‬‫יישום‬‫חדש‬(
New Application Start)( ‫מההתחלה‬ ‫ממש‬From Scratch).‫נתאים‬ ,‫ראשית‬‫מבוא/תקציר‬‫ל‬‫תבני‬‫ו‬‫ת‬‫ה‬‫פיתוח‬‫ה‬‫בסיסי‬‫ות‬/‫יסודי‬‫ות‬/‫עקרוני‬‫ות‬
(Basic Development Paradigms Introduce)–:‫כגון‬-‫מנהל‬‫ה‬ ‫מבט‬‫תאמת‬-‫עיצוב/תבנית/מודל‬[(Model View Controller)MVC‫ו‬ ]-
‫כ‬‫ינון‬/‫ב‬‫י‬‫ס‬‫ו‬‫ס‬‫ה‬‫מבנה‬‫ה‬‫בסיסי/יסודי/עקרוני‬‫של‬‫ה‬‫יישו‬‫ם‬(stablishEetructurSasicBpplicationA).‫מכן‬ ‫לאחר‬(extN)‫נציג‬ ,‫מבוא/תקציר‬
‫תפיס‬‫ו‬‫ת/מושג‬‫י‬‫הנתונים‬ ‫כריכת‬‫העקרוני‬‫י‬/‫ם‬‫י‬( ‫ות‬Fundamental Data Binding Concepts Introduce)‫של‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬
:‫ה‬-SAP{[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]
SAPUI5‫ו‬ }-‫הרחבת/תוספת‬‫ה‬‫ייש‬‫ום‬(Application Extend);‫ש‬ ‫במידה‬‫חשבון‬ ‫ברשותך‬ ‫יש‬‫גישת‬‫פיתוח‬ ‫סביבת‬‫מ‬‫מ‬‫ו‬‫זג‬‫ת‬/‫משולבת‬‫של‬ ‫רשת‬
‫מערכת‬SAP[Account(Integrated Development Environment)SAP Web IDE]:-
p842183trial.dispatcher.hanatrial.ondemand.com-https://webide/
‫אליו‬ ‫להתחבר‬ ‫יהייה‬ ‫ניתן‬ ‫הרי‬

‫מערכת‬ ‫של‬ ‫רשת‬ ‫ממוזגת/משולבת‬ ‫פיתוח‬ ‫סביבת‬ ‫מערכת‬SAP[System(Integrated Development Environment)SAP
Web IDE]:‫הבא‬ ‫המסך‬ ‫את‬ ‫מציגה‬-
‫בחירת‬( ‫התפריט‬ ‫נתיב‬Menu Path Select)‫לצורך‬‫יצירת‬( ‫פרוייקט‬Project Creating):‫ש‬ ‫כך‬ ,‫רשת‬ ‫הממוזגת/משולבת‬ ‫הפיתוח‬ ‫סביבת‬
‫מערכת‬ ‫של‬SAP( [Integrated Development Environment)SAP Web IDE]‫תתאים‬‫יציר‬‫ה‬‫תקי‬‫ה‬‫חדשה‬(New Folder
Create):-webapp‫ה‬‫כולל‬‫ת‬(Contain)‫כלל‬ ‫את‬‫ה‬ ‫מקורות‬‫ייישום‬(Application Sources)‫ל‬ ‫הנדרשים‬( ‫הוראה‬ ‫נושא‬Tutorial);
‫ת‬‫י‬‫קי‬‫י‬( ‫ה‬Folder)‫משוייכת‬ ‫זו‬/‫מיוחסת‬(Refer)‫כ‬‫תקית‬‫ה‬‫יישום‬(FolderApplication):-webapp:‫כ‬-App Folder;‫ליצירת‬‫קובץ‬‫שורש‬
‫התגיות‬ ‫שפת‬HTML‫חדש‬[Root File Create(HyperText Markup Language)New HTML]:-Index.htm‫במסגרת‬‫תקית‬‫ה‬‫יישום‬(
FolderApplication):-
‫מערכת‬ ‫של‬ ‫רשת‬ ‫ממוזגת/משולבת‬ ‫פיתוח‬ ‫סביבת‬ ‫מערכת‬SAP[System(Integrated Development Environment)SAP
Web IDE]:‫הבא‬ ‫המסך‬ ‫את‬ ‫מציגה‬-

‫הקש‬‫ת‬/‫הקלד‬‫ת‬‫כפתור‬-( ‫הלחיצה‬Pushbutton Click):-Next.

‫הקש‬‫ת‬/‫הקלד‬‫ת‬‫כפתור‬-( ‫הלחיצה‬Pushbutton Click):-Finish;‫מערכת‬ ‫של‬ ‫רשת‬ ‫ממוזגת/משולבת‬ ‫פיתוח‬ ‫סביבת‬ ‫מערכת‬SAP
[System(Integrated Development Environment)SAP Web IDE]‫את‬ ‫מציגה‬‫הקוד/הוראות‬ ‫תצורת‬( ‫מקורי/ת‬Original
Source Code)–‫בעת‬ ‫הנכללת‬‫יצירת‬‫חדש‬ ‫פרויקט‬(New Project Create):-

‫כלל‬ ‫מחיקת‬‫תצורת‬‫הקוד/הוראות‬( ‫מקורי/ת‬Original Source Code Delete).
‫הקלדת/טעינת‬‫הקוד/הוראות‬ ‫תצורת‬‫חדש‬/‫ות‬(New Source Code Enter)‫ו‬-‫הקש‬‫ת‬/‫הקלד‬‫ת‬‫כפתור‬-( ‫הלחיצה‬Pushbutton Click):-
Save.
‫הקש‬‫ת‬/‫הקלד‬‫ת‬‫כפתור‬-( ‫הלחיצה‬Pushbutton Click):-Run

[1]Hello World!
‫ל‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText
Markup Language)HTML5]SAPUI5‫נתאים‬ ,}‫הבנית‬‫המ‬ ‫הדוגמה‬‫סורתי‬‫ת‬/‫מופתי‬‫ת‬(Classic Example Building):-Hello World
‫התגיות‬ ‫שפת‬ ‫באמצעות‬HTML( [HyperText Markup Language)HTML].‫בלבד‬
‫ה‬( ‫קובץ‬File):-Index.html‫ה‬ ‫במסגרת‬‫תקי‬‫ה‬(Folder):-webapp
<!DOCTYPE html>
<html>
<head>
‫חלק‬//‫קטע‬‫מיגזר/פלג‬(Section Part):‫ה‬-<head>:-‫את‬ ‫ישמש‬‫ה‬‫דפדפן‬(Browser)‫במסגרת‬( ‫המסמך‬ ‫פעילות‬ ‫הליך‬Document
Process).‫באמצעות‬( ‫תגי‬Tags):-<meta>‫להתאים‬ ‫ניתן‬‫התנהגות‬ ‫השפעת‬‫ה‬‫דפדפן‬(Browser Behavior Influence);‫ב‬‫מקר‬‫ה‬
(Case)‫בפני‬ ‫מצויין‬ ‫זה‬‫סייר‬‫ה‬‫אינטרנט‬‫מערכת‬®Microsoft(Microsoft System Internet Explorer)‫ב‬ ‫שימוש‬ ‫לעשות‬ ‫יש‬ ‫כי‬‫מנוע‬
‫ההגשה‬/‫מס‬‫י‬‫ר‬‫ה‬( ‫ביותר‬ ‫המאוחר‬Latest Rendering Engine):-edge‫ו‬-‫אוסף‬‫תווי‬‫ה‬( ‫מסמך‬Document Character Set):-UTF-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Walkthrough</title>
</head>
<body> <p>Hello World</p>
</body>
</html>
‫פלט‬‫מערכת‬ ‫של‬ ‫רשת‬ ‫ממוזגת/משולבת‬ ‫פיתוח‬ ‫סביבת‬SAP[Output(Integrated Development Environment)SAP Web
IDE]:-
‫מסמך‬‫התגיות‬ ‫שפת‬HTML[Document(HyperText Markup Language)HTML]( ‫מורכב/מכיל‬Consists)/‫בסיסי/יסודי‬ ‫באופן‬
( ‫עקרוני‬Basically)2‫חלק‬/‫ים/קטעים‬‫מיגזר‬‫ים‬/‫פלג‬‫ים‬(Sections):-‫חלק‬//‫קטע‬‫מיגזר/פלג‬(Section Part):‫ה‬-head‫ו‬-‫חלק‬//‫קטע‬/‫מיגזר‬
‫פלג‬(Section Part):‫ה‬-body.

‫ה‬( ‫קובץ‬File):-index.html‫ה‬ ‫במסגרת‬‫תקי‬‫ה‬(Folder):-webapp
<!DOCTYPE html>
<html>
‫חלק‬//‫קטע‬‫מיגזר/פלג‬(Section Part):‫ה‬-<head>:-‫את‬ ‫ישמש‬‫ה‬‫דפדפן‬(Browser)‫במסגרת‬( ‫המסמך‬ ‫פעילות‬ ‫הליך‬Document
Process).‫באמצעות‬( ‫תגי‬Tags):-<meta>‫להתאים‬ ‫ניתן‬‫התנהגות‬ ‫השפעת‬‫ה‬‫דפדפן‬(Browser Behavior Influence);‫ב‬‫מקר‬‫ה‬
(Case)‫בפני‬ ‫מצויין‬ ‫זה‬‫סייר‬‫ה‬‫אינטרנט‬‫מערכת‬®Microsoft(Microsoft System Internet Explorer)‫ב‬ ‫שימוש‬ ‫לעשות‬ ‫יש‬ ‫כי‬‫מנוע‬
‫ההגשה‬/‫מס‬‫י‬‫ר‬‫ה‬( ‫ביותר‬ ‫המאוחר‬Latest Rendering Engine):-edge‫ו‬-‫אוסף‬‫תווי‬‫ה‬( ‫מסמך‬Document Character Set):-UTF-8.
<head>
‫הצגת‬‫כותר‬/‫ת‬‫ה‬( ‫יישום‬Application Title Displayed)‫ה‬ ‫במסגרת‬‫דפדפן‬(Browser).‫כי‬ ‫לעובדה‬ ‫מודעים‬ ‫להיות‬ ‫יש‬‫ה‬ ‫הכותרת‬‫מוקלד‬‫ת‬
‫קשיח‬ ‫באופן‬(Hard-Coded Title)‫ל‬ ‫ניתנת‬‫ביטול‬/( ‫כפיה‬Overriden)‫ה‬ ‫במסגרת‬( ‫יישום‬Application)‫ל‬ ,‫דוגמה‬(Example)‫להצגת‬
‫ה‬‫כותרת‬(Title Display)‫ב‬‫שפת‬‫ה‬‫משתמש‬(User Language).
<script
id="sap-ui-bootstrap"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async" >
</script>
<script>
sap.ui.getCore().attachInit(function () { new sap.m.Text({ text : "Hello World"
}).placeAt("content");
});
</script>
</head>
‫חלק‬//‫קטע‬‫מיגזר/פלג‬(Section Part):‫ה‬-body
<body class="sapUiBody" id="content"></body>
</html>
[2( ‫איתחול‬ ]Bootstrap)
‫במסגרת‬ ‫כלשהו‬ ‫דבר‬ ‫לבצע‬ ‫יהייה‬ ‫שניתן‬ ‫לפני‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{[Development(User Interface)SAP UI]
‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5‫ב‬ ‫צורך‬ ‫שיש‬ ‫הרי‬ ,}‫טעינת‬‫ו‬/‫עמס‬‫תו‬(Load)‫ו‬-
‫איתחול‬‫ו‬(Initialize).‫הליך‬-‫ה‬ ‫פעילות‬( ‫טעינה‬Loading Process)‫ו‬-‫איתחול‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Initializing
[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5}
:‫מכונה‬-( ‫איתחול‬Bootstrapping)‫לאחר‬ .‫השלמת‬/‫סיום‬‫איתחול‬(Bootstrapping Finished,)( ‫פשוט‬Simply)‫נקבל‬‫הצגת‬
/‫ההתראה‬‫אזעק‬‫ה‬(Alert Display).
/‫ההתראה‬ ‫הצגת‬‫אזעק‬‫ה‬(Alert Displayed):-UI5 is ready
‫שם‬-( ‫נלוות‬ ‫לב/הערה‬Note):-‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{[Development(User Interface)SAP UI]‫שפת‬ ‫עבור‬
‫התגיות‬HTML5( [HyperText Markup Language)HTML5]SAPUI5‫ספרית‬ ‫הינו‬ }‫שפת‬‫ה‬( ‫תכנות‬Programming Language
Library):-JavaScript,‫ל‬ ‫הניתנת‬( ‫טעינה‬Loaded)‫מתוך‬( ‫רשת‬ ‫שרת‬Web Server)‫או‬ ,( ‫חיצוני‬Externally)‫מתוך‬‫העבר‬ ‫רשת‬‫תוכן‬ ‫ת‬
[(Content Delivery Network)CDN.]‫דוגמאות‬‫ה‬‫קוד/הוראות‬(Code Examples)‫במסגרת‬‫נושא‬‫ה‬( ‫הוראה‬Tutorial)‫הנוכחי‬‫מציג‬
‫תמיד‬‫נתיב‬‫ים‬‫יחסי‬‫ים‬(Relative Paths)‫ו‬-‫ההנחה/תפיסה‬/‫נ‬‫ל‬‫יקח‬‫בחשבון‬(Assume)‫של‬ ‫מקומית‬ ‫פריסה‬ ‫הנה‬‫פיתוח‬‫ממשק‬‫משתמש‬
‫מערכת‬:‫ה‬-SAP{Locally Deployed[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText
Markup Language)HTML5]SAPUI5}‫ה‬ ‫תקית‬ ‫במסגרת‬‫משאבי‬‫ם‬(Resources Folder)‫הקשר‬ ‫של‬-‫ש‬ ‫שורש‬ ‫תוכן‬‫רת‬‫ה‬( ‫רשת‬Web

Serve Root Context)‫שפריסת‬ ‫במידה‬ ;‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Deployed[Development(User Interface)
SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5‫ב‬ ‫אחר‬ ‫במקום‬ ‫הנה‬ }( ‫שרת‬Server)‫או‬
‫ב‬ ‫להשתמש‬ ‫עניין‬ ‫שישנו‬‫גרסת‬‫רשת‬‫העבר‬‫ת‬‫תוכן‬[Version(Content Delivery Network)CDN‫ל‬ ‫שיש‬ ‫הרי‬ ,]‫התא‬‫ים‬/( ‫סגל‬Adjust)
‫נתיב‬‫ים‬(Paths)‫במסגרת‬ ‫מתאימים‬( ‫האיתחול‬Bootstrap)
(here: src="/resources/sap-ui-core.js")
‫במסגרת‬( ‫הוראה‬ ‫נושא‬Tutorial):‫זה‬-‫גרסת‬‫רשת‬‫העבר‬‫ת‬‫תוכן‬[Version(Content Delivery Network)CDN]‫של‬‫פיתוח‬‫ממשק‬‫משתמש‬
‫מערכת‬:‫ה‬-SAP{[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language
)HTML5]SAPUI5}:‫במסגרת‬ ‫למצוא‬ ‫ניתן‬-
https://sapui5.hana.ondemand.com/resources/sap-ui-core.js
<!DOCTYPE html>
<html>
<head>
‫טעינת‬/‫העמסת‬‫מסגרת/דפוס‬‫פיתוח‬‫משתמש‬ ‫ממשק‬:‫ה‬ ‫מערכת‬-SAP{Framework Load[Development(User Interface)SAP UI]
‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5}‫מתוך‬‫שרת‬‫ה‬‫רשת‬( ‫המקומי‬Local Web Server)
‫ו‬-‫איתחול‬‫מאפייני/מודולי‬‫ליבה/מרכז/תווך/לב‬(Core Modules Initialize)‫בעלי/ת‬‫אפשרויות‬( ‫מערכת‬ ‫תצורת‬Configuration
Options): ‫הבאות‬-
<script
‫ה‬‫מאפיין‬/‫אפיון‬(Attribute):-src‫ה‬ ‫של‬( ‫תג‬Tag):-<script>‫ה‬-I‫בפני‬ ‫מציין‬‫ה‬‫דפדפן‬(Browser)‫את‬ ‫למצוא‬ ‫היכן‬‫המרכזית‬ ‫הספריה‬
‫של‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Core Library[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5
( [HyperText Markup Language)HTML5]SAPUI5‫את‬ ‫מקטין/מקצר‬ ‫הדבר‬ }‫פעילות‬ ‫עת‬/"‫"ריצת‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-
SAP{Runtime[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language
)HTML5]SAPUI5}‫ו‬-‫טעינת‬‫משאבי‬‫ם‬‫נוספים‬(Additional Resources Load)–:‫כגון‬-‫ציון‬‫ה‬( ‫סיפריות‬Librarie Specified)
‫במסגרת‬‫ה‬‫מאפיין‬/‫אפיון‬(Attribute):-data-sap-ui-libs.
‫מנהל‬‫י‬/‫פקד‬‫י‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Controls[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬
HTML5( [HyperText Markup Language)HTML5]SAPUI5}‫תומ‬‫כים‬(Support)( ‫נושא‬ ‫בערכות‬Themes‫שונות‬ )-‫בחירת‬
‫ברירת‬-‫המחדל‬(Default Select):-sap_bluecrystal.
‫ציון‬‫ספרית‬‫ממשק‬‫המשתמש‬[Library Specify(User Interface)UI]:-sap.m‫הכוללת‬/‫מנהלי‬‫פקדי‬‫ממשק‬‫המשתמש‬[Controls(
User Interface)UI]‫במסגרת‬ ‫הנידרשים‬‫נושא‬‫ה‬( ‫הוראה‬Tutorial).‫הנוכחי‬
‫ב‬ ‫שימוש‬ ‫לעשות‬ ‫יהייה‬ ‫שניתן‬ ‫עמ"נ‬‫שימושיות/פעילויות/אפשרויות‬‫טעינת‬/‫העמסת‬‫מסגרת/דפוס‬‫פיתוח‬‫משתמש‬ ‫ממשק‬:‫ה‬ ‫מערכת‬-SAP{
Functionality[Development(User Interface)SAP UI‫התגיות‬ ‫שפת‬ ‫עבור‬ ]HTML5( [HyperText Markup Language
)HTML5]SAPUI5}‫שהתרחשו‬‫לאחרונה‬/"‫ביותר/"טריןת‬ ‫חדשות‬(Most Recent)‫מותאמת‬ ,‫ה‬ ‫גרסת‬ ‫הגדרת‬( ‫תאימות‬Compatibility
Version Define):-edge.
‫הותאמה‬‫הגדרת‬-‫תצורת‬‫הליך‬-‫פעילות‬‫השלמת‬/‫סיום‬‫איתחול‬(Bootstrapping Process Configure)‫ל‬‫הפעל‬‫ה‬/‫"הרצ‬‫ה‬"‫מעוקב/א‬-‫סינכרוני‬
(Asynchronous Run)‫ה‬ ‫טעינת‬ ‫להתאים‬ ‫ניתן‬ ‫כי‬ ‫הדבר‬ ‫פירוש‬ .‫משאבי‬‫ם‬(Resources Loaded)‫בו‬-( ‫זמנית‬Simultaneously)‫ב‬( ‫רקע‬
Background).‫מסיבות‬‫בב‬ ‫הקשורות‬( ‫יצועים‬Performance Reasons),‫שכלל‬ ‫בעת‬‫ה‬‫משאבי‬‫ם‬(Resources)‫ו‬-( ‫סיפריות‬Libraries)
‫נטענות‬(Loaded);‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬
HTML5( [HyperText Markup Language)HTML5]SAPUI5}‫מוכן/זמין‬ ‫הינו‬(Ready)‫ה‬ ,( ‫ספריה‬Library)‫הזנקת‬ ‫את‬ ‫מתאימה‬
‫ה‬ ‫פעילות‬( ‫אירוע‬Event Trigger):-global init‫לסמן‬ ‫עמ"נ‬/‫לאותת‬(Signal)‫כי‬( ‫ספריה‬Library)‫מוכנה/זמינה‬(Ready).
data-sap-ui-preload="async" > </script>
‫עיו‬‫ן‬/‫אזכור/מרא‬‫ה‬-‫מקום‬‫מרכז‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Core Reference[Development(User Interface)SAP UI]
‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5‫באמצעות‬ }‫קריא‬‫ת‬(Calling):-sap.ui.getCore()
‫ו‬-‫רישום‬‫שימוש/פעילות/אפשרות‬‫חוזרת‬ ‫קריאה‬‫אלמונית‬/‫בלתי‬-‫ידוע‬/‫ה‬(Anonymous CallBack Function Register)‫באמצעות‬‫קריא‬‫ת‬
(Calling):-attachInit(…)‫ה‬ ‫במסגרת‬( ‫ליבה/מרכז/תווך/לב‬Core).
<script> sap.ui.getCore().attachInit(function () { alert("UI5 is ready"); });</script>
</head>
<body><p>Hello World</p></body>
</html>
‫אימון/תרגול/מנהג‬ ‫זה‬ ‫יהייה‬‫מעשי‬‫טוב‬/‫מתאים/נאות‬(Good Practice)‫להתאים‬( ‫אירוע‬ ‫השגחת/ניטור‬Event Monitoring)‫עמ"נ‬ ‫זה‬
‫ל‬‫הזנ‬‫י‬‫פעילות‬ ‫ק‬‫לוגיקת/הגיון‬( ‫היישום‬Application Logic Trigger)‫רק‬‫לאחר‬‫ה‬ ‫פעילות‬ ‫הזנקת‬( ‫אירוע‬Event Triggered).‫במסגרת‬
‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText
Markup Language)HTML5]SAPUI5,}( ‫שימושי/פעילויות/אפשרויות‬Functions):-callback:‫מכונים‬-‫מנהלים‬/‫ידיות‬(Handlers
),‫שימוש‬‫י‬/‫פעילו‬‫יו‬‫ת/אפשרו‬‫יו‬‫ת‬‫המאזין/שומע/מקשיב‬(Listener Functions)‫או‬ ,( ‫פשוט‬Simply):-‫מאזינים/שומעים/מקשיבים‬(
Listeners).‫הליבה/מרכז/תווך/לב‬(Core)‫טון‬ ‫מהווה‬-‫יחיד‬(Singleton)‫ל‬ ‫וניתנת‬( ‫גישה‬Accessed)‫במסגרת‬ ‫מקום‬ ‫מכל‬/‫קוד‬‫הוראות‬(

Code).‫הפעלת‬‫שימוש/פעילות/אפשרות‬‫חוזרת‬ ‫קריאה‬‫אלמונית‬/‫בלתי‬-‫ידוע‬‫ה‬(Anonymous CallBack Function Executed)‫בעת‬
‫איתחול‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Bootstrap[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5
( [HyperText Markup Language)HTML5]SAPUI5}‫ה‬‫ו‬‫שלמ‬‫ה/הסתיימה‬(Finished)‫ו‬-/‫התראת‬ ‫הצגת‬‫אזעק‬‫ת‬:‫ה‬ ‫שפת‬-
JavaScript‫המקומית‬(Native JavaScript Language Alert Display).‫קיימות‬2‫גרסאות‬‫מרכז‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-
SAP{Core Versions[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup
Language)HTML5]SAPUI5:}-‫אחת‬‫עם‬jQuery
jQuery‫הינה‬‫תשתית‬‫פיתוח‬:‫ה‬ ‫שפת‬-JavaScript(JavaScript Language Development Infrastructure)‫פעולות‬ ‫ההופכת‬ ,
‫נפוצות‬‫ב‬:‫ה‬ ‫שפת‬-JavaScript(JavaScript Language)–‫עוזרת‬ ,‫יותר‬ ‫הרבה‬ ‫לקלות‬‫ומטפלת‬ ‫באתרים‬ ‫המשתמשים‬ ‫חווית‬ ‫את‬ ‫לשפר‬
‫של‬ ‫המימוש‬ ‫באופן‬ ‫בהבדלים‬:‫ה‬ ‫שפת‬-JavaScript(anguageLJavaScript‫במסגרת‬ .‫שונים‬ ‫דפדפנים‬ ‫בין‬ )‫מדריך‬jQuery‫בעברית‬‫זה‬
http://webmaster.org.il/articles/jquery
‫לראות‬ ‫ניתן‬‫ב‬ ‫שימוש‬ ‫מוסיפים‬ ‫כיצד‬jQuery‫המירב‬ ‫את‬ ‫ממנה‬ ‫מפיקים‬ ‫ואיך‬ ‫לאתרים‬.
‫ו‬-‫אחת‬‫ללא‬jQuery.‫במקרה‬(Case)‫מותאמת‬ ‫הנוכחי‬‫טעינת‬‫א‬‫י‬‫ג‬‫ו‬‫ד/א‬‫י‬‫סוף‬‫הליבה/מרכז/תווך/לב‬(Core Bundled Load)‫עם‬jQuery
–‫ש‬ ‫כך‬‫בה‬ ‫להשתמש‬ ‫ניתן‬‫במסגרת‬( ‫יישום‬Application).
[3( ‫מנהלים/פקדים‬ ]Controls)
‫בנית‬ ‫נתאים‬‫ממשק‬‫המשתמש‬[Build(User Interface)UI]‫החלפת‬ ‫באמצעות‬‫ה‬‫מלל‬ ‫מחרוזת/קטע‬(ReplacingText):-Hello World
‫ב‬‫גוף‬‫התגיות‬ ‫שפת‬HTML[Body(HyperText Markup Language)HTML]‫ב‬/‫מנהל‬‫פקד‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{
Control[Development(User Interface)SAP UI‫התגיות‬ ‫שפת‬ ‫עבור‬ ]HTML5( [HyperText Markup Language)HTML5]
SAPUI5}:-sap.m.Text‫ב‬ ‫נשתמש‬ ‫תחילה‬ ; .‫ממשק‬/‫מנהל‬‫פקד‬:‫ה‬ ‫שפת‬-JavaScript(JavaScript Control Interface)‫ל‬/‫ארגון‬
‫עריכת‬/‫התקנת‬‫המשתמש‬ ‫ממשק‬[Set Up(User Interface)UI],/‫"דוגמת‬"‫מקרה/ישות‬‫ה‬/‫מנהל‬( ‫פקד‬Control Instance)‫ו‬-‫מיקומה‬(
Placed)‫גוף‬ ‫במסגרת‬‫התגיות‬ ‫שפת‬HTML[Body(HyperText Markup Language)HTML].
‫הצגת‬( ‫מלל‬ ‫מחרוזת/קטע‬Text Displayed):-Hello World‫באמצעות‬/‫מנהל‬‫פקד‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{
Control[Development(User Interface)SAP UI‫התגיות‬ ‫שפת‬ ‫עבור‬ ]HTML5( [HyperText Markup Language)HTML5]
SAPUI5}.
<!DOCTYPE html>
<html>
<head>
<script

‫ה‬ ‫שם‬‫מנהל‬/( ‫פקד‬Control Name)‫בעל‬ ‫הינו‬-‫קידומת‬‫סביבת‬-( ‫השם‬Namespace Prefixed)‫של‬‫ספרית‬/‫המנהל‬( ‫פקד‬Control Library
):-sap.m‫ו‬-‫מותאמת‬‫העברת‬‫ה‬( ‫אפשרויות‬Options Passed)‫ל‬( ‫מרכיב/בונה‬Constructor)‫אובייקט‬ ‫באמצעות‬‫שפת‬‫ה‬‫תכנות‬
(Programming Language Object):-JavaScript.
</script>
<script>
});
</script>
( ‫שירשור‬Concatenate)‫ה‬ ‫קריאת‬( ‫מרכיב/בונה‬Constructor Call)‫של‬/‫מנהל‬( ‫פקד‬Control)‫באמצעות‬‫התקנית/רגילה‬ ‫השיטה‬
(Standard Method):-placeAt‫ל‬ ‫המשמש‬‫מיקום‬‫מנהל‬‫י‬/‫פקד‬‫י‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Controls Position
[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5.}
‫קשר‬ ‫מסגרת‬‫תבנית/עיצוב/מודל‬‫אובייקט‬‫ה‬‫מסמך‬[Node(Document Object Model)DOM.]‫כ‬( ‫המטרה‬ ‫קשר‬Target Node)‫נעשה‬
‫ב‬ ‫שימוש‬( ‫תג‬Tag):-body‫של‬‫מסמך‬‫התגיות‬ ‫שפת‬HTML[Document(HyperText Markup Language)HTML]‫ו‬-‫את‬ ‫עבורו‬ ‫מתאים‬
‫תו‬ ‫תוכן‬-( ‫הזהות‬ID Content.)( ‫מחלקה‬Class):-sapUiBody‫הוספת‬ ‫מתאימה‬‫ערכת‬-‫נושא‬‫נוס‬‫ף‬(Additional Theme Add)‫כתלות‬
(Dependent)‫ב‬( ‫סגנונות‬Styles)‫ישומי‬ ‫הצגת‬ ‫את‬ ‫המשמשים‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Applications Displaying
[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5.}
‫כלל‬‫מנהל‬‫י‬/‫פקד‬‫י‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Controls[Development(User Interface)SAP UI]‫שפת‬ ‫במסגרת‬
‫התגיות‬HTML5( [HyperText Markup Language)HTML5]SAPUI5‫ו‬ ,}-‫בעלות‬ ‫הינן‬‫אוסף‬‫תכונות‬(SetProperties)‫ו‬-( ‫שיטות‬
Methods)‫קבוע‬‫ות‬(Fixed)‫ל‬‫הדדית/גומלין‬ ‫פעילות‬‫עם‬‫ממשק‬‫ה‬‫יישום‬‫ה‬‫תכנותי‬‫הכללי‬[Interact(Application Programming
Interface)Public API]‫ה‬ ‫עם‬/‫מנהל‬( ‫פקד‬Control).‫ב‬ ‫צפיה‬ ‫באמצעות‬ ‫זאת‬ ‫לזהות‬ ‫ניתן‬‫עיון/אזכור/מראה‬-‫מקום‬‫ממשק‬‫ה‬‫יישום‬
‫ה‬[ ‫תכנותי‬Reference(Application Programming Interface)API].
</head> <body class="sapUiBody" id="content">
</body>
</html>
( ‫במקום‬Instead):‫ה‬ ‫שפת‬-JavaScript‫המקומית‬(Native JavaScript Language)‫ל‬‫הצגת‬‫שיחת/דיאלוג‬(Dialog Display)‫ישנו‬
‫ב‬ ‫להשתמש‬ ‫עניין‬/‫מנהל‬‫פקד‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{ ‫פשוט‬Control[Development(User Interface)Simple SAP UI
]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5.}‫מנהלי‬‫ם‬/‫פקדי‬‫ם‬(Controls)‫משמשים‬‫להגדרת‬
‫הופעת/מראה‬(Appearance Define)‫ו‬-‫התנהגות‬‫חלק‬‫י‬‫המסך‬(Screen Parts Behavior)‫ה‬ ‫במסגרת‬ .‫דוגמה‬(Example)‫שהוצגה‬
‫תוכן‬ ,‫למעלה‬( ‫האירוע‬ ‫מנהל‬Event Handler content):-init‫ה‬‫ו‬‫חל‬‫ף‬(Replaced)‫ב‬/‫מנהל‬( ‫פקד‬Control)‫המתאים‬‫מלל‬ ‫מחרוזת/קטע‬
‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Text[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText
Markup Language)HTML5]SAPUI5‫עבור‬ ; }/‫מנהל‬( ‫פקד‬Control)‫מותאמת‬ ,‫זה‬‫הגדרת‬‫ערך‬‫תכונת‬‫ה‬‫מחרוזת/קטע‬‫המלל‬(Text
Property Value Set):-“Hello World”,‫כן‬ ‫כמו‬ .‫להסיר‬ ‫לשכוח‬ ‫אין‬(Remove):‫את‬-
‫שם‬-‫לב‬/( ‫נלוות‬ ‫הערה‬Note):-‫מ‬ ‫אחד‬ ‫כל‬/‫מנהלי‬( ‫פקדי‬Controls)‫מרחיב‬(Extend):‫את‬-sap.ui.core.Element‫בתורו‬ ‫אשר‬ ,-‫מרחיב‬(
Extend):‫את‬-sap.ui.base.ManagedObject;/‫מנהל‬( ‫פקד‬Control)‫ל‬ ‫ניתן‬‫הגשה‬/‫מסירה‬‫אופייניי‬‫ת/טיפוסית‬(Typically Rendered
).( "‫"דוגמאות/מקרים/יישויות‬Instances):‫של‬-sap.ui.core.Element‫להגשה‬ ‫ניתנות‬ ‫אינן‬/‫מסירה‬(Rendered)‫תיעוד‬ ‫את‬ ‫לבחון‬ ‫יש‬ .
[ ‫תכנותי‬ ‫יישום‬ ‫ממשק‬Documentation(Application Programming Interfaces)API]‫ל‬( ‫לימוד‬Learn)‫נוסף‬‫אודות‬‫היררכית‬
‫הורש‬‫ת‬‫ה‬‫מנהלי‬‫ם‬/‫פקדי‬‫ם‬(Controls Inheritance Hierarchy).
‫מידע/פרטים‬( ‫מקורב/ים‬Related Information)
‫עיון/אזכור/מראה‬-‫מקום‬‫ממשק‬‫ה‬‫יישום‬‫ה‬[ ‫תכנותי‬Reference(Application Programming Interface)API]:-sap.m.Text
‫של‬ ‫כללית‬ ‫סקירה‬[ ‫תכנותי‬ ‫יישום‬ ‫ממשק‬Overview(Application Programming Interfaces)API]‫ו‬-‫דוגמ‬‫או‬‫ת‬(Samples):-
sap.m.Text
‫עיון/אזכור/מראה‬-‫מקום‬‫ממשק‬‫ה‬‫יישום‬‫ה‬[ ‫תכנותי‬Reference(Application Programming Interface)API]:-
sap.ui.core.Control
sap.ui.core.Element
sap.ui.base.ManagedObject
‫ממשק‬ ‫הכללת‬‫משתמש‬[(User Interface)UI‫ה‬ ‫במסגרת‬ ]( ‫קובץ‬File):-Index.html‫בהכרח‬ ‫מוביל‬‫ל‬( ‫מתקבלת‬ ‫תוצאה‬Result)–
‫של‬‫עומס‬(Load)‫ו‬-‫קטן‬ ‫לא‬ ‫בלגן‬‫ש‬ ‫בעובדה‬ ‫בהתחשב‬ .‫מעט‬ ‫לא‬ ‫עדיין‬‫עבוד‬‫ה‬/‫פע‬‫י‬‫ל‬‫ות‬(Work)‫לפניינו‬,‫נתאים‬‫כעט‬ ‫כבר‬
( ‫אפיון/מודולריזציה‬Modularization)‫ה‬ ‫הכללת‬ ‫באמצעות‬‫מנהל/פקד‬(Control):-sap.m.Text‫ב‬( ‫מבט‬View)–‫העובדה‬ ‫למרות‬ ‫זאת‬
‫יהייה‬ ‫לא‬ ‫הדבר‬ ‫כי‬‫ניכר‬[ ‫המשתמש‬ ‫ממשק‬ ‫במסגרת‬ ‫כשינויי‬Change(User Interface)UI]–:‫משמע‬-‫אין‬‫עריכת‬-‫שינויים‬
( ‫ויזואליים/חזותיים‬Visual Changes)( ‫הקודם‬ ‫לשלב‬ ‫ביחס‬Previous Step);‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{
[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5}
‫תומך‬(Supports)‫בסוגי‬‫מבט‬‫מרובים‬{(View TypesMultiple)‫ב‬‫במיחשוב‬ ‫נתונים‬ ‫לייצוג‬ ‫המשמשת‬ ‫להרחבה‬ ‫הניתנת‬ ‫הסימון‬ ‫שפת‬XML
( [eXtensible Markup Language)XML],‫התגיות‬ ‫שפת‬HTML( [HyperText Markup Language)HTML],‫ו‬-‫שפת‬‫ה‬‫תכנות‬
(Programming Language):-JavaScript};‫במיחשוב‬ ‫נתונים‬ ‫לייצוג‬ ‫המשמשת‬ ‫להרחבה‬ ‫הניתנת‬ ‫הסימון‬ ‫שפת‬XML( [eXtensible

Markup Language)XML]‫ש‬ ‫כיוון‬ ,‫זו‬ ‫למטרה‬ ‫נבחרה‬‫ה‬‫ינה‬‫מפיק‬‫ה‬(Produces)‫ה‬ ‫את‬/‫קוד‬‫הוראות‬‫ביותר‬ ‫הקרי‬(Readable Code).‫אנו‬
‫ב‬ ‫נתרכז‬‫הפרדת‬‫הכרזת/הגדרת‬‫המבט‬(View Declaration Separate)‫מ‬‫לוגיקת/הגיון‬‫ה‬( ‫מנהל‬Controller Logic)‫הוספת‬ ,‫ראשית‬ ;‫קובץ‬
‫חדש‬(New File Add):-App.view.xml‫במסגרת‬‫ה‬‫תקי‬‫ה‬(Folder):-webapp/view.
‫הקש‬‫ת‬/‫הקלד‬‫ת‬‫כפתור‬-( ‫הלחיצה‬Pushbutton Click):-OK.
‫הקלדת/טעינת‬‫הקוד/הוראות‬ ‫תצורת‬‫חדש‬/‫ות‬(New Source Code Enter)‫ו‬-‫הקש‬‫ת‬/‫הקלד‬‫ת‬‫כפתור‬-( ‫הלחיצה‬Pushbutton Click):-
Save.

‫ה‬( ‫קובץ‬File):-App.view.xml‫ה‬ ‫במסגרת‬‫תקי‬‫ה‬(Folder):-webapp/view:-‫יצירת‬‫קובץ‬‫חדש‬(New File Create)‫ל‬‫מבט‬‫ייצוג‬
‫במיחשוב‬ ‫נתונים‬XML[View(eXtensible Markup Language)XML]/‫בתוך‬( ‫פנים‬Inside)‫תקית‬‫ה‬‫יישום‬(FolderApplication).
‫ה‬ ‫קשר‬‫שורש‬(Root Node)‫מבנה‬ ‫של‬‫הגדרת‬‫קובץ‬‫תרשים/סכמת‬ ‫הגדרת‬‫תצורת‬‫ה‬‫הורא‬‫ות‬‫במחשוב‬ ‫נתונים‬ ‫ייצוג‬XML{Structure[
Schema Definition(eXtensible Markup Language)XML]XSD}‫ה‬ ‫הינו‬( ‫מבט‬View).
<mvc:View
‫מקום‬ ‫עיון/איזכור/מראה‬‫ברירת‬-‫מחדל‬‫סביבת‬-‫השם‬(Default Namespace Reference):-sap.m–‫עזרת‬ ‫מיקום‬‫ממשק‬‫המשתמש‬[
Asset Located(User Interface)UI].
xmlns="sap.m"
‫הגדרת‬‫סביבת‬-‫שם‬‫נוספת‬(Additional Namespace Define):-sap.ui.core.mvc‫בעלת‬‫שם‬‫ה‬( ‫כינוי‬Alias):-mvc-‫במסגרתו/ה‬
‫ממוקמת‬‫מבטי‬ ‫עזרת‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Views Asset Located[Development(User Interface)SAP UI]
‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5‫ה‬ ‫מבט‬ ‫מנהל‬ ‫שאר‬ ‫וכל‬ }‫תאמת‬-‫עיצוב/תבנית/מודל‬[
(Model View Controller)MVC].
xmlns:mvc="sap.ui.core.mvc"> <Text text="Hello World"/>
</mvc:View>
‫במסגרת‬( ‫תג‬Tag):-view‫מותאמת‬ ,‫הגדרת‬ ‫הוספת‬‫הכרז‬‫ת‬/‫הגדר‬‫ת‬(Declarative Definition Add)‫עבור‬/‫מנהל‬‫פקד‬‫מחרוזת/קטע‬‫ה‬( ‫מלל‬
Text Control)‫בעל‬ ‫שהינו‬ ,( ‫תכונות‬Properties)‫ב‬ ‫שנכללו‬ ‫לאלה‬ ‫הזהות‬‫מסגרת‬( ‫הקודם‬ ‫השלב‬Previous Step)‫מיפוי‬ .‫תגי‬‫הסימון‬ ‫שפת‬
‫במיחשוב‬ ‫נתונים‬ ‫לייצוג‬ ‫המשמשת‬ ‫להרחבה‬ ‫הניתנת‬XML[Tags Mapped(eXtensible Markup Language)XML]‫ל‬‫מנהלי‬‫ם‬/‫פקדי‬‫ם‬
(Controls)‫ו‬-‫מיפוי‬‫ה‬‫מאפיי‬‫נים‬/‫אפיו‬‫נים‬(Attributes Mapped)‫ל‬‫תכונות‬/‫המנהל‬‫פקד‬(Control Properties).‫במסגרת‬‫פיתוח‬‫ממשק‬
‫משתמש‬‫מערכת‬:‫ה‬-SAP[ {Development(User Interface)SAP UI‫התגיות‬ ‫שפת‬ ‫עבור‬ ]HTML5( [HyperText Markup
Language)HTML5]SAPUI5,}‫מה‬ ‫אחד‬ ‫כל‬‫מנהלי‬‫ם‬/‫פקדי‬‫ם‬(Controls)‫בעל‬ ‫הינו‬‫תו‬-( ‫זהות‬ID).‫מבט‬ ‫במסגרת‬‫נתונים‬ ‫ייצוג‬
‫במיחשוב‬XML[View(eXtensible Markup Language)XML]‫למעלה‬ ‫המצויין‬–‫צויין‬ ‫לא‬‫מאפיי‬‫ן‬/‫אפיו‬‫ן‬‫תו‬-( ‫זהות‬ID Attribute
Specify),‫ולכן‬‫פעילות‬ ‫עת‬/"‫"ריצת‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Runtime[Development(User Interface)SAP UI]
‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5}‫מתאימה‬‫חילול/הפעלת‬‫תו‬-( ‫זהות‬ID Generate)
‫ו‬ ‫עצמאי‬ ‫באופן‬-‫הוספתו‬(ID Add)‫ל‬/‫מנהל‬( ‫פקד‬Control)‫זה‬ ‫יהייה‬ ,‫אולם‬ .‫אימון/תרגול/מנהג‬‫מעשי‬‫טוב‬/‫מתאים/נאות‬(Good
Practice)‫להגדיר‬/‫קבוע‬‫תווי‬-‫ה‬ ‫זהות‬‫מנהלי‬‫ם‬/‫פקדי‬‫ם‬(Controls IDs Set)‫באופן‬( ‫מפורש/מובחן‬Explicitly),‫ה‬ ‫שזיהוי‬ ‫כך‬‫מנהלי‬‫ם‬/‫פקדי‬‫ם‬
(Controls Identified)‫באופן‬ ‫יתבצע‬‫נוח/קל‬(Easily);‫הקלדת/טעינת‬‫הקוד/הוראות‬ ‫תצורת‬‫חדש‬/‫ות‬(New Source Code Enter),
‫הקש‬‫ת‬/‫הקלד‬‫ת‬‫כפתור‬-( ‫הלחיצה‬Pushbutton Click):-Save.‫ו‬-‫הקש‬‫ת‬/‫הקלד‬‫ת‬‫כפתור‬-( ‫הלחיצה‬Pushbutton Click):-Run.

<!DOCTYPE html>
<html>
<head>
<title>Daniel Cnahan</title>
<script
data-sap-ui-preload="async" data-sap-ui-resourceroots='{ "sap.ui.demo.wt": "./" }' >
</script>
<script>
We tell
‫מרכז‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Core[Development(User Interface)SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5[
(HyperText Markup Language)HTML5]SAPUI5‫ה‬ ‫כי‬ }‫משאבי‬‫סביבת‬-( ‫השם‬Namespace Resources):-‫במסגרת‬
sap.ui.demo.wt are
( ‫ממוקם/ת‬Located)‫במסגרת‬
same
‫ת‬‫י‬‫קי‬‫י‬( ‫ה‬Folder)‫כ‬( ‫קובץ‬File):-index.html.
sap.ui.getCore().attachInit(function () { sap.ui.xmlview({ viewName :
"sap.ui.demo.wt.view.App" }).placeAt("content");
});
</script>
</body>
</html>
,‫כאמור‬‫עדיין‬‫ניכר‬ ‫לא‬[ ‫המשתמש‬ ‫ממשק‬ ‫במסגרת‬ ‫שינויי‬ ‫כל‬Change(User Interface)UI];‫הצגת‬( ‫מלל‬ ‫מחרוזת/קטע‬Text
Displayed):-Hello World‫באמצעות‬/‫מנהל‬‫פקד‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Control[Development(User Interface
)SAP UI‫התגיות‬ ‫שפת‬ ‫עבור‬ ]HTML5( [HyperText Markup Language)HTML5]SAPUI5}-‫אין‬‫עריכת‬-‫שינויים‬
( ‫ויזואליים/חזותיים‬Visual Changes)( ‫הקודם‬ ‫לשלב‬ ‫ביחס‬Previous Step)

‫הכרחי/נדרש‬ ‫הדבר‬(Necessary)-‫לדוגמה‬(Example)‫עבור‬‫הפעלת‬/‫"הרצ‬‫ת‬( ‫יישומים‬ "Applications Run)‫ב‬‫מסגרת‬‫כן‬
‫שיגור/שילוח/פתיחת‬‫מערכת‬SAP Fiori(SAP Fiori Launchpad).‫החלפ‬‫ת‬"‫מידית‬ ‫"הכנה‬‫של‬‫מנהל/פקד‬(Control Instantiation
Replace):-sap.m.Text‫ב‬‫מבט‬‫במיחשוב‬ ‫נתונים‬ ‫ייצוג‬XML[View(eXtensible Markup Language)XML]‫של‬‫היישום‬‫החדש‬(
New Application).‫מבט‬ ‫יצירת‬(View Created)‫באמצעות‬‫שימוש/פעילות/אפשרות‬( ‫המפעיל‬Factory Function)‫של‬‫פיתוח‬‫ממשק‬
‫משתמש‬‫מערכת‬:‫ה‬-SAP[ {Development(User Interface)SAP UI‫התגיות‬ ‫שפת‬ ‫עבור‬ ]HTML5( [HyperText Markup
Language)HTML5]SAPUI5}‫המווד‬‫א‬‫כי‬‫הגדרת‬‫תצורת‬‫ה‬( ‫מבט‬View Configured)‫ב‬ ‫הותאמה‬( ‫התקין/מתאים/כיאות‬ ‫אופן‬
Correctly)‫ו‬-‫ל‬ ‫ניתנת‬‫רחבה‬/‫תוספת‬(Extended)‫ה‬ ‫בידי‬( ‫לקוחות‬Customers).‫קידומת‬‫השם‬(Name Prefixed)‫את‬ ‫כוללת‬‫סביבת‬-
( ‫השם‬Namespace):-sap.ui.demo.wt.view‫לזהות‬ ‫עמ"נ‬‫י‬‫י‬‫חודי‬‫ת‬(Uniquely Identify)( ‫משאב‬Resource)‫זה‬.‫שם‬-/‫לב‬‫הערה‬
( ‫נלוות‬Note):-‫מ‬ ‫החל‬( ‫שלב‬Step)‫ה‬ ‫זה‬ ‫יהייה‬ ,‫זה‬‫כרחי/נדרש‬(Necessary)‫ל‬‫הפע‬‫י‬‫ל‬/‫"הר‬‫יץ‬"‫ה‬ ‫את‬( ‫יישום‬Application Run)‫במסגרת‬
( ‫רשת‬ ‫שרת‬Web Server).‫מבנ‬‫ה‬( ‫היישום‬Application Structure)‫באמצעות‬ ‫מותאם‬‫טעינת‬‫קב‬‫צים‬‫מרוב‬‫ים‬(Multiple Files Loaded),
‫מתוך‬‫הקבצים‬ ‫מערכת‬‫המקומית‬(Local File System)‫ללא‬ .( ‫רשת‬ ‫שרת‬Web Server)–‫נמנע‬ ‫הדבר‬/( ‫מעוקב‬Prevent‫במסגרת‬ )
‫ה‬‫דפדפן‬(Browser)‫סיבות‬ ‫עקב‬‫אבטחה‬(Security Reasons‫שמופיעה‬ ‫במידה‬ .)‫טעות‬ ‫הודעת‬(Error Message):-sap is not
defined‫במסגרת‬‫מפתח‬ ‫כלי‬/( ‫תכנת‬Developer/ Programmer Tools)‫ה‬ ‫של‬‫דפדפן‬(Browser),‫בבדיקת‬ ‫צורך‬ ‫יש‬‫נתיב‬‫המשאב‬
(Resource Path Check)( ‫האיתחול‬ ‫במסגרת‬Bootstrap);( ‫תקנים‬Conventions):-‫ה‬ ‫שמות‬( ‫מבט‬View Names)‫מהוונים‬[
(Capitalized)‫באמצעות‬ ‫מוגדרים‬‫אות‬( ‫גדולות‬ ‫יות‬Capital Letters)‫ה‬ ‫כל‬ ‫איחסון‬ .]( ‫מבטים‬Views Stored)‫במסגרת‬ ‫מתבצע‬‫תקית‬
‫ה‬‫מבט‬‫ים‬(View Folder);‫מבטי‬ ‫שמות‬‫במיחשוב‬ ‫נתונים‬ ‫ייצוג‬XML[Views Names(eXtensible Markup Language)XML]
:‫ב‬ ‫תמיד‬ ‫מסתיימים‬-*.view.xml‫ברירת‬ ;-‫ל‬ ‫מחדל‬‫סביבת‬-‫שם‬‫נ‬ ‫ייצוג‬‫במיחשוב‬ ‫תונים‬XML[Namespace(eXtensible Markup Language
)Default XML]:‫הינה‬-sap.m‫שאר‬ .‫סביב‬‫ו‬‫ת‬-‫שם‬‫במיחשוב‬ ‫נתונים‬ ‫ייצוג‬XML[Namespaces(eXtensible Markup Language)XML
]‫כ‬ ‫משמשות‬( ‫מקום‬ ‫עיון/אזכור/מראה‬Reference)‫באמצעות‬( ‫כינוי‬ ‫שם‬Alias).
[5]( ‫מנהלים‬Controllers)
‫הוספת‬( ‫כפתור‬Button Added):-Say Hello:-‫במסגרת‬( ‫שלב‬Step)‫מותאמת‬ ,‫זה‬‫החלפת‬‫מלל‬ ‫מחרוזת/קטע‬‫ה‬( ‫כפתור‬Button Text
Replace)‫ה‬ ‫את‬ ‫המציג‬‫הודע‬‫ה‬(Message Display):-Hello World‫בעת‬‫ה‬ ‫לחיצת‬( ‫כפתור‬Button Pressing)‫יישום‬ .‫אירוע‬ ‫ניהול‬
(Event Handling Implemented)‫במסגרת‬‫מנהל‬‫ה‬( ‫מבט‬View Controller).
‫ה‬( ‫קובץ‬File):-App.view.xml‫ה‬ ‫במסגרת‬‫תקי‬‫ה‬(Folder):-webapp/view
<mvc:View
controllerName="sap.ui.demo.wt.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Button
text="Say Hello"
‫בעת‬‫לח‬‫יצת‬‫ה‬( ‫כפתור‬Button Pressed)‫מותאמת‬ ,‫פעילות‬ ‫הזנקת‬‫שימוש/פעילות/אפשרות‬( ‫האירוע‬ ‫מנהל‬Event Handler Function
Trigger):-onShowHello.
press="onShowHello"/>
</mvc:View>
[I]‫הוספת‬‫עיון/איזכור/מראה‬‫מקום‬‫מנהל‬/‫פקד‬(Controller Reference Add)‫ו‬ ,,‫מכן‬ ‫לאחר‬[II]‫החלפת‬/‫מנהל‬‫פקד‬‫מחרוזת/קטע‬‫ה‬‫מלל‬
(Text Control Replace)‫ב‬( ‫כפתור‬Button)‫ה‬( ‫מפיק‬Produces)‫ה‬ ‫את‬( ‫מלל‬ ‫מחרוזת/קטע‬Text):-“Say Hello”.‫יש‬ ,‫כן‬ ‫כמו‬‫ל‬‫ציון‬‫את‬
‫ה‬ ‫שם‬( ‫מנהל‬Controller Name Specify)( ‫המחזיק‬Holds)‫ב‬( ‫שימוש/פעילות/אפשרות‬Function):-onShowHello‫באמצעות‬
/‫אפיון‬‫מאפיי‬‫ן‬‫ה‬( ‫מבט‬View Attribute):-ontrollerName;‫ה‬( ‫מבט‬View)‫איננו‬‫בהכרח/נדרש‬(Necessarily)‫באופן‬( ‫מפורש/מובחן‬
Explicitly)‫שיוך/ייחוס‬‫ה‬( ‫מנהל‬Controller Assigned).‫ב‬ ‫צורך‬ ‫אין‬‫יצירת‬‫ה‬‫מנהל‬(Controller Create)‫שה‬ ‫במידה‬( ‫מבט‬View)‫משמש‬
‫ל‬ ‫ורק‬ ‫אך‬‫מידע‬ ‫הצגת‬/‫פרטים‬(Information Displaying)‫ו‬-‫אין‬‫נדרשת‬‫שימושיות/פעילויות/אפשרויות‬‫נוספות‬(Additional
Functionality Required)‫במידה‬ .‫ש‬‫הכנת‬‫ו‬‫ה‬‫של‬ "‫מידית‬‫ה‬ ‫ציון‬( ‫מנהל‬Controller Specifed Instantiated)‫לאחר‬ ‫מותאמת‬‫המבט‬ ‫טעינת‬(
View Loaded).
[I]‫ה‬( ‫קובץ‬File):-App.controller.js‫ה‬ ‫במסגרת‬‫תקי‬‫ה‬(Folder):-webapp/controller
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("", {
});
});
‫ה‬ ‫יצירת‬‫ת‬‫י‬‫קי‬‫י‬( ‫ה‬Folder Create):-webapp/controller‫ו‬-‫קובץ‬‫חדש‬(New File):-App.controller.js-‫במסגרת‬‫ת‬‫י‬‫קי‬‫י‬( ‫ה‬Folder)
‫נתעלם‬ ,‫עתה‬ ‫לעת‬ .‫זו‬(Ignore)‫מ‬/‫קוד‬‫הוראות‬(Code)‫ה‬‫מנהל‬(Manages)‫ה‬ ‫את‬( ‫מאפיינים/מודולים‬Modules)‫ה‬‫נידרש‬‫ים‬(
Required).( ‫חלק‬Part)‫יוסבר‬ ‫זה‬(Explain)‫במסגרת‬‫ה‬‫תרג‬‫י‬‫ל‬‫הבא‬(Next Exercise).

[II]‫ה‬( ‫קובץ‬File):-App.controller.js‫ה‬ ‫במסגרת‬‫תקי‬‫ה‬(Folder):-webapp/controller
sap.ui.define([
"use strict"; return Controller.extend("sap.ui.demo.wt.controller.App", {
onShowHello : function () {
// show a native JavaScript alert
alert("Hello World");
}
});
});
‫הקש‬‫ת‬/‫הקלד‬‫ת‬‫כפתור‬-( ‫הלחיצה‬Pushbutton Click):-Say Hello.

‫מערכת‬‫פיתוח‬ ‫סביבת‬‫מ‬‫מ‬‫ו‬‫זג‬‫ת‬/‫משולבת‬‫רשת‬‫של‬‫מערכת‬SAP[System(Integrated Development Environment)SAP
Web IDE]‫הבא‬ ‫המסך‬ ‫את‬ ‫מציגה‬:-
‫הגדרת‬‫מנהל‬/‫פקד‬‫ה‬‫יישו‬‫ם‬(Application Controller Define)‫מותאמת‬‫במסגרת‬( ‫קובץ‬File)‫נפרד‬‫באמצעות‬‫הרחבת/תוספת‬‫אובייקט‬
‫ה‬( ‫מנהל‬Controller Object Extending)‫של‬‫מרכז‬‫פיתוח‬‫ממשק‬‫משתמש‬‫מערכת‬:‫ה‬-SAP{Core[Development(User Interface)
SAP UI]‫התגיות‬ ‫שפת‬ ‫עבור‬HTML5( [HyperText Markup Language)HTML5]SAPUI5.}‫הינו‬ ‫בהתחלה‬‫מחזיק‬(Holds)‫את‬ ‫רק‬
‫שימוש/פעילות/אפשרות‬‫בודד‬/‫ת‬/‫יחיד‬/‫ה‬(Single Function):-onShowHello‫ה‬( ‫מנהל‬Handles)‫את‬‫לח‬‫יצת‬‫ה‬( ‫כפתור‬Button
Pressing)‫ה‬ ‫הצגת‬ ‫באמצעות‬/‫התראה‬‫אזעק‬‫ה‬(Alert);( ‫תקנים‬Conventions):-‫ה‬ ‫שמות‬‫מנהל‬/‫פקד‬(Controller Names)‫מהוונים‬[
(Capitalized)‫מוגדר‬‫ים‬‫באמצעות‬( ‫גדולות‬ ‫אותיות‬Capital Letters)].‫מנהל‬‫ים/פקדים‬(Controllers)‫נוסעים‬(Carry)‫ש‬‫ם‬(Name)
‫המיוחס‬ ‫למבט‬ ‫זהה‬/‫מקורב‬[(Related View)‫ב‬( ‫יחס‬Relationship):-1:1]‫מנהל‬‫י‬( ‫האירוע‬Event Handlers)‫בעלי‬ ‫הינם‬-‫ה‬( ‫קידומת‬
Prefixed):-on;‫ה‬ ‫שמות‬‫מנהל‬/‫פקד‬(Controller Names):‫ב‬ ‫תמיד‬ ‫מסתיימים‬-*.controller.js.
‫מידע/פרטים‬( ‫מקורב/ים‬Related Information)
sap.ui.define
( ‫ניספח‬Appendix:)-( ‫הקוד/הוראות‬ ‫תצורת‬ ‫שורות‬Source Code
Lines)‫ללא‬( ‫ההסבר‬Explanation)
[1]Hello World!
<!DOCTYPE html>
<html>
<head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body> <p>Hello World</p>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
<script
</script>
<script>
});
</script>
</head> <body class="sapUiBody" id="content"></body>
</html>
[2( ‫איתחול‬ ]Bootstrap)
<!DOCTYPE html>
<html>
<head>
<script
data-sap-ui-preload="async" > </script>
<script> sap.ui.getCore().attachInit(function () { alert("UI5 is ready"); });</script>
</head>
</html>
[3( ‫מנהלים/פקדים‬ ]Controls)
<!DOCTYPE html>
<html>
<head>
<script
</script>
<script>
});
</script>
</body>
</html>

<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"> <Text text="Hello World"/>
</mvc:View>
<!DOCTYPE html>
<html>
<head>
/* Put your own Name */
<script
data-sap-ui-preload="async" data-sap-ui-resourceroots='{ "sap.ui.demo.wt": "./" }' >
</script>
<script>
sap.ui.getCore().attachInit(function () { sap.ui.xmlview({ viewName :
"sap.ui.demo.wt.view.App" }).placeAt("content");
});
</script>
</body>
</html>
[5( ‫מנהלים‬ ]Controllers)
<mvc:View
controllerName="sap.ui.demo.wt.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Button
text="Say Hello"
press="onShowHello"/>
</mvc:View>
‫ה‬( ‫קובץ‬File):-App.controller.js‫ה‬ ‫במסגרת‬‫תקי‬‫ה‬(Folder):-webapp/controller
sap.ui.define([
"use strict";
return Controller.extend("", {
});
});
‫ה‬( ‫קובץ‬File):-App.controller.js‫ה‬ ‫במסגרת‬‫תקי‬‫ה‬(Folder):-webapp/controller
sap.ui.define([
"use strict"; return Controller.extend("sap.ui.demo.wt.controller.App", {
onShowHello : function () {
// show a native JavaScript alert
alert("Hello World");
}
});
});

SAPUI5 on SAP Web IDE

More Related Content

Viewers also liked (14)

Similar to SAPUI5 on SAP Web IDE (20)

SAPUI5 on SAP Web IDE