### Bootstrap Switch

Example of a Bootstrap Switch
Reference: http://www.bootstrap-switch.org
HTML Code Index.html (in Objects/www Folder)
<!DOCTYPE html>
<html>
<head>
<title>B4J WebApp Bootstrap Switch Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Hosted Library for jquery = ENSURE TO DECLARE PRIOR BOOTSTRAP-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootstrap Switch -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<!-- B4J WebSockets client library -->
<script src="/b4j_ws.js"></script>
</head>
<!-- Define the body as a bootstrap container -->
<body>
<div class="container">
Checkbox1:
</div>
<!-- Script Area -->
<script>
$( document ).ready(function() {
//Use console logging for tests - example FireFox with FireBug
console.log('Document ready started.');
//Define the Bootstrap Switch
$("[name='checkbox1']").bootstrapSwitch();
// Connect to the B4J Server
b4j_connect("/ws");
});
</script>
<script>
//Handle switch event
$('input[name="checkbox1"]').on('switchChange.bootstrapSwitch', function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
b4j_raiseEvent("checkbox1_event", {"id": this.id, "state": state});
});
</script>
</body>
</html>
B4J Project Code
'Non-UI application (console / server application)
Region Project Attributes
#CommandLineArgs:
#MergeLibraries: True
End Region
`Sub Process_Globals
Public srvr As Server 'The webserver provided by library jServer
End Sub`
`Sub AppStart (Args() As String)
srvr.Initialize("srvr")
srvr.Port = 51042
'Add the bootstrap switch handler - see bootstrapswitch.bas
srvr.AddWebSocket("/ws", "bootstrapswitch")
'Assign the serverport and start the server
srvr.Start
'Do no forget to start the messageloop
StartMessageLoop
End Sub`
B4J WebSocket Class Code
`Sub Class_Globals
Private ws As WebSocket
End Sub`
`Public Sub Initialize
End Sub`
`Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
ws = WebSocket1
Log("WebSocket_Connected")
End Sub`
`Private Sub WebSocket_Disconnected
End Sub`
'Handle the checkbox state changed event - see index.html
`Private Sub checkbox1_event(params As Map)
Log("checkbox1_event :: Start = " & params.Size)
For Each s As String In params.Values
Log(s)
Next
End Sub`

Changed: 2018-05-26 15:19, Category: WebApps jQuery Bootstrap, File: T6C281M2106.htm, ID: 2106