administrators

That’s something that is outside the scope of Onsen UI but also not necessarily prohibited by Onsen UI.

Onsen is a set of web components that are for designing the look of your app (and also associated UI behaviour like showing alerts and that kind of thing).

For communicating with a server or anything like that, you would need to write the JavaScript to do it yourself. It might also depend on if you’re using a platform like Cordova or Ionic.

Ok I’ve moved it now.

I’d recommend trying out installing the wkwebview plugin from a new monaca project and then following the instructions in the plugin README to get it working.

Then if you are still having problems post the code from your project somewhere (e.g. GitHub) and link it here so we have a better idea what you’re trying to do.

If it works in Cordova, then it should work with Monaca since Monaca is built on top of Cordova.

From the article you linked it looks like you need to use the cordova-plugin-wkwebview-engine plugin.

Again this isn’t an issue with Onsen UI so if you need help getting it set up, contact Monaca Support Team.

I don’t know about your app, but the codepen you posted won’t work because it’s only a part of the application i.e. the HTML contains two templates but it doesn’t have anything that would actually load either of those templates, like a Vue instance with el defined and div to put it in. See the tabbar example on the playground to see what I mean https://onsen.io/playground/?framework=vue&category=reference&module=tabbar

If you post a working example (one that shows your app actually loading on the screen) then I can help. I’d recommend starting from the working tabbar example I linked above, and then changing it like I suggested to load the tabs dynamically. Also you should first try making the example without AJAX (just use dummy data) to show that it does work and then add AJAX later.

Sorry it has taken so long to reply. This thread slipped under the radar.

In-app browsers are outside the scope of Onsen UI. It’s really a question of whether the platform you’re using to turn your app from JS to native code (such as Monaca or Ionic) supports WKWebView.

Or maybe I’m misunderstanding your question. If the question is really “will Onsen UI code run in a web view” then the answer is yes, and you can use ons.platform.isWebView for web view specific code https://onsen.io/v2/api/js/ons.platform.html#method-isWebView

You haven’t copied the push code properly from my previous reply.

If you have a page defaultPage that accepts a prop called propName and a variable that holds the value you want to pass to propName then it’s this:

this.tabs.push(
  {
    page: { template: '#defaultPage', props: ['propName'] },
    props: { propName: propValue  }
  }
);

page.props defines the names of the props.
props defines the values you pass to those props.

@Curiosity If you want to use OnsenUI with npm, you need to use a bundler such as webpack or rollup.

I’d recommend webpack as it has good documentation and is pretty easy to get working with Cordova.

Have a look at the webpack guide here https://webpack.js.org/guides/ to learn the basics.

Ok, now here’s one way of using webpack to load OnsenUI in a Cordova app.

First install the packages you’ll need:

npm install onsenui webpack webpack-cli css-loader file-loader style-loader html-webpack-plugin --save-dev

Then rename the www directory to src. Then make a new empty directory called www. Instead of using www as a source directory like you would when not using weback, we’ll use src as the source directory and www as the build output directory of webpack.

Now make webpack.config.js and put this in it:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'www'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: 'head'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};

With this webpack config file, when you run webpack, src/index.html will be copied to www/index.html and src/index.js will be injected into it.

Put this in src/index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <!-- the bundled javascript will get automatically injected in here by webpack -->
</head>
<body>
  <ons-page>
    <!-- whatever onsen stuff you want in here -->
  </ons-page>
</body>
</html>

Put this in src/js/index.js:

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
import 'onsenui';

That should be all the setup done. Now run npx webpack and webpack will bundle your application into www. If you then run cordova run you should see your application with Onsen working properly.

I think that’s all the steps, but there’s quite a lot of config here so I might have missed something. Let us know if you are having trouble.

It might be that you don’t have ng-app defined in your HTML. That was one thing that tripped me up when I tried to convert the example to use angular.module instead of ons.bootstrap.

From the code you provided, I can’t see what would be causing the problem.

Do the list items themselves show up? (i.e. you get ‘Item 1’, ‘Item 2’, ‘Item 3’, not ‘{{ item }}’). If the list items don’t show up it’s probably because Onsen isn’t loaded properly or you have a typo somewhere.

I don’t think it’s an Onsen version problem because I tried 2.10.1, 2.10.5 and 2.10.6 and they all worked for me.

I also don’t think it’s caused by using angular.module instead of ons.bootstrap because I got it working fine with angular.module.

There are a few other things you might be able to try:

1. If it’s an open source project, put the project on GitHub and I’ll clone it and take a look at it.
2. If it’s not an open source project but you don’t mind sharing some of the code, make the smallest possible working example and put it on GitHub.
3. If it’s a Monaca project, contact Monaca support. You’ll need a paid plan but they’ll clone your project and figure out why it’s not working.

Hmmm that’s strange your test isn’t working. Can you try inserting the code exactly from the playground example and see if that works? https://onsen.io/playground/?framework=angular1&category=reference&module=lazy-repeat

The only thing I can think of right now is that your code uses $scope whereas the playground example is using Controller as controller to reference the scope. Either is fine but both can cause problems so it’s worth checking they’re not accidentally both getting used somewhere.