B4J Tutorial [WebApp] Hello World Web App

Discussion in 'B4J Tutorials' started by Erel, Apr 10, 2014.

  1. Erel

    Erel Administrator Staff Member Licensed User

    In this tutorial we will develop the following web app:

    [​IMG]

    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.
    Code:
    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>):
    Code:
    <!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:
    Code:
    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.
     

    Attached Files:

    Last edited: Apr 17, 2014
    jimmyF, MarkusR, Kiffi and 4 others like this.
  2. myriaddev

    myriaddev Active Member Licensed User

    Thank You Erel !
     
  3. wl

    wl Well-Known Member Licensed 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
     
  4. Erel

    Erel Administrator Staff Member Licensed User

    Yes.

    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.
     
  5. le_toubib

    le_toubib Active Member Licensed 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
     
  6. billzhan

    billzhan Active Member Licensed 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

    Code:
    ''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&
     
  7. le_toubib

    le_toubib Active Member Licensed 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 :)
     
  8. billzhan

    billzhan Active Member Licensed 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.
     
    le_toubib likes this.
  9. billzhan

    billzhan Active Member Licensed User

  10. le_toubib

    le_toubib Active Member Licensed User

  11. le_toubib

    le_toubib Active Member Licensed User

    Pablo Torres likes this.
  12. billzhan

    billzhan Active Member Licensed 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>
     

    Attached Files:

    • 1.PNG
      1.PNG
      File size:
      15.5 KB
      Views:
      411
    le_toubib likes this.
  13. cubetennis

    cubetennis Member Licensed User

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

    Attached Files:

  14. Erel

    Erel Administrator Staff Member Licensed User

    Are you running the example as is?

    This is the correct request:
    [​IMG]

    Does your browser support web sockets?
     
  15. cubetennis

    cubetennis Member Licensed User

    Thank you and happy new year Erel
    I'll check it
     
  16. coslad

    coslad Well-Known Member Licensed 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
     
  17. Erel

    Erel Administrator Staff Member Licensed User

    jQuery works with the standard html controls. jQueryUI is an extension library that adds more controls.
     
  18. CanguroCode

    CanguroCode Active Member Licensed 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!

    [​IMG]
     

    Attached Files:

  19. Erel

    Erel Administrator Staff Member Licensed User

    1. You don't need to modify b4j_ws.

    This is what I see when I run your app:
    [​IMG]
     
  20. CanguroCode

    CanguroCode Active Member Licensed 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.
     
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