SAP UI5 - Kluczowe komponenty
SAP UI5 ma wiele komponentów, które są niezależnymi obiektami wielokrotnego użytku w aplikacji UI5. Te komponenty mogą być opracowywane przez różne osoby i mogą być używane w różnych projektach.
Aplikacja może używać komponentów z różnych lokalizacji, dzięki czemu można łatwo uzyskać strukturę aplikacji. Możesz tworzyć różne typy komponentów w ramach rozwoju SAP UI5.
Komponenty bez twarzy
Komponenty bez twarzy są używane do pobierania danych z systemu zaplecza i nie zawierają interfejsu użytkownika.
Example- Są częścią klasy sap.ui.core.component
Składniki interfejsu użytkownika
Składniki interfejsu użytkownika służą do dodawania funkcji renderowania i reprezentowania obszaru ekranu lub elementu w interfejsie użytkownika.
Example- Komponent UI może być przyciskiem z ustawieniami do wykonania jakiegoś zadania. Jest częścią klasy: sap.ui.core.UIComponent
Note- sap.ui.core.component jest klasą bazową dla komponentów bez twarzy i komponentów interfejsu użytkownika. Aby zdefiniować funkcję rozszerzalności, składniki mogą dziedziczyć z klasy bazowej lub z innych składników w programowaniu interfejsu użytkownika.
Nazwa modułu składnika jest znana jako nazwa pakietu, a .component gdzie nazwa pakietu jest zdefiniowana jako nazwa parametru przekazanego do konstruktora składnika.
Komponenty SAP UI5 można również podzielić zgodnie z krajobrazem systemu -
- Komponent po stronie klienta: obejmuje:
- Biblioteki kontrolne sap.m, sap.ui.common itp.
- Podstawowy JavaScript
- Test obejmuje HTML i Javascript
- Komponent po stronie serwera
- Generator motywów
- Narzędzia do sterowania i tworzenia aplikacji w Eclipse
- Obsługa zasobów
Struktura komponentu
Każdy komponent jest reprezentowany w postaci folderu i zawiera nazwy komponentów oraz zasoby wymagane do zarządzania komponentem.
Każdy komponent powinien zawierać następujące pliki -
Component.json plik zawierający metadane dotyczące czasu projektowania i jest używany tylko na potrzeby narzędzi czasu projektowania.
Component.js służy do definiowania właściwości, zdarzeń i metod komponentów odpowiedzialnych za metadane środowiska wykonawczego.
Jak utworzyć nowy komponent SAP UI5?
Aby utworzyć nowy komponent, musisz utworzyć nowy folder. Nazwijmy to jakobutton.
Następnie należy utworzyć plik component.js file
Następnie należy rozszerzyć klasę bazową komponentu UI sap.ui.core.UIComponent.extend i wprowadzić nazwę komponentu oraz ścieżkę do pakietu.
Później, aby zdefiniować nowy komponent, musisz zacząć od require oświadczenie w następujący sposób -
// 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;
};
Następnym krokiem jest zdefiniowanie pliku component.json w folderze w następujący sposób -
{
"name": "samples.components.button",
"version": "0.1.0",
"description": "Sample button component",
"keywords": [
"button",
"example"
],
"dependencies": {
}
}
Jak używać komponentu
Aby użyć komponentu, musisz owinąć go w pojemnik na komponenty. Nie można bezpośrednio używać składnika interfejsu użytkownika na stronie przy użyciu metody placeAt. Innym sposobem jest przekazanie komponentu do konstruktora componentContainer.
Korzystanie z metody placeAt
Obejmuje dodanie komponentu do pojemnika i użycie placeAt metoda umieszczania komponentu na stronie.
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
Korzystanie z konstruktora componentContainer
Kontener komponentów niesie określone ustawienia, a także zawiera metody cyklu życia regularnej kontroli. Poniższy segment kodu pokazuje, jak przekazać składnik do konstruktora componentContainer.
var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
name: " samples.components.shell",
settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");