Client-server apps using JavaScript and TVML differ slightly from traditional apps. The main function of the project you create in Xcode is to access a main JavaScript file and present pages created from TVML files on the screen. Figure 2-1 shows the client-server model.

Figure 2-1Client-server model

Your JavaScript file loads TVML pages and pushes each page onto the navigation stack. As the user navigates through your app, TVML pages are pushed and popped from the stack. After the user closes your app, the Apple TV home screen appears. Figure 2-2 shows the flow for a basic app.

Figure 2-2Client-server app flow

To build a client-server app:

1. Open Xcode and create a new project.

2. Select the Single View Application template from tvOS.

3. Remove the view controller file and the main storyboard for the app.

4. Open the info.plist file and remove the Main storyboard file base name entry.

5. Make these changes to the AppDelegate.swift file:

   • Add import TVMLKit.

   • Change the class declaration to be class AppDelegate: UIResponder, UIApplicationDelegate, TVApplicationControllerDelegate {.

   • Add the following global variable to your class: var appController: TVApplicationController?

   • Modify application:didfinishLaunchingWithOptions: according to the code found in the listing below:

   1. func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
   2. self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
   4. let appControllerContext = TVApplicationControllerContext()
   6. let javascriptURL = NSURL(string: "Enter path to your JavaScript file here")
   8. appControllerContext.javaScriptApplicationURL = javascriptURL
   9. appControllerContext.launchOptions["BASEURL"] = TVBaseURL
   10. if let options = launchOptions {
   11. for (kind, value) in options {
   12. if let kindStr = kind as? String {
   13. appControllerContext.launchOptions[kindStr] = value
   14. }
   15. }
   16. }
   18. self.appController = TVApplicationController(context: appControllerContext, window: self.window, delegate: self)
   20. return true
   21. }

The code in the above example loads a JavaScript file which then loads a TVML page and displays it in the simulator or on a television screen if a new Apple TV is connected to your computer. For more information about JavaScript classes, see Apple TV JavaScript Framework Reference.

The JavaScript in Listing 2-1 loads a TVML page (Listing 2-2) that displays an alert asking if the user wants to upgrade to the premium version of your app. After the page is loaded, it is pushed onto the navigation stack The operating system then displays it to the user. For more information on available TVML templates and elements, see Apple TV Markup Language Reference.