Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. giuliohome
    G
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    giuliohome

    @giuliohome

    0
    Reputation
    8
    Posts
    1114
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    giuliohome Follow

    Posts made by giuliohome

    • RE: Responsive grid for Onsen UI

      @Sergey Hi! I’m not an expert but I’ve tried something with responsive grid: why do you say it is not possible to hide some blocks? This was the first option I easily achieved with CSS3 only. For example here on SO there is a description about how to hide the headers, but I’d say the concept is applicable to any block: just define a

      display: none
      

      in the CSS3 class with the specified media queries. An example:

      @media only screen and (max-width: 768px) {
          /* For mobile phones: */
          [class*="col-"] {
              width: 50%;
          }
          [class*="colhead-"] {
              display: none;
          }
      }
      

      I’ve also tried with OnsenUI and pure JS or Angular, etc… and of course it works as expected.

      Sorry if I misunderstood your question, anyway I imagine you may want a more advanced solution.

      posted in Onsen UI
      G
      giuliohome
    • RE: click on menu to set a new html page as ons-splitter-content

      Finally solved as explained here on SO.

      Find also the corresponding version implemented with OnsenUI and React in the end of this article

      posted in Onsen UI
      G
      giuliohome
    • RE: click on menu to set a new html page as ons-splitter-content

      Everything seemed to work in my desktop dashboard with the Preview but when I try it with Monaca Debugger on my galaxy Android phone, it fails with the error in the Log showing that querySelector is null

      document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));
      

      Please help me :sweat:

      By the way, I’ve also noticed that the following button is not shown in the menu when I run the app on the Android phone, while - again - I can see it as expected from the dashboard Preview.

          <ons-toolbar-button id="resptab" ><ons-icon icon="ion-pie-graph" size="28px"></ons-icon>Table</ons-toolbar-button>
      posted in Onsen UI
      G
      giuliohome
    • RE: click on menu to set a new html page as ons-splitter-content

      Solved with a Navigator! :ok_hand: :thumbsup:

            <ons-splitter-content>
                <ons-navigator id="myNavigator" animation="slide" page="list.html"/>
            </ons-splitter-content>
      

      and the following script

              callback: function(label) {
                  document.querySelector('#myNavigator').pushPage('table.html')
              }.bind(this)
      
      posted in Onsen UI
      G
      giuliohome
    • RE: click on menu to set a new html page as ons-splitter-content

      I’ve fixed the first part as

      document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));
      

      I had to use document of course :smile:

      Still looking how to build the event handler.

      This is what I’ve tried now:

      todo.setRespTable = function() {
          ons.notification.prompt('Switch to responsive table view',{
              title: 'Responsive Table',
              cancelable: true,
              
              callback: function(label) {
                  document.querySelector('#splitter-menu').page = "table.html"
              }.bind(this)
          });    
      }
      

      When debugging, I see that the page property is changed from menu.html to table.html, but no effect in the rendering (is a refresh missing somewhere?)

      P.S Maybe should this be posted in the developer corner section?

      posted in Onsen UI
      G
      giuliohome
    • click on menu to set a new html page as ons-splitter-content

      Sorry for the very simple question, please consider I’m a beginner :smile: in designing Onsen/Monaca :sparkles:
      I’m starting from the todo-list example where I have an index.html containing

      <body>
        <ons-splitter id="splitter">
            <ons-splitter-side id="splitter-menu" page="menu.html" side="left" width="220px" collapse swipeable></ons-splitter-side>
            <ons-splitter-content page="list.html"></ons-splitter-content>
        </ons-splitter>
      </body>
      

      in the menu under the responsive header

          <ons-list>
              <ons-list-header>Default</ons-list-header>
              <ons-list-item data-filter="all" tappable>All</ons-list-item>
              <ons-list-header>Status</ons-list-header>
              <ons-list-item data-filer="uncompleted">Pending</ons-list-item>
              <ons-list-item data-filter="completed">Completed</ons-list-item>
              <ons-list-header>Responsive</ons-list-header>
          </ons-list>
      

      I’d like to add the possibility to tap and set the ons-splitter-content to a different html page, which I’m building to test a responsive table (more info here, so let’s say I already have the html5 and the css3 to link).

      How can I change that content page when I tap on the menu, thanks :interrobang:

      I guess I have to add

              <ons-list-header>Responsive</ons-list-header>
              <ons-toolbar-button id="resptab">Table</ons-toolbar-button>
      

      in the menu e something like

      target.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));
      

      in the scripts (but the above querySelector doesn’t work, it’s null :confused: ) with a function

      todo.setRespTable = function() {
          
          
      }
      

      to be defined…

      posted in Onsen UI
      G
      giuliohome
    • RE: Modern reengineering of my Android app

      @munsterlander Thank you very much for your prompt and accurate reply, for the very interesting doc reference to the plugin development (exactly what I was looking for) and your final suggestion about the IDE :smirk: that I’ll try to follow.
      Much appreciated! :smiley:

      posted in Developer Corner
      G
      giuliohome
    • Modern reengineering of my Android app

      I’d like to modernize my Android App on Google Play into a new one, built using Monaca tools. My idea is to integrate Monaca and the free Visual Studio Community edition.
      I am new at Monaca development and I have a few questions.

      1. Can I sell the new app on Google Play or have I to distribute it free?

      2. Does “using Monaca tools” mean that the whole app has to be rewritten in JavaScript, Html5, etc… or is it possibile to build also Android code in a hybrid web/native app?

      Thank you.

      posted in Developer Corner
      G
      giuliohome