B4J Tutorial [Server] Guess My Number example

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

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:

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):

$("#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:

Sub Handle(req As ServletRequest, resp As ServletResponse)
   Main.myNumber = Rnd(1, 101)
End Sub

$("#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.

 

[Erel]

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

Updated code with support for multiple users:

Sub Handle(req As ServletRequest, resp As ServletResponse)
   If req.GetSession.HasAttribute("myNumber") = False Then
     req.GetSession.SetAttribute("myNumber", Rnd(0, 101)) '<-- 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

'Reset handler
Sub Handle(req As ServletRequest, resp As ServletResponse)
   req.GetSession.RemoteAttribute("myNumber")
End Sub

 

[masmukti]

Hi Erel,
I was tried this example, where you save index.html file on the source?

 

[Erel]

The file is located under objects\www.