B4J Tutorial [WebApp] Example Team Manager using jQuery Mobile, WebSockets & SQLite

This OpenSource WebApp is based upon a request to manage team events from Android, iPhone, Windows and Linux (Raspberry) devices.
The solution is a B4J WebApp, using jQuery Mobile (jQM), JavaScript, WebSockets and an SQLite database, accesible via browser.
Extensive use of jQM dialogs instead of seperate HTML pages is made. All the jQM dialogs are defined in index.html.
The database teem.db contains the two tables Events and Members.
Read teem.b4j, teem.bas and www/index.html for detailed information.

teemoverview.png


How to get started?
Load teem.b4j and then run OR start the jar file from the Objects folder java -jar teem.jar.
Access the team event list by opening a webbrowser and enter localhost:51042.
To access from another computer in the network, use its http://ipaddress:51042 (like http://192.168.0.10:51042).

How the Team Manager works?
After starting the webserver, the database is initialized. If the database does not exists, it will be created and stored in the webapp folder.
When the webapp is accessed via webbrowser, the file index.html is loaded. Index.html opens the websocket defined in teem.bas.
The teem.bas handler selects the records from the database teem.db (in the objects folder), table Events and updates the events table (using JavaScript).

Buttons
  • Login: Login as Manager or Team Member using username as defined in Table Members. Note: Field Password is not used.
  • About: Information about this WebApp TeeM.
  • Events: Manage Events (add, update, delete).
  • Members: Manage Members (add, update, delete).
Download the Team Manager: http://www.rwblinn.de/b4j/b4jhowto/examples/b4jhowtowebappmobile.zip

Additional Notes
  • When installing on a webserver, ensure to copy the www folder content. This folder contains all html related files including jQM --- do not forget to copy also after making updates!,
  • Clicking on Date or Time, a Date/Time picker is shown based upon DateBox, a Date and Time Picker plugin for jQM (http://dev.jtsage.com/jQM-DateBox/),
  • Logging is done extensively using flag CAPPLOG (teem.b4j). Set to false to turn logging off,
  • B4J v2.2 or higher is required (strong use of CreateMap),
  • To learn more, read the source files. These are well commented,
Please note, that this is a first version - field tests are running on a Raspberry Pi server.
Many thanks for your interest. Any improvements or further ideas are welcomed.

EDIT 20140527: Some bugs fixed.
 
Last edited:
Click to expand...
B

billzhan

Active Member
Licensed User
Longtime User
Rob,

Great work.

I just have a quick look, and may find some bugs:

When add an member:
Error thrown : java.sql.SQLException: database is locked.
It's caused by pass null to ID(int), and can be fixed by:
B4X: 
    Dim l As List
    l.Initialize
    Dim id As String
    id = Params.get("memberid")  
    If Params.get("action") = "add" Then
        Dim m As Map = CreateMap("Username": Params.get("username"), "Fullname": Params.get("fullname"), "EMail": Params.get("email"), "Manager": Params.get("manager"), "Password": Params.get("password"))
        l.Add(m)
    End If
    If Params.get("action") = "upd" Then
        Dim m As Map = CreateMap("ID": id, "Username": Params.get("username"), "Fullname": Params.get("fullname"), "EMail": Params.get("email"), "Manager": Params.get("manager"), "Password": Params.get("password"))
    End If



index.html:
1. jquery should be called before $ is used
2. Del member button doesn't work . Line 294 btnmemberseventmanagementdel should be btnmembersmanagementdel.
B4X: 
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>  
    <script type="text/javascript">
        $(document).bind("mobileinit", function(){
      $.mobile.loadingMessage = false;
        });
    </script>


line 294:
<a data-role="button" data-mini="true" data-inline="true" id="btnmembersmanagementdel">Delete</a>



Cheers,
bz
 
rwblinn

rwblinn

Well-Known Member
Licensed User
Longtime User
Hi billzhan,

Thanks a lot for feedback. Have made the fixes accordingly. See Post #1.

Appreciated,
Rob
 
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
rwblinn

rwblinn

Well-Known Member
Licensed User
Longtime User
Hi Erel,

thanks for the recommendation= Appreciated. Will include in the upcoming update.
 
Roberto P.

Roberto P.

Well-Known Member
Licensed User
Longtime User
Hello Rob,
thanks for this great example. It would be great if it was responsive ...
good job
Roberto
 
DonManfred

DonManfred

Expert
Licensed User
Longtime User
You must log in or register to reply here.
Top