### jQuery Mobile Button

This is an example of creating and using a jQuery Mobile (jQM) Button which calls a B4J Event.
In addition, some hints using buttons.
To Note:
Beside calling a B4J Event, it is also possible to use the btnButton_Click(Params As Map)
Additional information JQM
jQM Home: http://jquerymobile.com
jQM Button Icons: http://demos.jquerymobile.com/1.1.2/docs/buttons/buttons-icons.html
Define in the HTML file (like index.html)
Include the jQM files
<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="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
HTML Body section
<body>
...
<div data-role="page" id="home">
<!-- HEADER -->
<div data-role=header>
<!-- Button: About dialog. A B4J Event is called by binding the button click (see under script) -->
<a data-role="button" id="btnabout" data-ajax="false" data-mini="true" data-inline="true" data-theme="b" data-transition="pop" data-icon="info" title="Information about this app">About!</a>
...
HTML Script section
<Script>
//
$( document ).ready(function() {
...
// Button About which raises b4j event when clicked.
// The about event calls the sub showMessage (see below)
$("#btnabout").bind( "click", function(event, ui) {
b4j_raiseEvent("about_event", {});
});
...
// Connect to the B4J server
b4j_connect("/ws");
});
// 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>
Define in the B4J Module Class
The about event calls the sub showMessage, which opens a jQM Dialog.
Globals
' The message header and content.
' These will populate the selectors messageheader and messagecontent in the HTML file (see previous)
`Sub Class_Globals
...
Private messageheader As JQueryElement
Private messagecontent As JQueryElement
...
End Sub`
Message Dialog
' Purpose: Show Message using jquery mobile dialog
' Parameter Header as HTML string
' Parameter Message as HTML String
`Sub showMessage(hdr As String, msg As String)
' Set the message selectors
messageheader.SetHtml(hdr)
messagecontent.SetHtml(msg)
' Show the dialog
ws.RunFunction("OpenDialog", Array As String(dlgmessage.Id))
End Sub`
' Purpose: Show About Dialog
' Parameter as Map - not used
' Note: Params can be defined and then used to display the message.
' To do so, add the parameters to b4j_raiseEvent("about_event", {}); (see previous)
`Sub about_event(Params As Map)
' Option 1 showing the message using the WebSocket Alert method
' ws.Alert("Hello World")
'
' Option 2 showing the message using sub showMessage which is build upon a jQM dialog
' As previous mentioned = defined in index.html
showMessage("About...", "

# Hello World

")
End Sub`
Hints
Set a button as active
Use the class class="ui-btn-active"
<button id="btnsettings" data-icon="gear" class="ui-btn-active" title="Settings">Settings</button>

Changed: , Category: WebApps jQuery Mobile, File: T6C282M2108.htm, ID: 2108