Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

Sample Code - jQuery Mobile Application
‎04-21-2011 04:57 PM

What is it?


This sample demonstrates how you can use the jQuery™ Mobile JavaScript® framework to produce a BlackBerry® application using the BlackBerry® WebWorks™ SDK for either BlackBerry Smartphones or BlackBerry® Tablet OS.





How it works?


This sample uses JavaScript and CSS resources downloaded from the live jQuery Mobile Web site.  To accomplish this, the following references to  external files are included from the <head> element of the index.html file. If you wish to make your application fully offline-enabled, then you can download and package these resources directly into your application.


Example: Referencing jQuery Mobile framework


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>


Using jQuery Mobile, logical pages in an application are defined as <div> elements, having a data-role="page" attribute.  From there, addtional attributes are used to provide design and functionality to the application:


For complete information about using the various elements, properties and functionality of this framework, see the jQuery Mobile Docs and Demos page.


 Example: Defining a page using jQuery Mobile


<div data-role="page">

<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->

<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->


This sample also uses the Application JavaScript API (PlayBook API reference guide; Smartphone API reference guide) to dynamically add content, defined in the config.xml document, to an 'About' page at runtime.


Example: Using jQuery and WebWorks APIs to add content to a page:


$('#aboutname').html("About " + blackberry.app.name + " v" + blackberry.app.version);


More Info

The entire source of this sample application is attached at the end of this article as a ZIP file containing the application resources.  Download jQueryMobile.zip and build it using the BlackBerry WebWorks SDK Packager.  Deploy and run it on a supported BlackBerry device to observe how various jQuery Mobile features and capabilities can be used to implement BlackBerry application functionality.
Like 2