Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Multiple pages



  • I’m looking for a framework to develop a mobile looking web site/page driven by a Spring mvc server, although later I would like to turn it into an app. The question is how does Onsen cope with multiple pages as I’m hoping to serve the page through Spring mvc and was hoping to download all the pages in one page source file rather like jQuery mobile does? Looking at the documentation it looks like separate pages need to be loaded through separate html files. I don’t think this will be easy with my Spring mvc set up using a templating system.

    Thanks for any advice.
    S



  • @sc Using the <ons-template> tag allows you to include code snippets in one page and act like they are separate files. Reference this page of the user guide for more information:

    https://onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML

    So you can have code like this all in one file, like index.html:

    <ons-tabbar>
    <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
    </ons-tab>
    <ons-tab page="orJustAnID" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
    </ons-tab>
    <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
    </ons-tab>
    </ons-tabbar>
    
    <ons-template id="home.html">
    ...
    </ons-template>
    
    <ons-template id="orJustAnID">
    ...
    </ons-template>
    
    <ons-template id="settings.html">
    ...
    </ons-template>
    


  • Thank you. That sounds like just what I need. I’ll look into that link.

    Really appreciate your help.

    S