I have recently started working with TVML/TVJS and am not sure how to proceed with the below issue.
The issue on hand is to use multiple Templates on the same page while rendering the page i.e. I want want to add the MenuBarTemplate over the ListTemplate and likewise.
But If I add both on the page, it renders only the ListTemplate and not the MenuTemplate
Here is the code snippet:
<menuBarTemplate>
<menuBar>
<menuItem id="navigation_top_movies" data-identifier="list">
<title>Top Movies</title>
</menuItem>
<menuItem id="navigation_genres" data-identifier="index">
<title>Genres</title>
</menuItem>
<menuItem id="navigation_search" data-identifier="search">
<title>Search</title>
</menuItem>
<menuItem id="navigation_edit" data-identifier="edit">
<title>Edit</title>
</menuItem>
<menuItem id="navigation_settings_add" data-identifier="add_settings">
<title>Add Settings</title>
</menuItem>
</menuBar>
</menuBarTemplate>
<productTemplate>
<background>
</background>
<banner>
<infoList>
<info>
<header>
</header>
</info>
</infoList>
<stack>
<title>WWDC Road Trip</title>
<row>
<text><badge src="resource://tomato-fresh"/> 99%</text>
<text>1hr 54min</text>
<text>Comedy</text>
<text>2015</text>
<badge src="resource://mpaa-pg" class="badge" />
<badge src="resource://cc" class="badge" />
</row>
<description allowsZooming="true" moreLabel="more">An aspiring developer gets a ticket to WWDC, but cant afford to fly there. Now he needs to get across country in time for the keynote, and the only person who can help him is his slacker roommate.</description>
<text>Language information can go here</text>
<row>
<buttonLockup>
<badge src="resource://button-preview" />
<title>Preview</title>
</buttonLockup>
<buttonLockup type="buy">
<text>$9.99</text>
<title>Buy</title>
</buttonLockup>
</row>
</stack>
<heroImg src="path to images on your server/Car_Movie_720x1080.png" />
</banner>
</productTemplate>
Any help on this would be great. Thanks.
You can only have one template per page. When coming to menuBarTemplate it's about the same, but the framework internally renders the tab selected, showing both the menu and the productTemplate
For example, taking your menuBarTemplate and setting a template for the first menuItem:
<menuBarTemplate>
<menuBar>
<menuItem id="navigation_top_movies" data-identifier="list" template="${this.BASEURL}templates/productTemplate.xml.js">
<title>Top Movies</title>
</menuItem>
<menuItem id="navigation_genres" data-identifier="index">
<title>Genres</title>
</menuItem>
<menuItem id="navigation_search" data-identifier="search">
<title>Search</title>
</menuItem>
<menuItem id="navigation_edit" data-identifier="edit">
<title>Edit</title>
</menuItem>
<menuItem id="navigation_settings_add" data-identifier="add_settings">
<title>Add Settings</title>
</menuItem>
</menuBar>
</menuBarTemplate>
And then in a separate file called productTemplate.xml.js:
var Template = function() { return `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<productTemplate>
<background>
</background>
<banner>
<infoList>
<info>
<header>
</header>
</info>
</infoList>
<stack>
<title>WWDC Road Trip</title>
<row>
<text><badge src="resource://tomato-fresh"/> 99%</text>
<text>1hr 54min</text>
<text>Comedy</text>
<text>2015</text>
<badge src="resource://mpaa-pg" class="badge" />
<badge src="resource://cc" class="badge" />
</row>
<description allowsZooming="true" moreLabel="more">An aspiring developer gets a ticket to WWDC, but cant afford to fly there. Now he needs to get across country in time for the keynote, and the only person who can help him is his slacker roommate.</description>
<text>Language information can go here</text>
<row>
<buttonLockup>
<badge src="resource://button-preview" />
<title>Preview</title>
</buttonLockup>
<buttonLockup type="buy">
<text>$9.99</text>
<title>Buy</title>
</buttonLockup>
</row>
</stack>
<heroImg src="path to images on your server/Car_Movie_720x1080.png" />
</banner>
</productTemplate>
</document>`
}
That will render by default the first tab of the menu bar. If you provide templates for the other tabs, the tab will change automatically while maintaining the menu bar.