Navigation

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

    dldpower2plan

    @dldpower2plan

    1
    Reputation
    6
    Posts
    1150
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    dldpower2plan Follow

    Posts made by dldpower2plan

    • Implement authentication with page redirect Onsen UI 2 & React

      While migrating our Onsen v1 app (based on AngularJS1) to Onsen v2 with React, I bumped into a little problem: implementing logic regarding user authentication (redirecting to login screen if there are no “saved credentials”)

      Here’s how my app is structured…

      Entry point is the App.js file, which looks like this:

      import React from 'react';
      
      import {Navigator} from 'react-onsenui';
      
      import Home from './Home';
      import Login from './Login';
      
      class App extends React.Component {
      
          renderPage(route, navigator) {
              route.props = route.props || {};
              route.props.key = route.comp.displayName;
              route.props.navigator = navigator;
              return React.createElement(route.comp, route.props);
          }
      
          render() {
              return (
                  <Navigator
                      initialRoute={{comp: Home}}
                      renderPage={this.renderPage}
                  />
              );
          }
      }
      
      export default App;
      

      You can see that I have my references for both ‘Home’ and ‘Login’ components, however, I want to decide which component to render.

      I tried the following: use ‘Home’ as the initialRoute, and decide in the Home components constructor if we need to go to the Login page.

      constructor(props) {
          super(props);
          this.state = {
              isOpen: false
          };
          const authenticated = GetAuthenticated();
          if(!authenticated) {
             this.props.navigator.pushPage({comp: Login});
          }
      }
      

      This simply did not work, the Login page was never shown.

      So basically, what I would like to do is to look in the localStorage for user credentials (or any other place for storing these kind of information), and based on this decide whether to load up the ‘Home’ page or the ‘Login’ page.

      posted in Onsen UI
      D
      dldpower2plan
    • RE: Onsen Dialog not closed by Android back button

      @Fran-Diox I just took the exact same code from the CODEPEN, made it into an app, built it with PhoneGap build, and when I press the back button on the second page, it just closes the application immediately.

      posted in Onsen UI
      D
      dldpower2plan
    • RE: Onsen Dialog not closed by Android back button

      @munsterlander Thank you for the help, but when I tried the code suggested by you, i didn’t get any reaction from my mobile app, whatsoever.
      I even took it from the Onsen docs (which have an error on line 8 for the second snippet, btw Onsen team), and it just keeps ignoring it.

      Here’s my index.js file after some slight modifications:

      (function () {
          "use strict";
      
          //document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
      	myApp.run(['$rootScope', function($rootScope) {
      		document.addEventListener('deviceready', function() {
      
                  ons.enableDeviceBackButtonHandler();
      			// Set a new handler
      			ons.setDefaultDeviceBackButtonListener(function(event) {
      				if(myNavigator.topPage.name=="home.html") {
      					ons.notification.confirm('Do you want to close the app?') // Ask for confirmation
      					.then(function(index) {
      						if (index === 1) { // OK button
      							navigator.app.exitApp(); // Close the app
      						}
      					});
      				}
      				else {
                          myNavigator.popPage(); //here I tried event.callParentHandler(); as well
      				}
      			});
      		}, false);
      	}]);
      
      ...handlers for onPause, onResume etc....
      }
      

      Using the event.callParentHandler(); method in the else part threw the following error:

      Cannot read property 'deviceBackButtonHandlerId' of undefined 
      

      myNavigator.popPage(); at least closes the dialog / popover, but it also goes back to the previous page, so I’m still not quite there.

      I am also explicitly loading a cordova.js file (that I took from the platform directory while using the PhoneGap serve) if that makes a difference.

      posted in Onsen UI
      D
      dldpower2plan
    • RE: Onsen Dialog not closed by Android back button

      Hi!
      The examples for AngularJS also have the one with the templates.
      I’m using the templates, because the other version was not working for me if I wanted to add a $scope variable to it.
      But nevertheless, it shouldn’t make any difference. The important thing is, that the back button is ignored, the popover remains on the screen and the page is changed in the background.

      posted in Onsen UI
      D
      dldpower2plan
    • Onsen Dialog not closed by Android back button

      Hi,
      I ran into a little problem while using the onsen dialog in my app.

      I use the android backbutton in order to navigate back in my app, and when I’m on the home page, a back button click would show a prompt for the user, whether they want to close the app or not.
      To get this working, I had to override the default back button behaviour, and I found some tutorials for that. That works nicely.

      However, I just noticed that even though my ons-dialogs are specified as cancelable, i am not able to use the backbutton to close / hide them.

      Here’s my index.js script where I have my backbutton handler:

           myApp.run(['$rootScope', function($rootScope) {
      		document.addEventListener('deviceready', function() {
      			
      			// Handle the Cordova pause and resume events
      			document.addEventListener( 'pause', onPause.bind( this ), false );
      			document.addEventListener( 'resume', onResume.bind( this ), false );
      			
      			// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
      			ons.disableDeviceBackButtonHandler();
      			document.addEventListener("backbutton", onBackKeyDown, false);
      		}, false);
      	}]);
      
             
          var AlreadyFiredBackButton = false;
      	function onBackKeyDown(e) {
      		try {
      			if(AlreadyFiredBackButton == false) {
      				AlreadyFiredBackButton = true;
      				if(myNavigator.topPage.name=="home.html") {
      					ons.notification.confirm({
      						message: 'Are you sure you want to close?',
      						title: 'Close app',
      						buttonLabels: ['Yes','No'],
      						callback: function(idx) {
      							switch (idx) {
      							  case 0:
      								AlreadyFiredBackButton = false;
      								try{
      									if (navigator.app) {
      										navigator.app.exitApp();
      									} else if (navigator.device) {
      										navigator.device.exitApp();
      									}
      								}
      								catch(err) {
      								}
      								break;
      							  case 1:
      								AlreadyFiredBackButton = false;
      								break;
      							}
      						}
      					});	
      				}
      				else {
      					try {
      						AlreadyFiredBackButton = false;
      						myNavigator.popPage();
      						return;
      					}
      					catch(err) {
      						AlreadyFiredBackButton = false;
      					}
      				
      					try {
      						AlreadyFiredBackButton = false;
      						myNavigator.resetToPage('home.html');
      						return;
      					}
      					catch(err2) {
      						AlreadyFiredBackButton = false;
      					}
      				}
      			}
      		}
      		catch(pageerror) {
      			AlreadyFiredBackButton = false;
      		}
      	}
      
      

      Here’s my index.html where I’ve specified my login dialog:

      <ons-template id="loginform.html">
      	<ons-dialog var="loginform" cancelable ng-controller="AppController">
      		<ons-toolbar inline>
      			<div class="center">
      				Change Credentials
      			</div>
      		</ons-toolbar>
      		<div class="login-form-div">
      			<p>
      				<input placeholder="Username" id="username" ng-model="email" class="text-input">
      			</p>
      			<p>
      				<input type="password" placeholder="Password" id="password" ng-model="password" class="text-input">
      			</p>
      			<div style="text-align: center" class="content-padded">
      				<ons-button style="width:48%;" ng-click="loginform.hide();">Cancel</ons-button>
      				<ons-button style="width:48%;" ng-click="saveCredentials(lfusername, lfpassword);">Save</ons-button>
      			</div>
      		</div>
      	</ons-dialog>
      </ons-template>
      

      Any ideas why the ons-dialog is not disappearing when hitting the backbutton on android?

      posted in Onsen UI
      D
      dldpower2plan
    • PhoneGap Serve stuck on fontawesome.woff2

      Hi!

      I was debugging my PhoneGap app in the browser, with the usual “phonegap serve” command, and suddenly Chrome crashed.
      Then I restarted my PC, tried the CLI command again, but now it keeps freezing at a point, and I can’t get it to go further.

      0_1479745514525_phonegapserveproblem.png

      I deleted the directories form the Onsen framework, and copied them back again, but it still freezes there.
      Is this a caching issue?

      posted in Onsen UI
      D
      dldpower2plan