Giter Club home page Giter Club logo

tvmlkitchen's Introduction

TVMLKitchen😋🍴 GitHub license Carthage compatible Build Status

TVML is a good choice, when you prefer simplicity over dynamic UIKit implementation. TVMLKitchen helps to manage your TVML with or without additional client-server. Put TVML templates in Main Bundle, then you're ready to go.

Loading a TVML view is in this short.

Kitchen.serve(jsFile:"Catalog.xml.js")

Kitchen automatically looks for the jsFile in your Main Bundle, parse and load it, then finally pushes it to navigationController. User can pop to previous viewcontroller with AppleTV(Remote)'s 'Menu' button.

Getting Started

Showing a Template from main bundle

  1. Put your Sample.xml.js to your app's main bundle.

  2. Prepare your Kitchen in AppDelegate's didFinishLaunchingWithOptions:.

    Kitchen.prepare(launchOptions)
    
  3. Launch the template from anywhere.

    Kitchen.serve(jsFile: "Sample.xml.js")
    

Showing a Template from client-server

  1. Got TVML server ? Just pass the URL String and you're good to go.

    Kitchen.serve(urlString: "https://raw.githubusercontent.com/toshi0383/TVMLKitchen/master/SampleRecipe/Catalog.xml.js")

Advanced setup

  • Inject native code into TVML(javascript) context
  • Add error handlers
Kitchen.prepare(launchOptions, evaluateAppJavaScriptInContext:
{ appController, jsContext in
    /// set Exception handler
    /// called on JS error
    jsContext.exceptionHandler = {context, value in
        LOG(context)
        LOG(value)
        assertionFailure("You got JS error. Check your javascript code.")
    }

    /// SeeAlso: http://nshipster.com/javascriptcore/
    /// Inject native code block named 'debug'.
    let consoleLog: @convention(block) String -> Void = { message in
        print(message)
    }
    jsContext.setObject(unsafeBitCast(consoleLog, AnyObject.self),
        forKeyedSubscript: "debug")

}, onError: { error in
    let title = "Error Launching Application"
    let message = error.localizedDescription
    let alertController = UIAlertController(title: title, message: message, preferredStyle:.Alert )

    Kitchen.navigationController.presentViewController(alertController, animated: true) { }

})

Kitchen Recipes

Though TVML view cannot be modified programatically after presented(or is there a way?), we can at least generate TVML dynamically by defining Recipe. Theme is customizable.

let banner = "Movie"
let thumbnailUrl = NSBundle.mainBundle().URLForResource("img",
    withExtension: "jpg")!.absoluteString
let actionID = "/title?titleId=1234"
let (width, height) = (250, 376)
let templateURL: String? = nil
let content = ("Star Wars", thumbnailUrl, actionID, templateURL, width, height)
let section1 = Section(title: "Section 1", args: (0...100).map{_ in content})
let catalog = CatalogRecipe<BlackTheme>(banner: banner, sections: (0...10).map{_ in section1})
Kitchen.serve(recipe: catalog)

Default Theme

Catalog Recipe looks like this

Black Theme

Catalog Recipe looks like this

Note: This feature is still in beta. APIs are subject to change.

Available Recipes

  • Catalog
  • Catalog with select action handler
  • Alert with button handler
  • Rating with handler
  • Compilation with select action handler
  • Product with select action handler
  • Product Bundle with select action handler
  • Stack with select action handler
  • Stack Room with select action handler
  • Stack Separator with select action handler

and more...

Note

We don't know when or how to inject additional data onto already presented TVML view. For now, if you need 100% dynamic behavior, go ahead and use UIKit.

Installation

Carthage

Put this to your Cartfile,

github "toshi0383/TVMLKitchen"

Follow the instruction in carthage's Getting Started section.

References

For implementation details, my slide is available.
TVML + Native = Hybrid

Contribution

Any contribution is welcomed🎉

tvmlkitchen's People

Contributors

toshi0383 avatar

Watchers

Eusthace Corin avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.