成為智慧型手錶應用程式開發人員是個好主意,但如果您是 HTML 開發人員怎麼辦?您能在不切換到完全不同的平台的情況下實現您的夢想嗎?您是否必須放棄所有 HTML 技能並從頭開始?不用擔心。 Tizen 來拯救你。
Tizen 是 Linux 系列的作業系統,專為從智慧型手機到智慧手錶等一系列裝置。雖然 Tizen 是 Linux 基金會內的一個項目,但它由 Tizen 協會指導,該協會的成員包括三星、英特爾和其他科技行業的知名公司。
#在本教程中,我將向您展示如何安裝和配置適用於可穿戴設備的 Tizen SDK 以及如何使用 IDE 開發智慧手錶應用程式。讓我們開始吧。
目前,有兩種類型的 SDK 可用:Tizen SDK 和 Tizen SDK for Wearable。從此 教學是關於開發一個獨立的智慧手錶應用程序,您需要的是 Tizen 適用於穿戴式裝置的 SDK。
您可以從 Tizen 開發者網站下載它。 您需要下載適合您的操作的安裝管理器 系統和版本。如果您喜歡離線安裝而不是線上安裝, 您還需要下載SDK 映像。如果您的作業系統是 Windows 8 或 Windows 8.1,您可以下載Windows下分類的安裝文件 7. 它們可以在 Windows 8 和 8.1 上正常運作。
#請參閱 Tizen 的詳細說明,以了解您的電腦應滿足的硬體和軟體要求。
即使您的電腦不符合這些硬體要求,您也可以安裝 SDK。但是,如果這樣做,智慧手錶模擬器將會變慢,導致應用程式測試效果不佳。請造訪文件以了解更多詳細資訊。它介紹如何在 BIOS 中啟用虛擬化技術 (VT),以及如何在 Windows 上啟用資料執行保護。
如果您願意,可以單獨安裝Intel HAXM。安裝完成後,重新啟動電腦。
在 IDE 的左側窗格中,有兩個視窗:專案資源管理器和連線資源管理器。 專案資源管理器顯示使用者建立的專案。 連線資源管理器列出了目前可用的已連線裝置、模擬器實例或遠端裝置。
#启动模拟器需要一些时间。当它启动并运行时,您应该会看到一个带有类似于以下屏幕截图的启动屏幕的窗口。模拟器实例应显示为连接资源管理器中的一个条目。
从开始屏幕底部中间点向上滑动,转到显示设备或模拟器上已安装应用程序的屏幕。由于您尚未安装任何应用,因此仅显示设置图标。
您可以通过从屏幕顶部中间向下滑动来返回到上一屏幕或退出应用程序。
在此示例中,我们将创建一个简单的应用程序来显示漫画。让我们依次看看每个步骤。
让我们在 IDE 中创建一个新项目。
HTML、CSS 和 JavaScript 构成了 Tizen 平台上编程的基础。如果您是 HTML 向导,那么您无需学习新的编程语言即可为 Tizen 平台编写应用程序。您可以使用现有的 HTML、CSS 和 JavaScript 技能。
我们首先需要向 myapp 项目添加两个子文件夹:comic 和 images。为此,请右键单击 IDE 中的 myapp 项目文件夹,然后选择新建 > 文件夹。子文件夹应显示在 IDE 中展开的 myapp 文件夹中。
从 GitHub 下载此项目的源文件,然后导航到 images 子文件夹,其中包含许多 png 文件。将 png 文件复制到您刚才创建的 images 子文件夹中。
您可以将文件粘贴到Project Explorer窗口中的images子文件夹中,方法是右键点击子文件夹并从弹出菜单中选择粘贴 .
接下来,右键点击 comic 子文件夹并选择新建 > 文件,在 comic 子文件夹中创建具有以下文件名的 9 个 HTML 文件>。确保包含文件的 .html 扩展名。
现在,comic 子文件夹中应该有九个 HTML 文件。
现在让我们编辑 index.html 中的代码。该文件是您的应用程序的入口点。双击 index.html 在 IDE 中打开该文件。 将 <title></title>
标记的内容更改为 <title>2nd Race</title>
。接下来,使用以下内容更改 标记的内容:
<body> <div> <div><img src="images/coverpage.png" alt="Cover Page" /></div> <div><a href="#" class="btn" ><<</a><a href="comic/page1.html" class="btn" >>></a></div> </div> </body>
我们所做的就是向页面添加一个图像和两个导航到其他页面的按钮,因为我们的漫画将有十页。完成这些更改后,从菜单中选择文件 > 保存来保存文件。
如果您不熟悉 HTML 和 CSS,Tuts+ 提供了大量优秀教程,可帮助您快速掌握 Web 开发的基础知识。
接下来,双击 css 子文件夹中的 style.css 并更改其内容,如下所示。
* { font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif; } body { margin: 0px auto; background-color:#0a3003; } img { margin: 0; padding: 0; border: 0; width: 100%; height: auto; display: block; float: left; } .btn { display: inline-block; padding: 15px 4% 15px 4%; margin-left: 1%; margin-right: 1%; margin-top: 5px; margin-bottom: 5px; font-size: 30px; text-align: center; vertical-align: middle; border: 0; color: #ffffff; background-color: #4b4237; width: 40%; height: 80px; text-decoration: none; }
我们为正文、图像和导航菜单添加了一些样式。完成更改后,保存文件。
同样,将代码添加到您创建的所有其他 HTML 文件中。 css 子文件夹中的 style.css 文件必须从外部链接到所有这些 HTML 文件。如果您不确定此步骤,请从 GitHub 下载源文件并检查源文件以进行澄清。
要测试您的应用,请选择myapp项目文件夹,然后从菜单中选择项目 > 构建项目构建项目。确保模拟器实例已启动并正在运行。
右键单击myapp文件夹,然后选择运行方式 > Tizen 可穿戴 Web 应用程序以在模拟器中运行该项目。使用用户界面中的箭头按钮导航到下一页或上一页。从屏幕顶部向下滑动可退出应用程序。
在本教程中,我们使用 Tizen SDK 构建了一个简单的漫画应用程序 可穿戴并在捆绑的智能手表模拟器上运行 IDE。当您准备好安装并运行它时,真正的乐趣就开始了 物理设备。
您可以在 Samsung 和 Tizen 开发者网站上找到大量附加信息。你还在等什么?
以上是探索用於智慧手錶應用程式開發的 Tizen:簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章!