Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. wetfeet
    3. Posts
    W
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups

    Posts made by wetfeet

    • React project layout and tools assumptions

      I have browsed through the React guide, and for someone starting a new Cordova/Onsen UI/React project from a clean slate, does the guide assume that the project is setup in any particular way or following certain convention?

      I have looked through other React tutorials or quick start, and observe several possible variants.

      • Build/packaging system: Some recommend Webpack, others using Browserify and some others using other combinations of preferred tools.
      • Project directory/folder structure: some prefer to put their source files in a different directory other than {project-root}/src.
      • JSX Transpiling: Some recommend doing in-browser transpiling of JSX using Babel for development/testing, while others recommend setting up the project to use Node.js transpiling (done within Webpack or Browserify build/bundling process?) for optimal performance in production mode.

      It seems to me that there is no standard React app project layout we can assume since many things are configurable to an individual developer’s personal preferences.

      It would be good if you can state the assumptions or prerequisites (if any exist) on how the React project is laid out for your guide. Thanks!

      posted in Onsen UI
      W
      wetfeet
    • RE: onsen ui Not for every Mobile

      So I have a little time today, and I did a little experiment. My objective is to try if there’s a hack or workaround to get Onsen 2 to work on an old Android WebView (based off Chrome 30) on KitKat 4.4.2 by using polyfills.

      For the impatient ones, I am only halfway successful. So you can stop reading now.

      Using the navigator template (with AngularJS) as a test project, I grabbed the following polyfills from WebCOmponents and Babel:

      <script src="lib/babel-polyfill/dist/polyfill.js"></script>
      <script src="lib/webcomponents/webcomponents-lite.js"></script>
      <script src="lib/webcomponents/custom-elements.min.js"></script>
      <script>
      window.addEventListener('WebComponentsReady', function() {
      console.log("WebComponentsReady");
          
          var head = document.getElementsByTagName('head')[0];
          
          var e = document.createElement('script');
          e.src = 'components/loader.js';
          head.appendChild(e);
          
          e = document.createElement('script');
          e.src = 'lib/angular/angular.min.js';
          head.appendChild(e);
          
          e = document.createElement('script');
          e.src = 'lib/onsenui/js/onsenui.min.js';
          head.appendChild(e);
          
          e = document.createElement('script');
          e.src = 'lib/onsenui/js/angular-onsenui.min.js';
          head.appendChild(e);
      
          // *** Still having problem trying to run ons.bootstrap(). ***
          // *** WebView complains 'ons' and 'angular' are undefined. ***
          ons.bootstrap()
            .controller('AppController', function() {
              this.pushes = 0;
              this.pops = 0;
            });
          ons.ready(function() {
              console.log("Onsen UI is ready!");
          });
      });
      </script>
      

      ons and angular are reported as null. Wonder if there’s a way to wait/listen for some sort of event before trying to call ons.bootstrap().

      As you can see, it manages to render the navbar and button nicely with material design. But angularjs data binding isn’t working and the bootstrap doesn’t work yet.

      0_1499331367551_ss.png

      Will try again if I have any newer ideas.

      posted in Onsen UI
      W
      wetfeet
    • RE: Creating Onsen UI 1 project

      @khemry Yes, I am using Onsen UI 2 already.

      Previously, Onsen UI 1 projects may be able to support Android below 4.4.4 without a newer WebView. That’s the good part.

      Currently when using Onsen 2, I have to use Crosswalk for older devices.

      posted in Monaca Tools
      W
      wetfeet
    • RE: Error in loader.js: line 503

      @khemry

      {
          "plugins": [
              "mobi.monaca.plugins.Monaca"
          ],
          "framework_version": "3.5",
          "xcode_version": "7",
          "cordova_version": "6.2",
          "plugin_settings": [],
          "external_plugins": [
              "cordova-plugin-console@1.0.7",
              "cordova-plugin-whitelist@1.2.2",
              "cordova-plugin-splashscreen@3.2.2",
              "cordova-custom-config@2.0.3"
          ]
      }
      

      Anyway, this morning I totally replaced my Onsen UI (2.2.4 that came with the project template?) with the latest 2.4.2 and the error seems to have gone away.

      Before that, I was patching the old Onsen UI 2.2.4 with .js and .css files one-by-one from unpkg.com CDN. And then it might have become sort of broken anyway.

      posted in Monaca Tools
      W
      wetfeet
    • RE: Error in loader.js: line 503

      @khemry I am not using Monaca Cloud at all. Nor have I registered any user account. I am just including Onsen UI in my project, so I don’t know why it is trying to contact Monaca Cloud ondeviceready.

      Perhaps I manually edited <project_dir>\.monaca\project_info.json directory and it thinks I am using Monaca Cloud?

      posted in Monaca Tools
      W
      wetfeet
    • Error in loader.js: line 503

      I am getting the following error.

      Class not found(anonymous function) @ loader.js:503
      

      Did some tracing and the error is Onsen’s www/components/loader.js.

        // Get device id
        document.addEventListener("deviceready", function() {
      
          cordova.exec(function(result) {
              monaca.cloud.deviceId = new String(result.deviceId);
              monaca.cloud.url = new String(result.url);
              monaca.cloud.backendId = new String(result.backendId);
              monaca.cloud.apiKey = new String(result.apiKey);
      
              // execute and clear postQueue
              for (var i = 0; i < monaca.cloud.postQueue.length; i++) {
                monaca.cloud._doPost.apply(monaca.cloud, monaca.cloud.postQueue[i]);
              }
              monaca.cloud.postQueue = [];
            }, function(error) {
              console.error(error); // <--- ERROR HERE
            },
      
            "Monaca",
            "getRuntimeConfiguration", []
          );
      
        }, false);
      

      Not sure what this does. Should this be a concern?

      It looks like it is trying to authenticate to Monaca Cloud with a device ID, backend ID and API key for a registered Monaca Cloud user.

      posted in Monaca Tools
      W
      wetfeet
    • Splash screen background fill color

      How does the splash screen knows what color to use as the surrounding padding border area that is not covered by the Splash screen PNG image itself?

      When placed in a portrait mode, it is obvious that the top and bottom empty screen space was filled in somehow using a color matching the edges of the original PNG image, which is centered nicely vertically and horizontally.

      Thus, are there some details to take note of when creating the splash screen image in order for this color fill magic to work? I suppose number 1 is to ensure the images are of the exact same dimensions as those sample PNG for different resolutions.

      posted in Developer Corner
      W
      wetfeet
    • RE: Programmatically set active tab of ons-tabbar

      @Fran-Diox said:

      @wetfeet init and show are page events, not tab events.

      I checked the reference and ons-tabbar has these attributes. I thought the events are specific to the ons-tabbar component itself.

      I believe similarly ons-page also has the ons-init, ons-show, ons-hide attribute. source

      You are getting those events 3 times at least, once per page inside tabbar. I think you want to do that on init event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).

      posted in Onsen UI
      W
      wetfeet
    • RE: How to use ons-loading-placeholder?

      OK. Anyway, what is the easiest way to show a busy loading popup like the one below? Use ons-modal? I haven’t been able to easily create the white div box and spinning circle icon.

      0_1498547934283_loading.png

      posted in Onsen UI
      W
      wetfeet
    • Programmatically set active tab of ons-tabbar

      My AngularJS app is using a tabbar design with 3 tabs.

      <ons-tabbar position="auto" var="tbrView">
          <ons-tab page="tab1.html" label="Tab 1" active></ons-tab>
          <ons-tab page="tab2.html" label="Tab 2"></ons-tab>
          <ons-tab page="tab3.html" label="Tab 3"></ons-tab>
      </ons-tabbar>
      

      It has a configuration settings ons-page that allows the user to set the default ons-tab to be set active each time the app is started and each time the ons-tabbar on the main ons-page is opened.

      // index.js
      this.defaultTab = '0'; // Can be 0, 1 or 2.
      
      <!-- settings.html -->
      <ons-list-item tappable>
        <label class="left">
          <ons-radio name="tab1" input-id="tab1" value="0" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(0)"></ons-radio>
         </label>
         <label for="tab1" class="center">
            Tab 1
         </label>
      </ons-list-item>
      
      <ons-list-item tappable>
        <label class="left">
          <ons-radio name="tab2" input-id="tab2" value="1" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(1)"></ons-radio>
         </label>
         <label for="tab2" class="center">
            Tab 2
         </label>
      </ons-list-item>
      
      <ons-list-item tappable>
        <label class="left">
          <ons-radio name="tab3" input-id="tab3" value="2" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(2)"></ons-radio>
         </label>
         <label for="tab3" class="center">
            Tab 3
         </label>
      </ons-list-item>
              
      

      Here’s the problem. I do not know where is the right place to get the tab bar to set the right tab.

      I have tried the following:

      <ons-tabbar position="auto" var="tbrView" ons-show="tbrView.setActiveTab(app.defaultTab)">
      

      This seems to make the tab bar keeps flashing whenever it is visible. Also the underline of the active tab is not rendered properly. ons-show is repeatedly triggered as long as the tab bar is visible even when the user is not interacting with it, and the page has loaded fully.

      <ons-tabbar position="auto" var="tbrView" ons-init="tbrView.setActiveTab(app.defaultTab)">
      

      ons-init is only run once upon app initialization I believe. Subsequently if I set the setting in the app and return to the page, the ons-init is not fired to switch the tab when the page is reopened.

      ons-post-change and ons-pre-change are only triggered if the user tap on another tab, so they are not useful.

      Where is the right place to set the active tab then?

      posted in Onsen UI
      W
      wetfeet
    • How to use ons-loading-placeholder?

      How to use ons-loading-placeholder any idea?

      I just put a div in the page?

      <div ons-loading-placeholder="page.html">
        Loading...
      </div>
      

      But how to control when to show or hide it when I need it? ng-show?

      posted in Onsen UI
      W
      wetfeet
    • RE: Run code and get active tab page on tab page change

      @Fran-Diox Fantastic. Working fine, thanks.

      Though I am still confused why $scope.tabbar works and not this.tabbar in onTabChange(). Still need to brush up on my Javascript. :grin:

      posted in Onsen UI
      W
      wetfeet
    • Run code and get active tab page on tab page change

      I am currently using a tabbar design. Using AngularJS 1.

      <body ng-controller="AppController as app">
       <ons-template id="main.html">
          <ons-page>
            <ons-toolbar>
              <div class="center">{{app.title}}</div>
            </ons-toolbar>
      
            <ons-tabbar position="auto" ons-show="app.onTabChange()">
              <ons-tab page="main.tab1.html" label="Tab 1" active></ons-tab>
              <ons-tab page="main.tab2.html" label="Tab 2"></ons-tab>
              <ons-tab page="main.tab3.html" label="Tab 3"></ons-tab>
            </ons-tabbar>
          </ons-page>
        </ons-template>
      </body>
      

      My .js looks like this:

      ons.bootstrap()
        .controller('AppController', function($scope) {
          this.onTabChange = function(){
            console.log("tab change detected.");
          });
      

      Requirement #1: Checking the active tab page and running code to update the data for the tab.

      Currently, with the ons-show attribute, I am able to hook up my onTabChange() to detect the change. However, I do not know how to get the active tab name. There is a method getActiveTabIndex() for ons-tabbar but how can I call it without a JavaScript object reference to the ons-tabbar object? In normal JavaScript, I could probably use a document.getElementById(...) or document.querySelector(...) but not in AngularJS.

      When onTabChange() is called, I also cannot find a parameter argument passed in that indicate the ons-tab object.

      I have not found information or example on how to achieve this. Any help?

      posted in Onsen UI
      W
      wetfeet
    • RE: ons-checkbox not appearing

      @misterjunio OK Thank you for confirming.

      Originally, I thought ons-checkbox is an old feature that has always been there, since it is already advertised and demoed on the tutorial docs. Didn’t know it is so new.

      posted in Onsen UI
      W
      wetfeet
    • RE: ons-checkbox not appearing

      Oh wait a minute. I checked the package.json inside the www/lib/onsenui/package.json

      "name": "onsenui",
      "version": "2.3.2"
      

      Seems to me the template bundles 2.3.2 by default?

      posted in Onsen UI
      W
      wetfeet
    • RE: Build Android 2.3.* and 3.0

      Onsen UI only supports Android 4.4.4+ and Android 4.0+ with Crosswalk engine.

      Won’t work at all with Android 2.x or 3.x.

      posted in Developer Corner
      W
      wetfeet
    • RE: ons-checkbox not appearing

      @misterjunio I fiddled around a little using codes from the ons-checkbox reference so the page appears a little different. Still no luck.

      No error in console.

      0_1497840515901_ons-checkbox-console.png

      I did a monaca version. It says: 2.2.1. (meaning Onsen version 2.2.1 is installed? Or the monaca version?)

      monaca info as below:

      Node version: v6.10.2
      Cordova version: 5.4.1
      
      posted in Onsen UI
      W
      wetfeet
    • ons-checkbox not appearing

      I started an empty test project (Onsen UI V2 Angular 1 Minimum) and my code looks like this:

      <ons-page ng-controller="AppController as page">
          <ons-toolbar>
            <div class="center">Introduction</div>
          </ons-toolbar>
          <ons-list>
            <ons-list-item tappable>
              <label class="left">
                <ons-checkbox input-id="check-2" ng-model="page.bananas"></ons-checkbox>
              </label>
              <label for="check-2" class="center">Bananas</label>
              <label class="right">
                <ons-switch input-id="check-2" ng-model="page.bananas"></ons-checkbox>
              </label>
            </ons-list-item>
          </ons-list>
        </ons-page>
      

      Nothing fanciful. Just a list within a ons-page with 3 columns: left, center and right.

      On the left, a ons-checkbox.
      In the center, a caption label static text.
      On the right, a ons-switch.

      Now when I monaca preview, the ons-checkbox doesn’t appear, for both iOS and Material design. The ons-switch however, does.

      1_1497839636094_ons-checkbox-md.png 0_1497839636094_ons-checkbox-ios.png

      What am I missing?

      posted in Onsen UI
      W
      wetfeet
    • AngularJS 1 Onsen app and Google Charts

      How do we load, initialize and use Google Charts successfully in an AngularJS 1 Onsen app?

      According to its Quick Start, we need to:

      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);
      
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
          ... blah blah blah ...
      }
      </script>
      

      Now suppose my Onsen app is as follows:

      ons.bootstrap()
        .controller('AppController', function($scope) {
          this.drawChart = function(){
            ... blah blah blah ...
          };
      
          ons.ready(function() {
            // Load the Visualization API and the corechart package.
            google.charts.load('current', {'packages':['corechart']});
      
            // Set a callback to run when the Google Visualization API is loaded.
            google.charts.setOnLoadCallback(this.drawChart); // Error: "this.drawChart" is null.
          };
        });
      

      Currently, my ons.ready cannot find the this.drawChart function in the controller.

      posted in Developer Corner
      W
      wetfeet