SAPبرنامج تعليمي UI5 للمبتدئين
جيسيكا بليك
⚡ ملخص ذكي
SAPواجهة المستخدم 5 هي SAPإطار عمل HTML5 المتجاوب الذي يدعم تطبيقات الويب المؤسسية على أجهزة سطح المكتب والهواتف المحمولة والأجهزة اللوحية. يشرح هذا الدليل بنية MVC، ونموذج المكونات، والمكتبات، وكيفية إنشاء المكونات الرئيسية والفرعية داخله. Eclipse.
ما هي تفاصيل SAPواجهة المستخدم 5؟
SAPUI5 عبارة عن مجموعة من المكتبات لإنشاء تطبيقات ويب سريعة الاستجابة تعمل على أجهزة متعددة مثل سطح المكتب والجوال والكمبيوتر اللوحي. SAPيعمل على UI5 مفهوم MVC لتسريع دورة التطوير عن طريق إنشاء البيانات ومنطق الأعمال وتمثيل البيانات بشكل منفصل في طريقة العرض. لذلك يمكن أن يتم تطوير العرض ووحدة التحكم بشكل مستقل لإنشاء نماذج (حاويات البيانات).
SAPUI5 هو الأحدث في سلسلة SAP تقنيات تطوير واجهة المستخدم. من أجل توفير التكامل على شبكة الإنترنت للالأساسية SAP نظام تخطيط موارد المؤسسات، SAP توصلت إلى العديد من تقنيات تطوير واجهة المستخدم مثل BSP (صفحات خادم الأعمال)، وPDK (مجموعة تطوير البوابة الإلكترونية)، وWeb Dynpro Java، ويب دينبرو ABAP. وخليفة Web Dynpro ABAP هو SAPواجهة المستخدم 5.
SAPUI5 Architecture
SAPUI Archiمخطط فني
في ما سبق Archiفي بنية النظام، يشير المربع الأول "الأجهزة" إلى الأجهزة التي تعمل عليها تطبيقات UI5. يمكن الوصول إلى تطبيقات UI5 عبر تطبيق جوال أو أي متصفح. تُسمى هذه الطبقة "طبقة العرض".
SAPتوجد تطبيقات UI5 وخدمات oData على SAP خادم بوابة NetWeaver. تُسمى هذه الطبقة من البنية "طبقة التطبيق".
يتم تنفيذ منطق العمل الفعلي في SAP الأنظمة الأساسية مثل ECC وCRM وBW. يمكن تطبيق منطق الأعمال باستخدام SAP البرامج والوحدات الوظيفية. SAP المعاملات والبيانات الرئيسية موجودة SAP الأنظمة. تسمى هذه الطبقة "طبقة قاعدة البيانات" أو "طبقة الثبات".
SAPمكون واجهة المستخدم 5
المكون هو جزء من التعليمات البرمجية القابلة لإعادة الاستخدام. هناك نوعان من المكونات التي توفرها SAPواجهة المستخدم 5:
- مكونات واجهة المستخدم - تمثل هذه المكونات واجهة مستخدم تحتوي على عناصر واجهة المستخدم. وهي تستند إلى SAPفئة UI5 المسماة sap.ui.core.UIComponent
- المكونات غير المرئية - لا تحتوي هذه المكونات على واجهة مستخدم. وهي تعتمد على SAPفئة UI5 تسمى sap.ui.core.Component
في الأساس، المكون هو مجلد. عندما تقوم بإنشاء جديد SAPعند تطبيق UI5، ستتمكن من رؤية بنية المجلد التي تم إنشاؤها في مستكشف المشروع الخاص بك كما هو موضح أدناه.
في تطبيق UI5 هذا، يُعدّ PassNum مكونًا. ملف Component.js ضروري لكي يتصرف تطبيق UI5 كمكون.
التالي في هذا SAPUI5 Eclipse البرنامج التعليمي، وسوف نتعلم كيفية الإعداد SAPواجهة المستخدم 5.
SAPإعداد واجهة المستخدم 5
قبل أن نبدأ، عليك التأكد مما يلي:
- Eclipse (إصدار Luna) مثبت على الكمبيوتر المحمول الخاص بك
- SAP أدوات التطوير ل Eclipse تم تثبيت لونا على جهازك Eclipse (SAP أدوات التطوير ل Eclipse لونا - https://tools.hana.ondemand.com/luna/)
- SAP تم تثبيت لوحة تسجيل الدخول، ويمكنك الوصول إلى SAP نظام بوابة NetWeaver لنشر واختبار التطبيق الذي سنقوم ببنائه في هذه المدونة.
بعد أن يتم بناء التطبيق بشكل كامل، يجب أن يبدو بالشكل التالي:
في هذا SAPفي دليل دروس UI5، سنقوم بإنشاء مكونين باسم المكون الرئيسي والمكون الفرعي. سنبدأ بإنشاء المكون الفرعي ثم نستخدمه في المكون الرئيسي.
دعونا نبدأ في جعل أيدينا قذرة.
الجزء 1) إنشاء تطبيق تابع
هدفنا هو إنشاء مكون فرعي يستقبل رقمًا من 1 إلى 12 ويعرض اسم الشهر. على سبيل المثال، عند استقبال الرقم 3، يجب أن يعرض "مارس".
الخطوة 1) إنشاء مشروع واجهة المستخدم
انتقل إلى ملف->جديد->أخرى->SAPتطوير تطبيقات UI5 -> مشروع التطبيق.
إنشاء مشروع تطبيق ل SAPقم بتثبيت واجهة المستخدم UI5 باتباع المعالج. انظر لقطة الشاشة أدناه.
أدخل اسم المشروع، واترك الخيارات الأخرى كما اقترحها المعالج.
في لقطة الشاشة أعلاه، يظهر نوعان من المكتبات على شكل أزرار اختيار:
- sap.m
- sap.ui.commons
عند تحديد sap.m، فإنك تخبر المعالج بإنشاء مشروع تطبيق UI5 الذي سيتضمن قسم bootstrap الخاص به تلقائيًا مكتبة sap.m، والتي تهدف إلى إنشاء تطبيقات ويب متجاوبة.
التالي في هذا SAP في برنامج تعليمي لـ FIORI، ستجد قسمًا من المعالج أدناه حيث تحتاج إلى إنشاء العرض الأولي. العرض الأولي هو العرض الذي سيتم عرضه أولاً عند الوصول إلى التطبيق.
هنا عليك إدخال اسم العرض وتحديد نوع العرض. SAPتدعم واجهة UI5 4 أنواع من طرق العرض كما هو واضح في الشاشة أعلاه. لذا فإن واجهة المستخدم الخاصة بـ a SAPيمكن بناء تطبيق UI5 باستخدام Javaنص برمجي أو XML أو JSON أو لغة HTML، أياً كانت اللغة التي تجيد استخدامها.
في نهاية المعالج، سيتم إنشاء مشروع جديد وعرضه في نافذة مستكشف المشاريع الخاصة بـ Eclipse مثل أدناه.
الخطوة 2) كود Component.js
بعد ذلك، دعونا ننشئ ملف Component.js ونكتب الكود التالي فيه.
sap.ui.core.UIComponent.extend("DisplayMonth.Component", { metadata: { "name": "DisplayMonth", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; var oView = sap.ui.view({ viewName: "DisplayMonth.displaymonth.DisplayMonthView", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(oView); }, init: function() { // call super init (will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // always use absolute paths relative to our own component // (relative paths will fail if running in the Fiori Launchpad) var sRootPath = jQuery.sap.getModulePath("DisplayMonth"); }, });
الخطوة 3) كود Index.html
بعد ذلك، دعونا نخبر ملف index.html بتحميل ملف Component.js عند الوصول إلى التطبيق. اكتب الكود التالي في ملف index.html.
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-resourceroots='{"DisplayMonth": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "DisplayMonth" }) }).placeAt("content"); }); </script> </head> // start of body of SAPUI5 application. It contains a div element. <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
الخطوة 4) كود DisplayMonthView.view.xml
بعد ذلك، دعونا نكتب التعليمات البرمجية في عرض الشهر لعرض الشهر الذي تم استلام رقمه من المكون الأصل.
<html:style> #__xmlview1--id{ margin-left: 30rem; margin-top: 9rem; font-size: 6rem; font-style: italic; background-color: burlywood; } </html:style> <App id="fioricontent"> <Page title="Child Component"> <content> <Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text> </content> </Page> </App>
بعد لصق الكود أعلاه، يجب أن تبدو صفحتك كما يلي.
الخطوة 5) كود DisplayMonthView.controller.js
وأخيرًا، دعونا نكتب كود ملف وحدة التحكم الخاصة بـ DisplayMonthView.
الكود مكتوب فقط في دالة onInit()، لذا تم لصقها هنا فقط. أما باقي الملف فهو كما تم إنشاؤه بواسطة إطار العمل.
onInit : function() { sap.ui.getCore().getEventBus().subscribe("exchange", "data", function(channel, event, oEventData) { jsonModel = new sap.ui.model.json.JSONModel({ monthumber : oEventData, monthname : '' }); // derive month name from month number switch (jsonModel.oData.monthumber) { case "1": jsonModel.oData.monthname = 'January'; break; case "2": jsonModel.oData.monthname = 'February'; break; case "3": jsonModel.oData.monthname = 'March'; break; case "4": jsonModel.oData.monthname = 'April'; break; case "5": jsonModel.oData.monthname = 'May'; break; case "6": jsonModel.oData.monthname = 'June'; break; case "7": jsonModel.oData.monthname = 'July'; break; case "8": jsonModel.oData.monthname = 'August'; break; case "9": jsonModel.oData.monthname = 'September'; break; case "10": jsonModel.oData.monthname = 'October'; break; case "11": jsonModel.oData.monthname = 'November'; break; case "12": jsonModel.oData.monthname = 'December'; break; } this.getView().setModel(jsonModel, "myModel"); }, this); },
الخطوة 6) نشر التطبيق على SAP خادم بوابة NetWeaver
انشر المشروع وأعطِ الاسم التقني لتطبيق BSP الذي تم إنشاؤه على خادم واجهة ABAP الأمامية. ليكن الاسم com.zdisplaymonthيجب أن يبدو مشروعك كما يلي.
الجزء 2) إنشاء مكون الأصل
حان الآن وقت إنشاء مكون جديد (المكون الأصل) والذي سيستهلك المكون الذي أنشأناه حتى الآن في هذا البرنامج التعليمي.
الخطوة 1) إنشاء جديد SAPتطبيق واجهة المستخدم 5
انتقل إلى ملف->جديد->أخرى->SAPتطوير تطبيقات UI5 -> مشروع التطبيق. ثم اتبع تعليمات المعالج لإنشاء مشروع جديد SAPمشروع تطبيق UI5. لقد تم وصف ذلك بالتفصيل في الخطوة 1 من الجزء 1 في هذا البرنامج التعليمي أعلاه.
اسم مشروع المكون الرئيسي هو رقم المرورالاسم التقني لتطبيق BSP الذي يتم إنشاؤه بعد النشر هو zpassnumسيكون هيكل المشروع كما يلي.
لنقم الآن بكتابة التعليمات البرمجية في ملفات index.html و Component.js و PassNum.view.xml و PassNum.controller.js.
الخطوة الثانية) المصدر Code ملف Index.html الخاص بالمكون الرئيسي
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-resourceroots='{"PassNum": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "PassNum" }) }).placeAt("content"); }); </script> </head> // start of Body of SAPUI5 application, Contains a div tag, <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
الخطوة 3) كود المصدر لملف Component.js الخاص بالمكون الأصلي
sap.ui.core.UIComponent.extend("PassNum.Component", { metadata: { "name": "PassNum", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; // Creating Reference of a PassNum XML view var myView = sap.ui.view({ viewName: "PassNum.passnum.PassNum", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(myView); }, init: function() { // call super init (this will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // ensure to use absolute paths relative to own component // (running in the Fiori Launchpad, relative paths will fail) var sRootPath = jQuery.sap.getModulePath("PassNum"); }, });
الخطوة 4) كود المصدر لملف PassNum.view.xml
<Page title="Parent Component"> <content> <VBox xmlns="sap.m" id="vboxid"> <items> <Button xmlns="sap.m" id="1" text="First" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="2" text="Second" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="3" text="Third" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <core:ComponentContainer id="conpcontid" name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer> </items> </VBox> </content> </Page>
بعد استخدام الكود أعلاه في العرض الخاص بك، يجب أن يبدو العرض الخاص بك كما يلي.
الخطوة 5) الكود المصدري لـ PassNum.controller.js
تم تغيير دالة onInit() فقط. أما باقي محتويات هذا الملف فبقيت كما هي.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
الخطوة 6) نشر المكون الأصلي إلى SAP خادم بوابة NetWeaver
انشر التطبيق على خادم واجهة المستخدم ABAP وقم بتشغيله. يمكنك تشغيله بالنقر بزر الماوس الأيمن على المشروع ثم اختيار خيار "التشغيل على خادم ABAP".
أدناه URL سيتم افتتاحه في Eclipse المتصفح.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
نسخ URL قم بتشغيله في المتصفح الفعلي. اسم المضيف المذكور أعلاه (المميز باللون الأصفر) هو اسم مضيف خادم واجهة المستخدم الأمامية ABAP الخاص بك.
الناتج
انقر على زر "الأول"، وسيظهر شهر يناير في المكون الفرعي.
استمتع بإنشاء تطبيقات ويب جميلة وسريعة الاستجابة باستخدام SAPواجهة المستخدم 5.
