SAPبرنامج تعليمي UI5 للمبتدئين

ما هي تفاصيل 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يشير المربع الأول، أي "الأجهزة"، إلى الأجهزة التي تعمل عليها تطبيقات واجهة المستخدم 5. ويمكن الوصول إلى تطبيقات واجهة المستخدم 5 عبر تطبيق جوال أو أي متصفح على هذه الأجهزة. وتسمى هذه الطبقة من البنية "طبقة العرض التقديمي".

SAPتوجد تطبيقات UI5 وخدمات oData SAP خادم بوابة NetWeaver. تسمى هذه الطبقة من البنية "طبقة التطبيق".

يتم تنفيذ منطق العمل الفعلي في SAP الأنظمة الأساسية مثل ECC، وCRM، وBW، وما إلى ذلك... يمكن تنفيذ منطق الأعمال باستخدام SAP البرامج والوحدات الوظيفية. SAP المعاملات والبيانات الرئيسية موجودة SAP الأنظمة. تسمى هذه الطبقة من الهندسة المعمارية "طبقة قاعدة البيانات" أو "طبقة الثبات".

SAPمكون واجهة المستخدم 5

المكون هو جزء من الكود العامل الذي يتم إعادة استخدامه أينما كان مطلوبًا. هناك نوعان من المكونات التي يوفرها SAPUI5

مكونات واجهة المستخدم – تمثل واجهة مستخدم تحتوي على عناصر واجهة المستخدم. وتعتمد هذه على فئة SPAUI5 التي تسمى sap.ui.core.UIComponent
المكونات التي لا تحتوي على واجهة مستخدم - وهي تعتمد على SAPفئة UI5 تسمى sap.ui.core.Component

في الأساس، المكون هو مجلد. عندما تقوم بإنشاء جديد SAPعند تطبيق UI5، ستتمكن من رؤية بنية المجلد التي تم إنشاؤها في مستكشف المشروع الخاص بك كما هو موضح أدناه.

في تطبيق UI5 هذا، يعد PassNum أحد المكونات. يعد ملف Component.js إلزاميًا لكي يتصرف تطبيق UI5 كمكون. ملف Component.js هو وحدة تحكم المكون.

التالي في هذا SAPUI5 Eclipse البرنامج التعليمي، وسوف نتعلم كيفية الإعداد SAPواجهة المستخدم 5.

SAPإعداد واجهة المستخدم 5

قبل أن نبدأ، عليك التأكد من أن -

Eclipse (إصدار Luna) مثبت على الكمبيوتر المحمول الخاص بك
SAP أدوات التطوير ل Eclipse لونا وتم تثبيتها على الكسوف الخاص بك (SAP أدوات التطوير ل Eclipse لونا - https://tools.hana.ondemand.com/luna/)
SAP تم تثبيت لوحة تسجيل الدخول، ويمكنك الوصول إليها SAP نظام NetWeaver Gateway للنشر والاختبار على هذا التطبيق الذي سنقوم بإنشائه في هذه المدونة.

بعد أن يتم بناء التطبيق بشكل كامل، يجب أن يبدو بالشكل التالي:

في هذا SAPفي دليل دروس UI5، سنقوم بإنشاء مكونين هما المكون الأصلي والمكون الفرعي. أولاً، سنقوم بإنشاء مكون فرعي ثم نستهلكه في المكون الأصلي.

دعونا نبدأ في جعل أيدينا قذرة.

الجزء 1) إنشاء تطبيق تابع

هدفنا هو إنشاء مكون فرعي يقبل الرقم من 1 إلى 12 ويعرض اسم الشهر. على سبيل المثال، يتلقى 3؛ يجب أن يعرض "مارس".

الخطوة 1) إنشاء مشروع واجهة المستخدم

انتقل إلى ملف->جديد->أخرى->SAPتطوير التطبيقات UI5->مشروع التطبيق.

إنشاء مشروع تطبيق ل SAPواجهة المستخدم 5 باتباع المعالج الذي يفتح. انظر لقطة الشاشة أدناه.

أدخل اسم المشروع، واترك التحديدات الأخرى كما هي كما يقترحها المعالج.

في لقطة الشاشة أعلاه، هناك نوعان من المكتبات يتم عرضهما كأزرار اختيار

sap.m
sap.ui.commons

عندما تحدد sap.m، فإنك تطلب من المعالج إنشاء مشروع تطبيق UI5 الذي سيتضمن قسم التمهيد الخاص به تلقائيًا مكتبة sap.m المخصصة لإنشاء تطبيق ويب سريع الاستجابة.

التالي في هذا SAP البرنامج التعليمي FIORI، سترى القسم أدناه من المعالج حيث تحتاج إلى إنشاء عرض أولي. العرض الأولي هو عرض سيتم عرضه أولاً عند الوصول إلى التطبيق.

هنا تحتاج إلى إعطاء اسم العرض وتحديد نوع العرض. SAPتدعم واجهة UI5 4 أنواع من طرق العرض كما هو واضح في الشاشة أعلاه. لذا فإن واجهة المستخدم الخاصة بـ a SAPيمكن بناء تطبيق UI5 باستخدام Javascript أو 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 فيه SAPUI5 عند الوصول إلى التطبيق من المتصفح. لذا اكتب الكود أدناه في ملف 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

بعد ذلك، دعونا نكتب التعليمات البرمجية في عرض Displaymonth الخاص بنا والذي سيعرض الشهر الذي تم استلام رقم الشهر الخاص به من المكون الأصلي.

<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 () هنا فقط. يتم إنشاء بقية الملف بواسطة إطار العمل.

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 الذي تم إنشاؤه بعد نشره SAPمكون UI5 لخادم الواجهة الأمامية ABAP هو com.zpassnum. سيبدو هيكل المشروع كما يلي

دعونا الآن نكتب التعليمات البرمجية في ملفات Index.html وComponent.js وPassNum.view.xml وPassNum.controller.js

الخطوة 2) كود المصدر لـ 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.

ملخص

في هذا SAPالبرنامج التعليمي UI5، لقد تعلمنا:

SAPاستكشاف واجهة المستخدم 5: SAPUI5 هو الأحدث في سلسلة SAP تقنيات تطوير واجهة المستخدم.
ما هي تفاصيل SAP واجهة المستخدم 5: SAPUI5 عبارة عن مجموعة من المكتبات المستخدمة لبناء تطبيقات الويب سريعة الاستجابة
مكونات من SAPهندسة UI5 هي الأجهزة والعميل وبوابة NetWeaver وطبقة الثبات
A SAPمكون UI5 هو جزء من الكود العامل الذي يتم إعادة استخدامه أينما كان مطلوبًا
انواع من SAPمكونات UI5 هي 1) مكونات واجهة المستخدم، 2) مكونات بدون وجه
لقد تعلمنا كيفية استهلاك مكون sapui5 واحد في مكون sapui5 آخر وتمرير البيانات بين المكونين