kukacdav

kukacdav

@munsterlander
Magnificent! Your solution seems to works exactly as I intended. Much appreciate your help!

kukacdav

@munsterlander
I have additional question about this pattern. I wanted to add a login page. Therefore I moved the content of the index.html into new main-page.html and in index.html created a simple login page, looking pretty much like following:

<html>
<head>...</head> 
<body>
<ons-navigator id="main-navigator">
    <ons-row>
            <ons-input class="login-input-field" id="login-username" ></ons-input>        
    </ons-row>
    <ons-row>
        <ons-input class="login-input-field" id="login-password" type="password" ></ons-input>
    </ons-row>
    <ons-button modifier="large--cta" onclick="login()" id="login-button">Login</ons-button>   
</ons-navigator>
</body>
</html>

My login function pushes new page using main-navigator. The main-page is following:

<ons-page id="main-multi-page">
  <ons-tabbar id="tabbar">

        <ons-tab icon="ion-ios-paper-outline" label="Profil" page="user-detail-page-template" active> </ons-tab>
        <ons-tab icon="ion-person-stalker" label="Kontakty" page="phone-contacts-page-template"> </ons-tab>
        <ons-tab icon="ion-ios-settings-strong" label="Aktivity" page="invite-friend-page-template" ></ons-tab>
</ons-tabbar>


<!--           FIRST PAGE              -->
<ons-template id="user-detail-page-template">
<ons-page id="user-detail-page">
    <ons-list>
        <ons-list-header>Detail uživatele</ons-list-header>
        <ons-list-item>
            <div class="left">Jméno</div>
            <div class="right" id="username-line"></div>
        </ons-list-item>
        <ons-list-item>
            <div class="left">Telefon</div>
            <div class="right" id="phone-number-line"></div>
        </ons-list-item>
        <ons-list-item>
            <div class="left">Email</div>
            <div class="right" id="email-line"></div>
        </ons-list-item>
        <ons-list-item>
            <div class="left">Facebook</div>
            <div class="right" id="facebook-contact-line"></div>
        </ons-list-item>
    </ons-list>
    </ons-page>
</ons-template>

<!-- SECOND PAGE TEMPLATE -->

<ons-template id="phone-contacts-page-template">
    <ons-page id="phone-contacts-page">
    <ons-toolbar>
        <div class="center">Kontakty</div>
    </ons-toolbar>
    <ons-list id="contact-list"></ons-list>
    <ons-row class="contact-toolbar">
        <ons-col class="center-block">
            <ons-icon icon="ion-search" size="40px"></ons-icon>
            <p class="contact-button-label">Vyhledat kontakt</p>
        </ons-col>
        <ons-col class="center-block">
            <ons-icon icon="ion-person-add" size="40px"></ons-icon>
            <p class="contact-button-label">Vytvořit kontakt</p>
        </ons-col>
        <ons-col class="center-block">
            <ons-icon icon="ion-star" size="40px"></ons-icon>
            <p class="contact-button-label">Nastavit oblíbené</p>
        </ons-col>
    </ons-row>
</ons-page>
</ons-template>

<!--               THIRD PAGE VIEW                  -->
<ons-template id="invite-friend-page-template">
<ons-page id="invite-friend-page">
    <ons-toolbar>
        <div class="center">Pozvat kamaráda</div>
    </ons-toolbar>
    <div class="invite-friend-block">
        <ons-icon size="70px" icon="ion-person-add" ></ons-icon>
        <h1 class="invite-friend-header">
            Pozvi kamaráda k používání Bill Me
        </h1>
        <p>
            Nasdílej pozvánku kamarádovi přímo nebo skrze kontakty aplikace</p>
    </div>  
    <ons-row>
        <ons-col class="center-block">
            <ons-icon size="50px" icon="ion-social-facebook"></ons-icon>
            <p>
                Sdílej pozvánku
            </p>
        </ons-col>
        <ons-col class="center-block">
            <ons-icon size="50px" icon="ion-person-stalker"></ons-icon>
            <p>
                Vyber kontakt
            </p>
        </ons-col>
    </ons-row>
</ons-page>
</ons-template>
</ons-page>

Now what happens: when i look at page in monaca IDE, everything works like charm - I go through login page to main page, where first tab is set as active. But when i run the same code using monaca debugger, I go through login page and land on the last template defined in main-page.html, with no tab visible at all. It seems as if debugger goes through the main-page and doesnt apply tab as I would expect, but it takes into account the last template defined in HTML file.

What I am wondering is, whether my pattern is correct and Monaca Debugger has an issue, or whether I am doing something wrong. Thanks in advance, I spent hours trying to solve this, but nothing seems to work for me…

kukacdav

@munsterlander Thanks a lot, I will keep that in mind. :)

kukacdav

@Fran-Diox Thanks for clarification. I am new to Onsen UI and I am still unable to hide the tabbar - in the meantime I wrote mine own tabbar, but I am experiencing some issues in Monaca debugger, so after all I would like to solve the issue.

I simplified the example to the following:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    document.addEventListener('show', function(event) {
      var page = event.target;
      var titleElement = document.querySelector('#toolbar-title');

      if (page.matches('#first-page')) {
        titleElement.innerHTML = 'My app - Page 1';

      } else if (page.matches('#second-page')) {
        titleElement.innerHTML = 'My app - Page 2';
        page.querySelector('#magic-button').onclick = function(){console.log("click");document.getElementById('tabbar').setTabbarVisibility('false');};

      }
    });
  </script>
</head>
<body>
  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="auto" id="tabbar">
      <ons-tab label="Tab 1" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 2" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <ons-template id="tab1.html">
    <ons-page id="first-page">
      <p style="text-align: center;">
        This is the first page.
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="tab2.html">
    <ons-page id="second-page">
        <ons-button id="magic-button">Hide tabbar</ons-button>

      <p style="text-align: center;">
        This is the second page.
      </p>
    </ons-page>
  </ons-template>
</body>
</html>

The tabbar is still visible no mather what. Any idea what am I doing wrong?
Thanks a lot.

kukacdav

@munsterlander : I was assuming, that onsen v2 wont be working correctly with Cloud IDE, based on information provided by following page: https://docs.monaca.io/en/onsenui/
So now I am bit confused about the meaning, since every project is using implicitly ver. Does it mean, that onsen v2 will be working, but some features that require Angular2 wont?

I have tried your code, running it at page init event, together with attaching event listeners. But no go, tabbar still visible. Any idea what may I be doing wrong?

kukacdav

@munsterlander Thanks for reply. Unfortunately Iam using Monaca Cloud IDE, which according to Monaca Docs does not support Angular 2, required for version 2 of Onsen. Any solution for version 1? Or recomendation for another free IDE that might support this?

kukacdav

Hi,
I am using tabbar as main navigational element over my application. I have tabbar defined in my index.html and use it to switch over pages. But there are pages in my application, on which I want to hide the tabbar. So I checked the documentaion and found hide-tabs attribute. But when I set it on true, nothing is happening. I even tried to implicitly set it to true but still, tabbar seems imune. What am I missing?
Here are code snippets:
Index.html:

<ons-tabbar hide-tabs="true" id="tabbar">
        <ons-tab  active="true" page="view/html/main-page.html" label="Aktivity" icon="ion-ios-settings-strong" >
      </ons-tab>
        <ons-tab page="view/html/user-detail-page.html" label="Profil" icon="ion-ios-paper-outline" >
        </ons-tab>
    </ons-tabbar>

main-page.html

<ons-navigator class="pageNavigator">
    <ons-page id="main-page">
        .... 
    </ons-page>
</ons-navigator>

kukacdav

@kukacdav

Posts made by kukacdav