Modellen.js gebruiken in SAP UI5 (om alle Global Models te onderhouden)

Voorwoord - Dit bericht maakt deel uit van de UI5-programma's series.

Wat is het model.js-bestand in SAP UI5?

Een model in termen van UI5 is een set gegevens (meestal in JSON-indeling) die kan worden gekoppeld aan elementen van UI5. Voor verschillende eigenschappen van verschillende elementen verschilt het type modelgegevens, bijvoorbeeld:

  • Voor de eigenschap "zichtbaar" van een knop moet het vereiste model (gegevens binnen het model) waar of onwaar zijn
  • Voor de eigenschap "tekst" van een knop moet het vereiste model (gegevens binnen het model) een tekenreeks zijn
  • Voor de gegevens van de tabel moet het vereiste model JSON-gegevens zijn
  • Voor de gegevens van Dropdown moet het vereiste model JSON-gegevens zijn [waarbij één veld als sleutel moet fungeren en een ander als waarde]
  • Voor de gegevens van Tabeltelling die worden weergegeven naast de tabelnaam [Voorbeeldgebruiker(90)], moet het vereiste model (gegevens binnen het model) een numeriek model zijn
  • Voor de gegevens van een formulier moet het vereiste model een object zijn [met meerdere sleutels en waarden, waarbij elke sleutel een element van het formulier zal zijn]
  • Als u inloggegevens naar meerdere pagina's moet overbrengen, moet het vereiste model een object zijn [waarbij het sleutel-waardepaar de ID en het gehashte sessiewachtwoord/gegevens opslaat]

Het model.js in SAP UI5 is een speciaal bestand om meerdere globale variabelen op te slaan die gegevens kunnen bevatten (algemeen bekend als een model) volgens de vereisten.

Telkens wanneer de browser wordt vernieuwd, worden de modelgegevens vernieuwd naar de beginwaarden; daarom wordt aanbevolen om geen gegevens op te slaan die niet verloren mogen gaan tijdens het vernieuwen van de browser.

De lay-out van model.js ziet er ongeveer zo uit in de mappenstructuur:

model.js-bestand

Een globaal model opzetten met behulp van model.js-bestand in SAP UI5

Er zijn drie stappen om een ​​globaal model te gebruiken.

1. Maak een modelobject in het bestand Model.js

De eerste stap is het maken van een model in het bestand model.js. Het bestand model.js is al gemaakt in de modelmap van de webapp. Als er niet zo'n bestand is, maak dan een bestand aan, noem het "model.js" met de gegeven inhoud:

sap.ui.define([ "sap/ui/model/json/JSONModel", "sap/ui/Device" ], function (JSONModel, Device) { "strikt gebruiken"; return { createDeviceModel: function () { var oModel = nieuw JSONModel(Apparaat); oModel.setDefaultBindingMode("OneWay"); return oModel; } }; });

Nu gaan we onze eigen code aan dit bestand toevoegen. Laten we het "createAppConfigModel" noemen met gegeven gegevens:

//app-configuratiemodel createAppConfigModel: function () { var appData = { "editable": false, "count": 0, "formData": {}, "tableData": [] }; var oModel = nieuw JSONModel(appData); retourneer oModel; }

Nu ziet uw Model.js er als volgt uit:

sap.ui.define([ "sap/ui/model/json/JSONModel", "sap/ui/Device" ], function (JSONModel, Device) { "strikt gebruiken"; return { createDeviceModel: function () { var oModel = new JSONModel(Device); oModel.setDefaultBindingMode("OneWay"); return oModel; }, //app Congiguration model createAppConfigModel: function () { var appData = { "editable": false, "count": 0, "formData ": {}, "tableData": [] }; var oModel = new JSONModel(appData); return oModel; } }; });

 

2. Configureer het bestand Component.js voor het Global Model Object

In het Component.js-bestand, voor het geval uw Model.js-bestand er al was, wordt de modelconfiguratie als volgt toegevoegd:

sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/Device", "YRR/YRR/model/models" ], function (UIComponent, Device, models) { "gebruik strikt"; return UIComponent.extend("YRR.YRR.Component", { metadata: { manifest: "json" }, /** * De component wordt automatisch geïnitialiseerd door UI5 tijdens het opstarten van de app en roept de init-methode één keer aan. * @ public * @override */ init: function () { // roep de init-functie van de basiscomponent aan UIComponent.prototype.init.apply(this, argumenten); // activeer routering this.getRouter().initialize(); // set het apparaatmodel this.setModel(models.createDeviceModel(), "device"); } }); });

Hier wordt de modelbestandslocatie bovenaan toegevoegd als "YRR/YRR/model/models" en daarna wordt uiteindelijk het standaardmodel geconfigureerd met behulp van dit "this.setModel(models.createDeviceModel(), "device");"

We moeten nog een configuratie toevoegen voor ons model met deze code: "this.setModel(models.createAppConfigModel(), "AppConfig");"

Nu ziet de code er als volgt uit:

sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/Device", "YRR/YRR/model/models" ], function (UIComponent, Device, models) { "gebruik strikt"; return UIComponent.extend("YRR.YRR.Component", { metadata: { manifest: "json" }, /** * De component wordt automatisch geïnitialiseerd door UI5 tijdens het opstarten van de app en roept de init-methode één keer aan. * @ public * @override */ init: function () { // roep de init-functie van de basiscomponent aan UIComponent.prototype.init.apply(dit, argumenten); // activeer routering this.getRouter().initialize(); // set het apparaatmodel this.setModel(models.createDeviceModel(), "device"); // stel het app Config-model this.setModel(models.createAppConfigModel(), "AppConfig"); } }); });

Dat is het, en we hebben nu een wereldwijd model.

3. Met behulp van het model in beeld of Controller

Nu hebben we eenvoudig toegang tot het model in beeld en de controller. Ook kunnen we het model vanuit de controller manipuleren.

Hoe waarden van een globaal model in SAP UI5 ophalen en wijzigen?

Om een ​​globaal model op te halen, moeten we de modelconfiguratie aanroepen met de modelnaam die we willen openen of wijzigen. Laten we aannemen dat u toegang moet hebben tot het model "count" waarvan de beginwaarde is ingesteld op 0.

var localCount = dit.getOwnerComponent().getModel("AppConfig").getProperty("/count");

De variabele “localCount” heeft nu de waarde 0.

Om de waarde te wijzigen, moeten we de modelconfiguratie aanroepen met de modelnaam die we willen wijzigen. Laten we aannemen dat u het model "count" moet wijzigen met een nieuwe waarde als 90.

dit.getOwnerComponent().getModel("AppConfig").setProperty("/count", 90);

In de bovenstaande stap hebben we de waarde van de telling in het globale model bijgewerkt.

Hoe Global Model te gebruiken om waarden van de ene pagina naar de andere te sturen?

Om waarden van de ene pagina naar de andere te sturen, moet u deze stappen uitvoeren:

1. Maak een veld aan in het globale model dat zal worden gebruikt om gegevens over te dragen

2. Werk de waarde van het model op de eerste pagina bij en navigeer vervolgens naar de tweede pagina

3. Haal op de tweede pagina de waarde van het model op

Al deze stappen zijn hierboven al in verschillende secties besproken.

Hoe het globale model rechtstreeks aan View te binden?

Om een ​​globaal model rechtstreeks aan de weergave te binden, moet u het volgende uitvoeren volgens de gegeven gebruiksscenario's:

1. Bind het globale model aan een knoptekst

/ButtonText}" 
type="Accept" class="sapUiTinyMarginEnd" press="onAccept"/>

In dit voorbeeld hebben we aangenomen dat de ButtonText een veld in het model is met de tekstwaarde Button.

2. Bind Global Model aan de zichtbaarheid van een knop

/OrderType} === 'PO Release' ? true : false}" text="Okay" press="onReleasePO"/>
/OrderType} === 'Cancel PO Release' ? true : false}" text="Okay" press="onCancelReleasePO"/>

In dit voorbeeld wordt Button 1 zichtbaar als het OrderType de waarde 'PO Release' heeft, anders wordt het onzichtbaar.
En knop 2 wordt zichtbaar als het OrderType de waarde 'Cancel PO Release' heeft, anders wordt het onzichtbaar.
Op deze manier kunnen we met behulp van het Global Model de zichtbaarheid van een knop regelen op basis van OrderType.

3. Bind het globale model aan een tabel [als het model JSON is]

Het is belangrijk dat het model dat wordt gepland om te binden met een tabel een indeling heeft zoals hieronder:

{resultaten: [{ }]};

Het betekent dat als uw model slechts een reeks gegevens in deze vorm heeft: [{ }] of {“resultaten”: {JSON-gegevens}}
in beide gevallen mislukt de modelbinding.

Controllercode:

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "gebruik strict"; return Controller.extend("Test.Test.controller.Main", { onInit: function ( ) { }, onBeforeRendering: function () { var that = this; var val = { country_code: 1, country_text: "India" }; var aData = []; aData.push(val); that.getOwnerComponent().getModel ("AppConfig").setProperty("/tableData", { "resultaten": aData }); } }); });

Bekijk de code:

/tableData/results}">country_code}"/>country_text}"/>

Output:

Bind het globale model aan een tabel

4. Bind het globale model aan een vervolgkeuzelijst [als het model JSON is]

Dit proces lijkt sterk op de tabelcode (in de bovenstaande stap). We zullen dezelfde controllercode gebruiken, maar de weergavecode wijzigen.

Controllercode:

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "gebruik strict"; return Controller.extend("Test.Test.controller.Main", { onInit: function ( ) { }, onBeforeRendering: function () { var that = this; var val1 = { country_code: 1, country_text: "India" }; var val2 = { country_code: 2, country_text: "Germany" }; var aData = [] ; aData.push(val1); aData.push(val2); that.getOwnerComponent().getModel("AppConfig").setProperty("/tableData", { "results": aData }); } }); }) ;

 

Bekijk de code:

/tableData/results}">country_code}" text="{AppConfig>country_text}"/>

Output:

Bind het globale model aan een vervolgkeuzelijst [als het model JSON is]

5. Bind globaal model aan een formulier [als model een object is]

De juiste manier om een ​​model aan een formulier te binden, is JSON-modelbinding met het formulier met behulp van formulier-ID. In dit voorbeeld binden we rechtstreeks met het globale model.

controller:

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "use strict"; return Controller.extend("Test.Test.controller.Main", { onInit: function ( ) { }, onBeforeRendering: function () { var val = { fname: "Rudramani", lname: "Pandey", country: "India", phone: "+91-9999099099" }; this.getOwnerComponent().getModel( "AppConfig").setProperty("/formData", val); } }); });

 

Toon:

/formData/fname}"/>/formData/lname}"/>/formData/country}"/>/formData/phone}"/>

 

Output:

Bind globaal model aan een formulier [als model een object is]

6. Bind het globale model aan een tekst [als het model een object is]

Het zal precies zijn zoals hierboven. Als u rechtstreeks met een veld bindt, is de binding als volgt:

/phone}"/>

In het geval dat u de tekst bindt met een object, en dan moet u naar uw veld reiken met '/', zoals:

/formData/phone}"/>

 

7. De zichtbaarheid van velden wijzigen met behulp van het globale model

In dit voorbeeld kunt u Global Model gebruiken om de zichtbaarheid van meerdere velden te wijzigen. Dit voorbeeld is precies hetzelfde als voorbeeld 2.

We voegen alleen een voorwaarde toe aan het bovenstaande formulier, binnen de weergave:

/formData/fname}"/>/formData/lname}"/>/visible} === true ? true : false}" text="{AppConfig>/formData/country}"/>/visible} === true ? true : false}" text="{AppConfig>/formData/phone}"/>

Als we het globale modelveld "zichtbaar" maken als waar, dan wordt het formulier zoals gewoonlijk geladen:

Bind globaal model aan een formulier [als model een object is]

In het geval dat we het onwaar maken, zoals hieronder getoond:

sap.ui.define([ "sap/ui/model/json/JSONModel", "sap/ui/Device" ], function (JSONModel, Device) { "strikt gebruiken"; return { createDeviceModel: function () { var oModel = new JSONModel(Device); oModel.setDefaultBindingMode("OneWay"); return oModel; }, //app Congiguration model createAppConfigModel: function () { var AppConfig = { "editable": false, "count": 0, "formData ": {}, "tableData": {}, "visible": false }; var oModel = new JSONModel(AppConfig); return oModel; } }; });

Dan wordt de zichtbaarheid van deze twee velden uitgeschakeld:

De zichtbaarheid van velden wijzigen met behulp van het globale model

Om de waarde van het globale veld "zichtbaar" te wijzigen, schrijven we de volgende code in de controller:

dit.getOwnerComponent().getModel("AppConfig").setProperty("/vsible", false);

 

8. Een formulier bewerkbaar en niet-bewerkbaar maken met behulp van het globale model

Om te schakelen tussen de vorm Bewerkbaar en Niet-bewerkbaar, voegen we een veld "bewerkbaar" toe aan het model, wijzigen we dit vervolgens in de controller op basis van de huidige status [indien waar, verander het dan in onwaar en vice versa] en bind daarna hetzelfde in het bewerkbare veld.

Modelbestand:

sap.ui.define([ "sap/ui/model/json/JSONModel", "sap/ui/Device" ], function (JSONModel, Device) { "strikt gebruiken"; return { createDeviceModel: function () { var oModel = new JSONModel(Device); oModel.setDefaultBindingMode("OneWay"); return oModel; }, //app Congiguration model createAppConfigModel: function () { var AppConfig = { "editable": false, "count": 0, "formData ": {}, "tableData": {}, "visible": false }; var oModel = new JSONModel(AppConfig); return oModel; } }; });

Controller-bestand:

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "gebruik strict"; return Controller.extend("Test.Test.controller.Main", { onInit: function ( ) { }, onPressToggle: function () { var editable = this.getOwnerComponent().getModel("AppConfig").getProperty("/editable"); if (bewerkbaar) { this.getOwnerComponent().getModel("AppConfig" ).setProperty("/editable", false); } else { this.getOwnerComponent().getModel("AppConfig").setProperty("/editable", true); } } }); });

Bestand bekijken:

 /editable} === true ? true : false}" value="{AppConfig>/formData/fname}"/> /editable} === true ? true : false}" value="{AppConfig>/formData/lname}"/> /editable} === true ? true : false}" value="{AppConfig>/formData/country}"/> /editable} === true ? true : false}" value="{AppConfig>/formData/phone}"/>

 

Auteur


Heb je vragen? Stel ze hier.

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.