Hacking TVML | Custom TVML Elements
At Shopgate we are currently building an Apple TV Shopping App written in TVML/TVJS. Yep, a whole Shopping App in TVML.
So why are we doing this?
The Shopgate mobile apps follow a custom hybrid approach using WebViews. So the logic to create layouts was already there and because of our structure the Apple TV version was “just” creating a new template. At least that was what we were thinking in the beginning.
Turns out that AppleTV does not provide WebViews for now.
HTML vs. TVML
Actually TVML looks like a stripped down version of HTML with a few additions. Additions that are mostly setup for streaming services it seems.
But we were going to build a shopping app. And this is how we did it.
Hacking
After playing around with the new platform and having the first UI designs in place we started to look for the best matching templates and tried to customize them to fit the UI we wanted to have.
Most of it was trial and error based and relatively early we faced some issues customizing templates. For example it was not possible to move a list from the right side of the screen to the left side without switching to another template.
Also in the early stages we found out that there is a (not officially documented) tag called “card”. We used <card> a lot to build more complex designs that were not possible with the other provided elements. So for example we could place elements into cards and position them more precisely. This way we built the whole App in TVML.
Update: Apple updated the documentation to include the <card> element and a lot more tags to create more customized layouts. Find out more here
No WebViews & No Strikethrough Text
One thing we realised first and did not figure out until now, was the problem of displaying struck out text. It was just not possible. In fact it was also even not possible to change the font. After asking in the developer forum after it we were told to open a feature request and of course we did. But until today there is no change.
Update: From tvOS 10 on it is possible to use strikethrough text without any custom code. To use it you can place a <strike> tag within <text> tags like <text>This text is <strike>struck out</strike></text>
TVInterfaceFactory & TVElementFactory
Eventually we did one last try and studied the docs again.
The TVElementFactory class lets you register new elements to extend the Apple TV Markup Language (TVML).
Well that sounded like exactly what we needed. What it lets you do is to register a new element type and then handle its creation.
Even better, you can also create custom style properties and so make the new elements customizable from the TVML-Styles.
You can checkout the code on Github. It also adds support for animated images and buttons with all the support for custom fonts, underlined/line-through text and (animated) background images.
