登錄屏幕只在sencha的本機應用程序中的第一次

我正在爲一個本機應用程序在sencha touch。我想創建一個只能在第一次看到的登錄視圖。任何建議如何解決它。登錄屏幕只在sencha的本機應用程序中的第一次

Activation.js

Ext.define('FOS.view.Activation', { 
    extend: 'Ext.form.Panel', 
    alias: "widget.activationview", 
    requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'], 
    config: { 
     title: 'Login', 
     items: [ 

      { 
       xtype: 'label', 
       html: 'Activation failed. Please enter the correct credentials.', 
       itemId: 'activationFailedLabel', 
       hidden: true, 
       hideAnimation: 'fadeOut', 
       showAnimation: 'fadeIn', 
       style: 'color:#990000;margin:5px 0px;' 
      }, 
      { 
       xtype: 'fieldset', 
       title: ' ', 
       items: [ 
        { 
         xtype: 'textfield', 
         placeHolder: 'Enter Agency Id', 
         itemId: 'agencyIdTextField', 
         name: 'agencyIdTextField', 
      label: 'Agency Id', 
         labelWidth: '40%', 
         //required: true 
        }, 
        { 
         xtype: 'textfield', 
         placeHolder: 'Enter App Id', 
         itemId: 'appIdTextField', 
         name: 'appIdTextField', 
      label: 'App Id', 
         labelWidth: '40%', 
         // required: true 
        } 
       ] 
      }, 
      { 
       xtype: 'button', 
       itemId: 'activationButton', 
       ui: 'action', 
       padding: '10px', 
       text: 'Activate' 
      } 
     ], 
     listeners: [{ 
      delegate: '#activationButton', 
      event: 'tap', 
      fn: 'onActivationButtonTap' 
     }] 
    }, 
    onActivationButtonTap: function() { 

     var me = this, 
      agencyidField = me.down('#agencyIdTextField'), 
      appidField = me.down('#appIdTextField'), 
      label = me.down('#activationFailedLabel'), 
      agencyid = agencyidField.getValue(), 
      appid = appidField.getValue(); 

     label.hide(); 

     // Using a delayed task in order to give the hide animation above 
     // time to finish before executing the next steps. 
     var task = Ext.create('Ext.util.DelayedTask', function() { 

      label.setHtml(''); 

      me.fireEvent('activationCommand', me, agencyid, appid); 

      agencyidField.setValue(''); 
      appidField.setValue(''); 
     }); 

     task.delay(500); 

    }, 
    showActivationFailedMessage: function (message) { 
     var label = this.down('#activationFailedLabel'); 
     label.setHtml(message); 
     label.show(); 
    } 
});

Ext.define('FOS.view.Login', { 
    extend: 'Ext.form.Panel', 
    alias: "widget.loginview", 
    requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'], 
    config: { 
     title: 'Login', 
     items: [ 

      { 
       xtype: 'label', 
       html: 'Login failed. Please enter the correct credentials.', 
       itemId: 'signInFailedLabel', 
       hidden: true, 
       hideAnimation: 'fadeOut', 
       showAnimation: 'fadeIn', 
       style: 'color:#990000;margin:5px 0px;' 
      }, 
      { 
       xtype: 'fieldset', 
       title: ' ', 
       items: [ 
        { 
         xtype: 'textfield', 
         placeHolder: 'Enter UserName', 
         itemId: 'userNameTextField', 
         name: 'userNameTextField', 
      label: 'UserName', 
         labelWidth: '40%', 
         //required: true 
        }, 
        { 
         xtype: 'passwordfield', 
         placeHolder: 'Enter Password', 
         itemId: 'passwordTextField', 
         name: 'passwordTextField', 
      label: 'Password', 
         labelWidth: '40%', 
         // required: true 
        } 
       ] 
      }, 
      { 
       xtype: 'button', 
       itemId: 'logInButton', 
       ui: 'action', 
       padding: '10px', 
       text: 'Log In' 
      } 
     ], 
     listeners: [{ 
      delegate: '#logInButton', 
      event: 'tap', 
      fn: 'onLogInButtonTap' 
     }] 
    }, 
    onLogInButtonTap: function() { 

     var me = this, 
      usernameField = me.down('#userNameTextField'), 
      passwordField = me.down('#passwordTextField'), 
      label = me.down('#signInFailedLabel'), 
      username = usernameField.getValue(), 
      password = passwordField.getValue(); 

     label.hide(); 

     // Using a delayed task in order to give the hide animation above 
     // time to finish before executing the next steps. 
     var task = Ext.create('Ext.util.DelayedTask', function() { 

      label.setHtml(''); 

      me.fireEvent('signInCommand', me, username, password); 

      usernameField.setValue(''); 
      passwordField.setValue(''); 
     }); 

     task.delay(500); 

    }, 
    showSignInFailedMessage: function (message) { 
     var label = this.down('#signInFailedLabel'); 
     label.setHtml(message); 
     label.show(); 
    } 
});

MainMenu.js

Ext.define('FOS.view.MainMenu', { 
    extend: 'Ext.Panel', 
    requires: ['Ext.TitleBar'], 
    alias: 'widget.mainmenuview', 
    config: { 
     layout: { 
      type: 'fit' 
     }, 
     items: [{ 
      xtype: 'titlebar', 
      title: 'Main Menu', 
      docked: 'top', 
      items: [ 
       { 
        xtype: 'button', 
        text: 'Log Off', 
        itemId: 'logOffButton', 
        align: 'right' 
       } 
      ] 
     }], 
     listeners: [{ 
      delegate: '#logOffButton', 
      event: 'tap', 
      fn: 'onLogOffButtonTap' 
     }] 
    }, 
    onLogOffButtonTap: function() { 
     this.fireEvent('onSignOffCommand'); 
    } 
});

控制器

Ext.define('FOS.controller.Login', { 
    extend: 'Ext.app.Controller', 

    config: { 
     refs: { 
      loginView: 'loginview', 
      mainMenuView: 'mainmenuview', 
     activationView: 'activationview' 
     }, 
     control: { 
     activationView: { 
       activationCommand: 'onActivationCommand' 
      }, 
       loginView: { 
        signInCommand: 'onSignInCommand' 
      }, 
      mainMenuView: { 
       onSignOffCommand: 'onSignOffCommand' 
      } 
     } 
    }, 

    // Session token 

    // sessionToken: null, 

    // Transitions 
    getSlideLeftTransition: function() { 
     return { type: 'slide', direction: 'left' }; 
    }, 

    getSlideRightTransition: function() { 
     return { type: 'slide', direction: 'right' }; 
    }, 

onActivationCommand: function (view, agencyid, appid) { 

     console.log('AgencyId: ' + agencyid + '\n' + 'AppId: ' + appid); 

     var me = this, 
      activationView = me.getActivationView(); 

     if (agencyid.length === 0 || appid.length === 0) { 

      activationView.showActivationFailedMessage('Please enter your Agency Id and App Id.'); 
      return; 
     } 

     activationView.setMasked({ 
      xtype: 'loadmask', 
      message: 'Activating...' 
     }); 

      me.activationSuccess();  //Just simulating success. 

    }, 

    activationSuccess: function() { 
     console.log('Activated.'); 
     var activationView = this.getActivationView(); 
     loginView = this.getLoginView(); 
     activationView.setMasked(false); 

     Ext.Viewport.animateActiveItem(loginView, this.getSlideLeftTransition()); 
    }, 

    onSignInCommand: function (view, username, password) { 

     console.log('Username: ' + username + '\n' + 'Password: ' + password); 

     var me = this, 
      loginView = me.getLoginView(); 

     if (username.length === 0 || password.length === 0) { 

      loginView.showSignInFailedMessage('Please enter your User Name and Password.'); 
      return; 
     } 

     loginView.setMasked({ 
      xtype: 'loadmask', 
      message: 'Signing In...' 
     }); 

     /* Ext.Ajax.request({ 
      url: '../../services/login.ashx', 
      method: 'post', 
      params: { 
       user: username, 
       pwd: password 
      }, 
      success: function (response) { 

       var loginResponse = Ext.JSON.decode(response.responseText); 

       if (loginResponse.success === "true") { 
        // The server will send a token that can be used throughout the app to confirm that the user is authenticated. 
        me.sessionToken = loginResponse.sessionToken;*/ 
        me.signInSuccess();  //Just simulating success. 
       /* } else { 
        me.singInFailure(loginResponse.message); 
       } 
      }, 
      failure: function (response) { 
       me.sessionToken = null; 
       me.singInFailure('Login failed. Please try again later.'); 
      } 
     });*/ 
    }, 

    signInSuccess: function() { 
     console.log('Signed in.'); 
     var loginView = this.getLoginView(); 
     mainMenuView = this.getMainMenuView(); 
     loginView.setMasked(false); 

     Ext.Viewport.animateActiveItem(mainMenuView, this.getSlideLeftTransition()); 
    }, 
/* 
    singInFailure: function (message) { 
     var loginView = this.getLoginView(); 
     loginView.showSignInFailedMessage(message); 
     loginView.setMasked(false); 
    },*/ 

    onSignOffCommand: function() { 

     var me = this; 

     /* Ext.Ajax.request({ 
      url: '../../services/logoff.ashx', 
      method: 'post', 
      params: { 
       sessionToken: me.sessionToken 
      }, 
      success: function (response) { 

       // TODO: You need to handle this condition. 
      }, 
      failure: function (response) { 

       // TODO: You need to handle this condition. 
      } 
     });*/ 

     Ext.Viewport.animateActiveItem(this.getLoginView(), this.getSlideRightTransition()); 
    } 
});

app.js

//<debug> 
Ext.Loader.setPath({ 
    'Ext': 'touch/src', 
    'FOS': 'app' 
}); 
//</debug> 

Ext.application({ 
    controllers: ["Login"], 

    name: 'FOS', 

    requires: [ 
     'Ext.MessageBox' 
    ], 

    views: ['Activation','Login','MainMenu'], 



    icon: { 
     '57': 'resources/icons/Icon.png', 
     '72': 'resources/icons/Icon~ipad.png', 
     '114': 'resources/icons/[email protected]', 
     '144': 'resources/icons/[email protected]' 
    }, 

    isIconPrecomposed: true, 

    startupImage: { 
     '320x460': 'resources/startup/320x460.jpg', 
     '640x920': 'resources/startup/640x920.png', 
     '768x1004': 'resources/startup/768x1004.png', 
     '748x1024': 'resources/startup/748x1024.png', 
     '1536x2008': 'resources/startup/1536x2008.png', 
     '1496x2048': 'resources/startup/1496x2048.png' 
    }, 

    launch: function() { 
     // Destroy the #appLoadingIndicator element 
     Ext.fly('appLoadingIndicator').destroy(); 

     // Initialize the main view 

    Ext.Viewport.add([ 
     { xtype: 'activationview'}, 
      { xtype: 'mainmenuview' }, 
     { xtype: 'loginview' } 
    ]); 
    }, 

    onUpdated: function() { 
     Ext.Msg.confirm(
      "Application Update", 
      "This application has just successfully been updated to the latest version. Reload now?", 
      function(buttonId) { 
       if (buttonId === 'yes') { 
        window.location.reload(); 
       } 
      } 
     ); 
    } 
});

我只想要這個激活視圖一次。 Web服務尚未availabale ....

來源

2013-02-01 shashankqss

你能分享你試過的任何代碼嗎？ – Moseleyi

感謝您的回覆....我分享我的代碼。我是sencha plz新手幫我...... – shashankqss

基本上，你在尋找什麼是類似於東西記住或SSO（單點登錄）功能，可在大多數網站和本地應用。我最近在我的一個應用程序中需要這個。

使用sencha，您可以使用HTML5存儲。一旦用戶成功登錄，將某些用戶詳細信息（如登錄狀態，訪問令牌，用戶標識等）存儲到HTML5數據庫中。您可以輕鬆地在其中存儲高達5MB的數據，並且由於sencha在webkit等現代Web瀏覽器上運行，您可以使用該API並對其進行操作。

因此，我創建了一個模型，其中包含用戶ID，登錄狀態和訪問令牌等各種字段。例如，你可以有模式類似 -

Ext.define('MyApp.model.Userinfo',{ 
    extend:'Ext.data.Model', 
    config:{ 
     identifier: 'uuid', 
     store:'MyApp.store.Userinfo', 
     fields:[     
      {name: 'id', type: 'string' }, 
      {name: 'userid', type: 'string' }, 
      {name:'login_status',type:'string'}, 
      {name:'access_token',type:'string'} 
     ]  
    }   
});

可以場按照您的要求爲每個字段添加號碼，並選擇合適的類型。但是你的模型應該有一個唯一的標識符。使用ST2.0，您可以使用identifier:'uuid'爲您的存儲分配唯一標識符。

然後是商店，它可以像 -

Ext.define('MyApp.store.Userinfo',{ 
    extend:'Ext.data.Store', 
    config:{ 
     model:'MyApp.model.Userinfo', 
     autoLoaded:true, 
     autoLoad: true, 
     autoSave:true, 
     proxy:{ 
      type:'localstorage', 
      id:'userinfo' 
     } 
    } 
});

於是最後，當登錄成功後，您可以添加數據到您的localStorage與 -

var userInfoData=Ext.getStore('Userinfo');         
    userInfoData.removeAll(); 
    userInfoData.getProxy().clear(); 
    userInfoData.add({userid:'user_id_to_store',login_status:"true",access_token:'generated_access_token'}); 
    userInfoData.sync();

和結束時，在您的app.js中，檢查是否存在該本地存儲的入口並驗證訪問令牌的可靠性。因此，在launch方法，

var userInfoData=Ext.getStore('Userinfo');    
if(null!=userInfoData.getAt(0)){ 
    var status = userInfoData.getAt(0).get('login_status'); 
    var user_id=userInfoData.getAt(0).get('userid'); 
    var access_token = userInfoData.getAt(0).get('access_token'); 

    //validate access token, check user id and status and load your next view that comes after login  

}else{ 
    // if reached here, that means user is not logged in. 
    // load your login view. 
}

我不能讀你的整個代碼並對其進行編輯。但這是我用過的，到現在爲止沒有任何麻煩。您可以根據您的應用程序和要求輕鬆修改它。

注意

此代碼是一年多歲。所以它可能不適用於最新的ST版本（未經測試）。但是想法是一樣的。乾杯。 :)

來源

2013-02-01 19:27:24 SachinGutte

這個localstorage是否適用於nativa應用？如果我將我的sencha應用程序打包到.apk或iOS應用程序，本地存儲將工作？ –

回覆中提到的@HossamGhareeb localstorage是** HTML5 LocalStorage **。是的，它可以在ios和android中使用，但如果您的應用程序是僅在webview中運行的Web應用程序，則可以使用它。對於不帶webview的本地應用程序，您可以使用sqlite或者在ios中使用核心數據。在你的評論中，你的應用程序是* sencha封裝的應用程序*，然後是YES，你可以使用由sencha提供的API的HTML5 localstorage。 – SachinGutte

謝謝！這很好用！ – MinaHany

登錄屏幕只在sencha的本機應用程序中的第一次

回答

相關問題