### HelloWorld (WebApp)

Example simple HelloWorld UI WebApp.
This app runs on the Raspberry Pi as a Webserver.
Start from command line: java -jar helloworld.jar
Access from Webbrowser: :51043
B4J Project File (B4J)
#Region Project Attributes
#CommandLineArgs:
#MergeLibraries: true
#End Region
`Sub Process_Globals
Public CAPPTITLE As String = "Hello World Web App"
Public CAPPDESCRIPTION As String = "B4J Example jQuery Mobile"
Public CAPPVERSION As String = "v20140825"
Public CAPPCOPYRIGHT As String = "(c) 2014 Robert W.B. Linn, Pinneberg, Germany"
'
Public srvr As Server
End Sub`
`Sub AppStart (Args() As String)
srvr.Initialize("srvr")
srvr.AddWebSocket("/ws", "helloworld")
srvr.Port = 51043
srvr.Start
StartMessageLoop
End Sub`
B4J Class Module
`Sub Class_Globals
Private ws As WebSocket
' Selector Labels
Private lblapptitle As JQueryElement ' Title shown in the table header
Private lblappcontent As JQueryElement ' Placeholder for showing the content depending on the user
Private lblappfooter As JQueryElement ' Footer shown in the table footer
Private lblabout As JQueryElement ' Abouttext shown in the jQM About Dialog
' Dialogs
Private dlgmessage As JQueryElement
' jQM Message Dialog (see index.html)
Private messageheader As JQueryElement
Private messagecontent As JQueryElement
End Sub`
`Public Sub Initialize
End Sub`
' Websockets gets connected by the user
`Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
DateTime.DateFormat = "dd.MM.yyyy"
ws = WebSocket1
lblapptitle.SetText(Main.CAPPTITLE)
lblappcontent.SetHtml("Welcome!")
lblappfooter.SetText("Today is " & DateTime.Date(DateTime.Now))
lblabout.SetText(Main.CAPPTITLE & " " & Main.CAPPDESCRIPTION & " " & Main.CAPPVERSION & " " & Main.CAPPCOPYRIGHT)
End Sub`
`Private Sub WebSocket_Disconnected
End Sub`
' Show Message using jquery mobile dialog - see index.html
' Parameter Header as HTML string
' Parameter Message as HTML String
`Sub showMessage(hdr As String, msg As String)
messageheader.SetHtml(hdr)
messagecontent.SetHtml(msg)
ws.RunFunction("OpenDialog", Array As String(dlgmessage.Id))
End Sub`
' Show about using showMessage dialog
`Sub about_event(Params As Map)
' Option 1 using Alert method from the websocket
' ws.Alert(Main.CAPPTITLE & " " & Main.CAPPDESCRIPTION & " " & Main.CAPPVERSION & " " & Main.CAPPCOPYRIGHT & " " & Main.CINTERNET)
'
' Option 2 using sub showMessage which is build upon jQuery dialog - see index.html
showMessage("About...", "

## " & Main.CAPPTITLE & " " & Main.CAPPVERSION & "

" & Main.CAPPDESCRIPTION & "
" & Main.CAPPCOPYRIGHT)
End Sub`
Index HTML file
Stored in www folder (do NOT forget to copy to the RPi inlcuding the b4j_ws.js!)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Various Includes. IMPORTANT: The order of the includes is important = DO NOT CHANGE -->
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<!-- JQM links from internet -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<!-- B4J WebSockets client library -->
<script src="/b4j_ws.js"></script>
<!-- Title and Style -->
<title>WebAppMobile Hello World</title>
</head>
<div data-role="dialog" id="dlgmessage" data-title="Information" data-add-back-btn=false>
<div data-role=header>
<H2 id="messageheader"></H2>
</div>
<div data-role=content>
<span id="messagecontent"></span>
</div>
<div data-role="controlgroup">
<a data-role="button" data-mini="true" id="btnmessageok" class="ui-btn ui-btn-a">OK</a>
</div>
<div data-role="footer">
</div>
</div>
<script>
//
$( document ).ready(function() {
//
// Dialog Message
// Button OK closes the dialog
// A message dialog is called by the sub showMessage(msg) defined in bas file.
$('#btnmessageok').click(function() {
$( "#dlgmessage" ).dialog( "close" )
});
//
// Dialog About
// About Button is bind to a b4j event. The about event calls the sub showMessage as defined in the bas file.
$("#btnabout").bind( "click", function(event, ui) {
b4j_raiseEvent("about_event", {});
});
// B4J
// Connect to the B4Jserver and fetch the data = the handler the bas file is called
b4j_connect("/ws");
});
// Load Table Data after initialisation of the table
// This function is defined in the bas file.
function LoadTableData() {
b4j_raiseEvent("loadtabledata_event", {});
};
// Open dialog.
// This function can be used to genericly openup a popup dialog window
// Parameter element_id: ID of the popup dialog
function OpenDialog(element_id) {
$.mobile.changePage(element_id, { transition: "pop", role: "dialog", reverse: false } );
};
</script>
</body>

Changed: 2018-06-07 09:20, Category: Raspberry Pi Sample Projects, File: T6C238M1741.htm, ID: 1741