Onsen Ui for Mobile Web Site (not app), is it a good idea?

[h3nr1ke]

Hello folks,

I was wondering about use the onsen ui to develop a mobile website, but I thinks there are some problems, like

• back button handler for mobile web browser
• no links to share to a direct page

do you think that there any chance handle it? or even inside the web browser, the android back button handler will work?

thanks for the clarification.

[Leonardo Augusto]

@h3nr1ke said:

no links to share to a direct page

<ons-list-item modifier="chevron" class="item" onclick="location.href = 'search.html'">

[munsterlander]

As my esteemed forum partner @Leonardo-Augusto noted, there are ways that you can capture all the features for desktop browsers that are designed for mobile browsers. The important part to understand about hybrid apps, is that they run in a webview, so there is really no reason that a hybrid app can’t run in the desktop web browser.

The biggest things that you would have to think about though are the hardware interactions that would not be present, i.e. gps, sensors, etc. If you app uses those, then the web version would have reduced functionality that you would have to be coding for. I do believe though, if your app does not utilize those features then you easily could write this as a “write once run everywhere” concept.

I do think that the big question is, are you wanting a responsive mobile website or an actual mobile application that can be run on a desktop environment?

[h3nr1ke]

@Leonardo-Augusto thanks for the example, but how to built a link from another site to the app?

[h3nr1ke]

@munsterlander thanks for the answer, my idea is to create a mobile website only, so no integration with hardware features.

I tested the back option of the browser and I was not able to handle it (a lot of javascript workarounds, but none worked in all browsers…)

I still think that is a good idea, but need to find a way to do that…

[munsterlander]

Well, if you are just doing a website, then all links and features would be like a normal website. Remember, Onsen is just JS and CSS. Some of the features are designed to work with Cordova (Phonegap) but are not necessary as you have stated. Just code it like a normal website and it will work.

[Leonardo Augusto]

@h3nr1ke said:

@Leonardo-Augusto thanks for the example, but how to built a link from another site to the app?

Hi, @h3nr1ke ! Looking to this post i can tell you

If you want link for another page , but as a mobile application (Not a pushPage() ) follow the code from my example
But If you’ll make a mobile website … is not necessary to worry .
It’s like our friend @munsterlander told you. Onsen Ui is pure JS , CSS , HTML framework … you can work normally
But i have sure it will be an amazing mobile site

And to reinforce the code about call an external page,
follows a good code, where you can set several external links inside a js file.

App.js

(function(){
  'use strict';
  var module = angular.module('app', ['onsen']);


  module.controller('DetailController', function($scope, $data) {
    $scope.item = $data.selectedItem;
  });

  module.controller('MasterController', function($scope, $data) {
    $scope.items = $data.items;

    $scope.showDetail = function(index) {
      var selectedItem = $data.items[index];
      $data.selectedItem = selectedItem;
      $scope.navi.pushPage('detail.html', {title : selectedItem.title});
    };
  });
  
    module.factory('$data', function() {
    

      data.items = [
          {
			  Image: '1443923568_male3.png',
              title: 'New ',
              label: 'Party',
              desc: 'Invite new friends.',
			  mmyurl: 'party.html'
          },
          {   Image: '1443923589_icon-40-clipboard-list.png',
              title: 'List ',
              label: 'Help',
              desc: 'Follow the tips',
			   mmyurl: 'help.html'
          }
      ];

      return data;
  });
  var data = {};
	  var app = angular.module('myApp',['onsen']);
	  
   module.controller('myCtrl',function($window, $scope){
       $scope.myFunction = function(item){
            var url = String(window.location);
            url = url.substr(0, String($window.location.href).indexOf("www") + 4);
            $window.location.href =  url + item.mmyurl;

       }
 });
  

})();

html code - resume

<ons-page>
            <ons-toolbar>
                <div class="center">Application Model</div>
            </ons-toolbar>

            <ons-list ng-controller="MasterController">
                <ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-click="showDetail($index)">
                    <ons-row>
                        <ons-col width="60px">
                            <div ><img class="item-thum" ng-src="images/{{item.Image}}" style="margin:auto;"></div>
							
                        </ons-col>
                        <ons-col>
                            <header>
                                <span class="item-title">{{item.title}}</span>
                                <span class="item-label">{{item.label}}</span>
                            </header>
                            <p class="item-desc">{{item.desc}}</p>
                        </ons-col>
                    </ons-row>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-navigator>

    <ons-template id="detail.html">
        <ons-page ng-controller="DetailController">

            <ons-toolbar>
                <div class="left"><ons-back-button>Back</ons-back-button></div>
                <div class="center">Details</div>
            </ons-toolbar>

            <ons-list modifier="inset" style="margin-top: 10px">
                <ons-list-item class="item">
                    <ons-row>
                        <ons-col width="60px">
                            <div ><img class="item-thum" ng-src="images/{{item.Image}}" style="margin:auto;"></div>
                        </ons-col>
                        <ons-col>
                            <header>
                                <span class="item-title">{{item.title}}</span>
                                <span class="item-label">{{item.label}}</span>
                            </header>
                            <p class="item-desc">{{item.desc}}</p>
                        </ons-col>
                    </ons-row>
                </ons-list-item>
               <div ng-controller="myCtrl">
			   
               <ons-list-item modifier="chevron" ng-click= "myFunction(item)">
      <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
      Browser for the next page loaded by the control. "External page"
</ons-list-item>
				
				</div>
            </ons-list>

Hope you enjoy !

[h3nr1ke]

@Leonardo-Augusto Hello Leonardo, thanks for the example (and sorry about the really late reply… ) I will keep it in mind to the next project.

^^V