Переход к другому (JS) представлению - невозможно получить доступ к маршрутизатору - PullRequest
2 голосов
/ 23 марта 2020

У меня есть домашняя страница с двумя плитками, которая работает как положено. При нажатии на плитку один мой элемент управления должен перейти к «SearchProductPage».

У меня есть следующие файлы:

  • homepage.view.js
  • homepage.controller.js
  • SearchProductPage.view.js
  • SearchProductPage.controller.js

Поэтому, когда я нажимаю на плитку, я получаю сообщения с предупреждениями по коду. Но мой код не перемещается к SearchProductPage.view.js.

И при попытке доступа к роутеру он возвращает undefined.

Просмотры

homepage.view.js

sap.ui.jsview("view.homepage", {
  getControllerName: function() {
   return "Webapp.controller.homepage";
  },
  createContent: function(oController) {
    var oTileSearchProd = new sap.m.StandardTile({
      title: "{i18n>tile_title_1}",
      press: [oController.goToProductSearch, oController]
    });
    var oTileTopRatedProd = new sap.m.StandardTile({
      title: "{i18n>tile_title_2}",
      press: [oController.goToProductAnalytics, oController]
    });
    var oTileCont = new sap.m.TileContainer({
      tiles: [oTileSearchProd, oTileTopRatedProd]
    });
    var oPage = new sap.m.Page({
      title: "{i18n>app_head}",
      enableScrolling: false,
      content: [oTileCont]
    });
    return oPage;
  }
});

Контроллеры

homepage.controller.js

sap.ui.controller("Webapp.controller.homepage", {
  onInit: function() {
    var i18nPath = "i18n/i18n.properties";
    var oi18nModel = new sap.ui.model.resource.ResourceModel({
      bundleUrl: i18nPath
    });
    sap.ui.getCore().setModel(oi18nModel, "i18n");
  },

  goToProductSearch: function(oEvt) {
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    oRouter.navTo("idSearchProductPage");
  },

  goToProductAnalytics: function(oEvt) {
    var app = sap.ui.getCore().byId("idProductsAnalyticsPage");
    var oResourceBundle = app.getModel("i18n").getResourceBundle();
    var url = oResourceBundle.getText("LOGIN").toString().trim();
    sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel(url), "barChart");
    var that = this;
    that.getOwnerComponent().getRouter().navTo("idProductsAnalyticsPage");
  }
});

Дескриптор приложения (manifest.json)

{
  "_version": "1.12.0",
  "sap.app": {
    "id": "Webapp",
    "type": "application",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "sourceTemplate": {
      "id": "servicecatalog.connectivityComponentForManifest",
      "version": "0.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5"
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "Webapp.view.homepage",
      "type": "JS",
      "async": true,
      "id": "App"
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "JS",
        "viewPath": "sap.ui.Webapp.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "transition": "slide"
      },
      "routes": [
        {
          "pattern": "",
          "name": "homepage",
          "target": "homepage"
        },
        {
          "pattern": "SearchProductPage",
          "name": "SearchProductPage",
          "target": "SearchProductPage"
        },
        {
          "pattern": "ProductDetailPage",
          "name": "ProductDetailPage",
          "target": "ProductDetailPage"
        },
        {
          "pattern": "ProductAnalyticsPage",
          "name": "ProductAnalyticsPage",
          "target": "ProductAnalyticsPage"
        },
        {
          "pattern": "SearchProductPage",
          "name": "SearchProductPage",
          "target": "SearchProductPage"
        }
      ],
      "targets": {
        "homepage": {
          "viewName": "homepage"
        },
        "SearchProductPage": {
          "viewName": "SearchProductPage"
        },
        "ProductDetailPage": {
          "viewName": "ProductDetailPage"
        },
        "ProductAnalyticsPage": {
          "viewName": "ProductAnalyticsPage"
        }
      }
    }
  }
}

My index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Divya Demo Project</title>
    <script
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js "
      id="sap-ui-bootstrap"
      data-sap-ui-libs="sap.m"
      data-sap-ui-theme="sap_bluecrystal"
      data-sap-ui-resourceroots='{"Webapp":"./"}'
    ></script>
    <script>
      sap.ui.localResources("view");
      var app = new sap.m.App({
        initialPage: "homePage",
      });
      app.addPage(sap.ui.view({
        id: "homePage",
        viewName: "view.homepage",
        type: sap.ui.core.mvc.ViewType.JS,
      }));
      app.addPage(sap.ui.view({
        id: "SearchProductPage",
        viewName: "view.SearchProductPage",
        type: sap.ui.core.mvc.ViewType.JS,
      }));
      app.placeAt("content");
    </script>
  </head>
  <body class="sapUiBody" role="application">
    <div id="content"></div>
  </body>
</html>

Это мой проект. все в JavaScript:

My project folder

Ответы [ 2 ]

3 голосов
/ 24 марта 2020

Вот пример приложения с JSView и навигацией по клику: https://embed.plnkr.co/qOnDlm.

Основная проблема

Основная проблема в том, что ваше приложение вообще не оценивает manifest.json. В первую очередь, чтобы получить дескриптор, ваше приложение должно использовать sap/ui/core/ComponentContainer и UIComponent с metadata: { manifest: "json" }. Они полностью отсутствуют в вашем index.html. Т.е. приложение даже не знает о наличии настроек маршрутизации.

A ComponentContainer необходим, поскольку компоненты не могут быть добавлены в пользовательский интерфейс без контейнера. А в Component.js назначение metadata: { manifest: "json" } указывает платформе на выборку дескриптора приложения manifest.json, который затем будет оцениваться со всеми настройками маршрутизатора.

ComponentContainer можно декларативно добавить к index.html без встроенного скрипта с использованием модуля sap/ui/core/ComponentSupport. Для получения дальнейших указаний см. Ссылку на API-интерфейс.

Другие проблемы

Существуют и другие несоответствия с рекомендациями, которые также следует исправить вместе с основной проблемой.

neo-app.json находится в папке веб-приложения, тогда как Component.js нет.
✔️ Для правильной структуры папки: следуйте топи c Структура папок: где хранить файлы . Т.е. Component.js должно быть внутри, neo-app.json вне папки webapp.

Использование устаревших API, а также вызов методов без использования модулей
✔️ Обратитесь к справочнику API, какие API использовать вместо устаревших. Например, определяя контроллеры с помощью sap.ui.controller, следует заменить на Controller#extend.
✔️ Сначала требуется sap/ui/core/UIComponent, а затем вызвать UIComponent.getRouterFor.

Префиксы имен модулей не совпадают с базовым пространством имен.
✔️ Для правильной регистрации модуля в соответствии с В соответствии с этим, общее пространство имен должно соответствовать базовому пространству имен resourceRoot.

Также я вижу, что представление homepage также назначено sap.ui5/rootView. Пожалуйста, избегайте этого .


Вот некоторые фрагменты, включающие вышеупомянутые пункты:

  1. С учетом этой структуры папок ..
  2. В index.html:
      <!-- ... -->
      <script id="sap-ui-bootstrap" src="..."
        data-sap-ui-resourceRoots='{"<strong>myCompany.myApplication</strong>": "./"}'
        data-sap-ui-<strong>oninit="module:sap/ui/core/ComponentSupport"</strong>
        data-...>
      <script>
    <head>
    <body id="content" class="sapUiBody">
      <div style="height: 100%;"
        data-sap-ui-component
        data-<strong>name="myCompany.myApplication"</strong>
        data-height="100%">
      </div>
    </body>
  3. В Component.js:
    return UIComponent.extend("<strong>myCompany.myApplication</strong>", {
      metadata: {
        manifest: "json"
      },
      init: function() {
        UIComponent.prototype.apply(this, arguments);
        <strong>this.getRouter().initialize();</strong>
      },
    });
  4. В manifest.json, "sap.ui5":
    "rootView": {
      "viewName": "<strong>myCompany.myApplication</strong>.view.<em><strong>Not</strong>Homepage</em>",
      "...": "..."
    },
    "routing": {
      "config": {
        "viewPath": "<strong>myCompany.myApplication</strong>.view",
        "...": "..."
      },
      "routes": [
        {
          "pattern": "",
          "name": "homepage",
          "target": "homepage"
        },
        "..."
      ],
      "...": "..."
    }
  5. В контроллерах
    sap.ui.define([ // e.g. controller/<strong>H</strong>omepage.controller.js
      "sap/ui/core/mvc/Controller",
      // ...,
      "sap/ui/core/UIComponent"
    ], function(Controller, /*...,*/ UIComponent) {
      "use strict";
      // 1. Stop using the deprecated sap.ui.controller.
      // 2. Convention: class name should be camel-case, starting with a capital letter (<strong>H</strong>omepage).
      //    The same applies to all the other controllers and views.
      return Controller.extend("<strong>myCompany.myApplication</strong>.controller.<strong>H</strong>omepage", {
        goToProductSearch: function(oEvt) {
          const router = UIComponent.getRouterFor(this);
          // or without requiring UIComponent: this.getOwnerComponent().getRouter();
        },
        // ...
      });
    });
  6. В JS представлениях:
    sap.ui.jsview("<strong>myCompany.myApplication</strong>.view.<strong>H</strong>omepage", { // e.g. view/<strong>H</strong>omepage.view.js
      getControllerName: function() {
        return "<strong>myCompany.myApplication</strong>.controller.<strong>H</strong>omepage";
      },
      // ...
    });

Поскольку проект кажется относительно небольшим, я бы предложил начать заново, используя basi c Шаблон SAPUI5:

basic SAPUI5 template.

0 голосов
/ 23 марта 2020

возможно, вам следует сначала посмотреть документацию

https://sapui5.hana.ondemand.com/1.36.6/docs/guide/e5200ee755f344c8aef8efcbab3308fb.html

view:

 createContent : function(oController) {
        var oTileSearchProd = new sap.m.StandardTile({
        title: "{i18n>tile_title_1}",
        press : [ oController.goToProductSearch, oController]
        }); 
        return new sap.m.Page({
            title: "Title Page 2",
            content: [
                oTileSearchProd 
            ]
        });
    }

и контроллер:

goToProductSearch: function()  {
        var router;
        router = sap.ui.core.UIComponent.getRouterFor(this);
        return router.navTo("SearchProductPage", null);
    }

также я бы изменил маршрут конф. например, в своем манифесте попытайтесь создать его для вас

   "routing": {
    "config": {
        "viewType": "JS",
        "viewPath": "sapui5.app53.view",
        "targetControl":"idPageContainer",
        "targetAggregation": "pages",
        "routerClass": "sap.m.routing.Router"
    },
    "routes": [{
        "pattern": "",
        "name": "First",
        "view": "zjs_view_53_02",
        "targetAggregation": "pages"
    }, {
        "pattern": "second",
        "name": "Second",
        "view": "zjs_view_53_03",
        "targetAggregation": "pages"
    }]
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...