• 26 March 2009
    6:15 pm

    Make a login form with JPF

    in Ajax.org, Tutorials

    In my last post, I made a small introduction on how with just a few lines of code you can create an interactive window.

    This time I want to do something more advanced.

    I will try to show you how easy it is to create a login window that connect to a back-end that does authentication and informs the user of the process.

    Before we start you can see the final result here so as to now before hand what we will make.

    So let’s start by adding the basics in order for our application to run.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:j="http://www.javeline.com/2005/jml" >
    <head>
        <title>Log-in</title>
 
        <script src="jpf.js"></script>
    </head>
    <body style="display:none">
        <j:skin
          src="skins.xml"
          icon-path="icons/"
          media-path="images/"/>
 
        <j:loader>
            <div 
              id="loadscreen" 
              style="color:#555555; top:45%; left:45%; position:absolute;">
                  Loading...
            </div>
        </j:loader>
 
        <j:modalwindow 
           id       = "winLogin" 
           modal    = "true"
           center   = "true"
           icon     = "lock_go.png"
           width    = "320"
           height   = "157"
           visible  = "true"
           title    = "Log-in">
 
        </j:modalwindow>
    </body>
</html>

    Nothing fancy just the basics, the loader and the window, almost the same as last time.
    The new stuff here is the center="true" attribute which will position the window in the center of the browser’s window.
    Next step is to shape our log-in window.

    <j:modalwindow 
  id       = "winLogin" 
  modal    = "true"
  center   = "true"
  icon     = "lock_go.png"
  width    = "320"
  height   = "157"
  visible  = "true"
  title    = "Log-in">
    <j:label >
        <strong>Enter your username and password</strong>
    </j:label>
    <j:label>
        Username:
    </j:label>
    <j:textbox 
      type      = "username" 
      required  = "true" 
      minlength = "1" />
    <j:label>
        Password:
    </j:label>
    <j:textbox 
      type      = "password"
      required  = "true" 
      minlength = "1" />
</j:modalwindow>

    I just added a couple of labels and two text-boxes.
    The text boxes also have two attributes the required="true" and the minlength="1", which should be self explanatory, also they have type="username" and type="password" which will set the type of the textboxes in username and password.

    Now we definitely need a login button, so beneath the last j:textbox we add this line:

    <j:button 
  action  = "login" 
  right   = "10" 
  bottom  = "10" 
  default = "true">
    Log in
</j:button>

    It will add a button to our window and it will position it absolute 10px from the right and 10px from the bottom.

    In Javeline platform there are different ways to align elements. I will check back again soon on how to align things, until then you can check Ruben Daniels’ blog and find out more.

    Also I added an action tag with the value login which I am going to use later.
    In Javeline Platform you can put an action tag in an element and JPF will know which action is attached to that element; you will see what I mean soon.

    Javeline Platform has a predefined set of actions and this one specifically will hook to the login action mechanism.

    The default attribute means that this button is the default and its action will be executed when you press enter. Also you will notice that it looks active.

    Now let’s add a tool tip message to inform the user when she or he is trying to login without writing anything in the text-boxes.

    I want a kind of form validation, so I add the invalidmsg property to the text-boxes which will pop up a tool tip telling the user what he did wrong. In our case he did not enter any username or password.

    <j:textbox 
  type       = "username" 
  required   = "true" 
  minlength  = "1"
  invalidmsg = "Invalid username;Please enter a username" />
 
<j:textbox 
  type       = "password"
  required   = "true" 
  minlength  = "1" 
  invalidmsg = "Invalid password;Please enter your password" />

    Ok, now our login window is setup and we have to create a connection with the back-end.

    Javeline has the teleport element which does all the dirty work when you want to communicate with the server. In our case we want to call a php script on the server and pass two arguments: the username and password.

    <j:teleport>
    <j:rpc id = "comm" protocol = "cgi">
        <j:method name = "login" url = "http://example.com/login.php">
            <j:variable name = "username" />
            <j:variable name = "password" />
        </j:method>
        <j:method name = "logout" url = "http://example.com/logout.php" />
    </j:rpc>
</j:teleport>

    So we add this to our page.

    Let’s take it step by step,

    <j:teleport>

    this is the teleport element that does the ajax communication with the server. I gave it an id so I can refer to it. I also gave it an attribute ‘protocol’ with value cgi

    Then we define two methods with the names login and logout, and we give both the url of the php script in the server.

    So for the ‘login’ method I added two new variable elements with names username and password.

    Those two variables (username and password) JPF will find for you from the 2 text-boxes that we gave the type ‘username’ and ‘password’.
    Now that teleport is set up let’s spice up our login page with the needs to provide the user with information on what is going on.

    So I will add this code in our page inside the window element:

    <j:label 
  id     = "loginMsg" 
  left   = "10" 
  bottom = "15" />

    This is just a label element with an id and a position 10px from left and bottom.

    Let’s see what we made up until now here

    As you can see all is working, but the window is not that beautiful; it needs better positioning of the elements.

    For that I will add the grid element.

    Now the code inside the window will look like this:

    <j:modalwindow
   id       = "winLogin"
   modal    = "true"
   center   = "true"
   icon     = "lock_go.png"
   width    = "320"
   height   = "157"
   visible  = "true"
   title    = "Log-in">
     <j:grid 
       id         = "grTest" 
       columns    = "85,*" 
       cellheight = "19" 
       padding    = "4" 
       margin     = "10 10 10 10">
         <j:label 
           span   = "2" 
           height = "25">
             <strong>Enter your username and password</strong>
         </j:label>
         <j:label>
             Username:
         </j:label>
         <j:textbox 
           type       = "username"
           required   = "true" 
           minlength  = "1"
           invalidmsg = "Invalid username;Enter your username" />
         <j:label>
             Password:
         </j:label>
         <j:textbox 
           type       = "password"
           required   = "true" 
           minlength  = "1"
           invalidmsg = "Invalid password;Enter your password" />
     </j:grid>
 
     <j:label 
       id     = "loginMsg" 
       left   = "10" 
       bottom = "15" />
 
     <j:button 
       action  = "login" 
       right   = "10" 
       bottom  = "10" 
       default = "true">
          Inloggen
     </j:button>
</j:modalwindow>

    As you can see I have added the

    j:grid

    element with properties

    columns = "85,*"

    and a margin of 10 around it.
    The columns property actually sets the width of each cell of the grid and here the first column is 80px and the second one takes the remaining width of the grid.
    If you want to add an extra cell you could write something like

    columns="80, 70, 40" or "80, 70, *"

    if you want the last cell to take the space available.

    A nice feature of JPF is the states, you can set different states of your application and depending on where you are in your application enable the corresponding state.

    So in the log-in example we have a fail state, an error state, a logged in state and an initial state.

    <j:state-group
  loginMsg.visible  = "false"
  winLogin.disabled = "false">
    <j:state id="stFail"
        loginMsg.value   = "Invalid username and password"
        loginMsg.visible = "true" />
    <j:state id="stError"
        loginMsg.value   = "An error occurred. Please check your network."
        loginMsg.visible = "true" />
    <j:state id="stLoggingIn"
        loginMsg.value    = "One moment please..."
        loginMsg.visible  = "true"
        winLogin.disabled = "true" />
</j:state-group>

    I added the

    <j:state-group>

    tag which creates a group of states and has attributes loginMsg.visible = "false" winLogin.disabled = "false" which means that in the initial state the loginMsg is hidden and the winLogin is not disabled.
    Then we have three

    <j:state>

    tags with different id’s and inside each one we set the value of the loginMsg as well as we make it visible. Also in the last state we set the winLogin.disable property to true.

    Now that we have set the states we will the code below in the appsettings tag in order to control our states.

    <j:appsettings>
    <j:auth 
      login  = "rpc:comm.login(username, password)"
      logout = "rpc:comm.logout()"
      autostart     = "false"
      window        = "winLogin"
      fail-state    = "stFail"
      error-state   = "stError"
      login-state   = "stIdle"
      waiting-state = "stLoggingIn" />
</j:appsettings>

    I added a j:auth tag which does the control between the teleport element and our application.
    As you can see it has a ‘login’ ‘logout’ attributes where we specify the corresponding teleport elements plus in the login we pass the username and password as parameters.
    Then there are the states of the communication fail-state, error-state, login-state and waiting-state and in each one we set the id of the state that we want to be enabled in that case.

    More about the j:auth you can find in Ruben Daniels’ blog where he deals with the same problem but from a different perspective.

    That’s it, now you have a log-in window with a few lines of code, that connects to the server does the authentication and informs the user of the process.

    Here is the final result again.

    Here you will find the source code; you can download it and run it yourself.

    1 Comment

     

    1. Bohebolo Apr 30 at 16:35pm

      Very good tutorial, and now i’m also playing with javeline.
      But when i run this tutorial on IE6, there was a gray shadow appear around the button. And also around the baloon pop up when ‘Invalid Username’ message appear.
      It worked smoothly on firefox.

      bug on javeline platform?

     

    Speak up

    Required but never displayed

This website requires a descent browser in order to work properly. Please download 'a browser' that is one.   To contact us, contact@observingthedos.com.