B4J Tutorial [WebApp] Hello World Web App

In this tutorial we will develop the following web app:

SS-2014-04-10_15.45.57.png


There are three components to this solution:

Main module: configures the server and the handlers and web sockets.

In this case we have a single WebSocket. It is mapped to a url which we later need to set in the html file.
The WebSocket class name is HelloWorld.
B4X:
Sub Process_Globals
   Public srvr As Server
End Sub

Sub AppStart (Args() As String)
   srvr.Initialize("srvr")
   srvr.AddWebSocket("/ws", "HelloWorld")
   srvr.Port = 51042
   srvr.Start
   StartMessageLoop
End Sub

WebSocket class: These classes are similar to Basic4android Activities. An instance of this class will be created each time that a connection is made (to the WebSocket url). The connection can stay alive for many hours. It will break when the user navigates to a different page or closes the browser.

Each instance runs in a different thread. This means that many users can be connected at the same time.
Note that in Debug mode a single thread is used to handle all instances.

Client user interface: The user interface is written in Html / CSS. You should add a reference to the small b4j_ws.js JavaScript file. This script manages the communication between the server and the client.
You are free to use any html elements you like. Including third party libraries.
There should also be a reference to jQuery library. jQuery is a very popular JavaScript library that makes it simpler to access and manipulate the document elements.

In our case we have two fields (text1 and text2) a button and a result paragraph (<p>):
B4X:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web App Hello World!</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css" />
  <script src="/b4j_ws.js"></script>
</head>
<body>
  <h1>Web App Hello World!</h1>
  <p id="plog"></p>
  <div id="maindiv">
  First Number: <input id="text1" type="text"></input><br/>
  Second Number: <input id="text2" type="text"></input><br/>
  <button id="btncalc">Calculate</button><br/>
  <p id="result"></p>
  </div>
   <script>
  //connect to the web socket when the page is ready.
  $( document ).ready(function() {
  b4j_connect("/ws");
  });
   </script>
</body>

All the elements that you need to interact with from the server code must have lower case ids.

The WebSocket code:
B4X:
Sub Class_Globals
   Private ws As WebSocket
   Private text1, text2, btnCalc, Result As JQueryElement
End Sub

Public Sub Initialize
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
   Log("Connected")
   ws = WebSocket1
End Sub

Sub btnCalc_Click (Params As Map)
   Dim ft2 As Future = text2.GetVal
   Dim ft1 As Future = text1.GetVal
   If IsNumber(ft1.Value) AND IsNumber(ft2.Value) Then
     Result.SetText("The result is: " & (ft1.Value + ft2.Value))
   Else
     Result.SetText("Invalid numbers")
   End If
End Sub

There are 4 JQueryElement global variables. These variables will be mapped to the html elements automatically. Events such as btnCalc_Click event will also be mapped automatically.
All we need to do is write the code in the event.

JQueryElement provides access to all of the jQuery elements methods.
http://api.jquery.com/

The WebSocket itself (ws in this case) allows you to call any JavaScript function and also to create JavaScript code at runtime and run it (eval / new function).

In this example we want to add the two values. We get the user input with GetVal method and then set the text of the 'result' element.

Network latency

When you test the web app from the IDE then the time it takes for a message to get from the server to the client is very short. This is also true if the server and the client are located in the same local network.
However this is not the case with internet web apps. The server can be very far from the clients. This means that we need to make sure that the communication code is optimized.
B4J web app framework will help you to write optimize code.

WebSocket and JQueryElement methods that return values do not return the actual value directly. Instead they return a Future object and immediately continue to the next statement.
When you call Future.Value the current thread will wait until the value is available (if it is not already available).
The correct design is quite simple. When the event starts you need to get all the future values that later are needed.
Only then you should call Future.Value. This allows you to get all the values in a single round trip (Server -> Client -> Server).

Tip: Server.DebugNetworkLatency property allows you to emulate the network latency. During debug deployments an artificial latency is added to server -> client -> server round trips. The default value is 100 (milliseconds).

Tools
  • You should use a browser development tool such as Firefox FireBug or Chrome development tool during development. Once you learn how to work with these tools your productivity will be much higher.
  • Adobe Brackets is a free tool that helps with writing the html / css code: http://brackets.io/
    You can of course use other similar tools or Notepad++
It is recommended to learn the basics of jQuery: http://learn.jquery.com/
jQuery is quite simple and will make it easier to integrate all kinds of jQuery plugins like done in this example:
http://basic4ppc.com:51042/dbutils/index.html

The project is attached. The static files are located under Objects\www.
 

Attachments

  • WebAppHelloWorld.zip
    3.2 KB · Views: 3,917
Last edited:

wl

Well-Known Member
Licensed User
Longtime User
Erel,

If I understand correctly the /b4j_ws.js script
will make sure the click of btncalc will have Sub btnCalc_Click (Params AsMap) called on the server ?

If so: you state the ID's of the html controls should all be in lowercase (btncalc), but the name of the method on the server contains an upper case character (btnCalc_Click) ?

Thanks for clarifying
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
will make sure the click of btncalc will have Sub btnCalc_Click (Params AsMap) called on the server ?
Yes.

you state the ID's of the html controls should all be in lowercase (btncalc), but the name of the method on the server contains an upper case character (btnCalc_Click) ?
That is correct. Only the html ids needs to be lowercased. The reason for that is that B4A compiler will lower all the subs names, so the subs case is not important.
 

le_toubib

Active Member
Licensed User
Longtime User
i m sorry ,i m very new to webapps and b4j and i cant find tutorials about the deployment of the webapps/jar files online ,
also if i run the file :
Objects/www/index.html
in my browser , it will show the inputboxes normally but the calculate button will not work,
same if i uploaded the folder www to my website :
www.blablabla.com/www/index.html
thanks
 

billzhan

Active Member
Licensed User
Longtime User
You can set root path of the web by srvr.StaticFilesFolder, default path is "/Objects/www" folder (yourwebapp.jar path is "/Objects/").

An example for debian/Ubuntu

B4X:
''jre path
"/home/jre/bin/java"

'domain:www.blablabla.com
'web root path  /home/Objects/www/  -> www.blablabla.com
'server jar and static path :
/home/Objects/
/home/Objects/yourwebapp.jar  
/home/Objects/www/index.html     ( URI: www.blablabla.com/index.html)
/home/Objects/www/jquery.js     ( URI: www.blablabla.com/jquery.js )
/home/Objects/www/sub1/index.html  ( URI: www.blablabla.com/sub1/index.html )
/home/Objects/www/sub1/page1.html  ( URI: www.blablabla.com/sub1/page1.html )

/home/Objects/www/sub2/index.html  ( URI: www.blablabla.com/sub2/index.html )
/home/Objects/www/sub2/page1.html   ( URI: www.blablabla.com/sub2/page1.html )
/home/Objects/www/a/b.img)          ( URI: www.blablabla.com/a/b.img )

'run the server from putty
'or use nohup command to keep server running at background .logs direct to log.txt
cd /home/Objects/
"/home/jre/bin/java" -jar  yourwebapp.jar
nohup "/home/jre/bin/java" -jar yourwebapp.jar >>log.txt&
 

le_toubib

Active Member
Licensed User
Longtime User
thank u so much for replying but i dont know anything about ubunto, i m running on a win8 ,
also i have no troubles running jar file on my pc using java -jar , or running the app from IDE+browser
i m looking to reach this outcome :
to run the webapp online from the browser using a link like this :
www.blablabla.com/xxxxxxxxxxxxxxxxx/index.html
how to acheive this outcome
thank you for your patience :)
 

billzhan

Active Member
Licensed User
Longtime User
For win7, you just need to extract the demo to a folder. Try to create a sub folder "xxxxxxxxxxxxxxxxx" in /www ,copy your index.html to it (/Objects/www/xxxxxxxxxxxxxxxxx/index.html).Other related files (js/css/img) should be copied to correct folders.
 

billzhan

Active Member
Licensed User
Longtime User
browser: use latest firefox(with firebug) or chrome.

I visit www.eltabib.com/hw/index.html with chrome, press F12 to enter dev mode,click console tab.
Error: b4j_ws.js is not loaded.
If b4j_ws.js path is /www/hw/b4j_ws.js, the line in index.html should be changed to <script src="/hw/b4j_ws.js"></script>
 

Attachments

  • 1.PNG
    1.PNG
    15.5 KB · Views: 996

cubetennis

Member
Licensed User
Longtime User
after start the index.html of this project I get an websocket error.
what is wrong ?
thank you for help
 

Attachments

  • Unbenannt.PNG
    Unbenannt.PNG
    9.6 KB · Views: 871

coslad

Well-Known Member
Licensed User
Longtime User
Hi Erel , you talk about the button and text field as jquery elements , but it seems they are simple html elements, I don't see any jqueryui reference in the html code , can I use any simple html elements or I need to use jquery ui ? Thanks
 

CanguroCode

Active Member
Licensed User
Longtime User
I am reviewing the example I have the following questions:

1. With respect to b4j_ws file. Is there any modification to do if I want to add more fields to the form? Can be used for any webapp?

2. I try to make from scratch the example copying code and making some changes but I can not load the index.html. I get the screen below. What am i doing wrong? attach the zip of the project.

Thanks in advance!

2015-04-14_2014.png
 

Attachments

  • WebApp.zip
    3 KB · Views: 896

CanguroCode

Active Member
Licensed User
Longtime User
I found the problem. I have my projects in a dropbox folder, for some reason this cause a incompatibility (i guess) with the navigator and the server. I changed my project to other folder and solved problem.

Thanks a lot.
 
Top