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.
sendMessage()
<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); }