Posts made by wetfeet

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!

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.

Will try again if I have any newer ideas.

@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.

@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.

@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?

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.

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.

@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).

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.

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?

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?

@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:

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?

@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.

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?

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.

@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.

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

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.

What am I missing?

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.