### jQuery UI HelloWorld

B4J WebApp to show how to display Hello World.
'Lookup www.index.html on how the html page is defined.
Project helloworld,b4j
Region Project Attributes
#CommandLineArgs:
#MergeLibraries: True
End Region
`Sub Process_Globals
Public srvr As Server
End Sub`
`Sub AppStart (Args() As String)
Log("AppStart :: Start")
'
'Init the webserver
srvr.Initialize("srvr")
'Add the websockets, set the port and start the server
'Note: The port must be unique for this webapp
'The class helloworld is defined in helloworld.bas
srvr.AddWebSocket("/ws", "helloworld")
srvr.Port = 51042
srvr.Start
'
StartMessageLoop
'
Log("AppStart :: End")
End Sub`
Class helloworld.bas
'
`Sub Class_Globals
Private ws As WebSocket
Private btnabout As JQueryElement 'Alert to show info about this app
Private lblhelloworld As JQueryElement 'Label showing Hello World
End Sub`
`Public Sub Initialize
End Sub`
' The user opens via browser :51042. The html file index.html is displayed.
`Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
Log("WebSocket_Connected :: Start")
ws = WebSocket1
lblhelloworld.setHtml("

### Hello World

" & DateTime.Date(DateTime.Now) & " " & DateTime.Time(DateTime.Now))
Log("WebSocket_Connected :: End")
End Sub

`
'Not used
`Private Sub WebSocket_Disconnected
End Sub`
'Handle click on the button with id btnAddNewButton - Note in the index.html all id's are in lowercase
`Sub btnAbout_click(params As Map)
Log("btnabout_click :: Start = " & params.Size)
'In index.html a div with id btnabout is defined. This is used to display the about info.
ws.Alert("B4J HowTo Hello World" & CRLF & "by Robert W.B. Linn, Pinneberg, Germany" & CRLF & "www.mysite")
Log("btnnabout_click :: End")
End Sub`
Index.html (project/objects/www Folder)
<!DOCTYPE html>
<html>
<head>
<title>WebApp Hello World</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- Google Hosted Library for jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- B4J WebSockets client library -->
<script src="/b4j_ws.js"></script>
</head>
<body>
<H1>WebApp Hello World Example</H1>
<HR>
<div id="lblhelloworld"></div>
<HR>
<button id="btnabout" title="About">About</button>
<!-- Script Area -->
<script>
$( document ).ready(function() {
// Connect to the B4Jserver = the handler dynamicbutton.bas is called
b4j_connect("/ws");
});
</script>
</body>
</html>
Note on B4J WebSockets client library
Ensure b4j_ws.js is stored in the objects/www folder as well. This file is provide by B4J.
Here version 0.9.
//B4J WebSockets client library v0.9
/*jslint browser: true*/
/*global $, jQuery, WebSocket*/
/*jshint curly: false */
"use strict";
var b4j_ws;
var b4j_closeMessage = false;
//only called as a result of a server request that is waiting for result.
//this method should not be called in any other case.
function b4j_sendData(data) {
b4j_ws.send(JSON.stringify({type: "data", data: data}));
}
function b4j_raiseEvent(eventName, parameters) {
try {
if (b4j_ws.readyState !== 1) {
if (b4j_closeMessage === false) {
window.console.error("connection is closed.");
window.alert("Connection is closed. Please refresh the page to reconnect.");
b4j_closeMessage = true;
}
} else {
b4j_ws.send(JSON.stringify({type: "event", event: eventName, params: parameters}));
}
} catch (e) {
window.console.error(e);
}
}
function b4j_addEvent(selector, event, eventName, preventDefault) {
var obj = $(selector);
if (obj.length > 0) {
obj.on(event, function (e) {
if (preventDefault) {
e.preventDefault();
e.stopPropagation();
}
b4j_raiseEvent(eventName, {which: e.which, target: e.target.id, pageX: e.pageX, pageY: e.pageY, metaKey: e.metaKey});
});
}
}
function b4j_addAutomaticEvents(data) {
$.each(data, function (index, value) {
b4j_addEvent("#" + value.id, value.event, value.id + "_" + value.event, true);
});
}
function b4j_runFunction(func, params) {
return window[func].apply(null, params);
}
function b4j_eval(params, script) {
var f = new Function(script);
return f.apply(null, params);
}
function b4j_connect(absolutePath) {
if (typeof WebSocket === 'undefined') {
window.alert("WebSockets are not supported by your browser.");
return;
}
var l = window.location, fullpath;
fullpath = ((l.protocol === "https:") ? "wss://" : "ws://") + l.hostname + ":" + l.port + absolutePath;
b4j_ws = new WebSocket(fullpath);
b4j_ws.onmessage = function (event) {
var ed = JSON.parse(event.data);
if (ed.etype === "runmethod") {
$(ed.id)[ed.method].apply($(ed.id), ed.params);
} else if (ed.etype === "runmethodWithResult") {
b4j_sendData($(ed.id)[ed.method].apply($(ed.id), ed.params));
} else if (ed.etype === "setAutomaticEvents") {
b4j_addAutomaticEvents(ed.data);
} else if (ed.etype === "runFunction") {
b4j_runFunction(ed.prop, ed.value);
} else if (ed.etype === "runFunctionWithResult") {
b4j_sendData(b4j_runFunction(ed.prop, ed.value));
} else if (ed.etype === "eval") {
b4j_eval(ed.value, ed.prop);
} else if (ed.etype === "evalWithResult") {
b4j_sendData(b4j_eval(ed.value, ed.prop));
} else if (ed.etype === "alert") {
window.alert(ed.prop);
}
};
}

Changed: 2018-06-07 09:30, Category: WebApps jQuery, File: T6C280M2103.htm, ID: 2103