说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

Apple TV指南:从零开始用Swift开发个tvOS应用

HTML文档下载 WORD文档下载 PDF文档下载
这篇文章主要介绍了如何在Apple TV上开发一个名为tvOS的App,以及关于tvOS的一些相关的定义,最终呈现给用户一个非常有趣的界面。

本文出自:Jameson Quave's Blog,作者:Jameson Quave,译文出自:SwiftGG,译者:ray16897188

 

教程结束时,我们会做出这样一个应用:


你更喜欢哪个艺术家?

第一部分

开始

在我们开始之前你需要安装 Xcode 7.1 beta 版,可以从这里下载:下载 Xcode 7.1 Beta。

注意:下载 Xcode 7.1 Beta需要有一个苹果开发者账号,由于目前 Xcode 是预发行版,以后正式发布的时候可能会有变化。
安装的时候要注意,如果你重命名Xcode7.1应用,会遇到一个已知Bug。一定有人会这么做,所以提前说明……别这么做,否则你的tvOS模拟器会崩溃。

同时要注意,虽然支持优胜美地 (Yosemite),但是在该操作系统上,功能会受限。推荐用 OSX 10.11 El Capitan 或更新的系统。ElCapitan beta可以在这里下载。

下面我们来介绍一些 tvOS 相关的定义。

TVMLKit

TVMLKit 是 Apple 设计的一个新框架,能在使用 Swift 或 Objective-C 实现应用逻辑的同时使用 Javascript 和 XML 开发更炫酷的用户界面。

TVML

TVML 是“TV Markup Language”(TV 标记语言)的缩写,基本上是一些 XML 语句,用于实现基于C/S(client-server,客户端-服务端)架构的 tvOS 应用布局。布局界面时,我们会用到一些 Apple 提供的 TVML 模板创建我们的 UI,然后用 TVJS 写交互脚本。

TVJS

我能告诉你的是,TVJS 就是你(可能已经)熟悉的 JavaScript。

Hello World

我们从一个基本的 hello world 程序开始。就 Apple TV 而言,我们可以只把"Hello World"输出到控制台上。这也许是个不错的开始,但更好的选择是使用 Apple TV 的一些 TVMLKit 元素在屏幕上创建一个模板。

首先,打开 Xcode 7.1 并创建一个新项目。你可以看到一个模板列表,我们在左侧选择CHANGE tvOS,然后再选Single View Application模板。

这样就会根据 tvOS 模板创建一些默认文件和一个简单的 Swift 入口点,对一会儿创建 UI 很有帮助。

建立 TVJS 主文件

在 C/S 架构的 tvOS 应用中,服务端本质上就是 TVML 和 JavaScript 文件以及和它们相关的所有数据。JavaScript 文件会装载 TVML 并把页面(page)放入视图栈中。可以从另一个角度理解:JavaScript 文件就像 TVML 文件的路由器或是控制器(controller),而 TVML 文件本质上是若干视图(views)。

拉开序幕

首先我们要修改应用的AppDelegate.swift文件。第一步是让我们的应用遵循TVApplicationControllerDelegate协议。该协议定义在 TVMLKit 框架中,所以需要导入它。更新AppDelegate.swift文件,如下所示:

import TVMLKitclass AppDelegate: UIResponder,UIApplicationDelegate,TVApplicationControllerDelegate {....
此协议包含四个 tvOS 实现AppDelegate后会调用的函数,用于给我们的应用发送 tvOS 生命周期通知。现在我们无需操心这些,但在后面的教程中我们会对它们进行深入研究。目前只要像上面的代码那样把协议加进去就够了。

下一步,我们要添加一些代码,让 JS 文件起作用。由于是 beta 版,我们还需要自己完成这些工作。我相信在 Xcode 的后续版本中这一步会变成一个模板。

在程序里didFinishLaunchingWithOptions这个函数中我们要完成一些步骤。它们对所有应用来说都是一样的,所以你可以直接复制这段代码:


// 在一个可选属性中保存对 appController 的引用var appController: TVApplicationController?func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {  self.window = UIWindow(frame:UIScreen.mainScreen().bounds)  let appControllerContext = TVApplicationControllerContext()  let jsFilePath = NSURL(string: "http://localhost:8000/main.js")  let javascriptURL = jsFilePath!  appControllerContext.javaScriptApplicationURL = javascriptURL  if let options = launchOptions  {    for (kind, value) in options    {      if let kindStr = kind as? String      {        appControllerContext.launchOptions[kindStr] = value      }    }  }  self.appController = TVApplicationController(context: appControllerContext, window: self.window, delegate: self)  return true}

简单说说这段代码干了什么:它拿到了一个TVApplicationControllerContext引用,这个Context只是为我们的AppDelegate类提供了一些启动数据,然后给了我们一个能调整和修改启动过程的接口。接着把URL 传给待会儿要运行的main.js文件,并将appController的路径设置成这个 URL。

现在就要添加我们的 JavaScript 文件了,点击 File > New,然后在 iOS tab 下面选择 Other >Empty file。将这个文件命名为main.js。

用同样方法创建一个hello.tvml文件。

在main.js文件中添加一些简单的 JavaScript 代码,用来装载hello.tvml文件:

function getDocument(url) {  var templateXHR = new XMLHttpRequest();  templateXHR.responseType = "document";  templateXHR.addEventListener("load", function() {pushDoc(templateXHR.responseXML);}, false);  templateXHR.open("GET", url, true);  templateXHR.send();  return templateXHR;}function pushDoc(document) {  navigationDocument.pushDocument(document);}App.onLaunch = function(options) {  var templateURL = 'http://localhost:8000/hello.tvml';  getDocument(templateURL);}App.onExit = function() {  console.log('App finished');}
现在在hello.tvml文件中添加:

<document>  <alertTemplate>      <title>Hello tvOS!</title>  </alertTemplate></document>

TVML 文件是 UI 的实际内容。文档(document)必须用模板编写,否则现在的代码运行时会崩溃。这个 TVML 文件只是包含了一个简单的模板和一个单元素的标题。

在编写这些代码时我发现一个问题:本地无法引用这些文件,文件必须放在一个 web 服务器上。所以最简单的解决方案是找到你刚创建 TVML 和JS 文件的位置,并在命令行中敲进如下指令:

启动服务端

python -m SimpleHTTPServer 8000

这条指令用 Mac OS 内建的 python 解释器开启了一个端口号为 8000 的 web 服务器,可以用它来托管本地文件。如果在命令行中,执行了上面给出的代码,那么现在按一下Xcode 的 play 按钮就能在 tvOS 模拟器中启动了。还有一个要注意的事情:这是一个不够安全的 HTTP 请求,在 iOS 9 中会被默认的应用传输安全机制拦截。为了能够按之前的方法来使用本地主机,我们需要在Info.plist文件中添加一个key。

允许直接加载(Allows Arbitrary Loads)

选择Info.plist文件然后按加号(+)来创建一条新记录。在列表中选择”App Transport Security Settings”并按 return 建。这将创建一个新的字典条目,展开它,在这行上按加号(+)添加一个子行。接着选中”Allows Arbitrary Loads”并将其设为true。都设好了之后我们就能用模拟器运行应用了。

添加按钮

在本例中你看到的实际上是一个被 Apple 称作alertTemplate的模板。你还能嵌入一些基本控件,比如在模板中添加文字和按钮。试着添加一些按钮吧:

<document>    <alertTemplate>        <title>Hello tvOS!</title>        <button>            <text>A Button</text>        </button>        <button>            <text>A Second Button</text>        </button>    </alertTemplate></document>

这里我们只加了子按钮(child button)元素,每个子按钮都有它自己的子文本(child text)元素。这段代码在 tvOS模拟器上全屏显示alert和两个按钮。如果你自学能力很强,苹果的官方文档中列出了你能使用的所有模板和控件。

第二部分

增加交互事件

在第一部分中我们创建了一个简单的 TVML document,里面有几个按钮。这个document看起来是这样的:

<document>	<alertTemplate>		<title>Hello tvOS!</title>		<button>			<text>A Button</text>		</button>		<button>			<text>A Second Button</text>		</button>	</alertTemplate></document>
这是一个带按钮的警告(alert)界面,目前这些按钮没有任何作用。这段代码直接硬编码了具体内容,更好的方式是使用代码生成XML,在 JS 中很容易实现。我们在main.js文件中添加一个新函数,把上面的代码封装成一个更简单的警告界面,它只包含一个 OK 按钮。

function alert(str) {	var alertXMLString = `<?xml version="1.0" encoding="UTF-8" ?>	<document>		<alertTemplate>			<title>Hey Listen!</title>			<description>${str}</description>			<button>				<text>OK</text>		</button>	</alertTemplate></document>`var parser = new DOMParser();var alertDOMElement = parser.parseFromString(alertXMLString, "application/xml");navigationDocument.presentModal(alertDOMElement);}
这里创建了一个alertXMLString字符串,它表示的是包含一个按钮的简单警告界面所对应的 TVML。description节点比较特殊,我们使用TVJS 的内嵌字符串语法${variable}来插入str的值。

接下来,创建一个新的DOMParser对象,把这个字符串转换成一个实际的 XML DOM 元素。

最后,我们用navigationDocument的presentModal方法展示一个模态框,内容就是上一步的 DOM 元素。navigationDocument是一个全局变量,它永远指向XML 文档的根节点。

现在,删除onLaunch函数中之前的代码,直接调用刚才创建的函数……

App.onLaunch = function(options) {	alert("Hello!");}


Hello警告

运行应用,你会看到一个炫酷的”Hello!” tvOS 警告。但是点击 OK 没有任何反应。我们该怎么处理像触摸之类的事件呢?

通常来说,在 JavaScript 和 TVML 的世界中,你需要给 DOM 元素添加一个事件监听器(event listener)。举个例子,我们可以给alert函数添加第二个参数,把 OK 按钮触发select事件时需要调用的函数作为参数传入。下面我们就加入这个名为doneCallback的参数:

alertDOMElement.addEventListener("select", function() { doneCallback }, false);
更新后的完整函数如下:

function alert(str, doneCallback) {	var alertXMLString = `<?xml version="1.0" encoding="UTF-8" ?>	<document>		<alertTemplate>			<title>Hey Listen!</title>			<description>${str}</description>			<button>				<text>OK</text>			</button>		</alertTemplate></document>`var parser = new DOMParser();var alertDOMElement = parser.parseFromString(alertXMLString, "application/xml");alertDOMElement.addEventListener("select", doneCallback, false);navigationDocument.presentModal(alertDOMElement);}

现在我们可以修改之前的onLaunch函数,添加一个回调函数来显示一个 TVML 页面。在此之前,我们需要再添加一个getDocumentContents函数,它会在页面加载完毕之后调用回调函数。这个回调函数只有一个参数,用来接收 XMLHttpRequest 对象的响应内容。这样我们就可以轻松地加载多种 TVML 文件。 

function getDocumentContents(url, loadCallback) {	var templateXHR = new XMLHttpRequest();	templateXHR.responseType = "document";	templateXHR.addEventListener("load", function() { loadCallback(templateXHR) }, false);	templateXHR.open("GET", url, true);	templateXHR.send();	return templateXHR;}
代码和之前定义的getDocument方法几乎一样,区别是这里是异步操作,而且不会在界面上显示任何内容。 

有个这个函数,我们就能执行下面的调用,当 OK 按钮被点击时替换屏幕上的警告内容。 

App.onLaunch = function(options) {    alert("Hello!", function() {      var helloDocument = getDocumentContents("http://localhost:8000/hello.tvml", function(xhr) {        navigationDocument.dismissModal();        navigationDocument.pushDocument(xhr.responseXML);      });    });}
我们使用stackTemplate模板来改写hello.tvml文件,这样界面会更有趣。stackTemplate非常适合用来展示一组包含标题和图片的列表内容。下面是本例用到的内容:

<document>    <stackTemplate>        <banner>            <title>Which Artist Do You Prefer?</title>        </banner>        <collectionList>            <shelf>                <section>                    <lockup>                        <img src="http://localhost:8000/nina.png" width="256" height="256" />                        <title>Nina Simone</title>                    </lockup>                    <lockup>                        <img src="http://localhost:8000/coltrane.png" width="256" height="256" />                        <title>John Coltrane</title>                    </lockup>                </section>            </shelf>        </collectionList>    </stackTemplate></document>

这基本上就是stackTemplate的布局方式,banner是顶部的横幅内容,collectionList包含许多shelf对象,而shelf对象则包含许多section对象,section对象又包含许多lockup对象,最后这个才真正包含我们的图片和标题。在本例中我向目录中添加了一些图片,它们是nina.png和coltrane.png。


预告:  2015中国移动开发者大会(MDCC 2015)将于10月14日-16日在北京新云南皇冠假日酒店召开。大会特设九大技术专场:平台与技术(iOS)、平台与技术(Android)、平台与技术(跨平台)、产品与设计、游戏开发、企业移动化、虚拟现实专场、硬件开发与技术、嵌入式开发。大会将聚集国内最具实力的产品技术团队,与开发者一道进行最前沿的探讨与交流。 

第一时间掌握最新移动开发相关信息和技术,请关注mobilehub公众微信号(ID: mobilehub)。

Heka:Go编写,来自Mozilla,高效、灵活的插件式数据挖掘工具 Anchora鲁为民:PaaS是我的兴趣 次世代IDE Light Table 0.4发布 带来众多更新和改进 别再设计易碎的Web API! LinkedIn:55人支持2700位员工,2亿用户的大数据分析 Brian Krzanich是谁?这位新CEO预示英特尔未来怎样? HTML5开发者心声:浏览器兼容性成最大问题 传微软6月下旬将发布第二代Surface 7到9英寸全有 Turbulenz:HTML5 2D和3D游戏引擎开源 携程开放平台总经理夏天:内容+高转化率成就开发者 直接拿来用!最火的Android开源项目(一) Qunar 谌振宇:旅游行业的移动化如何布局? 大数据分析“铁三角”: Teradata数据仓库、Teradata Aster与Hadoop Teradata专业服务:打造行业企业的“数据科学家” Xamarin Evolve 2013:竭尽全力让C#服务iOS与Android 史上最全!57个Web框架4轮横向对比 回顾银行数据的可用性和一致性历史 Qubole:托管在AWS平台上的Hive服务 自由操作系统 Debian 正式发布7.0版本 4月份浏览器份额:IE 8仍居第一,IE 10翻番 亚马逊正式在华推Android应用商店 收入3:7分账 不要男孩,只允许女生参加的四所编程学校 下一波App机会在哪里? JS1K 2013优胜作品公布 3D蜜蜂仅获亚军 专访:前新浪网架构师徐佳转行卖水果背后的故事 FBI密码挑战,你能解开吗? 从0到1只需一天:Twitter后PC时代物联网“敏捷”开发之路的探索 机械生物已经面世 只少个“大脑”而已 百度正式宣布3.7亿美元收购PPS视频业务 比尔&#183;盖茨:iPad让人失望 用户需要Surface Dropbox将于今年夏天举办有史以来的第一场开发者大会 如何做jar包呢?还有如何做bak呢?大家救救我吧。 《inside the c++ object model》问题 这句是什么意思??? 问一个Win2000Server域用户客户端登陆问题。 小问题:在线等待:) 如何删除一个ini文件中的关键项目?急 求救!为什么我的ACESS数据库文件会莫名其妙的达到25M,我还没输任何数据呢?而生成MDE后只有500K? 求教关于c++builder的图象预处理的源代码。50分!!还有金钱相送! access的问题 郁闷!!关于数据窗口一个奇怪的问题!! 如何实现断点续传 寻求《软驱监控程序》!!!!!!!!!!!!!!价格面议 用imp恢复数据库,要做什么准备呀? 刚才给分失败,重新散分! 关于SQLserver数据库和MDB数据库的句语问题!!! IE数据保密大全,如何禁止以下功能?菜单,工具栏,收藏夹,鼠标右键,PRINTSCREEN键,键盘快捷键 帮忙:DCOM 无法使用任何配置的协议与计算机 慨n 通信? 查询问题 请教bean中填写方法问题,高手帮忙啊!!!!! 昨天回家遇到打劫,被暴打一顿 本人有一个数据窗口对象中的一个字段,其为DDDW型的,可是在它的选项页中却怎么也不能显示出我想设置的名字显示出来,却总是显示保存在表中 在线求助,当场送分。 用MASM编译DOS程序经常有问题啊!? asp.net问题 有关DateDiff的问题。。。SOS 请问用什么软件制作chm帮助文档? 数据库中记录条数在增加,但字段却是空的呀??? 高分求:如何确定TreeView的SelectedItem为空? ******* 怎样调试硬中断程序? 存储过程中的一个语法问题 servlet中forward到jsp页面的显示问题 SOS:请问一个页面在不同分辨率下适应性的问题! 我在做数据库链接时,出现了编译错误,实在看不错在哪里(在线等待) rpm的升级过程中的问题,请大家关注 有关gethostbyname的问题 关于数据库系统信息的ini文件 请问一个简单语法问题 股票界面的画法问题 自从和男友去看了《我的野蛮女友》后,我又变野蛮了~~ 一个小问题 在aspx文件中取出aspx.vb文件中的数据怎么做到? 救命!! 为什么我的数据窗口中的编辑框不能写入数据(问题解决,立即给分) 如何立即更新水晶报表中的数据库?关于水晶报表高分(100) 关于makefile问题(在线等) ASP编程中的问题,很急…… 如何写手机短信程序? 台湾人的抗韩情结(转贴) 为什么我的数据窗口中的编辑框不能写入数据(问题解决,立即给分) 请大家帮忙! 一个简单的问题 利用二氧化碳的气体就能区分氢氧化钠,氢氧化钙,和稀盐酸三种溶液吗 酸性氧化物的性质rt分条列出来 有两个干净的玻璃杯,一只盛满纯净的水,另一只是空的,杯口都有盖子,你怎样判断哪只 利用二氧化碳如何区别NaOH、氢氧化钙和稀盐酸 酸性氧化物的性质怎样体现. 有两只干净的玻璃杯,一只杯子盛满不含气泡、污物、颜料的纯净水,一只是空的.盖上盖子,怎样判断那只杯有水? 一氧化碳是否为酸性氧化物 大家帮一下忙啊,初中酸性氧化物性质的概念,谢拉,要是初中的啊! 有两只干净的玻璃杯,一只杯子盛满不含气泡污物和颜料的纯净水,一只是空的,怎样用眼睛判断那只杯子是空 一氧化碳是不是酸性氧化物 西周宗法制的核心是 赵高不是立了子婴吗?为何公认秦朝的最后一位皇帝是胡亥? 一氧化碳是酸性氧化物吗,为什么? 西周宗法制是以( )为基础,核心是( ).只要回答问题,不要长篇大论 对于秦朝的灭亡,秦始皇负多大责任?秦二世负多大责任?(百分比) 一氧化碳为什么不是酸性氧化物?我知道它不是酸性氧化物.想知道深层的原因. 西周实行的宗法制的基础是什么?核心是什么? 秦始皇嬴政,秦二世嬴胡亥,秦三世赢子婴,秦四世赢祜这四个秦朝君王里谁最昏庸谁最贤明?看来中国的无产者只是一个常规历史主义者,其实,秦二世嬴胡亥被废后,也就是楚汉战争(前206~前202 一氧化碳为什么不是酸性氧化物?若它不是那它是属于什么性质的物质我们那个二逼化学老师撒都讲不好,就说了一氧化碳不是酸性氧化物,也没说为什么不是.而且像CO2、No都符合酸性氧化物的 西周宗法制的基础和核心分别是什么?它产生了哪些历史作用? 淘宝买的电热水袋让装自来水 可是好像听说装自来水烧不热 有没有这回事? 酸性氧化物的特征 秦朝的刘邦和秦始皇 帮忙用烷烃系统命名法命名. 酸性氧化物的特点是什么?还有碱性的有什么特点请告诉我常见的酸性氧化物和碱性氧化物 求个秦朝时代的穿越小说 最好穿越成秦始皇的 秦始皇儿子也行 烷烃系统命名法.如何命名 酸性氧化物的特征和组成部分是什么? 酸性氧化物构成是什么,都有哪些 中国和希腊古代政治制度呈现不同特点的主要原因是什么 秦朝灭亡了之后秦始皇的女儿姬妾都到哪里去了? 盐如何生成酸性氧化物 水是一种没有什么会什么的物体?像水这样的物体叫什么? 西周宗法制的主要内容和实质简略一点概括重点 酸性氧化物能和______反应生成_____盐第二空是中性么? 宗法制确立了严格的-----、-----体系. 秦始皇后的秦朝多久灭亡的? 西周宗法制建立的目的是:①巩固分封制②防止地方割据③确保王权稳定④维护贵族的特权地位A.①②B.①③④C.①②③D.②③④ CUCL2和NAOH化学方程式的离子方程式 固体水银有毒吗?误食后会死吗? 西周宗法制的实质是什么呢?(内容简要的) 西周宗法制建立的目的 烷烃的所有性质都与甲烷相同注是相同不是相似 秦始皇自即位以后到秦朝灭亡,秦朝出了几个上将军. 西周实行宗法制的主要目的A维系政治等级,巩固国家统治B巩固父系家族的宗族地位C防止财产大量流失D避免政治上出现分裂局面 水银遇空气发生什么反应 西周实行宗法制,根本上是要?A、保证嫡长子一系的特权B、巩固父系家长在本宗族中的地位C、封邦建国,拱卫王室D、保证王权的稳定 秦朝自秦穆公至秦始皇的历代秦国国君的姓名,功绩与过失.个人兴趣,呵呵, 13 2010年3月召开的第十一届全国人大三次会议,表决通过了关于修改《中华人民共和国选举法》的决定.这表明全国人民代表大会具有 A监督权 B任免权 C立法权 D决定权 各位高手,选哪一 请你们帮我选选,并说明原因可以吗?..西周实行宗法制的根本目的是( )选项1:广建诸侯藩国选项2:区分血缘亲疏选项3:保证法律执行选项4:巩固分封秩序 鉴别稀硫酸和氢氧化钠不能用A.氯化钡溶液 B.氯化钾溶液 C.硫酸铜溶液 D.碳酸钠溶液 少量二氧化碳通入氢氧化钠溶液中和 过量二氧化碳通入氢氧化钠溶液中的离子反应方程式? 西周宗法制的实质.宗法制对中国封建社会有什么影响 碳酸钠 硫酸钠 氢氧化钠 氯化钾加水之后的现象.碳酸钠 硫酸钠 氢氧化钠 氯化钾,那几个或哪个不能得到无色澄清的溶液? 十一届全国人民代表大会第一次会议十一届全国人大三次会议是什么意思?有什么区别? 酸性氧化物有哪些性质?酸性氧化物能与哪些物质反应,表现什么性质? 有两只干净的玻璃杯一只有水一只是空的盖子相同你怎么判断那只有水那只没水? 桥烷烃有什么特殊的性质吗? 酸性氧化物 性质 有两只干净的玻璃杯,一只盛满纯净的水,一只是空的,上面盖上相同的盖子,你怎样用眼睛来判断哪只杯中有水
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘