sap.misshellとsap.ui.unified.Shellを人工物なしで一緒に使う方法

Question

私はsap.m.Shellを使って、デスクトップデバイスのサイドボーダー/フレームを取得し、sap.ui.unified.Shellの機能を利用しています。しかし、私はこれらの2つのシェルを一緒に使用すると、表示されているページ領域の少し下に、上部と下部のフッターツールバーにギャップが表示されます。上部の

ギャップ：ややページの下にレンダリング

ボトムフッター。ボタンの下が表示されていないか注意してください：

この問題は発生しない孤立してこれらのコントロールのいずれかを使用します。

私が作る私のindex.htmlファイルsap.m.Shellで次のように：私のメインApp.view.xmlで

// Create component container for our component and place in content div 
new sap.m.Shell({ 
    app: new sap.ui.core.ComponentContainer({ 
     component: oComponent 
    }) 
}).placeAt("content"); 

を次のように私は、ユニファイドシェルを作成しています：

<mvc:View 
    controllerName="webapp.controller.App" 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns:u="sap.ui.unified" 
    xmlns="sap.m"> 
    <u:Shell 
    id="webappShell" 
    icon="/art/logos/meteor-ui5.png"> 

`` `

Unified Shell example at OpenUI5にはこれらのアーティファクトは表示されませんが、デモコードにはsap.m.Shellがどのようにインスタンス化されているかは表示されませんd。

Answer 1

何か類似したことが起こりました。私は体のマージンを設定することでそのスペースを取り除きました。デフォルトでは

body{ 
    margin:0px; 
} 

Answer 2

body要素は、あなたのbody要素は、そのクラスを持っていない..しかし、それは階層で行う必要があり、なぜかしら0

の余白になり、クラスsapUiBodyを取得あなたの要素の。

私は次のようでした今あなたが

body 
|___ m.Shell 
    |____ unified.Shell 

を持っている。しかし、IMOの適切な方法は、これを達成するための

body 
|___ unified.Shell 
    |____ m.Shell 

---

次のようになります。

1.シェルを作成します。 .view.xml

あなたの App.view.xmlが含まれている必要はありませんindex.htmlを

<script>  
    sap.ui.getCore().attachInit(function() { 
     // create a new Shell that contains the rootview 
     var oShell = new sap.m.Shell({ 
      app: new sap.ui.core.ComponentContainer({ 
       name: "my", 
       height: "100%" 
      }), 
      id: "myShell" 
     }); 

     // load the view that contains the unified shell 
     var oShellView = sap.ui.view({ 
      type: sap.ui.core.mvc.ViewType.XML, 
      viewName: "my.view.Shell", 
     }); 
     // access the unified shell from the view 
     var oUnifiedShell = oShellView.byId("unifiedShell"); 
     // place the app shell in the unified shell 
     oUnifiedShell.addContent(oShell); 
     oShellView.placeAt("content"); 
    }); 
</script> 

---

でこれを入れて

<mvc:View xmlns:l="sap.ui.layout" xmlns:u="sap.ui.unified" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="my.controller.Shell"> 
    <u:Shell 
     id="unifiedShell"> 
     .... 
    </u:Shell> 
</mvc:View> 

（必要であれば、あなたのビューのために、それぞれのコントローラを作成）

2統一されたシェル。これは、Fioriのコンテキストでアプリケーションを起動する予定がある場合にも優れています。Fiori Launchpadには既に統一されたシェルがあるため、アプローチでは2つの統合シェルがあります。 Fioriのコンテキストでは無視されるindex.htmlにのみ統合されたシェルをロードすることで、Fiori以外のコンテキストでカスタムシェルを持ち、Fioriコンテキストでデフォルトのシェルを持つことになります。