הנושאים העיקריים בפיתוח יישומי UI5 אשר מותאמים למובייל הם:

• רכיבים מומלצים למימוש ביישומי UI5
• פריסת הדפים הפנימיים באפליקציה
• ניווט בין המסכים (ראוטינג)
• ייעול הקוד מבחינת ביצועים

רכיבים מומלצים למימוש ביישומי UI5

אם היישום שלכם מיועד לשימוש במובייל – אנו ממליצים לעשות שימוש ברכיבים שנמצאים תחת ספריה "sap.m"', לדוגמא:

• sap.m.App
• sap.m.Page
• sap.m.SplitApp

רכיבים אשר נמצאים תחת ספריה sap.m מתאימים את עצמם ליכולות המכשיר דרכו ניגש המשתמש, ומנצלים בצורה מיטבית את הנדל"ן של מסך העבודה, תוך כדי אספקת חוויה נעימה למשתמשים, בלי להתחשב בסוג המכשיר איתו הם עובדים.

פריסת הדפים הפנימיים

אם יש לך אפליקציה בעלת מסך פשוט יחד, שבו מספיק לנווט מעמוד אחד לאחר – אז אתה פשוט יוצר את מספר העמודים הרצוי ומחליף (מנווט) ביניהם (כלומר, הניווט יתבצע במקום אחד).

אם יש לך אפליקציה יותר מורכבת, אנו ממליצים להשתמש ברכיב שנקרא sap.m.SplitApp – זה הוא עוד רכיב בסיסי אפשרי לאפליקציות מובייל בsapui5 חוץ מהרכיב sap.m.App.
רכיב זה מכיל שני מקומות בהם מתבצע ניווט, אחד אם רץ על טאבלט או מחשב ואחד נוסף אם רץ על מכשיר סלולרי.
התצוגה של הNavContainer של המסטר תלוי במצב האנכי או האופקי של המכשיר ובהגדרה של רכיב הSplitApp. הרכיב הזה גם מאפשר לך לעבוד עם ניווט בעל מקום אחד (בעזרת המאפיין mode=”ShowHideMode” – המסטר יוסתר אוטומטי במצב אנכי).
על מסכים צרים של טלפונים (או טאבלטים במצב אנכי) ומסך הפרטים מפוצל לשני דפים נפרדים.
המשתמש יכול לנווט בין הרשימה לפרטים ולראות את כל הפרטים הקיימים בכל איזור.

מתי נשתמש ב sap.m.SplitApp:
* כאשר יש לסקור ולעבד פריטים שונים במהירות עם ניווט מינימלי בהמשך.

מתי לא נשתמש ב sap.m.SplitApp:

* כאשר יש לאפשר סינונים מורכבים על רשימת הפריטים.
* כאשר יש לצפות במאפיינים שונים של כל רכיב ברשימה ולהשוות את הערכים הללו בין הפריטים.
* כאשר אתה רוצה להציג אובייקט יחיד. אל תשתמש ברשימת הmaster להצגת היבטים שונים של אותו אובייקט.

מימוש הניווט (ראוטינג)

קודם כל, מה זה ראוטינג ב sapui5?
ראוטינג זה ממשק שמאפשר ניווט (מעבר) מתצוגה (עמוד) אחת לאחרת, אתחול האפליקציה (bootstrap) והזרקת תצוגות לתוך האפליקציה. בsapui5 יש שני סוגים כלליים לראוטינג:
* יחיד
* מרובה
קונפיגורציה הראוטינג מתבצעת בקובץ ה manifest.json תחת כותרת הrouting ומקשרת בין הבקר לתצוגה המקבילה. תחת כותרת ה routing תת כותרת config יש להגדיר את המאפיינים הכלליים של הראוטינג באפליקציה:

"config": {
"routerClass" : "sap.m.routing.Router",
"viewType" : "XML",
"viewPath" : "path_to_view_folder",
"controlId" : "main_container_id",
"controlAggregation": "pages",
"transition" : "slide",
"bypassed" : {
"target": ["target_name"]
}
}

תחת תת הכותרת routes מוגדר:

"routes": [
{
"pattern" : "Details”,
"name" : "Details",
"target" : “Details”
}
]

תחת תת כותרת targets מתוארים אילו תצוגות (views) משתייכים לשם של הראוטינג

"targets": {
"Details" : {
"viewType" : "XML",
"transition" : "slide",
"clearAggregation" : true,
"viewName" : "DetailPage",
"viewLevel" : 1
},
}

הדבר האחרון שיש לעשות הוא לאתחל את הראוטינג שלך בבקר (controller) בתצוגה ((view המקבילה
במתודה onInit() ולקשור את המתודה

onInit : function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("Details").attachPatternMatched(this._onDetailsMatched, this);
},

_onDetailsMatched : function(event) {

}

על מנת לבצע ניווט על ידי הראוטינג אתה צריך לקרוא למתודה מהממשק של הראוטר

sap.ui.core.UIComponent.getRouterFor(this).navTo("Details");

כעת, לאחר כל מעבר לראוטינג של “Details” המתודה "_onDetailsMatched()" תבוצע, היכן שתוכל לנהל את הלוגיקה הרצויה.

שיפור ביצועים

• להימנע משימוש בtimeouts (setTimeout())
• לנהל את העולות המשתמש בעזרת component events
• לא לבצע פעולות "כבדות" בצד המשתמש (UI) (תן לצד השרת לבצע את העבודה)
• בנה בצורה נכונה את שרשרת הקריאות
• אתחל את כל המודלים בפונקציית האתחול של קובץ ה Component.js
• באופן ברירת מחדל בצע אתחול בפונקציה הסטנדרטית של הקונטרולר (onInit(onAfterRendering())
• השתמש בהורשה בקובץ הCSS
• כאשר תרצה להשתמש במתודות שקובעות מיקום השתמש בtimeout מינימלי במאפייני המתודה.