Build a simple UI
The following instructions help you to create the UI illustrated in the following figure.
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);
}