SAPUI5 - заголовок, боковая панель и навигация

Question

Я новичок в SAPUI5, и у меня есть некоторые проблемы с навигацией, боковой панелью и заголовком. Я хочу разработать приложение с заголовком и боковой панелью. Для этого я использую «ToolPage». Каждая страница содержит toolpage и выглядит следующим образом:

<mvc:View > 
    <tnt:ToolPage id="toolPageId"> 
     <tnt:header> 
      <core:Fragment ...> </core:Fragment>  
     </tnt:header> 
     <tnt:sideContent id="SideContentId"> 
      <core:Fragment ...> </core:Fragment> 
     </tnt:sideContent> 
     <tnt:mainContents> 
      <NavContainer id="pageContainerId" width="100%"> 
       <Page ...> 
        <content> 
         ... 
         ... 
        </content> 
       </Page> 
      </NavContainer> 
     </tnt:mainContents> 
    </tnt:ToolPage> 
</mvc:View> 

Все они похожи на это, просто имеют разный код в теге контента.

С этим я достигаю макета, который я хочу, и я перемещаюсь по маршрутам в manifest.json. У меня есть контроллер для каждой страницы и перемещаться с:

onNavToBeTask: function(oEvent) { 
     this.getRouter().navTo("pageTasklist"); 
} 

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

Я нашел пример, но здесь весь код в .xml и .js файл, который был бы очень неясными https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.tnt.sample.ToolPage/code

Мои вопросы:

• Что такое в общем, лучший способ навигации с боковой панелью и заголовком?
• Было бы лучше иметь «главную страницу» с заголовком и боковой панелью и просто добавлять контент в тег контента?
• Или я должен просто выбрать правильное поле в боковой панели с функцией, которая вызывается, когда я перехожу к странице?

Edit:

Sample screenshot, what I would like to achieve

Answer 1

Насколько я понял из вашего поста, у вас есть основной вид (главная страница), который держит ToolPage и SideNavigation.

И вы хотите поместить свои представления в тег mainContents ToolPage. Если это так: Вы не должны использовать Маршрутизатор. Потому что с маршрутизатором вы оставите свой основной вид.

Я перечисляю здесь то, что вы должны сделать:

1. Создайте свои взгляды как отдельные просматривать файлы. (XML или JS) Предположим, вы создаете View1.

2. Создайте обработчик событий для нажатия кнопки (нажмите) ваших пунктов меню. Это должно перейти к контроллеру основного вида. (EventBus)

3. В контроллере вашего основного вида создайте функцию для создания экземпляра View1. После инстанцирования добавьте View1 в содержимое ScrollContainer (или NavContainer) ToolPage.

Что-то вроде этого:

onGoToProductTable: function(oEvent) { 
var oScrollContainer = sap.ui.getCore().byId("idScrollContainer"); 
var oCurrentView = oScrollContainer.getContent(); 
if (!oCurrentView[0]) { 
     var view = sap.ui.getCore().byId("ProductTable"); 
     if (view === undefined) { 
      view = sap.ui.view({ 
       type: sap.ui.core.mvc.ViewType.JS, 
       viewName: "xxx.yyy.view.ProductTable" 
      }); 
     } 
     oScrollContainer.addContent(view); 
}},