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

Discussion in 'B4J Tutorials' started by rwblinn, May 26, 2014.

  1. rwblinn

    rwblinn Well-Known Member Licensed User

    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.

    [​IMG]

    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: May 27, 2014
  2. billzhan

    billzhan Active Member Licensed 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:
    Code:
    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.
    Code:
    <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
     
  3. rwblinn

    rwblinn Well-Known Member Licensed User

    Hi billzhan,

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

    Appreciated,
    Rob
     
  4. Erel

    Erel Administrator Staff Member Licensed User

  5. rwblinn

    rwblinn Well-Known Member Licensed User

    Hi Erel,

    thanks for the recommendation= Appreciated. Will include in the upcoming update.
     
    luke2012 likes this.
  6. Roberto P.

    Roberto P. Well-Known Member Licensed User

    Hello Rob,
    thanks for this great example. It would be great if it was responsive ...
    good job
    Roberto
     
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