forcetk.ui is an extension for forcetk.js library (from Salesforce team). In a nutshell forcetk.js implements client side OAuth mechanizm to connect to force.com REST services. Where forcetk.ui provides a simple UI layer when building mobile apps with PhoneGap/Cordova and ChildBrowser plugin (available from here for different platforms).
For testing and debugging purposes forcetk.ui will also work in a desktop Safari browser, instead of ChildBrowser plugin it will use popup window.
To use this library you will need a Salesforce.com account. For development purposes you can signup for a free developer account here.
Another thing you will need is to enable remote access, this can be done by navigating to Setup > Develop > Remote Access and adding new Remote Access Application configuration of your Force.com account.
<!DOCTYPE html>
<html>
<head>
<title>forcetk.ui demo</title>
<script type="text/javascript" src="scripts/libs/jquery-1.8.1.js"></script>
<script type="text/javascript" src="scripts/libs/forcetk.js"></script>
<script type="text/javascript" src="scripts/libs/forcetk.ui.js"></script>
<script type="text/javascript">
function login() {
// Salesforce login URL
var loginURL = 'https://login.salesforce.com/',
// Consumer Key from Setup | Develop | Remote Access
consumerKey = 'CONSUMER_KEY',
// Callback URL from Setup | Develop | Remote Access
callbackURL = 'https://login.salesforce.com/services/oauth2/success',
// Instantiating forcetk ClientUI
ftkClientUI = new forcetk.ClientUI(loginURL, consumerKey, callbackURL,
function forceOAuthUI_successHandler(forcetkClient) { // successCallback
alert('OAuth success!');
},
function forceOAuthUI_errorHandler(error) { // errorCallback
alert('OAuth error!');
});
// Initiating login process
ftkClientUI.login();
}
</script>
</head>
<body>
<button id="btnLogin" onclick="login()">Login</button>
</body>
</html>