Laden von Bibliotheken von Drittanbietern in SAPUI5

Question

Ich muss hier Maps Javascript API-Bibliothek in meiner Anwendung verwenden. Es funktioniert gut, wenn ich die App eigenständig benutze (seit ich sie in index.html einfüge). Wenn ich es jedoch auf der HANA Cloud Platform bereitstelle und versuche, es in der HCP Portal-Site auszuführen, schlägt es fehl. Ich weiß, dass ich die Bibliotheksdateien in Component.js laden muss, da index.html nicht verwendet wird. Mein Problem ist, dass ich 4 verschiedene js-Dateien und ein Stylesheet laden muss, bevor ich anfange, die Karte zu zeichnen. Ich benutze jQuery.sap.includeScript() und jQuery.sap.includeStyleSheet() Funktionen, um dies zu tun, aber meine rootview onInit und onAfterRendering() wird aufgerufen, bevor die Bibliothek Dateien geladen werden (siehe ihren Status als "ausstehend" in der Registerkarte Netzwerke in Chrom).

folgte ich der unten Beitrag:

UsingjQuery.sap.includeScript().then() in HCP Firori Launchpad

Wie kann ich laden/initialisieren sind der Ansicht, erst nachdem die Bibliotheksdateien geladen.

Ist es richtig, all dies in component.js zu tun. Spielt manifest.json eine Rolle dabei.

Jedes Beispiel wird hilfreich sein. Vielen Dank im Voraus.

My Component init-Code ist wie folgt:

init: function() { 
      // call the base component's init function 
      UIComponent.prototype.init.apply(this, arguments); 
      var that = this; 
      //Load the here maps library 
      jQuery.sap.includeScript("https://js.api.here.com/v3/3.0/mapsjs-core.js", "hereMapsCore", $.proxy(function(succ) { 
       jQuery.sap.includeScript("https://js.api.here.com/v3/3.0/mapsjs-service.js", "hereMapsService", $.proxy(function(succ) { 
        jQuery.sap.includeScript("https://js.api.here.com/v3/3.0/mapsjs-ui.js", "hereMapsUi", $.proxy(function(succ) { 
         jQuery.sap.includeScript("https://js.api.here.com/v3/3.0/mapsjs-mapevents.js", "heremapsEvent", $.proxy(function(succ) { 
          jQuery.sap.includeStyleSheet("https://js.api.here.com/v3/3.0/mapsjs-ui.css", "hereMapscss", $.proxy(function() { 
           // UIComponent.prototype.init.apply(this, arguments); 
           // set the device model 
           this.setModel(models.createDeviceModel(), "device"); 
           var a = this; 
          }, this)); 
         }, this), function(oErr) { 
          MessageBox.alert("Map File not loaded"); 
         }); 
        }, this), function(oErr) { 
         MessageBox.alert("Map File not loaded"); 
        }); 
       }, this), function(oErr) { 
        MessageBox.alert("Map File not loaded"); 
       }); 
      }, this), function(oErr) { 
       MessageBox.alert("Map File not loaded"); 
      }); 
     } 

Answer 1

Sie können die benötigten Ressourcen in der Komponentendeskriptor hinzufügen manifest.json als 12 in der Developer Guide in Tabelle beschrieben:

Relative URLs in der Komponente unter Berücksichtigung embeddedBy, wenn gefüllt, zeigt auf js (JavaScript) und css Ressourcen, die von der App zur Angabe der obligatorischen uri undbenötigt werden(optional) für CSS. Die JavaScript-Dateien werden vom Require-Mechanismus geladen. Die CSS-Dateien werden dem Kopf der HTML-Seite als Link-Tag hinzugefügt. Die Ressourcen sind aufgelöst relativ zum Speicherort der Datei manifest.json.

Wenn Sie Probleme mit der absoluten URIs haben, könnten Sie die JavaScript und CSS-Dateien in Ihrem UI5 Projekt unter Ihrer Komponente speichern und relative Pfade verwenden.

Beispiel: In der manifest.json im sap.ui5/resources Abschnitt:

"sap.ui5": { 
    "resources":{ 
    "js": [ 
     { 
     "uri": "lib/otherScript.js" 
     }, 
     { 
     "uri": "https://js.api.here.com/v3/3.0/mapsjs-core.js" 
     } 
    ], 
    "css": [ 
     { 
     "id": "myCustomCSS", 
     "uri": "css/style.css" 
     }, 
     { 
     "uri": "https://js.api.here.com/v3/3.0/mapsjs-ui.css" 
     } 
    ] 
    } 
}