2

I am trying to understand the basics of the Ubuntu HTML5 UI.

I have used the following sample Code from developer.ubuntu.com

<body>
  <div data-role="mainview">
    <header data-role="header">
      <ul data-role="tabs">
        <li data-role="tabitem" data-page="main">Main</li>
        <li data-role="tabitem" data-page="anotherpage">Another</li>
      </ul>
    </header>
    <div data-role="content">
      <div data-role="tab" id="main">
        main
      </div>
      <div data-role="tab" id="anotherpage">
        another
      </div>
    </div>
  </div>
</body>

When I run this basic code from the SDK I get a top navigation Element with 2 Tabs and a main display below displaying the text: "main". So far so good. Now when I try to change the tab to "another", the navigation animation runs, the tab switches in the Title but nothing happens in the mainview area. Also, the navigation appears to be dead after this. It no longer responds to any input at all.

What am I doing wrong?

4
  • I used the code from developer.ubuntu.com/apps/html-5/guides/html5-guide see the section "Content contains tabs" Mar 2, 2014 at 16:48
  • I see that inside the "content" div, you should have <div data-role="page" id="anotherpage">, so "page" and not "tab". That's what I see in Ubuntu SDK example html5 app
    – MrVaykadji
    Mar 2, 2014 at 16:52
  • That works. I suppose this means the html5-guide page is incorrect. But.. navigating back to home still does not work Mar 2, 2014 at 17:13
  • Ok then, maybe suggest a modification for the html5-guide page ;)
    – MrVaykadji
    Mar 2, 2014 at 17:15

4 Answers 4

2

One of the HTML5 SDK devs here, the docs are correct, here is a working demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>An Ubuntu HTML5 application</title>
    <meta name="description" content="An Ubuntu HTML5 application">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <!-- Ubuntu UI Style imports - Ambiance theme -->
    <link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />

    <!-- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>

    <!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
    <!-- <script src="cordova/cordova.js"></script> -->

    <!-- Application script -->
    <script src="js/app.js"></script>
  </head>

  <body>

    <div data-role="mainview">

      <header data-role="header">
        <ul data-role="tabs">
          <li data-role="tabitem" data-page="tab1">Tab 1</li>
          <li data-role="tabitem" data-page="tab2">Tab 2</li>
        </ul>
      </header>

      <div data-role="content">
          <div data-role="tab" id="tab1">
            Content of Tab1
          </div>

          <div data-role="tab" id="tab2">
             Content of Tab2
          </div>
      </div>
    </div>
  </body>
</html>

Note that you need call both tabs.js and tab.js to get it to work. We do have a few bugs to fix to let you switch between tabs(pad.lv/1262102) like in QML, if you are using the pagestack you already have a toolbar with a back button out of the box.

0
1

I am guessing you are reading through the Ubuntu HTML5 Guide page, since I myself was just doing that and had the exact same problem. What you need to do is first add the tab.js script tag in the <head> section just under tabs.js. Note: There is a difference between tabs.js and tab.js.

<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>

After you've done that you need to setup you app structure as follows:

// For your tabs
<ul data-role="tabs">
  <li data-role="tabitem" data-page="hello-page">Hello World</li>
  <li data-role="tabitem" data-page="next-page">Next</li>
</ul>

// In your content
<div data-role="tab" id="hello-page">
   ...
</div>
<div data-role="tab" id="next-page">
  ...
</div>

The data-role and the data-page attributes are important for wiring up how this should work and it has worked for me. Only thing is, once you've moved to the Next tab you can't go back to the Hello World one. I'll edit this answer once I figure how to do it.

0

Here's what I found in Ubuntu SDK example HTML5 app :

I see that inside the "content" div, you should have <div data-role="page" id="anotherpage">, so "page" and not "tab".

Maybe you should suggest a modification for the html5-guide page ;)

2
0

I made a workaround to make an HTML5 carousel. In your app.js add the following:

window.onload = function () {
   var UI = new UbuntuUI();
   UI.init();
   [...]

   // tab workaround code  
   var tabs = UI.tabs.tabChildren;
   for (var i=0; i < tabs.length; i++) {
        var tab = tabs[i];
        var parent = tab.parentNode;


        tab.addEventListener("click", function() {
           var activeNotFound = true;
            for (var i=0; i < parent.children.length && activeNotFound; i++) { 
               var child = parent.children[0];
               if (child.getAttribute("class") == "active") {
                  activeNotFound = false; // found the active element, stop looping
               }
               else if (child.tagName == "LI" ) {
                  parent.removeChild(child); // remove child from the front
                  parent.appendChild(child); // add it to the end
               }
           }
        }); 
   }

}

One more addition, add the following code to the UL element:

<ul data-role="tabs"  style="-webkit-transform: none !important;">

The HTML might look similar to the following: enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .