LogIn in Apache Cordova with Drawer

4 posts, 1 answers
  1. Pit
    Pit avatar
    7 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2015 Link to this post

    Hi Telerik Team,

    By clicking the button that calls the function "logInFacebook1", does not respond.

    but, when clicking the button that calls the function "logInFacebook2", this respond; but does not respond "app.navigate("views/denunciar.html");"

    *************
    index.html
    *************
    <!DOCTYPE html>
    <html>
    <head>
        <title>Citizen Connected</title>
        <meta charset="utf-8" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />

        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script type="text/javascript" src="scripts/MobileServices.Web-1.1.0.min.js"></script>
        <script src="scripts/app.js"></script>
    </head>
    <body>
        <div data-role="layout" data-id="main">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>

            <!-- application views will be rendered here -->
        
        </div>

        <div data-role="layout" data-id="secondary">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                    <a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
                </div>
            </div>

            <!-- application views will be rendered here -->
        
        </div>

        <!-- application drawer and contents -->
        <div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Men&uacute" data-swipe-to-open="false">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>
            <ul data-role="listview">
                <li>
                    <a href="views/denunciar.html">Denunciar</a>
                </li>
                <li>
                    <a href="views/historial.html">Historial De Denuncias</a>
                </li>
                <li>
                    <a href="views/atencion.html">Horarios De Atenci&oacuten</a>
                </li>
                <li>
                    <a href="views/autor.html">Sobre el Autor</a>
                </li>
                <li>
                    <a href="views/login.html">Salir</a>
                </li>
            </ul>
        </div>
    </body>
    </html>  

    *************
    login.html
    *************
    <div data-role="view" data-title="Citizen Connected" data-layout="main" data-model="APP.models.login">
        <h1 data-bind="html: title"></h1>
        Puedes iniciar sesi&oacuten con:
        <div>
            Bienvenido, <span id="spn_logInName"></span>.
            <a data-role="button" data-click="logInFacebook1" data-align="left">Test Facebook 1</a>
    <a data-role="button" data-click="logInFacebook2" data-align="left">Test Facebook 2</a>
            <a data-role="button" data-click="logInTwitter" data-align="right">Twitter</a>
            <a data-role="button" data-click="holaMundo" data-align="right">Hola mundo</a>
            <a data-role="button" href="views/denunciar.html" data-align="left">Denunciar</a>
        </div>
    </div>


    ************************
    app.js
    ************************
    (function () {
        // store a reference to the application object that will be created
        // later on so that we can use it if need be
        var app;

        // create an object to store the models for each view
        window.APP = {
            models: {
                login: {
                    title: "Inicio De Sesi&oacuten"
                },
                denunciar: {
                    title: 'Reportar Incidente'
                },
                historial: {
                    title: 'Denuncias Hechas'
                },
                atencion: {
                    title: "Horarios De Atenci&oacuten"
                },
                autor: {
                    title: 'Sobre el Autor',
                    ds: new kendo.data.DataSource({
                        data: [{ id: 1, name: 'Bob' }, { id: 2, name: 'Mary' }, { id: 3, name: 'John' }]
                    }),
                    alert: function(e) {
                        alert(e.data.name);
                    }
                }
            }
        };

        document.addEventListener('deviceready', function () {
            navigator.splashscreen.hide();

            app = new kendo.mobile.Application(document.body, {
                skin: 'flat',
                initial: 'views/login.html'            
            });

            function logInFacebook1() {
                    alert('test');
            }

        }, false);

    }());

    // Instanciamos el mobile service y la tabla de control.
    var client = new WindowsAzure.MobileServiceClient('https://nameProject.azure-mobile.net/','xxxxxxxxxxxxxxxxxZZgj26');
    todoItemTable = client.getTable('tbl_m_xxxxxxxxxxxxxxxxx');

    // Iniciamos sesión con Facebook.
    function logInFacebook2() {
        client.login("facebook").then(refreshAuthDisplay, function (error) {
            alert(error);
        });
    }

    // Iniciamos sesión con Twitter.
    function logInTwitter() {
        client.login("twitter").then(refreshAuthDisplay, function (error) {
            alert(error);
        });
    }


    function refreshAuthDisplay() {
        var isLoggedIn = client.currentUser !== null;
        if (isLoggedIn) {
            var userIDCurrent = client.currentUser.userId;

            app.navigate("views/denunciar.html"); //local view
            // $("#spn_logInName").text(userIDCurrent);
            // currentPosition();
            // refreshTodoItems();
        }
    }

    function refreshTodoItems() {
        $('#summary').html("Cargando...");
        var query = todoItemTable.where({ complete: false });

        query.read().then(function (todoItems) {
            var listItems = $.map(todoItems, function (item) {
                return $('<li>')
                    .attr('data-todoitem-id', item.id)
                    .append($('<div>').append($('<input class="item-text">').val(item.text)));
            });

            $('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
            $('#summary').html('<strong>' + todoItems.length + '</strong> denuncia(s)');
        }, handleError);
    }

    function logOut() {
        client.logout();
        reportarView.destroy();
        router.navigate("/");
    }

    function handleError(error) {
        var text = error + (error.request ? ' - ' + error.request.status : '');
        $('#errorlog').append($('<li>').text(text));
    }

    function currentPosition() {
        navigator.geolocation.getCurrentPosition(onSuccess, handleError);
    }

    // on Success Geolocalizacion
    function onSuccess(position) {
        var latitud = position.coords.latitude; // latitud
        var longitud = position.coords.longitude; // longitud
        var latlng = new google.maps.LatLng(latitud, longitud);

        // Usamos Google Maps para mostrar la posición
        var myOptions = {
            zoom: 15,
            center: latlng, // Centramos el mapa con las coordenadas
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControl: true
        };

        // Creamos el mapa
        map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

        marcador = new google.maps.Marker({
            position: latlng
            , map: map
            , title: "Estás aquí"
        })

    }

    $('#btn_actualizar').click(function (evt) {
        alert('Actualizar');
        // refreshTodoItems();
        // evt.preventDefault();
    });

    function actualizar() {
        alert('Actualizar');
        // refreshTodoItems();
        // evt.preventDefault();
    }

    $('#btn_registrar').click(function (evt) {
        navigator.geolocation.getCurrentPosition(onSuccessRegistrar, handleError);

        function onSuccessRegistrar(position, evt) {
            var textbox = $('#txt_denuncia'),
            itemText = textbox.val();

            var latitud = position.coords.latitude;
            var longitud = position.coords.longitude;

            if (itemText !== '') {
                todoItemTable.insert({ text: itemText, complete: false, latitud: latitud, longitud: longitud }).then(refreshTodoItems, handleError);
            }
            textbox.val('').focus();
            evt.preventDefault();

        }
    });



















  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 23 Feb 2015 Link to this post

    Hello Pit,

    The problem with the logInFacebook1 function is that it is defined inside the deviceReady event handler, making it unavailable to the view. 

    As for loginFacebook2, have you checked the console for any JavaScript errors when you are calling it. It seems to me that the app object isn't available in the scope of this function, thus the navigate function should be throwing an error. You can assign the kendo.Mobile.Application object, to global.app, so that it is available everywhere in your app. 

    You could also review the following sample which demonstrates recommended practices for implementing Kendo UI MVVM in an AppBuilder app, including how to handle the Application object globally.
    https://github.com/Icenium/sample-kendo-ui-core-widgets

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Pit
    Pit avatar
    7 posts
    Member since:
    Feb 2013

    Posted 01 Mar 2015 in reply to Tsvetina Link to this post

    Thank you Tsvetina,

    Now my functions respond to my buttons, plus my project is better structured. It does not work "navigate" to switch views.

    views/login.html
    1.<div data-role="view" data-title="Citizen Connected" data-layout="main" data-model="app.loginService.viewModel">
    2.    <h1 data-bind="html: title"></h1>
    3.    Puedes iniciar sesión con:
    4.    <div>
    5.        <a data-role="button" data-bind="click: logInFacebook" data-align="left">Facebook</a>
    6.        <a data-role="button" data-bind="click: logInTwitter" data-align="right">Twitter</a>
    7.    </div>
    8.</div>

    scripts/login.js
    01.(function (global) {
    02.    var LoginViewModel, app = global.app = global.app || {};
    03. 
    04.    LoginViewModel = kendo.data.ObservableObject.extend({
    05.        title: "Inicio De Sesión"
    06. 
    07.        , logInFacebook: function () {
    08.            alert('Hello Facebook');
    09.            try {
    10.                navigate("views/denunciar.html");
    11.            } catch (e) {
    12.                alert(e);
    13.            }
    14.             
    15.        }
    16.        , logInTwitter: function () {
    17.            alert('Hola Twitter');
    18.        }
    19.    });
    20. 
    21.    app.loginService = {
    22.        viewModel: new LoginViewModel()
    23.    };
    24.})(window);

    index.html
    01.<!DOCTYPE html>
    02.<html>
    03.<head>
    04.    <title>Citizen Connected</title>
    05.    <meta charset="utf-8" />
    06.    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    07.    <link href="styles/main.css" rel="stylesheet" />
    08. 
    09.    <script src="cordova.js"></script>
    10.    <script src="kendo/js/jquery.min.js"></script>
    11.    <script src="kendo/js/kendo.mobile.min.js"></script>
    12.    <script type="text/javascript" src="scripts/MobileServices.Web-1.1.0.min.js"></script>
    13. 
    14.    <script src="scripts/app.js"></script>
    15.    <script src="scripts/login.js"></script>
    16.    <script src="scripts/location.js"></script>
    17.</head>
    18.<body>
    19.    <div data-role="layout" data-id="main">
    20.        <div data-role="header">
    21.            <div data-role="navbar">
    22.                <span data-role="view-title"></span>
    23.            </div>
    24.        </div>
    25. 
    26.        <!--
    27.            application views will be rendered here
    28.            Sólo para los casos que no debe mostrar el drawer, con las opciones que requieran de una sesión.
    29.        -->
    30. 
    31.    </div>
    32. 
    33.    <div data-role="layout" data-id="secondary">
    34.        <div data-role="header">
    35.            <div data-role="navbar">
    36.                <span data-role="view-title"></span>
    37.                <a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
    38.            </div>
    39.        </div>
    40. 
    41.        <!--
    42.            application views will be rendered here
    43.            Para mostrar las opciones del drawer que se deben emplear con una sesión activa.
    44.        -->
    45. 
    46.    </div>
    47. 
    48.    <!-- application drawer and contents -->
    49.    <div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Menú" data-swipe-to-open="false">
    50.        <div data-role="header">
    51.            <div data-role="navbar">
    52.                <span data-role="view-title"></span>
    53.            </div>
    54.        </div>
    55.        <ul data-role="listview">
    56.            <li>
    57.                <a href="views/denunciar.html">Denunciar</a>
    58.            </li>
    59.            <li>
    60.                <a href="views/historial.html">Historial De Denuncias</a>
    61.            </li>
    62.            <li>
    63.                <a href="views/atencion.html">Horarios De Atención</a>
    64.            </li>
    65.            <li>
    66.                <a href="views/autor.html">Sobre el Autor</a>
    67.            </li>
    68.            <li>
    69.                <a href="views/login.html">Salir</a>
    70.            </li>
    71.        </ul>
    72.    </div>
    73.</body>
    74.</html>

    /scripts/app.js
    01.(function (global) {
    02.    var app = global.app = global.app || {};
    03. 
    04.    document.addEventListener('deviceready', function () {
    05.        navigator.splashscreen.hide();
    06. 
    07.        app.application = new kendo.mobile.Application(document.body, {
    08.            skin: 'flat',
    09.            initial: 'views/login.html'
    10.        });
    11.    }, false);
    12.})(window);

    The error is "ReferenceError: navigate is not defined"

    Thanks in advance for any help :)
  4. Pit
    Pit avatar
    7 posts
    Member since:
    Feb 2013

    Posted 01 Mar 2015 Link to this post

    I answer myself xD

    Must be corrected the line 10

    app.application.navigate("views/denunciar.html");
Back to Top