Languages

Menu
Sites
Language
How to use swipelist in tizen for wearables

I'm trying to use the swipe list widget of tizen, so I've created a new tizen wearable web project and pasted the code snippet from the help documents to index.html, but it seems that nothing happens- I still see the list with a vertical scroll bar.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
	<title>Wearable UI</title>
	<link rel="stylesheet"  href="lib/tau/themes/default/tau.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">
			<h2 class="ui-title">Wearable UI</h2>
		</header>
	<div class="ui-content" id="swipelist">
   <!--List items that can be swiped-->
   <ul class="ui-listview ui-swipelist-list">
      <li>Andrew</li>
      <li>Bill</li>
      <li>Christina</li>
      <li>Daniel</li>
      <li>Edward</li>
      <li>Peter</li>
      <li>Sam</li>
      <li>Tom</li>
   </ul>
   <!--Swipe actions-->
   <div class="ui-swipelist">
      <div class="ui-swipelist-left">
         <div class="ui-swipelist-icon"></div>
         <div class="ui-swipelist-text">Calling</div>
      </div>
      <div class="ui-swipelist-right">
         <div class="ui-swipelist-icon"></div>
         <div class="ui-swipelist-text">Message</div>
      </div>
   </div>
</div>
	</div>
	

	
</body>

<script>
   (function()
   {
      var page = document.getElementById("swipelist"),
          listElement = page.getElementsByClassName("ui-swipelist-list", "ul")[0],
          swipeList;
      page.addEventListener("pageshow", function()	
      {
         /* Make swipe list object */
         var options = 
         {
            left: true,
            right: true
         }
         swipeList = new tau.SwipeList(listElement, options);
      });
      page.addEventListener("pagehide", function() 
      {
         /* Release object */
         swipeList.destroy();
      });
   })();
</script>

<script src="js/lowBatteryCheck.js"></script>
</html>

What am I doing wrong here?

 

Thanks,

List

Responses

2 Replies
Alex Dem

Hi,
I suppose you try to get wrong id="swipelist" in javascript but your id="main", please try to edit :
var page = document.getElementById( "main" )
Alexey.

Juan Ospina

Not sure what the original problem was, but i can report that the component itself breaks very easily. I tried to follow the example at:

https://developer.tizen.org/dev-guide/2.3.1/org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_swipelist.htm

But including this into an actual application is extremely frustating. The component breaks at many points giving several errors on the console.

It's not clear all the conditions the components it's expecting from the html and the css and since support is so limited for this framework i advice anyone to stay away from tau and if you need a swipelist just use a proven solution in javascript.