2017-02-09 3 views
-1

Ich versuche, eine vollständige App in Fiori mit Eclipse zu erstellen.Routing und Navigation App Fiori - Eclipse

Ich habe ein Problem mit dem Routing. Anfangs steckte ich meinen Router und Pfad in Index, und in diesem Fall hatte ich kein Problem.

Nach, wie Sap empfohlen, teilte ich Funktionalität, und ich erstellte zwei andere Dateien: manifest.json und Component.js. Wo ich falsch liege? Vielen Dank im fortgeschrittenen

Das ist mein Index:

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> 
 
\t \t <script src="resources/sap-ui-core.js" 
 
\t \t \t \t id="sap-ui-bootstrap" 
 
\t \t \t \t data-sap-ui-libs="sap.m" 
 
\t \t \t \t data-sap-ui-theme="sap_bluecrystal" 
 
\t \t \t \t data-sap-ui-compatVersion="edge" 
 
\t \t \t \t data-sap-ui-preload="async" 
 
\t \t \t \t data-sap-ui-resourceroots='{ 
 
\t \t \t \t "Routing": "./" }'> 
 
\t \t </script> 
 
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme --> 
 

 

 
\t \t <script> 
 
\t \t   sap.ui.getCore().attachInit(function(){ 
 
\t \t   \t new sap.m.Shell({ 
 
\t \t   \t \t app: new sap.ui.core.ComponentContainer({ 
 
\t \t   \t \t \t height : "100%", 
 
\t \t   \t \t \t name : "Routing" 
 
\t \t   \t }) 
 
\t \t   }).placeAt("content"); 
 
\t \t   }); \t \t   \t \t \t 
 
\t \t </script> 
 
\t </head> 
 
\t <body class="sapUiBody" role="application"> 
 
\t \t <div id="content"></div> 
 
\t </body> 
 
</html>

Dies ist die Komponente:

sap.ui.define([ 
 
\t "sap/ui/core/UIComponent" 
 
], function (UIComponent) { 
 
\t "use strict"; 
 
\t return UIComponent.extend("Routing.Component", { 
 
\t \t metadata: { 
 
\t \t \t manifest: "json" 
 
\t \t }, 
 
\t \t init: function() { 
 
\t \t \t // call the init function of the parent 
 
\t \t \t UIComponent.prototype.init.apply(this, arguments); 
 
\t \t \t // router.register("appRouter"); 
 
\t \t \t // create the views based on the url/hash 
 
\t \t \t this.getRouter().initialize(); 
 
\t \t } 
 
\t }); 
 
});

Dies ist das Manifest:

{ 
 
\t "_version": "1.1.0", 
 
\t "sap.app": { 
 
\t \t "_version": "1.1.0", 
 
\t \t "id": "Routing", 
 
\t \t "type": "application", 
 
\t \t "i18n": "i18n/i18n.properties", 
 
\t \t "title": "{{routingnavigation2}}", 
 
\t \t "description": "{{appDescription}}", 
 
\t \t "applicationVersion": { 
 
\t \t \t "version": "1.0.0" 
 
\t \t } 
 
\t }, 
 
\t "sap.ui": { 
 
\t \t "_version": "1.1.0", 
 
\t \t "technology": "UI5", 
 
\t \t "deviceTypes": { 
 
\t \t \t "desktop": true, 
 
\t \t \t "tablet": true, 
 
\t \t \t "phone": true 
 
\t \t }, 
 
\t \t "supportedThemes": ["sap_bluecrystal"] 
 
    \t }, 
 
\t "sap.ui5": { 
 
\t \t "_version": "1.1.0", 
 
\t \t "rootView": { 
 
\t \t  "viewName": "Routing.view.main", 
 
\t \t  "type": "XML" 
 
\t \t  # "id": "home" 
 
\t \t  }, 
 
\t \t "dependencies": { 
 
\t \t \t "minUI5Version": "1.30", 
 
\t \t \t "libs": { 
 
\t \t \t \t "sap.ui.core": {}, 
 
\t \t \t \t "sap.m": {}, 
 
\t \t \t \t "sap.ui.layout": {}, 
 
\t \t \t \t "sap.ushell": {} 
 
\t \t \t } 
 
\t \t }, 
 
\t \t "contentDensities": { 
 
\t \t \t "compact": true, 
 
\t \t \t "cozy": true 
 
\t \t }, 
 
\t \t "models": { 
 
\t \t  "i18n": { 
 
\t \t \t "type": "sap.ui.model.resource.ResourceModel", 
 
\t \t \t "settings": { 
 
\t \t \t \t "bundleName": "Routing.i18n.i18n.properties" 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t }, 
 
\t \t "routing": { 
 
\t \t \t "config": { 
 
\t \t \t  "RouterClass": "sap.m.routing.Router", 
 
\t \t \t  "viewType": "XML", 
 
\t \t \t  "viewPath": "Routing.routingnavigation.view", 
 
\t \t \t \t "controlId": "app", 
 
\t \t \t \t "targetAggregation": "pages" 
 
\t \t \t }, 
 
\t \t \t "routes": [{ 
 
\t \t \t \t "pattern": "", 
 
\t \t \t \t "name": "view1", 
 
\t \t \t \t "viewName" : "view.view1", 
 
\t \t \t \t "targetAggregation": "pages" 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t "pattern": "view2", 
 
\t \t \t \t "name": "view2", 
 
\t \t \t \t "viewName" : "view.view2", 
 
\t \t \t \t "targetAggregation": "pages" 
 
\t \t \t }] 
 
\t \t }, 
 
\t } 
 
}

Dies ist das Bild des Fehlers:

error 'initialize'

Dies ist das Bild der Struktur: enter image description here

+0

1) In der Fehlermeldung heißt es, dass es nicht die manifest.json finden: „Komponente manifestieren konnte nicht geladen werden von‚Routing/manifest.json‘... Check für‚Datei nicht gefunden‘...„ Wie funktioniert Wie sieht Ihre Dateistruktur in Eclipse aus? Wo befindet sich manifest.json? 2) Vielleicht hilft der folgende Link: Schritt 4: [XML Ansichten] (https://sapui5.hana.ondemand.com/#docs/guide/1409791afe4747319a3b23a1e2fc7064.html) –

+0

Hallo, danke an Ihre Antwort. Offensichtlicher Fehler, war meine Schuld, versuchte einen Fehler zu finden, den ich anderen begangen habe. Der Fehler, die ich nicht lösen kann, ist Uncaught Typeerror: kann Eigenschaft lesen ‚initialisieren‘ undefinierter – Mavhart

+0

In Ihrem manifest.json heißt es: „RoutingClass“: „sap.m.routing.Routing“, Was passiert, wenn Sie versuchen: "routerClass": "sap.m.routing.Router",? –

Antwort

0

Es sind drei Syntaxfehler im Zusammenhang mit t o Ihrer Manifest-Datei:

  • Misplaced # und eine fehlenden , direkt nach "type": "XML" unter den rootView Einstellungen:
    "rootView": { 
        "viewName": "Routing.view.main", 
        "type": "XML" 
    # "id": "home" 
    }, 
    
  • Fall Empfindlichkeit: "RouterClass" sollte mit "routerClass" in Ihren "config" Einstellungen ersetzt werden.
  • Gemäß Ihrem Screenshot ist der Dateiname Ihres Deskriptors M anifest.json. Es sollte m anifest.json sein. Ansonsten ist die component won't find the file.

Lassen Sie uns wissen, ob es funktioniert hat. Andernfalls, wenn Sie mit Web IDE arbeiten, klicken Sie auf das ⚠️️ Zeichen in der rechten unteren Ecke, um zu sehen, ob es mehr Syntaxfehler gibt (Edit: Eclipse, mit dem richtigen Plugin, sollte auch Syntax-Highlighting für JSON-Dateien haben).

SAP Web IDE error panel


PS: Hier ein minimales Beispiel für die grundlegende Navigation ist zu vergleichen: https://embed.plnkr.co/wp6yes/. Weitere Informationen zu Best Practices für die Implementierung der Navigation in UI5 finden Sie unter tutorial.

+0

Hallo boghyon, vielen dank für Ihre relply. Ich habe schon Fehler gesehen und ich habe sie am Freitag korrigiert, aber es funktioniert nicht. (Ich habe gerade ein Plugin für Json installiert, danke für den Vorschlag !!) – Mavhart

+0

Hallo. Sagt die Konsole immer noch 'Kann Eigenschaft nicht 'initialisieren' von 'undefiniert' lesen? Oder erhalten Sie eine andere Fehlermeldung? Ich habe gerade eine Plunker-Seite hinzugefügt, auf der eine einfache Navigation angezeigt wird. Wenn nichts geht ..;) – boghyon

+0

Danke bohhyon, ich habe ein schnelles Projekt nach deinem Beispiel erstellt, aber ich finde den gleichen Fehler. Ich weiß nicht warum. Kann ein Problem bei abhängiger Sonnenfinsternis sein? Vielleicht muss ich etwas anderes machen? Ich weiß, dass das nicht richtig ist zu sagen, aber ich weiß nicht mehr, was ich denke. P.S. Ich folgte dem Link, den Sie mir vorschlagen (außer für den Mockserver) – Mavhart