2

Is it possible to create dynamic templates/pages with TVML without relying on Apple's standard templates?

Say I'd like to create a template that has 2 images next to each other and on top of these images a couple of textfields that I want to position based on some parameters.

Could I create a template/view i UIKit and populate it from JS as an alternative?

How would I go about this?

Placeable
  • 589
  • 8
  • 22

1 Answers1

7

I think you're talking about a mix of "divTemplate", which exists precisely to let you use whatever layout you want with no predefined structure or placement, and using native code to define your own custom TVML elements.

From Apple's documentation, "There is no built-in layout for the contained elements. Use the style properties listed in TVML Styles to personalize the elements placed inside of the div template." It's for completely free-form by-hand element layout.

As for the other path: the way to add a UIKit view to TVML is by defining a custom element. That's how the TVML system knows where your custom view is supposed to go within the TVML "page". If you go down that path, you'll want to read up on TVMLKit, not just TVML and TVJS. You make a class that conforms to the TVInterfaceCreating protocol, potentially create a subclass of TVViewElement (if one of the existing classes isn't enough for your needs), register the element with [TVElementFactory registerViewElementClass: [MyTVViewElement class] forElementName:@"mycustomelement" ], and register your TVInterfaceCreating class with [[TVInterfaceFactory sharedInterfaceFactory] setExtendedInterfaceCreator: myInterfaceCreator].

So the way I see it, you could use a divTemplate and a ton of carefully crafted style info to do it entirely without any custom code or UIView objects, or you could make one or a small number of custom elements for the part you're talking about. I do not know if you can make a new "template" that is itself a custom element, however -- that's something I haven't tried yet.

If you decide to go down the native code path and you find that the TVViewElement-related APIs aren't rich enough for the coordination you want between JavaScript and your custom view, you may also need to read up on the JavaScriptCore APIs. Those let you expose arbitrary native-backed functionality via JavaScript, via the APIs on JSContext. In a TVML app, a good place to hook into all this is by implementing the - appController:(TVAppController *) evaluateAppJavaScriptInContext:(JSContext *) method from the TVApplicationControllerDelegate protocol.

dfjdejulio
  • 94
  • 5
  • This is a very thorough answer! Thanks a lot, exactly what I was looking for. – Placeable Jan 27 '16 at 16:10
  • Are there examples of this online somewhere? – Dan Healy Jan 27 '16 at 20:18
  • 1
    I've got some code samples that relate to this, but I hesitate to share them just yet -- they're part of an (open source) app that's currently under review, and I don't want to share it more widely until I know that there isn't anything in there that would prevent app store approval. – dfjdejulio Jan 27 '16 at 21:20
  • @dfjdejulio I would love to see a sample of this, please keep me posted if you decide to share – shirefriendship Jan 28 '16 at 21:34
  • 1
    The app has now passed the review process and is released on the tvOS store, which I take to be a good sign that nothing in there is a show-stopper for approvals. The source code is available at: https://github.com/dfjdejulio/TV-Site-Viewer It's got an example of adding a custom element, an example of adding custom native-backed JavaScript, and even an example of rendering (simple) HTML. – dfjdejulio Jan 30 '16 at 00:28