Две плиткиКонтейнеры рядом друг с другом

Question

Я хочу знать, можно ли поставить два TileContainers рядом друг с другом (бок о бок)? У меня есть тот, который я хочу создать на основе одного источника данных, а другой - из другого источника. Основываясь на моих данных, я знаю, что у первого будет 4 плитки, а у второго будет 1 плитка.

Я видел это сообщение (SAPUI5 multiple sap.m.TileContainer in JS view), где они ставили два контейнера для плитки один над другим, который у меня уже есть, но мне нужно добавить этот новый в верхний ряд. В основном я хочу, чтобы одна строка с фрагментами из «master» и «new» в той же строке экрана.

Вот что у меня есть, но это делает три линии, а не два:

<TileContainer tiles="{/master}" height="25%" width="75%"> 
    <tiles> 
     <StandardTile 
     icon="sap-icon://dimension" 
     type="Monitor" 
     number="{count}" 
     title="{cnt_type}" 
     press="goToMasterPage" 
     app:columnName="{cnt_type}" 
     ></StandardTile> 
    </tiles> 
    </TileContainer> 
    <TileContainer tiles="{/new}" height="25%" width="25%"> 
    <tiles> 
     <StandardTile 
     icon="sap-icon://inspection" 
     type="Monitor" 
     number="{newcount}" 
     title="{type}" 
     press="goToNewPage" 
     app:columnName="{cnt_type}" 
     ></StandardTile> 
    </tiles> 
    </TileContainer> 
    <TileContainer height="25%" width="100%"> 
    <tiles> 
     <StandardTile 
      icon="sap-icon://upload" 
      type="Monitor" 
      title="Upload Download Information" 
      press="goToUpload"> 
     </StandardTile> 
     <StandardTile 
      icon="sap-icon://download" 
      type="Monitor" 
      title="Create Download File" 
      press="goToDownload"> 
     </StandardTile> 
    </tiles> 
    </TileContainer> 

Это EDIT после добавления HorizontalLayout. Теперь я получаю только плитки после HorizontalLayout. Это похоже на то, что он не учитывает 50% высоты. Есть идеи?

<Page title="Customer Outreach" enableScrolling="false"> 
    <l:HorizontalLayout height="50%"> 
        <TileContainer tiles="{/master}" height="50%" > 
         <tiles> 
          <StandardTile 
          icon="sap-icon://dimension" 
          type="Monitor" 
          number="{count}" 
          title="{cnt_type}" 
          press="goToMasterPage" 
          app:columnName="{cnt_type}" 
          ></StandardTile> 
         </tiles> 
        </TileContainer> 

        <TileContainer tiles="{/new}" > 
        <tiles> 
         <StandardTile 
         icon="sap-icon://inspection" 
         type="Monitor" 
         number="{newcount}" 
         title="{type}" 
         press="goToNewPage" 
         app:columnName="{cnt_type}" 
         ></StandardTile> 
        </tiles> 
        </TileContainer> 
    </l:HorizontalLayout> 
        <TileContainer height="50%" > 
         <tiles> 
          <StandardTile 
           icon="sap-icon://upload" 
           type="Monitor" 
           title="Upload Download Information" 
           press="goToUpload"> 
          </StandardTile> 
          <StandardTile 
           icon="sap-icon://download" 
           type="Monitor" 
           title="Create Download File" 
           press="goToDownload"> 
          </StandardTile> 
         </tiles> 
        </TileContainer> 
</Page> 

Answer 1

Как disussed в комментариях вы можете использовать HorizontalLayout, но при реализации этого вы быстро обнаружите, что это сильно влияет на отзывчивость вашего приложения. Однако отзывчивая версия может основываться на использовании макета Grid. Вы просто назначаете диапазон 12 для малых и средних устройств. Только на больших экранах you're, используя всю ширину, показывая как контейнеры бок о бок:

var container1 = new sap.m.TileContainer({ 
    width : "100%", 
    height: "350px", 
    tiles : [new sap.m.StandardTile({ 
     icon : "sap-icon://play", 
    title : "1st Important Tile" 
    }),new sap.m.StandardTile({ 
     icon : "sap-icon://play", 
    title : "2nd Important Tile" 
    })] 
}),container2 = new sap.m.TileContainer({ 
    width : "100%", 
    height: "350px", 
    tiles : [new sap.m.StandardTile({ 
     icon : "sap-icon://play", 
    title : "1st Important Tile" 
    }),new sap.m.StandardTile({ 
     icon : "sap-icon://play", 
    title : "2nd Important Tile" 
    })] 
}); 

var gridContainer = new sap.ui.layout.Grid({ 
    defaultSpan : "L6 M12 S12", 
    width : "100%", 
    content : [container1, container2] 
}); 

I've создал JSBin Example для вас, чтобы проверить его.