SAP UI5 - Các thành phần chính

SAP UI5 có nhiều thành phần là các đối tượng độc lập và có thể tái sử dụng trong ứng dụng UI5. Những thành phần này có thể được phát triển bởi những người khác nhau và có thể được sử dụng trong các dự án khác nhau.

Một ứng dụng có thể sử dụng các thành phần từ các vị trí khác nhau và do đó bạn có thể dễ dàng nhận được cấu trúc của một ứng dụng. Bạn có thể tạo các loại thành phần khác nhau trong quá trình phát triển SAP UI5.

Thành phần vô mặt

Các thành phần không có khuôn mặt được sử dụng để lấy dữ liệu từ hệ thống phụ trợ và chúng không chứa giao diện người dùng.

Example- Chúng là một phần của lớp sap.ui.core.component

Thành phần giao diện người dùng

Các thành phần giao diện người dùng được sử dụng để thêm chức năng kết xuất và thể hiện vùng màn hình hoặc phần tử trên giao diện người dùng.

Example- Thành phần giao diện người dùng có thể là một nút có cài đặt để thực hiện một số tác vụ. Nó là một phần của lớp: sap.ui.core.UIComponent

Note- sap.ui.core.component là lớp cơ sở cho các thành phần giao diện người dùng và giao diện người dùng. Để xác định chức năng mở rộng, các thành phần có thể kế thừa từ lớp cơ sở hoặc từ các thành phần khác trong phát triển giao diện người dùng.

Tên mô-đun của một thành phần được gọi là tên gói, và .component trong đó tên gói được định nghĩa là tên của tham số được truyền cho hàm tạo thành phần.

Các thành phần SAP UI5 cũng có thể được phân chia theo bối cảnh hệ thống -

• Thành phần phía khách hàng: Điều này bao gồm,
  • Thư viện điều khiển sap.m, sap.ui.common, v.v.
  • Javascript cốt lõi
  • Kiểm tra bao gồm HTML và Javascript
• Thành phần phía máy chủ
  • Theming Generator
  • Các công cụ kiểm soát và phát triển ứng dụng trong Eclipse
  • Trình xử lý tài nguyên

Cấu trúc của một thành phần

Mỗi thành phần được biểu diễn dưới dạng một thư mục và chứa tên của các thành phần và các tài nguyên cần thiết để quản lý thành phần.

Mỗi thành phần phải chứa các tệp sau:

• Component.json tệp chứa siêu dữ liệu cho thời gian thiết kế và chỉ được sử dụng cho các công cụ thời gian thiết kế.

• Component.js được sử dụng để xác định các thuộc tính, sự kiện và các phương thức thành phần chịu trách nhiệm về siêu dữ liệu thời gian chạy.

Làm thế nào để tạo một thành phần SAP UI5 mới?

Để tạo một thành phần mới, bạn phải tạo thư mục mới. Hãy để chúng tôi đặt tên cho nó làbutton.

Tiếp theo là tạo component.js file

Sau đó, bạn phải mở rộng lớp cơ sở của thành phần UI sap.ui.core.UIComponent.extend và nhập tên của thành phần và đường dẫn gói.

Sau đó, để xác định một thành phần mới, bạn phải bắt đầu với require tuyên bố như sau -

// defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

Bước tiếp theo là xác định component.json trong thư mục của bạn như sau:

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

Cách sử dụng một thành phần

Để sử dụng một thành phần, bạn phải bọc thành phần đó trong một thùng chứa thành phần. Bạn không thể sử dụng trực tiếp thành phần giao diện người dùng trong một trang bằng phương pháp placeAt. Một cách khác là chuyển thành phần đến phương thức khởi tạo componentContainer.

Sử dụng phương pháp placeAt

Nó bao gồm việc thêm thành phần vào vùng chứa và sử dụng placeAt để đặt thành phần trên trang.

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

Sử dụng hàm tạo componentContainer

Một vùng chứa thành phần mang các cài đặt cụ thể và cũng chứa các phương thức vòng đời của một điều khiển thông thường. Đoạn mã sau đây cho thấy cách chuyển thành phần tới phương thức khởi tạo componentContainer.

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");