Build a simple UI

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

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

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)
{
	createHTML(data);
}