Languages

Menu
Sites
Language
Loading page for wearable app or TAU fix

Hello. I'm new with tizenOS development so I hope you can help me with one thing.

I'm working on messenger app for social network vk.com for wearable device (gear S3 frontier). I have made menu using list that has "Friends" and "Messages" options. "Friends" is IndexScrollbar list and "Messages" is thumbnail list with sub-text. I do a request to vk.api and get elements that I append using jquery to the end of <ul> element.

So the problem is that Tizen Advanced UI stops working as it should because lists are generating after HTML document load. Scrolling with rotary selector and selecting as SnapList element does not work. It works on these pages only if I get to some other page next to it and press Back button.

I think the solution is to add some loading screen before this pages, but I have no idea how to make it. Or may be there is some easier and better solution.

Hope someone can help me with that.

List

Responses

4 Replies
André Reus

Hi Albert Safin, Would you please share your html sceleton to understand how you have managed the dependencies of js libraries ? 

Albert Safin 
Hi Andre, thank you for your reply.

<!-- MAIN PAGE WITH MENU -->
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,user-scalable=no">
   <script type="text/javascript" src="js/jquery.js"></script>
    <title>VK Wearable</title>
    <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.css">
    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="js/tau.js"></script>
<div class="ui-page ui-page-active" id="main">
    <header class="ui-header">
        <h2 class="ui-title">ВКонтакте</h2>
    </header>
    <div class="ui-content">
        <ul class="ui-listview">
            <li><a id='menu1' href="menu/msg/conversations.html">Messages</a></li>
            <li><a href="menu/friends/friends.html">Friends</a></li>
        </ul>
    </div>
</div>
<script>

</script>
<script src="js/vk.js"></script> 
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script> 
<script type="text/javascript" src="js/circle-helper.js"></script>
</body>
</html>

vk.js has some functions like jquery ajax that I use in my js scripts.

menu/msg/conversations.html:

<!DOCTYPE html>
<html>
<head>
    <title>MSG</title>
</head>
<body>

<div id="test-div" class="ui-page">
    <header class="ui-header">
        <h2 class="ui-title">Messages</h2>
    </header>
    <div class="ui-content">
        <ul id="convList" class="ui-listview ui-snap-listview">
        </ul>
        <script src="getMsg.js"></script>
      
    </div>
</div>
</body>
</html>

getMsg.js has jquery function that appends ul list:

    html = '<li class="li-has-multiline li-has-thumb-right"><a onclick="var str = $(this).attr(\'id\'), parsed = str.split(\'-\'); window.chatid = parsed[1];" class="friend" id="id-' + profileId +
        '" href="../../chat.html">' + window.uid + '</a><span class="ui-li-sub-text li-text-sub">' +
        lastMsg + '</span><img src="' + window.avatar + '" class="ui-li-thumb-right"></li>';
$("#convList").append(html);

As u can see every <li> element has link to chat. And if I go to that link and then press Back button scrolling and selecting in snaplist start working.

André Reus

Hi, It is recommanded to use tau changePage option when you are using TAU in your project. 

You should use ui-page tag in a div to define a div as a page like below and by id you should call changePage function to change the page. 

<body>
<!--pageOne-->
<div class="ui-page ui-page-active" id="first">
   <div class="ui-content">
       First page
      <button id="first-button">next</button>
   </div>
</div>

<!--pageTwo-->
<div class="ui-page" id="second">
   <div class="ui-content">
      Second page
      <button id="second-button">next</button>
   </div>
 </div>

<!--pageThree-->
<div class="ui-page" id="third">
   <div class="ui-content">
      Third page
      <button id="third-button">back</button>
   </div>
</div> 
</body>

If you use this with TAU library, your problem should go away! 

For more see this https://developer.tizen.org/ko/forums/web-application-development/how-can-i-go-previous-page-tizen-web-app

 

 

Albert Safin

Thank you so much for your reply! Will try to do this.