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.

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.

 

[billzhan]

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:

    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.

    <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]

Hi billzhan,

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

Appreciated,
Rob

 

[Erel]

Amazing!!! Thank you for sharing this.

I recommend you to use WebUtils.ReplaceMap to generate the strings. Your current code doesn't escape html strings. This makes it vulnerable to XSS hacks (and other problems).
http://www.b4x.com/android/forum/threads/webapp-mini-template-engine.40182/#content

Make sure to switch to the latest WebUtils module.

 

[rwblinn]

Hi Erel,

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

 

[Roberto P.]

Hello Rob,
thanks for this great example. It would be great if it was responsive ...
good job
Roberto

 

[Mashiane]

Hi. is this project still available somewhere? Thanks

 

[DonManfred]

Hi. is this project still available somewhere?

GitHub - rwbl/b4j-howtos: Howtos and sample projects for B4J (RAD development tool for cross platform desktop, server and IoT solutions).

Howtos and sample projects for B4J (RAD development tool for cross platform desktop, server and IoT solutions). - rwbl/b4j-howtos

github.com