问题

I am trying to display few tiles in a tile container which fetches data from a dummy JSON file. I have coded exactly shown in this sample. But my page appears empty. Also it doesn't show any errors in the console. Below are the snippets of my code.

View1.controller.js

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("AdminMovie.controller.View1", {

  });
});

View1.view.xml

<mvc:View
  displayBlock="true" 
  controllerName="AdminMovie.controller.View1"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
>
  <Page showHeader="false" enableScrolling="false">
    <mvc:XMLView viewName="AdminMovie.view.TileContainer"/>
    <footer>
      <OverflowToolbar id="otbFooter">
        <ToolbarSpacer/>
        <Button type="Accept" text="Add New Movie"/>
      </OverflowToolbar>
    </footer>
  </Page>
</mvc:View>

TileContailner.view.xml

<mvc:View
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  controllerName="AdminMovie.controller.TileContainer"
>
  <App>
    <pages>
      <Page
        showHeader="false"
        enableScrolling="false"
        title="Stark"
      >
        <TileContainer id="container"
          tileDelete="handleTileDelete"
          tiles="{/MovieCollection}"
        >
          <HBox>
            <StandardTile
              icon="{icon}"
              type="{type}"
              number="{number}"
              numberUnit="{numberUnit}"
              title="{title}"
              info="{info}"
              infoState="{infoState}"
            />
          </HBox>
        </TileContainer>
        <OverflowToolbar>
          <Toolbar>
            <ToolbarSpacer/>
            <Button
              text="Edit"
              press=".handleEditPress"
            />
            <ToolbarSpacer/>
          </Toolbar>
        </OverflowToolbar>
      </Page>
    </pages>
  </App>
</mvc:View>

TileContainer.js

sap.ui.define([
  "jquery.sap.global",
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function(jQuery, Controller, JSONModel) {
  "use strict";

  return Controller.extend("AdminMovie.controller.TileContainer", {
    onInit: function(evt) {
      // set mock model
      var sPath = jQuery.sap.getModulePath("AdminMovie", "/MovieCollection.json");
      var oModel = new JSONModel(sPath);
      this.getView().setModel(oModel);
    },

    handleEditPress: function(evt) {
      var oTileContainer = this.byId("container");
      var newValue = !oTileContainer.getEditable();
      oTileContainer.setEditable(newValue);
      evt.getSource().setText(newValue ? "Done" : "Edit");
    },

    handleTileDelete: function(evt) {
      var tile = evt.getParameter("tile");
      evt.getSource().removeTile(tile);
    }

  });
});

回答1:

Causes for Empty Page Related to `TileContainer`

Unexpected Child Control

Besides the missing root control, the <TileContainer> currently contains a list of HBoxes in your view.

<TileContainer id="container" tiles="{/MovieCollection}">
  <HBox>
     <StandardTile .../>
  </HBox>
</TileContainer>

The default aggregation of TileContainer is, however, a control that is derived from sap.m.Tile.

Hence, you should be getting the following error message in the browser console:

Uncaught Error: "Element sap.m.HBox#__hbox1" is not valid for aggregation "tiles" of Element sap.m.TileContainer#__xmlview1--container

Please, remove the <HBox> from the ListBinding template:

<TileContainer id="container" tiles="{/MovieCollection}">
  <StandardTile .../>
</TileContainer>

TileContainer Contains only one Tile

There was a bug in the framework which didn't let the TileContainer to display anything if it contained only a single Tile. The fix should be available as of UI5 version 1.48.

回答2:

Your root view is missing a root control such as sap.m.App^API which:

Writes a bunch of properties into the header of HTML document, e.g. the viewport meta tag,
Writes height: 100% to all its parent elements.^[src]

Without a root control, the content will be displayed improperly. Hence, adding an <App> should be sufficient in your case:

<!-- root view -->
<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  height="100%"
  displayBlock="true"
  controllerName="..."
>
  <App id="myApp"> <!-- Not in other views! -->
    <!-- content -->
  </App>
</mvc:View>

The reason why the linked sample is working, is that the control sap.m.App was already added in index.html. The samples shown in the Demo Kit, however, often miss index.html in the code page to be shown which can be confusing.

Alternatively, you could also add in index.html and in the root view the following:

```
<html style="height: 100%;">
```

new ComponentContainer({
  height: "100%",
  // ...
})

```
<mvc:View height="100%" ...>
```

This will make the content visible too but without the need to use sap.m.App in the root view.

来源：https://stackoverflow.com/questions/50922382/page-is-blank-without-throwing-any-errors

标签

sapui5

Page Is Blank Without Throwing Any Errors

问题