Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

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?

share|improve this question
    
I used the code from developer.ubuntu.com/apps/html-5/guides/html5-guide see the section "Content contains tabs" –  Alexander Langanke Mar 2 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 at 16:52
    
That works. I suppose this means the html5-guide page is incorrect. But.. navigating back to home still does not work –  Alexander Langanke Mar 2 at 17:13
    
Ok then, maybe suggest a modification for the html5-guide page ;) –  MrVaykadji Mar 2 at 17:15

3 Answers 3

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.

share|improve this answer
    
Thanks for the "official" answer! –  tsega Apr 14 at 12:57

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.

share|improve this answer

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 ;)

share|improve this answer
    
I would ;-) But how? ^^ –  Alexander Langanke Mar 2 at 17:41
    
I'm thinking bugs.launchpad.net/ubuntudeveloperportal/+filebug would be at least a start. But I'm not familiar with Canonical's way of work^^ –  MrVaykadji Mar 2 at 18:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.