Build a simple UI

The following instructions help you to create the UI illustrated in the following figure.

Figure: UI for the Gear application
Figure: UI for the Gear application

1. Building the layout using HTML.

The index.html file has 2 items to display content. The first is the content layout and the second is the button to call a method for sending a message.

This sample application uses TAU (Tizen Advanced UI Library). For more information, see Tizen UI Advanced Wearable Web Framework.

<!DOCTYPE html>
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
	<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)"
	<!-- Load theme file for your application -->
	<link rel="stylesheet" href="css/style.css">
<div class="ui-page ui-page-active" id="main">
	<header class="ui-header">
	<div class="ui-content content-padding" id="content_view">
		Hello World
	<footer class="ui-footer ui-bottom-button">
		<a href="#" class="ui-btn"
<script type="text/javascript"
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>

2. Register the sendMessage() method on the click event. This method sends a message to an Android device.

<a href="#" class="ui-btn" onClick="sendMessage('Hello');">Hello</a>

3. Display messages received from an Android device using the DOM object that has the content_view id.

function createHTML(log_string)
	document.getElementById("content_view").innerHTML = log_string;

function onreceive(channelId, data)