zoukankan      html  css  js  c++  java
  • ruby creating a simple logon window

     

    First, we need a simple view for our index defined in part 1

    index.rhtml in views/login

    <script type="text/javascript"

       src="/javascripts/login.js"></script>   

     

    <p>Here comes the Content which

    will be used after the user logged on.</p>

    This is just some dummy content that will be “blocked” by a modal extjs window. There can be any HTML content inside it, which will be disabled, but would be visible via the html source code, so aditional client checks are neccessary if it should work as a secure formular.

    Now the interesting stuff is of course the login.js itself:

    var loginForm = new Ext.form.FormPanel({

        baseCls: 'x-plain',

        labelWidth: 75,

        url:'/login/doLoginTest',

        defaultType: 'textfield',

        items: [{

            fieldLabel: 'Username',

            name: 'name',

            anchor:'90%' // anchor width by percentage

        },{

        fieldLabel: 'Password',

        name: 'subject',

        anchor: '90%' // anchor width by percentage

    }],

    buttons: [{

        text: 'Login',

        handler: function() {

            loginForm.getForm().submit(

                {

                    method: 'GET',

                    waitMsg:'Submitting...',

     

                    reset : false,

                    success : function() {

                        loginWindow.close();

     

                    },

                    failure: function(form, action){Ext.Msg.alert('Error',action.result.text)}

                });

            }

        }]

     

    });

     

    var loginWindow = new Ext.Window({

        title: 'Login',

        300,

        height:140,

        closable:false,

        minWidth: 300,

        minHeight: 140,

        layout: 'fit',

        plain:true,

        modal:true,

        bodyStyle:'padding:5px;',

        items: loginForm

    });

    Ext.onReady(function(){

        loginWindow.show(this);

    });

    Now lets get through this step by step:
    The first function that is called is Ext.onReady, which is the startup function that is called by the extjs toolkit after the page has finnished loading and the toolkit did initialize. The function shows up the loginWindow, which was declared earlier by the line “var loginWindow = new Ext.Window({”. Parameters are always passed as a Javascript Object {param1,param2,param3}, which might look a bit confusing at first, but is very practical to set different parameters. The real interesting parmeter in loginWindow is the “items: loginForm” line, it does define what will end up inside the window, here its a FormPanel. The rest are basicly only stlye information to make it look like a window.

    Now, the “loginForm” Object contains the real interesting stuff. You’ll probably recognize the style stuff from the loginWindow object, along with the “items:” line. But here we are not referencing another Object, but just inline the things we need as a Javascript Object again, but this time as an array of Objects, noted with the “items:[{object1},{object2]” line. The “buttons:” line behaves the same, but uses button Objects with onClick handlers instead.

    handler: function() {

            loginForm.getForm().submit(

                {

                    method: 'GET',

                    waitMsg:'Submitting...',

     

                    reset : false,

                    success : function() {

                        loginWindow.close();

     

                    },

                    failure: function(form, action){Ext.Msg.alert('Error',action.result.text)}

                });

            }

    This javasctipt parts creates an Ajax submit form for the “Login” button. Extjs does take care of all houskeeping and wait messages, etc, you just need to tell what to display. The “success” and “failure” functions are user defined and send back from the controller in form of an json hash. Now the controller looks like this:

       def doLoginTest

          headers["Content-Type"] = "text/plain; charset=utf-8"

     

          puts params[:name]

          if (params[:name] == "mg")

             data = { :success => 'true'}

          else

             data = { :failure => 'true', :text => "Username or Password wrong !"}

          end

          render :text => data.to_json, :layout => false

       end

    As you can see, its a very secure mechanisim thats basicly foolproof and impossible to guess But all joking aside, you can see the result is gathered into a ruby hash or array, which is later then converted to json. For this to work you need either rails 2.0 (which is recommened because it makes life a lot easier with activerecord and json), or you need the json gem and put a

    require 'json/objects'

    on the top of the controller. Using this mechanic you can transfer all kinds of data from your rails controller to the extjs frontend. In fact all communication between extjs and rails is basicly json, but this will be covered more in part 3, where we’ll have a more in deep look into getting some activerecord data into extjs

  • 相关阅读:
    TPYBoard读取芯片上的温度传感器
    Micropython实例之TPYBoard来电显示功能演示
    Micropython教程之TPYBoardv102 DIY蓝牙智能小车实例
    TurnipBit—MicroPython开发板:妥妥拽拽零基础也能玩编程
    可视化编程开发板TurnipBit支持LED亮度可调功能
    TPYBoard实例之利用WHID为隔离主机建立隐秘通道
    带以太网的MicroPython开发板:TPYBoardv201建立云加法器实例
    带以太网的MicroPython开发板:TPYBoardv201温湿度上传实例
    数学运算类(三角函数,取整函数,指数函数,取最大值,最小值,绝对值)
    数字格式化和数字分组
  • 原文地址:https://www.cnblogs.com/hannover/p/1547603.html
Copyright © 2011-2022 走看看