More Related Content Similar to SAPUI5 on SAP Web IDE
Similar to SAPUI5 on SAP Web IDE (20) SAPUI5 on SAP Web IDE1. :ה מערכת משתמש ממשק פיתוח-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]
( ניספח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/
אליו להתחבר יהייה ניתן הרי
2. מערכת של רשת ממוזגת/משולבת פיתוח סביבת מערכת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]:הבא המסך את מציגה-
5. כלל מחיקתתצורתהקוד/הוראות( מקורי/תOriginal Source Code Delete).
הקלדת/טעינתהקוד/הוראות תצורתחדש/ות(New Source Code Enter)ו-הקשת/הקלדתכפתור-( הלחיצהPushbutton Click):-
Save.
הקשת/הקלדתכפתור-( הלחיצהPushbutton Click):-Run
6. [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.
7. ה( קובץ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>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
הצגתכותר/תה( יישוםApplication Title Displayed)ה במסגרתדפדפן(Browser).כי לעובדה מודעים להיות ישה הכותרתמוקלדת
קשיח באופן(Hard-Coded Title)ל ניתנתביטול/( כפיהOverriden)ה במסגרת( יישוםApplication)ל ,דוגמה(Example)להצגת
הכותרת(Title Display)בשפתהמשתמש(User Language).
<title>Walkthrough</title>
<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
8. 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
ה( קובץFile):-Index.htmlה במסגרתתקיה(Folder):-webapp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Walkthrough</title>
טעינת/העמסתמסגרת/דפוספיתוחמשתמש ממשק:ה מערכת-SAP{Framework Load[Development(User Interface)SAP UI]
התגיות שפת עבורHTML5( [HyperText Markup Language)HTML5]SAPUI5}מתוךשרתהרשת( המקומיLocal Web Server)
ו-איתחולמאפייני/מודוליליבה/מרכז/תווך/לב(Core Modules Initialize)בעלי/תאפשרויות( מערכת תצורתConfiguration
Options): הבאות-
<script
id="sap-ui-bootstrap"
המאפיין/אפיון(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.
src="/resources/sap-ui-core.js"
מנהלי/פקדיפיתוחממשקמשתמשמערכת:ה-SAP{Controls[Development(User Interface)SAP UI]התגיות שפת עבור
HTML5( [HyperText Markup Language)HTML5]SAPUI5}תומכים(Support)( נושא בערכותThemesשונות )-בחירת
ברירת-המחדל(Default Select):-sap_bluecrystal.
data-sap-ui-theme="sap_bluecrystal"
ציוןספריתממשקהמשתמש[Library Specify(User Interface)UI]:-sap.mהכוללת/מנהליפקדיממשקהמשתמש[Controls(
User Interface)UI]במסגרת הנידרשיםנושאה( הוראהTutorial).הנוכחי
data-sap-ui-libs="sap.m"
ב שימוש לעשות יהייה שניתן עמ"נשימושיות/פעילויות/אפשרויותטעינת/העמסתמסגרת/דפוספיתוחמשתמש ממשק:ה מערכת-SAP{
Functionality[Development(User Interface)SAP UIהתגיות שפת עבור ]HTML5( [HyperText Markup Language
)HTML5]SAPUI5}שהתרחשולאחרונה/"ביותר/"טריןת חדשות(Most Recent)מותאמת ,ה גרסת הגדרת( תאימותCompatibility
Version Define):-edge.
data-sap-ui-compatVersion="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)במסגרת מקום מכל/קודהוראות(
9. 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}.
ה( קובץFile):-index.htmlה במסגרתתקיה(Folder):-webapp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="/resources/sap-ui-core.js"
10. data-sap-ui-theme="sap_bluecrystal"
ה שםמנהל/( פקדControl Name)בעל הינו-קידומתסביבת-( השםNamespace Prefixed)שלספרית/המנהל( פקדControl Library
):-sap.mו-מותאמתהעברתה( אפשרויותOptions Passed)ל( מרכיב/בונהConstructor)אובייקט באמצעותשפתהתכנות
(Programming Language Object):-JavaScript.
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>
( שירשור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):את-
<body><p>Hello World</p></body>
שם-לב/( נלוות הערה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
עיון/אזכור/מראה-מקוםממשקהיישוםה[ תכנותיReference(Application Programming Interface)API]:-
sap.ui.core.Element
עיון/אזכור/מראה-מקוםממשקהיישוםה[ תכנותיReference(Application Programming Interface)API]:-
sap.ui.base.ManagedObject
[4]מבטיבמיחשוב נתונים ייצוגXML[Views(eXtensible Markup Language)XML]
ממשק הכללתמשתמש[(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
11. 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.
12. ה( קובץ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.
13. ה( קובץFile):-Index.htmlה במסגרתתקיה(Folder):-webapp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Daniel Cnahan</title>
<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" 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>
</head> <body class="sapUiBody" id="content">
</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)
14. הכרחי/נדרש הדבר(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).
16. מערכתפיתוח סביבתממוזגת/משולבתרשתשלמערכת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)
עיון/אזכור/מראה-מקוםממשקהיישוםה[ תכנותיReference(Application Programming Interface)API]:-
sap.ui.define
( ניספחAppendix:)-( הקוד/הוראות תצורת שורותSource Code
Lines)ללא( ההסברExplanation)
[1]Hello World!
ה( קובץFile):-index.htmlה במסגרתתקיה(Folder):-webapp
<!DOCTYPE html>
<html>
<head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Daniel Cnahan</title>
</head>
<body> <p>Hello World</p>
</body>
</html>
ה( קובץFile):-index.htmlה במסגרתתקיה(Folder):-webapp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Daniel Cnahan</title>
17. <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> <body class="sapUiBody" id="content"></body>
</html>
[2( איתחול ]Bootstrap)
ה( קובץFile):-index.htmlה במסגרתתקיה(Folder):-webapp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Daniel Cnahan</title>
<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 () { alert("UI5 is ready"); });</script>
</head>
<body><p>Hello World</p></body>
</html>
[3( מנהלים/פקדים ]Controls)
ה( קובץFile):-Index.htmlה במסגרתתקיה(Folder):-webapp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Daniel Cnahan</title>
<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> <body class="sapUiBody" id="content">
</body>
</html>
[4]מבטיבמיחשוב נתונים ייצוגXML[Views(eXtensible Markup Language)XML]
ה( קובץFile):-App.view.xmlה במסגרתתקיה(Folder):-webapp/view
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"> <Text text="Hello World"/>
</mvc:View>
18. ה( קובץFile):-index.htmlה במסגרתתקיה(Folder):-webapp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
/* Put your own Name */
<title>Daniel Cnahan</title>
<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" 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>
</head> <body class="sapUiBody" id="content">
</body>
</html>
[5( מנהלים ]Controllers)
ה( קובץ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"
press="onShowHello"/>
</mvc:View>
ה( קובץFile):-App.controller.jsה במסגרתתקיה(Folder):-webapp/controller
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("", {
});
});
ה( קובץFile):-App.controller.jsה במסגרתתקיה(Folder):-webapp/controller
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict"; return Controller.extend("sap.ui.demo.wt.controller.App", {
onShowHello : function () {
// show a native JavaScript alert
alert("Hello World");
}
});
});