B4J Tutorial [Server] Guess My Number example

Discussion in 'B4J Tutorials' started by Erel, Feb 4, 2014.

  1. Erel

    Erel Administrator Staff Member Licensed User

    The purpose of this example is to demonstrate how you can interact with the server through ajax requests.

    [​IMG]

    The server chooses a number and the user needs to guess the number.
    Whenever the user presses on the Guess button a request is sent to the Guess handler:
    Code:
    Sub Handle(req As ServletRequest, resp As ServletResponse)
       
    Dim n As String = req.GetParameter("number")
       
    If IsNumber(n) = False Then
         resp.Write(
    "Please enter a valid number.")
       
    Else
         
    If n > Main.myNumber Then
           resp.Write(
    "My number is smaller.")
         
    Else If n < Main.myNumber Then
           resp.Write(
    "My number is larger.")
         
    Else
           resp.Write(
    "Well done!!!")
         
    End If
       
    End If
    End Sub
    The request is sent with this JavaScript / JQuery code (the code is in index.html file):
    Code:
    $("#btnGuess").click(function(){
           $.post(
    "guess""number=" + txtNumber.value,
             function(data) {
               $(
    "#result").html(data);
               $(
    "#txtNumber").focus();
               $(
    "#txtNumber").select();
             
    }
          
           );
         });
    The $.post method sends a post request to 'guess' with the number parameter. The callback function is raised after the server response. 'data' holds the server response.

    There is another button which tells the server to reset the number:
    Code:
    Sub Handle(req As ServletRequest, resp As ServletResponse)
       Main.myNumber = 
    Rnd(1101)
    End Sub
    Code:
    $("#btnReset").click(function(){
           $.post(
    "reset");
         
    });
    The project is attached.
    As you can see in the above screenshot I'm using FireBug to monitor the requests and to debug the JavaScript code. I highly recommend you to work with such tool.

    Note that this example is not suited for multiple users. All users will need to guess the same number and if a user presses on the reset button then the number will be changed for all users. A "user session" is missing here. The session can be managed with cookies.
     

    Attached Files:

    carlos7000 and ellpopeb4a like this.
  2. Erel

    Erel Administrator Staff Member Licensed User

    This example is now available online: http://basic4ppc.com:51042/guessmynumber/index.html

    Updated code with support for multiple users:
    Code:
    Sub Handle(req As ServletRequest, resp As ServletResponse)
       
    If req.GetSession.HasAttribute("myNumber") = False Then
         req.GetSession.SetAttribute(
    "myNumber"Rnd(0101)) '<-- store the number in the user session
       End If
       
    Dim myNumber As Int = req.GetSession.GetAttribute("myNumber")
       
    Dim n As String = req.GetParameter("number")
       
    If IsNumber(n) = False Then
         resp.Write(
    "Please enter a valid number.")
       
    Else
         
    If n > myNumber Then
           resp.Write(
    "My number is smaller.")
         
    Else If n < myNumber Then
           resp.Write(
    "My number is larger.")
         
    Else
           resp.Write(
    "Well done!!!")
         
    End If
       
    End If
    End Sub
    Code:
    'Reset handler
    Sub Handle(req As ServletRequest, resp As ServletResponse)
       req.GetSession.RemoteAttribute(
    "myNumber")
    End Sub
     
  3. masmukti

    masmukti Member Licensed User

    Hi Erel,
    I was tried this example, where you save index.html file on the source?
     
    Last edited: Dec 9, 2014
  4. Erel

    Erel Administrator Staff Member Licensed User

    The file is located under objects\www.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice