スマートウォッチアプリ開発のために Tizen を探索する: 概要-htmlチュートリアル-php.cn

探索用于智能手表应用程序开发的 Tizen：简介

#スマートウォッチアプリ開発者になるのは素晴らしい考えですが、HTML 開発者だったらどうでしょうか?まったく別のプラットフォームに切り替えずに夢を実現できますか? HTML スキルをすべて捨てて、ゼロから始めなければなりませんか?心配しないで。ティゼンが助けに来ます。

Tizen は、スマートフォンからスマートウォッチまで、さまざまなデバイスに対応する Linux ファミリのオペレーティングシステムです。 Tizen は Linux Foundation 内のプロジェクトですが、Tizen Association によって指導されており、そのメンバーには Samsung、Intel、その他のテクノロジー業界の有名企業が含まれています。

このチュートリアルでは、ウェアラブルデバイス用の Tizen SDK をインストールして構成する方法と、IDE を使用してスマートウォッチアプリケーションを開発する方法を説明します。はじめましょう。

1.SDK をインストールして構成する

ステップ 1: Tizen SDK またはウェアラブル用 Tizen SDK?

現在、Tizen SDK と Tizen SDK for Wearable の 2 種類の SDK が利用可能です。あれからチュートリアルはスタンドアロンのスマートウォッチアプリの開発に関するものです。Tizen が必要ですウェアラブルデバイス用のSDK。

Tizen 開発者 Web サイトからダウンロードできます。操作に適切な インストールマネージャー をダウンロードする必要があります。システムとバージョン。オンラインインストールよりオフラインインストールを希望する場合は、 SDK イメージ もダウンロードする必要があります。オペレーティングシステムが Windows 8 または Windows 8.1 では、Windows に分類されたインストールファイルをダウンロードできます。 7. Windows 8 および 8.1 では正常に動作します。

ステップ 2: 要件

お使いのコンピューターが満たすべきハードウェアおよびソフトウェアの要件については、Tizen の詳細な手順を参照してください。

お使いのコンピューターがこれらのハードウェア要件を満たしていない場合でも、SDK をインストールできます。ただし、これを行うと、スマートウォッチエミュレータの速度が低下し、アプリケーションのテストが適切に行われなくなります。詳細については、ドキュメントを参照してください。 BIOS で 仮想化テクノロジー (VT) を有効にする方法と、Windows で データ実行防止 を有効にする方法について説明します。

ステップ 3: SDK をインストールする

前にダウンロードした インストールマネージャー を実行します。これは、オペレーティングシステムとバージョンに応じて、tizen-wearable-sdk-2.2.159_windows64.exe のようなファイル名を持つ .exe ファイルです。
「Advanced」をクリックして次の画面に進みます。
この画面で、SDK イメージ ラジオボタンを選択し、適切な SDK イメージを含む zip ファイルに移動します。オフラインインストールを好み、必要な SDK イメージを開発マシンに既にダウンロードしていることを前提としていることに注意してください。
#SDK イメージ zip ファイルを選択し、ダイアログボックスで 開く をクリックします。
SDK イメージを抽出しています」というメッセージを表示します。抽出が完了したら、「OK」をクリックします。「
」をクリックすると、「ライセンス契約」ウィンドウが表示されます。ライセンスに同意し、「
次に設定ウィンドウ
次へ」をクリックすることをお勧めします。 最後に、 Installation Manager
Install をクリックして選択内容を指定します。 BIOS が正しく構成されている場合、Intel Hardware Accelerated Execution Manager
がインストールできるように BIOS を構成します。 オペレーティングシステムが Windows の場合は、データ実行防止
必要に応じて、

を個別にインストールできます。インストールが完了したら、コンピューターを再起動します。

ステップ 4: IDE の構成

SDK がインストールされているフォルダーを参照し、ide

IDE という名前の実行可能ファイルを実行します。 数分後、開発したアプリケーションを保存するための ワークスペース
OK をクリックします。構成が完了すると、IDE が表示されます。ステップ 5: IDE 関数

IDE の左側のペインには、

プロジェクトエクスプローラーと

接続エクスプローラーの 2 つのウィンドウがあります。 プロジェクトエクスプローラーユーザーが作成したプロジェクトを表示します。 接続エクスプローラー 現在利用可能な接続デバイス、エミュレーターインスタンス、またはリモートデバイスをリストします。

步骤 6：创建模拟器实例

在连接资源管理器中，点击模拟器管理器图标（最左侧的蓝色按钮）。
在出现的用户帐户控制窗口中点击是。这将打开模拟器管理器窗口。
点击新增并为模拟器实例命名。
点击确认后，将会创建新的模拟器实例。单击模拟器图标中带有箭头的蓝色按钮以启动模拟器。

启动模拟器需要一些时间。当它启动并运行时，您应该会看到一个带有类似于以下屏幕截图的启动屏幕的窗口。模拟器实例应显示为连接资源管理器中的一个条目。

从开始屏幕底部中间点向上滑动，转到显示设备或模拟器上已安装应用程序的屏幕。由于您尚未安装任何应用，因此仅显示设置图标。

您可以通过从屏幕顶部中间向下滑动来返回到上一屏幕或退出应用程序。

探索用于智能手表应用程序开发的 Tizen：简介

2. 开发一个简单的漫画应用

在此示例中，我们将创建一个简单的应用程序来显示漫画。让我们依次看看每个步骤。

第 1 步：创建新项目

让我们在 IDE 中创建一个新项目。

转至文件 > 新建 > Tizen 可穿戴式 Web 项目。
在出现的窗口中，选择基本 > 基本应用，然后将项目名称设置为myapp。
勾选使用默认位置复选框或浏览到您选择的其他位置，然后点击完成。
您的新项目 myapp 应显示在项目资源管理器中。
点击myapp左侧的小箭头展开项目结构。
您应该会看到一个index.html文件、一个css子文件夹、一个js 子文件夹，以及一些其他文件和文件夹。

探索用于智能手表应用程序开发的 Tizen：简介

HTML、CSS 和 JavaScript 构成了 Tizen 平台上编程的基础。如果您是 HTML 向导，那么您无需学习新的编程语言即可为 Tizen 平台编写应用程序。您可以使用现有的 HTML、CSS 和 JavaScript 技能。

第 2 步：添加文件、资产和资源

我们首先需要向 myapp 项目添加两个子文件夹：comic 和 images。为此，请右键单击 IDE 中的 myapp 项目文件夹，然后选择新建 > 文件夹。子文件夹应显示在 IDE 中展开的 myapp 文件夹中。

从 GitHub 下载此项目的源文件，然后导航到 images 子文件夹，其中包含许多 png 文件。将 png 文件复制到您刚才创建的 images 子文件夹中。

您可以将文件粘贴到Project Explorer窗口中的images子文件夹中，方法是右键点击子文件夹并从弹出菜单中选择粘贴 .

接下来，右键点击 comic 子文件夹并选择新建 > 文件，在 comic 子文件夹中创建具有以下文件名的 9 个 HTML 文件>。确保包含文件的 .html 扩展名。

page1.html
page2.html
...
page9.html

现在，comic 子文件夹中应该有九个 HTML 文件。

第 3 步：添加代码

现在让我们编辑 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" >&lt;&lt;</a><a href="comic/page1.html" 
  	class="btn" >&gt;&gt;</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 下载源文件并检查源文件以进行澄清。